/* --------------------------------------------------------------------------
   Process — Come Prepared (Figma 6272:970, 1440 x 577)

   Absolutely positioned in the frame, so every offset below is measured off it
   rather than inherited from the page gutter — the heading sits at 74, the media
   at 77 and the copy column at 589. The 3px between the heading and the media is
   real in the frame, so the row carries it as its own inline offset rather than
   rounding both to the 72px gutter.
   -------------------------------------------------------------------------- */

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

.wp-block-neilkelly-process-prepared.nk-process-prepared {
	/* Distance from the capped container's content edge to the window edge, the same
	   name and formula about-one-team, service-process and seven other blocks use. */
	--_bleed: max(0px, (100vw - var(--wp--custom--layout--max-width)) / 2);

	box-sizing: border-box;
	min-height: var(--wp--custom--components--process-page--prep-min-height);
	/* Even top and bottom. The frame measured 71/113, but the band now sits on a 400
	   photograph rather than a 230 one and the heavier foot read as a drift. */
	padding-block: var(--wp--custom--components--process-page--prep-pad-top);
	background-color: var(--wp--preset--color--surface-page);
}

/* The band stays full-bleed and the CONTENT is capped here, the same shape
   .nk-process-intro__container and .nk-tiers__container use — so this section holds the
   identical left edge to the ones above and below it at every width.

   It used to pad its own root instead (74 left / 72 right, no cap), which matched the
   1440 frame to within 2px and then drifted: the row's tracks are fixed at 1204, so
   nothing stretched, but the whole band stayed pinned to that 74px inset while its
   capped neighbours re-centred — 78px out at 1600, 238px at 1920, 558px at 2560.

   The gutter is used on BOTH sides rather than the frame's 74/72, because matching the
   neighbours exactly is the point; the frame's 2px was an artifact of the section being
   absolutely positioned in Figma. The row keeps its own 3px media offset, which is a
   relationship inside the section rather than a page measure. */
.wp-block-neilkelly-process-prepared .nk-process-prepared__container {
	box-sizing: border-box;
	max-width: var(--wp--custom--layout--max-width);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--gutter);
}

.wp-block-neilkelly-process-prepared .nk-process-prepared__heading {
	/* Size + case come from the shared .nk-headline--content class (mapped in
	   render.php); the ≤767 step-down below is (0,2,0) and still outranks it. */
	max-width: var(--wp--custom--components--process-page--prep-heading-width);
	margin: 0;
	font-weight: var(--wp--custom--font-weight--extrabold);
	/* A RATIO, not the frame's 61px. Fixed leading only held at the 50px desktop size —
	   the heading steps to 32 at the mobile breakpoint and 61px there is a 1.91 ratio,
	   which is what made it read so loose. xl is 1.222, matching the frame's 61/50 to
	   within half a pixel at desktop and scaling correctly below it. */
	line-height: var(--wp--custom--line-height--xl);
	color: var(--wp--preset--color--ink-primary);
}

.wp-block-neilkelly-process-prepared .nk-process-prepared__row {
	display: grid;
	/* The media track is derived from nk-service-process__media's own width token, so the
	   two photographs on this page end on the same line and cannot drift apart. That block
	   measures from the WINDOW edge (it bleeds by --_bleed alone); this one sits inside a
	   capped container, so its track is that width less the container's gutter and the 3px
	   the row is nudged in by. Both then bleed left to 0 and end at dp-media-width. */
	grid-template-columns:
		minmax(0, calc(
			var(--wp--custom--components--process-page--dp-media-width)
			- var(--wp--preset--spacing--gutter)
			- var(--wp--custom--components--process-page--prep-media-offset)
		))
		minmax(0, var(--wp--custom--components--process-page--prep-copy-width));
	column-gap: var(--wp--custom--components--process-page--prep-column-gap);
	align-items: start;
	margin-block-start: var(--wp--custom--components--process-page--prep-row-gap);
	margin-inline-start: var(--wp--custom--components--process-page--prep-media-offset);
}

/* The photo starts 2px below the copy in the frame. */
.wp-block-neilkelly-process-prepared .nk-process-prepared__media {
	/* A FLOOR, not a height: 400 is where the photograph starts, and align-self lets it
	   grow past that whenever the copy column beside it runs taller. The row is
	   align-items: start, so only this figure stretches — the copy keeps the centring
	   it sets for itself. */
	min-height: var(--wp--custom--components--process-page--prep-media-height);
	align-self: stretch;
	margin-block-start: var(--wp--custom--components--process-page--prep-media-nudge);
	/* overflow stays: the photograph is object-fit: cover, so the box still has to clip
	   it. Only the rounded outer corners have gone.
	   position: relative is what makes min-height mean anything here — the image below
	   is taken out of flow, so the figure keeps the floor rather than being pushed to
	   the photograph's own 778x1024 ratio. Same pairing about-design-build uses. */
	position: relative;
	overflow: hidden;
}

