/* ==========================================================================
   Why Neil Kelly — Testimonials + Trust Pillars
   ========================================================================== */

/* ---- Section ---- */
.nk-why {
	padding-top: var(--wp--preset--spacing--24);
	padding-bottom: var(--wp--preset--spacing--16);
	margin-top: 0;
	margin-bottom: 0;
	background-color: var(--wp--preset--color--surface-section);
}

/* ---- Container ---- */
.nk-why__container {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--gutter);
	box-sizing: border-box;
}

/* ---- Top area ---- */
.nk-why__grid {
	display: grid;
	grid-template-columns: var(--wp--custom--components--why-nk--video-width) 1fr;
	gap: var(--wp--preset--spacing--16);
	align-items: start;
}

/* ---- Video placeholder ---- */
.nk-why__video-placeholder {
	position: relative;
	height: var(--wp--custom--components--why-nk--video-height);
	background-color: var(--wp--preset--color--neutral-200);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	box-shadow: var(--wp--custom--shadow--elev-2);
}

.nk-why__video-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Dark overlay on image */
.nk-why__video-placeholder::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: color-mix(in srgb, var(--wp--preset--color--brand-black) 20%, transparent);
	z-index: 1;
	pointer-events: none;
}

/* Bottom gradient for quote legibility */
.nk-why__video-placeholder::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: var(--wp--custom--components--why-nk--gradient-height);
	background: linear-gradient(to top, color-mix(in srgb, var(--wp--preset--color--brand-black) 80%, transparent), transparent);
	z-index: 2;
	pointer-events: none;
}

/* ---- Play button ---- */
.nk-why__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: var(--wp--custom--components--why-nk--play-btn-size);
	height: var(--wp--custom--components--why-nk--play-btn-size);
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	z-index: 3;
	filter: drop-shadow(0 var(--wp--preset--spacing--1) var(--wp--preset--spacing--2) color-mix(in srgb, var(--wp--preset--color--brand-black) 30%, transparent));
}

.nk-why__play-icon {
	width: 100%;
	height: 100%;
	display: block;
}

.nk-why__play-bg {
	color: color-mix(in srgb, var(--wp--preset--color--brand-white) 90%, transparent);
}

.nk-why__play-arrow {
	color: var(--wp--preset--color--brand-red);
}

/* ---- Video quote ---- */
.nk-why__video-quote {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--8);
	color: var(--wp--preset--color--brand-white);
	font-size: var(--wp--preset--font-size--md-base);
	font-weight: var(--wp--custom--font-weight--medium);
	font-style: italic;
	line-height: var(--wp--custom--line-height--sm);
	letter-spacing: var(--wp--custom--letter-spacing--tight);
	margin: 0;
	z-index: 3;
}

/* ---- Testimonial tabs ---- */
.nk-why__tabs {
	display: flex;
	gap: var(--wp--preset--spacing--2);
	margin-top: var(--wp--preset--spacing--4);
}

.nk-why__tab {
	height: var(--wp--custom--components--why-nk--tab-height);
	padding-inline: var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--sm-md);
	font-family: var(--wp--preset--font-family--inter);
	font-weight: var(--wp--custom--font-weight--semibold);
	color: var(--wp--preset--color--neutral-500);
	background: none;
	border: 1px solid var(--wp--preset--color--neutral-400);
	border-radius: var(--wp--custom--radius--default);
	cursor: pointer;
	line-height: 1;
}

.nk-why__tab.is-active {
	background-color: var(--wp--preset--color--brand-red);
	color: var(--wp--preset--color--brand-white);
	border-color: var(--wp--preset--color--brand-red);
}

/* ---- Copy column ---- */
.nk-why__copy {
	padding-top: 0;
}

