/* ==========================================================================
   Promo Card (neilkelly/promo-card)
   Figma: Pricing & Financing — 5111:276 (light) and 5111:289 (dark)
   ========================================================================== */

/* No block-gap seam between full-bleed sections. */
.wp-block-neilkelly-promo-card { margin-block: 0; }

.wp-block-neilkelly-promo-card.nk-promo {
	box-sizing: border-box;
	/* VERTICAL ONLY — the horizontal inset moved into the capped container below, so the
	   band background stays full-bleed while its content holds the site measure. Padded
	   out here it ran 100vw - 156px: right at the 1440 frame, 1764 at 1920, 2404 at 2560.
	   Same shape .nk-location-reviews__container and .nk-drivers__container use. */
	padding-inline: var(--wp--preset--spacing--gutter);
	padding-block: var(--wp--preset--spacing--6);
	background: var(--wp--preset--color--surface-page);
}

.wp-block-neilkelly-promo-card .nk-promo__card {
	/* The card IS this block's container — it is the section's only child — so the cap
	   and centring live here rather than on a wrapper div. */
	max-width: var(--wp--custom--layout--content-width);
	margin-inline: auto;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* No gap: the copy column carries its own inset on BOTH sides instead, so the
	   space before the photograph is the copy's own padding rather than a gap
	   between two boxes. space-between still holds the photograph to the right
	   edge. 5111:276 agrees — the frame has no gap either (its copy frame runs
	   48—489 against a photo starting at 467, i.e. they overlap by 22). */
	gap: 0;
	min-height: var(--wp--custom--components--pricing--promo-height);
	overflow: hidden;
	background: var(--wp--custom--components--pricing--promo-bg);
	border-radius: var(--wp--custom--radius--card);
}

.wp-block-neilkelly-promo-card .nk-promo__copy {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--12);
	/* BORDER-BOX so flex-basis means the outer box. Content-box, the 441 basis plus
	   this 80px inset made a 521 column, and 521 + 817 overshot the 1296 card by 42
	   — so the photograph shrank 27px below its design width to pay for padding
	   that was counted twice. Same double-count as about-design-build's __body. */
	box-sizing: border-box;
	/* Design width as the BASIS, then grow: 441 + 817 = 1258 leaves 38px of slack in
	   the 1296 card, and the copy takes it so the photograph keeps its full 817 and
	   ends flush with the card edge. Sized 0 0 441 instead, that slack fell to
	   space-between and the photograph overhung the card — which is what put the
	   play control 46px right of the visible photo centre. */
	flex: 1 1 var(--wp--custom--components--pricing--promo-copy-width);
	/* Symmetric inset, Artiom's call — replaces the card gap above.
	   CONSEQUENCE: the copy column is 479 (1296 — 817), so 80 a side leaves a 319
	   text measure and `promo-body-width` (368) no longer fits — the body renders
	   319 and the CEO copy reflows narrower than 5111:276. The frame's own insets
	   are 48 start / 51 end, which WOULD leave 383 and keep the body at 368; see
	   the note in theme.json beside promo-copy-inset. */
	padding-inline: var(--wp--custom--components--pricing--promo-copy-inset);
}

.wp-block-neilkelly-promo-card .nk-promo__text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--components--pricing--promo-text-gap);
}

.wp-block-neilkelly-promo-card .nk-promo__heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--none);
	color: var(--wp--preset--color--ink-primary);
}

.wp-block-neilkelly-promo-card .nk-promo__body {
	max-width: var(--wp--custom--components--pricing--promo-body-width);
	margin: 0;
	font-size: var(--wp--preset--font-size--md-base);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--components--pricing--promo-body-line);
	color: var(--wp--preset--color--ink-primary);
}

.wp-block-neilkelly-promo-card .nk-promo__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--4);
}

.wp-block-neilkelly-promo-card .nk-promo__btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--preset--spacing--14);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--6-5);
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--none);
	text-decoration: none;
	border-radius: var(--wp--custom--radius--lg);
	white-space: nowrap;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

/* Light card: black primary, per the CTA convention on a light surface. */
.wp-block-neilkelly-promo-card .nk-promo__btn--primary {
	color: var(--wp--preset--color--brand-white);
	background: var(--wp--preset--color--surface-dark);
	border: 1.5px solid var(--wp--preset--color--surface-dark);
}