/* The photograph runs to the LEFT window edge. Its grid track stays 467 — the negative
   margin only moves the figure's left edge out, so the copy column and the row are
   untouched. The distance is everything between the track and the window: the container's
   centring offset, its gutter, and the 3px the row itself is nudged in by.

   Guarded to the two-column layout. Below 1024 the band stacks, the container's inset
   drops to 48/20 and the row loses its offset, so the same sum would overshoot — and a
   photograph bleeding left but not right reads as a mistake when it is full width. */
@media (min-width: 1024px) {
	.wp-block-neilkelly-process-prepared .nk-process-prepared__media {
		margin-inline-start: calc(
			-1 * (
				var(--_bleed)
				+ var(--wp--preset--spacing--gutter)
				+ var(--wp--custom--components--process-page--prep-media-offset)
			)
		);
	}
}

.wp-block-neilkelly-process-prepared .nk-process-prepared__image {
	/* Fills the figure at whatever height its min-height sets, and crops to it. Left in
	   flow it would size itself by its own aspect ratio and drag the figure with it. */
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wp-block-neilkelly-process-prepared .nk-process-prepared__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Centred against the photograph beside it. The row is align-items: start so the
	   picture keeps its own top edge; only this column re-centres, which is what puts
	   the copy on the middle of the 230 media rather than level with its top. A no-op
	   once the band stacks — a single-column row sizes to its content. */
	align-self: center;
	/* The column owns the spacing between the body and the CTA. It used to be a
	   margin-block-start on the button instead — two mechanisms for one gap, which is
	   how a 29 turns into a 121 the moment anyone adds the other. */
	gap: var(--wp--custom--components--process-page--prep-copy-gap);
}

.wp-block-neilkelly-process-prepared .nk-process-prepared__body {
	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--process-page--prep-body-line);
	color: var(--wp--preset--color--ink-secondary);
}

/* Same primary-CTA recipe the Build Phase and payments bands on this page use
   (service-cost-drivers __btn--primary) — 16/26 padding on a 1.5px edge lands the
   frame's 51px height exactly. Black on light per the CTA convention. */
.wp-block-neilkelly-process-prepared .nk-process-prepared__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	/* 16 + 16 + 16 on a 1.5px edge is the frame's 51; pinned so the browser's
	   half-pixel border rounding can't land it on 50. */
	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);
	color: var(--wp--preset--color--brand-white);
	text-decoration: none;
	background: var(--wp--preset--color--surface-dark);
	border: 1.5px solid var(--wp--preset--color--surface-dark);
	border-radius: var(--wp--custom--radius--lg);
	white-space: nowrap;
	transition: background-color 200ms ease, border-color 200ms ease;
}

.wp-block-neilkelly-process-prepared .nk-process-prepared__cta:hover,
.wp-block-neilkelly-process-prepared .nk-process-prepared__cta:focus-visible {
	background: var(--wp--preset--color--ink-primary);
	border-color: var(--wp--preset--color--ink-primary);
}

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

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1023px) {
	/* 36 at tablet, with the rest of the page's headings (50/36/28). */
	.wp-block-neilkelly-process-prepared .nk-process-prepared__heading {
		font-size: var(--wp--preset--font-size--xl);
	}

	.wp-block-neilkelly-process-prepared.nk-process-prepared {
		min-height: 0;
		padding-block: var(--wp--preset--spacing--16);
	}

	.wp-block-neilkelly-process-prepared .nk-process-prepared__container {
		padding-inline: var(--wp--preset--spacing--12);
	}

	.wp-block-neilkelly-process-prepared .nk-process-prepared__heading {
		max-width: none;
	}

	.wp-block-neilkelly-process-prepared .nk-process-prepared__row {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--wp--preset--spacing--8);
		margin-inline-start: 0;
	}

	.wp-block-neilkelly-process-prepared .nk-process-prepared__media {
		margin-block-start: 0;
	}

}

@media (max-width: 767px) {
	.wp-block-neilkelly-process-prepared .nk-process-prepared__media {
		min-height: var(--wp--custom--components--process-page--prep-media-height-mobile);
	}

	.wp-block-neilkelly-process-prepared.nk-process-prepared {
		padding-block: var(--wp--preset--spacing--12);
	}

	.wp-block-neilkelly-process-prepared .nk-process-prepared__container {
		padding-inline: var(--wp--preset--spacing--5);
	}

	.wp-block-neilkelly-process-prepared .nk-process-prepared__heading {
		font-size: var(--wp--preset--font-size--xl-sm);
	}

	/* The authored break belongs to the 859px measure; on one column it would
	   split the line in the wrong place. */
	.wp-block-neilkelly-process-prepared .nk-process-prepared__heading br {
		display: none;
	}

	.wp-block-neilkelly-process-prepared .nk-process-prepared__cta {
		width: 100%;
	}
}