.nk-why__heading {
	/* Size + case from the shared .nk-headline--content class (mapped in render.php). */
	font-weight: var(--wp--custom--font-weight--extrabold);
	line-height: var(--wp--custom--line-height--xxl-tight);
	letter-spacing: var(--wp--custom--letter-spacing--neg-086);
	color: var(--wp--preset--color--brand-black);
	max-width: var(--wp--custom--components--why-nk--copy-max-width);
	margin: 0 0 var(--wp--preset--spacing--4) 0;
}

/* ---- Stars ---- */
.nk-why__rating {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2);
	margin-bottom: var(--wp--preset--spacing--6);
}

.nk-why__stars {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--1);
	color: var(--wp--preset--color--utility-yellow);
}

/* Square, so the half-star overlay lines up with the outline it sits on: both paths are
   drawn in the same 24x24 box, and the row used to be 16x18, which stretched them
   vertically. 16px keeps the width the row already had. */
/* The shared helper draws the shape with no stroke attribute, leaving the outline to
   CSS — without it an empty star has no silhouette at all, since an unfilled star is
   nothing but its outline. The stroke also earns the row its contrast: utility-yellow
   alone is 1.36:1 against this section's surface-dark band and fails WCAG 1.4.11 (3:1)
   for a graphic conveying a rating, where amber-deep gives 4.17:1. Same treatment as
   nk-location-reviews__aggregate-stars and nk-reviews-feed__star. */
.nk-why__star {
	width: var(--wp--preset--spacing--4);
	height: var(--wp--preset--spacing--4);
	stroke: var(--wp--preset--color--utility-amber-deep);
}

.nk-why__rating-text {
	font-size: var(--wp--preset--font-size--md-base);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--sm);
	color: var(--wp--preset--color--neutral-900);
}

/* ---- Body text ---- */
.nk-why__body {
	font-size: var(--wp--preset--font-size--md-base);
	line-height: var(--wp--custom--line-height--md);
	letter-spacing: var(--wp--custom--letter-spacing--tight);
	color: var(--wp--preset--color--neutral-600);
	max-width: var(--wp--custom--components--why-nk--body-max-width);
	margin: 0 0 var(--wp--preset--spacing--6) 0;
}

/* ---- CTA button ---- */
.nk-why__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--wp--custom--components--why-nk--cta-height);
	padding-inline: var(--wp--preset--spacing--8);
	border: 1px solid var(--wp--preset--color--brand-black);
	color: var(--wp--preset--color--brand-black);
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--medium);
	text-decoration: none;
	border-radius: var(--wp--custom--radius--default);
	transition: background-color 200ms ease, color 200ms ease;
}

.nk-why__cta:hover {
	background-color: var(--wp--preset--color--brand-black);
	color: var(--wp--preset--color--brand-white);
}

/* ---- Trust pillars card ---- */
.nk-why__pillars-wrap {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	margin-top: var(--wp--preset--spacing--13);
	background-color: var(--wp--preset--color--brand-white);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--custom--shadow--card-subtle);
	padding: var(--wp--preset--spacing--10);
	box-sizing: border-box;
}

.nk-why__pillars-title {
	font-size: var(--wp--preset--font-size--xl);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--compact);
	letter-spacing: var(--wp--custom--letter-spacing--tight);
	color: var(--wp--preset--color--neutral-900);
	text-align: center;
	margin: 0 0 var(--wp--preset--spacing--10) 0;
}

/* ---- Pillar columns ---- */
.nk-why__pillars {
	display: flex;
	align-items: stretch;
}

.nk-why__pillar {
	flex: 1;
	padding-inline: var(--wp--preset--spacing--4);
}

.nk-why__pillar:first-child {
	padding-left: 0;
}

.nk-why__pillar:last-child {
	padding-right: 0;
}

.nk-why__pillar:not(:first-child) {
	border-left: 1px solid var(--wp--preset--color--neutral-200);
}

/* ---- Pillar icon ---- */
.nk-why__pillar-icon {
	width: var(--wp--preset--spacing--12);
	height: var(--wp--preset--spacing--12);
	border-radius: var(--wp--custom--radius--full);
	background-color: var(--wp--preset--color--feedback-error-background);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--wp--custom--components--why-nk--pillar-icon-gap);
	flex-shrink: 0;
	color: var(--wp--preset--color--brand-red);
}

