/* ==========================================================================
   Process — Numbered Editorial Band (neilkelly/process-intro)
   Figma: Process / Header and Body (6272:702), frame 1440x356
          Process / Planning Phase  (6272:787), frame 1440x423  [is-stacked]

   Desktop is 1:1 with the frames. Measured values, mapped to tokens in
   settings.custom.components.process-page:

     SPLIT (6272:702)
       band        1440x356, padding 76 block / 78 inline, content centred
       heading col 510 wide, 50/800 lh 1.1 ls -1.02, uppercase
       body col    725 wide, 18/400 lh 30 (1.667), 16 between paragraphs
       gap         48 between the two columns

     STACKED (6272:787)
       band        1440x423, padding 93 top / 124 bottom
       heading     full width, 20 above the body
       body        691 wide, indented to the heading TEXT (75), not the number
       note        360 wide, 20 below the body, brand red

   The 75 indent and the marker are the shared .nk-numbered utility in
   theme.json styles.css — six headings across four blocks use it.
   ========================================================================== */

.nk-process-intro {
	/* WP core gives blocks a 24px margin-block-start; these are full-bleed bands
	   that must butt against their neighbours. */
	margin: 0;
	--nk-process-intro-copy-size: var(--wp--preset--font-size--md-base);
	--nk-process-intro-pad-block: var(--wp--custom--components--process-page--intro-pad-block);
	--nk-process-intro-pad-inline: var(--wp--custom--components--process-page--intro-pad-inline);
	--nk-process-intro-min-height: var(--wp--custom--components--process-page--intro-min-height);

	box-sizing: border-box;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: var(--nk-process-intro-min-height);
	padding-block: var(--nk-process-intro-pad-block);
	/* 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 - the frame inset: right at the 1440 frame, 1764 at 1920, 2404 at 2560.
	   Same shape .nk-location-reviews__container and .nk-drivers__container use. */
	/* (kept as a custom prop so the two breakpoints below still retune it) */
	background-color: var(--wp--preset--color--brand-white);
	font-family: var(--wp--preset--font-family--inter);
}

/* Figma has this row as items-center, but its two columns are the same height
   there so centre and start render identically. Browsers wrap the body one line
   shorter than Figma's text engine does at the same 725 measure, and centring
   then drops the body 15px below the heading. Top-aligned is what the design
   shows and it holds for any copy length; the block as a whole is still centred
   in the 356 band (align-items on the section). */
.nk-process-intro__container {
	max-width: var(--wp--custom--layout--max-width);
	margin-inline: auto;
	padding-inline: var(--nk-process-intro-pad-inline);
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
	gap: var(--wp--custom--components--process-page--intro-column-gap);
	width: 100%;
}

/* The heading column is a fixed measure in the design, not a fraction — the body
   beside it is what absorbs the remaining width. border-box because Figma's 510 is
   the whole column INCLUDING the number's 75 indent (the marker sits inside it);
   content-box would add the indent on top, push the body 74 right and narrow it
   enough to change where the copy wraps. */
.nk-process-intro__heading {
	box-sizing: border-box;
	flex: 0 0 var(--wp--custom--components--process-page--intro-heading-width);
	margin: 0;
	font-weight: var(--wp--custom--font-weight--extrabold);
	line-height: var(--wp--custom--line-height--xl-tight);
	letter-spacing: var(--wp--custom--letter-spacing--neg-102);
	/* Size AND case come from the shared .nk-headline--content class (mapped in
	   render.php) — 50px uppercase, so nothing to repeat here. The two breakpoints
	   below step the size down; they out-rank the shared class because this
	   stylesheet loads after the global styles that define it. */
	color: var(--wp--preset--color--ink-primary);
}

.nk-process-intro__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--components--process-page--intro-body-gap);
	max-width: var(--wp--custom--components--process-page--intro-body-width);
}

/* Figma sets the body at 60% black over white rather than a palette grey — mixed
   against the section's own background so the text renders on an opaque colour
   (ink-secondary is #595959, which is a different value). */
.nk-process-intro__copy,
.nk-process-intro__body--rich > p:not([class]) {
	margin: 0;
	font-size: var(--nk-process-intro-copy-size);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--relaxed);
	color: color-mix( in srgb, var(--wp--preset--color--surface-footer) 60%, var(--wp--preset--color--brand-white) );
}

/* --------------------------------------------------------------------------
   Modifier: is-stacked
   Planning Phase (6272:787) is the same numbered band with the body under the
   heading instead of beside it, indented so its first character sits under the
   heading's first character rather than under the number. Opt-in via className,
   so the split instance is untouched.
   -------------------------------------------------------------------------- */