.wp-block-neilkelly-promo-card .nk-promo__btn--primary:hover,
.wp-block-neilkelly-promo-card .nk-promo__btn--primary:focus-visible {
	background: var(--wp--preset--color--ink-primary);
	border-color: var(--wp--preset--color--ink-primary);
}

.wp-block-neilkelly-promo-card .nk-promo__btn--secondary {
	color: var(--wp--preset--color--ink-primary);
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--surface-dark);
}

.wp-block-neilkelly-promo-card .nk-promo__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-red);
	outline-offset: 2px;
}

.wp-block-neilkelly-promo-card .nk-promo__media {
	/* 727, Artiom's call — the width the photograph RENDERED at before this branch,
	   and a deliberate deviation from 5111:277's 817. It used to be an 817 box that
	   overflow:hidden clipped to 727; now it is a 727 box, so the cover-crop differs
	   slightly even though the width matches. 1296 — 727 leaves the copy 569, which
	   at 80 a side gives a 409 measure — enough for promo-body-width (368) and the
	   one-line heading (369) that the 80/80 inset had squeezed to 319 and two lines.
	   `sizes` in render.php names this width too; change both together.
	   Shrink stays enabled (no grow): below the ~1094 viewport this row needs, both
	   columns give way proportionally instead of the card clipping again. */
	flex: 0 1 var(--wp--custom--components--pricing--promo-media-width);
	min-width: 0;
	align-self: stretch;
}

.wp-block-neilkelly-promo-card .nk-promo__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   is-dark — the closing CTA (5111:289): near-black card, white heading, the
   body in neutral-350, a white primary and an outlined white secondary.
   -------------------------------------------------------------------------- */
.wp-block-neilkelly-promo-card.is-dark .nk-promo__card {
	background: var(--wp--preset--color--surface-dark);
}

.wp-block-neilkelly-promo-card.is-dark .nk-promo__heading {
	color: var(--wp--preset--color--brand-white);
}

.wp-block-neilkelly-promo-card.is-dark .nk-promo__body {
	font-size: var(--wp--preset--font-size--md);
	line-height: var(--wp--custom--components--pricing--promo-body-line-dark);
	color: var(--wp--preset--color--neutral-350);
}

.wp-block-neilkelly-promo-card.is-dark .nk-promo__btn--primary {
	color: var(--wp--preset--color--surface-dark);
	background: var(--wp--preset--color--brand-white);
	border-color: var(--wp--preset--color--brand-white);
}

.wp-block-neilkelly-promo-card.is-dark .nk-promo__btn--primary:hover,
.wp-block-neilkelly-promo-card.is-dark .nk-promo__btn--primary:focus-visible {
	background: var(--wp--preset--color--neutral-100);
	border-color: var(--wp--preset--color--neutral-100);
}

.wp-block-neilkelly-promo-card.is-dark .nk-promo__btn--secondary {
	color: var(--wp--preset--color--brand-white);
	border-color: var(--wp--preset--color--brand-white);
}

.wp-block-neilkelly-promo-card.is-dark .nk-promo__btn--secondary:hover,
.wp-block-neilkelly-promo-card.is-dark .nk-promo__btn--secondary:focus-visible {
	color: var(--wp--preset--color--surface-dark);
	background: var(--wp--preset--color--brand-white);
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1023px) {
	.wp-block-neilkelly-promo-card.nk-promo {
		padding-inline: var(--wp--preset--spacing--12);
	}

	.wp-block-neilkelly-promo-card .nk-promo__card {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
	}

	.wp-block-neilkelly-promo-card .nk-promo__copy {
		/* The main axis is vertical here, so the base flex-basis above would land as a
		   441px HEIGHT on this column. Same trap as service-process .is-process. */
		flex: 0 0 auto;
		width: auto;
		padding: var(--wp--preset--spacing--8);
	}

	.wp-block-neilkelly-promo-card .nk-promo__media {
		flex: 1 1 auto;
		width: auto;
		min-height: var(--wp--custom--components--pricing--promo-media-mobile);
	}
}

@media (max-width: 767px) {
	.wp-block-neilkelly-promo-card.nk-promo {
		padding-inline: var(--wp--preset--spacing--5);
	}
}

/* The closing CTA runs a taller card on a narrower photo and a wider copy
   column than the CEO card (5111:289 against 5111:276). */
.wp-block-neilkelly-promo-card.is-dark .nk-promo__card {
	min-height: var(--wp--custom--components--pricing--promo-height-dark);
}