.nk-why__pillar-icon svg {
	width: var(--wp--preset--spacing--5);
	height: var(--wp--preset--spacing--5);
}

/* ---- Pillar text ---- */
.nk-why__pillar-title {
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--bold);
	color: var(--wp--preset--color--brand-black);
	margin: 0 0 var(--wp--preset--spacing--2) 0;
}

.nk-why__pillar-desc {
	font-size: var(--wp--preset--font-size--base);
	line-height: var(--wp--custom--components--why-nk--pillar-desc-lh);
	color: color-mix(in srgb, var(--wp--preset--color--brand-black) 50%, transparent);
	margin: 0;
}

/* ==========================================================================
   Tablet (max-width: 1023px)
   ========================================================================== */
@media (max-width: 1023px) {
	.nk-why__container {
		padding-inline: var(--wp--preset--spacing--6);
	}

	.nk-why__grid {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--8);
	}

	.nk-why__video-placeholder {
		height: auto;
		aspect-ratio: 16 / 10;
	}

	.nk-why__heading {
		font-size: var(--wp--preset--font-size--xl);
		line-height: var(--wp--custom--line-height--xl);
	}

	.nk-why__copy {
		text-align: center;
		margin-inline: auto;
	}

	.nk-why__heading,
	.nk-why__body {
		max-width: none;
	}

	.nk-why__cta {
		margin-inline: auto;
	}

	.nk-why__pillars {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--wp--preset--spacing--8);
	}

	.nk-why__pillar:not(:first-child) {
		border-left: none;
	}

	.nk-why__pillars-wrap {
		padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--6) var(--wp--preset--spacing--6);
	}
}

/* Tablet only: 768–1023px */
@media (min-width: 768px) and (max-width: 1023px) {
	.nk-why__pillar:first-child { padding-left: var(--wp--preset--spacing--4); }
	.nk-why__pillar:last-child { padding-right: var(--wp--preset--spacing--4); }
}

/* ==========================================================================
   Mobile (max-width: 767px)
   ========================================================================== */
@media (max-width: 767px) {
	.wp-block-neilkelly-why-nk.nk-why {
		overflow-x: hidden;
		width: 100%;
		max-width: 100vw;
		padding-top: var(--wp--preset--spacing--10);
		padding-bottom: var(--wp--preset--spacing--10);
	}

	.wp-block-neilkelly-why-nk .nk-why__container {
		padding-inline: var(--wp--preset--spacing--5);
		max-width: 100%;
		overflow: hidden;
		box-sizing: border-box;
	}

	.wp-block-neilkelly-why-nk .nk-why__grid {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--5);
	}

	.wp-block-neilkelly-why-nk .nk-why__video-placeholder {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 10;
	}

	.wp-block-neilkelly-why-nk .nk-why__video-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.wp-block-neilkelly-why-nk .nk-why__play {
		width: var(--wp--preset--spacing--12);
		height: var(--wp--preset--spacing--12);
	}

	.wp-block-neilkelly-why-nk .nk-why__copy {
		max-width: 100%;
		width: 100%;
		text-align: center;
		padding: 0;
		overflow: visible;
		word-wrap: break-word;
		overflow-wrap: break-word;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.wp-block-neilkelly-why-nk .nk-why__heading {
		font-size: var(--wp--preset--font-size--md);
		line-height: var(--wp--custom--line-height--lg-tight);
		text-align: center;
		max-width: 100%;
		word-wrap: break-word;
		overflow-wrap: break-word;
		margin-bottom: var(--wp--preset--spacing--3);
		padding-inline: var(--wp--preset--spacing--4);
		box-sizing: border-box;
	}

	.wp-block-neilkelly-why-nk .nk-why__rating {
		justify-content: center;
		flex-wrap: wrap;
		max-width: 100%;
		margin-bottom: var(--wp--preset--spacing--4);
	}

	.wp-block-neilkelly-why-nk .nk-why__body {
		text-align: center;
		font-size: var(--wp--preset--font-size--md-sm);
		line-height: var(--wp--custom--line-height--base);
		max-width: 100%;
		overflow-wrap: break-word;
		padding-inline: var(--wp--preset--spacing--2);
		margin-bottom: var(--wp--preset--spacing--5);
	}

	.wp-block-neilkelly-why-nk .nk-why__cta {
		margin: 0 auto;
		display: inline-flex;
	}

	.wp-block-neilkelly-why-nk .nk-why__tabs {
		justify-content: center;
		overflow-x: auto;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
		margin-top: var(--wp--preset--spacing--3);
		gap: var(--wp--preset--spacing--2);
	}

	.wp-block-neilkelly-why-nk .nk-why__tab {
		flex-shrink: 0;
		padding-inline: var(--wp--preset--spacing--4);
		font-size: var(--wp--preset--font-size--sm-md);
	}

	.wp-block-neilkelly-why-nk .nk-why__pillars-wrap {
		padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--4) var(--wp--preset--spacing--4);
		margin-inline: var(--wp--preset--spacing--5);
	}

	.wp-block-neilkelly-why-nk .nk-why__pillars {
		display: grid;
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--3);
	}

	.wp-block-neilkelly-why-nk .nk-why__pillar {
		padding-inline: 0;
	}

	.wp-block-neilkelly-why-nk .nk-why__pillar:not(:first-child) {
		border-left: none;
	}
}