.nk-process-intro.is-stacked {
	--nk-process-intro-min-height: var(--wp--custom--components--process-page--planning-min-height);

	align-items: flex-start;
	padding-block: var(--wp--custom--components--process-page--planning-pad-top) var(--wp--custom--components--process-page--planning-pad-bottom);
	/* NO inline padding on the band. __container carries it, the same way every other
	   section on the page does, so the inset comes from one place and tracks
	   --nk-process-intro-pad-inline at each breakpoint (72 / 48 / 24) and the 1440 cap
	   above that. Padding both had them stack: 144 at 1280 against everyone else's 72,
	   and zeroing the band to compensate left nothing at all on mobile. */
}

.nk-process-intro.is-stacked .nk-process-intro__container {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--custom--components--process-page--planning-heading-gap);
}

/* The phase headings lead at 1.22, not the 1.1 the split band's three-line
   heading uses — 6272:789 measures 61 for one 50px line. */
.nk-process-intro.is-stacked .nk-process-intro__heading {
	flex: 0 0 auto;
	max-width: 100%;
	line-height: var(--wp--custom--line-height--xl);
}

.nk-process-intro.is-stacked .nk-process-intro__body {
	gap: var(--wp--custom--components--process-page--planning-note-gap);
	max-width: var(--wp--custom--components--process-page--planning-body-width);
	/* Aligns the body with the heading TEXT — the same 75 the marker sits outside. */
	padding-inline-start: var(--wp--custom--components--numbered--indent);
}

.nk-process-intro.is-stacked .nk-process-intro__copy,
.nk-process-intro.is-stacked .nk-process-intro__body--rich > p:not([class]) {
	font-size: var(--wp--preset--font-size--base);
	line-height: var(--wp--custom--line-height--md-snug);
}

/* The timing note — a red, smaller line that closes the phase bands. */
.nk-process-intro__note {
	margin: 0;
	max-width: var(--wp--custom--components--process-page--planning-note-width);
	font-size: var(--wp--preset--font-size--sm-md);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--preset--color--brand-red);
}

/* ---------- Tablet ---------- */

@media (max-width: 1023px) {
	.nk-process-intro__heading {
		font-size: var(--wp--preset--font-size--xl);
	}

	.nk-process-intro {
		--nk-process-intro-pad-inline: var(--wp--preset--spacing--12);
		--nk-process-intro-min-height: 0;
	}

	/* The two columns stop fitting side by side well before the heading measure
	   does, so the band becomes a stack and both columns give up their fixed
	   widths. */
	.nk-process-intro__container {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--8);
	}

	.nk-process-intro__heading {
		flex: 0 0 auto;
		max-width: 100%;
	}

	.nk-process-intro__body {
		max-width: 100%;
	}

	.nk-process-intro.is-stacked {
		--nk-process-intro-min-height: 0;

		padding-block: var(--wp--preset--spacing--16);
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
	.nk-process-intro__heading {
		font-size: var(--wp--preset--font-size--xl-sm);
	}

	.nk-process-intro {
		--nk-process-intro-copy-size: var(--wp--preset--font-size--base);
		--nk-process-intro-pad-inline: var(--wp--preset--spacing--6);

		padding-block: var(--wp--preset--spacing--16);
	}

	/* No inline padding on the band itself here — __container already carries the 24
	   (--nk-process-intro-pad-inline steps to spacing--6 at this width), and the two
	   stacked put this section 48 in while every other band on the page sits at 24.
	   No top padding either: the section above (service-process.is-process) is
	   transparent and already closes on 48, so this band's own 64 read as a gap
	   roughly twice every other seam on the page at this width. */
	.nk-process-intro.is-stacked {
		padding-block: 0 var(--wp--preset--spacing--16);
	}

	/* The number keeps its column at this width — dropping the indent would let
	   the heading text run back under the marker. */
	.nk-process-intro.is-stacked .nk-process-intro__body {
		padding-inline-start: 0;
	}

	/* A rich body takes the numbered indent, so its copy starts under the heading TEXT
	   rather than under the marker — stacked at this width the two sit directly above
	   one another and the offset reads as a misalignment.

	   Keyed off :has(.nk-numbered) rather than the section class, because the indent only
	   makes sense where the heading actually carries a number: Pricing composes the same
	   rich body with no number, and it stays flush. (0,4,0), so it clears the rule above,
	   which zeroes the indent for the composed path. */
	.nk-process-intro:has( .nk-numbered ) .nk-process-intro__body.nk-process-intro__body--rich {
		padding-inline-start: var(--wp--custom--components--numbered--indent);
	}
}

/* --------------------------------------------------------------------------
   Optional lead + bullet list (Pricing 5111:72)

   Both are attribute-gated — Our Process passes neither, so this markup never
   exists on that page and these rules have nothing to match.
   -------------------------------------------------------------------------- */
.nk-process-intro__lead {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--preset--color--ink-secondary);
}