/* Pinned: flex-basis beats width on a row item, so without this the base `1 1 441px`
   above would outrank this width and the dark copy column would grow instead of
   holding 532.
   NOTE this variant DID shift with the border-box change above: 532 is now the outer
   width, where content-box made it 612, and space-between therefore opens 147px
   between the columns rather than 67. NO INSTANCE PLACES is-dark today (the closing
   CTA of 5111:289 is not composed anywhere), so nothing rendered moved — but check
   532 against that frame before this variant is ever used. */
.wp-block-neilkelly-promo-card.is-dark .nk-promo__copy {
	flex: 0 0 auto;
	width: var(--wp--custom--components--pricing--promo-copy-width-dark);
}

.wp-block-neilkelly-promo-card.is-dark .nk-promo__media {
	flex-basis: var(--wp--custom--components--pricing--promo-media-width-dark);
	width: var(--wp--custom--components--pricing--promo-media-width-dark);
}

.wp-block-neilkelly-promo-card.is-dark .nk-promo__body {
	max-width: none;
}

/* is-attached — the card belongs to the band above it (the CEO card inside
   5111:246), so it drops its own top padding and closes that frame instead. */
.wp-block-neilkelly-promo-card.is-attached.nk-promo {
	padding-block: 0 var(--wp--custom--components--pricing--band-pad-top);
}

/* ==========================================================================
   Video — play control over the photograph, and its lightbox.

   Ported from neilkelly/why-nk, which renders the same idiom: 80px disc, 90%
   white, brand-red arrow (a non-CTA accent, per the CTA convention), dropped
   onto the media well. The control is an anchor and only exists with a video
   to open — see render.php. Tokens are this block's own rather than why-nk's,
   so neither block's stylesheet depends on the other being present.
   ========================================================================== */
.wp-block-neilkelly-promo-card .nk-promo__media {
	/* Containing block for the play control below. */
	position: relative;
}

.wp-block-neilkelly-promo-card .nk-promo__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: var(--wp--custom--components--pricing--promo-play-size);
	height: var(--wp--custom--components--pricing--promo-play-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));
}

/* No hover treatment, deliberately: nk-why__play and the location-reviews play
   control have none either, and this disc should not be the one place in the
   theme where a play button moves. Focus-visible below is a11y, not decoration. */
.wp-block-neilkelly-promo-card .nk-promo__play:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-white);
	outline-offset: var(--wp--preset--spacing--1);
	border-radius: var(--wp--custom--radius--full);
}

/* currentColor on the SVG, colour set here — the disc and the arrow are two
   tokens, not two fill attributes. */
.wp-block-neilkelly-promo-card .nk-promo__play-icon {
	display: block;
	width: 100%;
	height: 100%;
}

.wp-block-neilkelly-promo-card .nk-promo__play-bg {
	color: color-mix(in srgb, var(--wp--preset--color--brand-white) 90%, transparent);
}

.wp-block-neilkelly-promo-card .nk-promo__play-arrow {
	color: var(--wp--preset--color--brand-red);
}

/* The card's photo column shortens to promo-media-mobile once it stacks, so an
   80px disc dominates it. Declared AFTER the base rule at the same specificity
   — source order is what carries it, since the base is not in a query. */
@media (max-width: 767px) {
	.wp-block-neilkelly-promo-card .nk-promo__play {
		width: var(--wp--custom--components--pricing--promo-play-mobile);
		height: var(--wp--custom--components--pricing--promo-play-mobile);
	}
}

/* ---- Video lightbox ---- */
.wp-block-neilkelly-promo-card .nk-promo__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-promo-card .nk-promo__lightbox[hidden] {
	/* display:flex above beats the hidden attribute — without this the dialog
	   is open on load. Same trap as .nk-tiers__panel[hidden]. */
	display: none;
}

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

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

.wp-block-neilkelly-promo-card .nk-promo__lightbox.is-open .nk-promo__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-promo-card .nk-promo__panel {
		transition: none;
	}
}

/* 16:9 well. Black behind the embed so letterboxing reads as intentional while
   the provider iframe loads. */
.wp-block-neilkelly-promo-card .nk-promo__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-promo-card .nk-promo__frame iframe,
.wp-block-neilkelly-promo-card .nk-promo__frame video,
.wp-block-neilkelly-promo-card .nk-promo__frame > * {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.wp-block-neilkelly-promo-card .nk-promo__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-promo-card .nk-promo__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 why-nk's, so this block does not depend on that block's
   stylesheet being present. */
.nk-promo-video-open {
	overflow: hidden;
}