/* ---- Video lightbox ---- */
/* Ported from neilkelly/reviews-featured-stories, which renders the same idiom; the
   class names and the scroll-lock below are this block's own. */
.wp-block-neilkelly-why-nk .nk-why__lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--12);
	box-sizing: border-box;
}

.wp-block-neilkelly-why-nk .nk-why__lightbox[hidden] {
	display: none;
}

.wp-block-neilkelly-why-nk .nk-why__backdrop {
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--surface-dark-overlay);
}

.wp-block-neilkelly-why-nk .nk-why__panel {
	position: relative;
	width: 100%;
	max-width: var(--wp--custom--components--why-nk--video-panel-max-width);
	opacity: 0;
	transform: translateY( var(--wp--preset--spacing--4) );
	transition: opacity 200ms ease, transform 200ms ease;
}

.wp-block-neilkelly-why-nk .nk-why__lightbox.is-open .nk-why__panel {
	opacity: 1;
	transform: translateY( 0 );
}

/* view.js reads this duration to time the unmount, so `none` here also means
   "hide immediately". */
@media ( prefers-reduced-motion: reduce ) {
	.wp-block-neilkelly-why-nk .nk-why__panel {
		transition: none;
	}
}

/* 16:9 well. Black behind the embed so letterboxing reads as intentional while the
   provider iframe loads. */
.wp-block-neilkelly-why-nk .nk-why__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--brand-black);
}

/* oembed markup carries its own width/height attributes; override so the embed fills
   the well whatever the provider returned. */
.wp-block-neilkelly-why-nk .nk-why__frame iframe,
.wp-block-neilkelly-why-nk .nk-why__frame video,
.wp-block-neilkelly-why-nk .nk-why__frame > * {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.wp-block-neilkelly-why-nk .nk-why__close {
	position: absolute;
	right: 0;
	bottom: calc( 100% + var(--wp--preset--spacing--3) );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--brand-white);
	cursor: pointer;
}

.wp-block-neilkelly-why-nk .nk-why__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-white);
	outline-offset: 2px;
}

/* Scroll lock while the dialog is open (set on <html> by view.js). Defined here rather
   than reusing another block's, so this block does not depend on that block's
   stylesheet being present. */
.nk-why-video-open {
	overflow: hidden;
}