.nk-process-intro__bullets,
.nk-process-intro__body--rich > ul {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The 6px red square at radius 3 is a dot; drawn here rather than as a node so
   it stays out of the accessibility tree. */
.nk-process-intro__bullet,
.nk-process-intro__body--rich > ul > li {
	display: flex;
	/* Top-align, not centre: on narrow screens a bullet's text wraps to two lines, and
	   align-items:center would float the dot in the vertical middle of the item. The dot
	   is nudged onto the first line below, so single-line items look identical to before. */
	align-items: flex-start;
	gap: var(--wp--preset--spacing--3);
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--preset--color--ink-secondary);
}

.nk-process-intro__bullet::before,
.nk-process-intro__body--rich > ul > li::before {
	content: "";
	flex: 0 0 auto;
	width: var(--wp--preset--spacing--1-5);
	height: var(--wp--preset--spacing--1-5);
	/* Centre the dot within the first text line (1lh), so it stays aligned whether the
	   bullet is one line or wraps to several. */
	margin-top: calc((1lh - var(--wp--preset--spacing--1-5)) / 2);
	background: var(--wp--preset--color--brand-red);
	border-radius: var(--wp--custom--radius--full);
}

.nk-process-intro__bullet-strong,
.nk-process-intro__body--rich strong,
.nk-process-intro__body--rich b {
	font-weight: var(--wp--custom--font-weight--semibold);
	color: var(--wp--preset--color--ink-primary);
}

/* --------------------------------------------------------------------------
   Body authored as rich text (WYSIWYG)

   The is-pricing band is authored in the admin as a single field, so its lead line,
   list and closing paragraph arrive as bare <p>/<ul>/<li>/<strong> with no classes.
   Rather than restate the design, each rule above carries the element selector beside
   its composed class, so the two paths cannot drift apart. The --rich modifier is what
   keeps them apart: a bare `.nk-process-intro__body > p` outspecifies
   `.nk-process-intro__note` and would have recoloured Our Process's red timing line.
   Only the ordered list is new: it is absent from the design, but an editor can make one, and the red-dot rules
   would otherwise strip its numbers.
   -------------------------------------------------------------------------- */
.nk-process-intro__body--rich > ol {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	margin: 0;
	padding-inline-start: var(--wp--preset--spacing--5);
	list-style: decimal;
}

.nk-process-intro__body--rich > ol > li {
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--preset--color--ink-secondary);
}

/* The editor's own paragraph margins would fight the body's flex gap. */
.nk-process-intro__body--rich > :first-child {
	margin-block-start: 0;
}

.nk-process-intro__body--rich > :last-child {
	margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   is-pricing — Pricing cost-factors band (Figma 5111:72, 1440 x 376)

   Same split band as Our Process at the same 76/78 padding and 510 heading, but
   the two columns sit apart rather than on a fixed 48 gutter, and the body runs
   at 20px on its own measures (636 for the list, 583 for the closing line).
   -------------------------------------------------------------------------- */
.nk-process-intro.is-pricing .nk-process-intro__container {
	justify-content: space-between;
	/* A FLOOR, not the gutter. space-between still sets the desktop distance — at 1440
	   the free space between the 510 heading and the body is far wider than this, so the
	   frame is unchanged. It only starts to bind as the viewport narrows, which is where
	   `gap: 0` used to let the two columns run into each other. It also has to be a real
	   value rather than 0 because this selector (0,2,0) outranks the tablet rule that
	   stacks the band, so the 0 was surviving into the column layout and leaving the
	   heading sitting directly on the body at mobile. */
	gap: var(--wp--preset--spacing--6);
}

.nk-process-intro.is-pricing .nk-process-intro__body {
	width: var(--wp--custom--components--pricing--factors-list-width);
	max-width: 100%;
	justify-content: center;
}

.nk-process-intro.is-pricing .nk-process-intro__copy,
.nk-process-intro.is-pricing .nk-process-intro__body--rich > p:not([class]) {
	max-width: var(--wp--custom--components--pricing--factors-note-width);
	font-size: var(--wp--preset--font-size--md);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--preset--color--ink-secondary);
}

/* --------------------------------------------------------------------------
   Mobile: keep the cost-factor bullets on one line

   The bullets inherit the 20px body size, which is fine on the wide desktop column but
   overruns the narrow mobile column — the longer ones ("The materials and finishes you
   choose") wrap to two lines and read as stacked. Drop the list to the base size here so
   each bullet stays on one line. Placed after the base list rules (which carry the same
   0,1,2 specificity) so source order lets this win inside the query. The dot re-centres
   on the line automatically — its offset is derived from 1lh.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.nk-process-intro__body--rich > ul > li,
	.nk-process-intro__bullet {
		font-size: var(--wp--preset--font-size--sm-md);
		gap: var(--wp--preset--spacing--2);
	}
}