/* ==========================================================================
   About — One Team, Start to Finish (neilkelly/about-one-team)
   Figma: About / Section 2 One Team (4721:423), desktop frame 1440x945

   Measured values (settings.custom.components.about):

     section    bg surface-section, pad 64 top / 120 bottom, gutter left only
     copy col   x=72   w=605          — heading 50/800 lh 60.5 (1.2)
     body       30/400 lh 42.6 (1.42), 24px between paragraphs
     image      x=748  w=691 h=800    — runs flush to the RIGHT viewport edge
     caption    13/400 lh 15.7 (1.2), 421px, 12px under the image

   The image bleeding off the right edge is the point of the composition; the
   generated CSS inset it inside the content width and lost that.
   ========================================================================== */

.nk-about-one-team {
	/* WP core gives blocks a 24px margin-block-start; these are full-bleed
	   panels that must butt against their neighbours. */
	margin: 0;
	--nk-about-one-team-heading-size: var(--wp--preset--font-size--xxl);
	--nk-about-one-team-copy-size: var(--wp--preset--font-size--lg);
	--nk-about-one-team-columns:
		var(--wp--custom--components--about--one-team-copy-col)
		var(--wp--custom--components--about--one-team-image-col);

	box-sizing: border-box;
	width: 100%;
	padding-block: var(--wp--preset--spacing--16) var(--wp--custom--components--about--one-team-pad-bottom);
	background-color: var(--wp--preset--color--surface-section);
	font-family: var(--wp--preset--font-family--inter);
}

/* Capped at the layout max-width and centred, so the copy column's left edge sits on
   the same line as every other section's text. The gutter alone pins the copy to the
   window, which matches nothing above 1440: service-process and service-cta-close
   both centre a 1440 box, so on a 1920 viewport their text starts at 312px while this
   section's started at 72px. Identical below 1440, where the cap doesn't bind. */
.nk-about-one-team__container {
	display: grid;
	grid-template-columns: var(--nk-about-one-team-columns);
	column-gap: var(--wp--preset--spacing--gutter);
	max-width: var(--wp--custom--layout--max-width);
	margin-inline: auto;
	/* stretch, not start: the photograph's height follows the copy column (see
	   __image). The copy reads top-aligned with it, because __body is a column flex
	   whose content starts at its top edge — unless is-centered-copy is on. */
	align-items: stretch;
	box-sizing: border-box;
	/* Left gutter only — the image column runs to the viewport edge. */
	padding-left: var(--wp--preset--spacing--gutter);
}

/* ---------- Copy ---------- */

.nk-about-one-team__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--6);
}

/* --------------------------------------------------------------------------
   Modifier: is-centered-copy
   Centres the copy in the column the photograph's floor stretches open, rather
   than leaving it at the top. Added 2026-08-14 at Shawn's request for the About
   page. This block has no second consumer today, so the modifier isn't strictly
   needed to protect one — it is opt-in to stay symmetrical with the same class on
   about-design-build (which does have one, the Why page) and to keep the
   alignment visible in the template rather than buried in the base rule.

   Two things follow from the stretch relationship above, neither of them faults:
   it only bites while the copy is SHORTER than the image floor — longer copy sets
   the row height itself and leaves no slack to distribute — and it is a no-op on
   mobile, where the grid collapses to one column and __body is content-height.

   Note the copy centres against the whole media column, image AND figcaption,
   because the caption sits inside the same figure. Its optical centre is therefore
   slightly below the photograph's.
   -------------------------------------------------------------------------- */
.nk-about-one-team.is-centered-copy .nk-about-one-team__body {
	justify-content: center;
}

.nk-about-one-team__heading {
	margin: 0;
	font-size: var(--nk-about-one-team-heading-size);
	font-weight: var(--wp--custom--font-weight--extrabold);
	line-height: var(--wp--custom--line-height--lg-tight);
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-black);
}

/* Font style (size / weight / line-height) is kept in sync with
   .nk-person-philosophy__body, .nk-location-brand__body, .nk-about-founded__copy and
   .nk-why-intro__body — all five are the same large-prose treatment and share one set of
   tokens. CHANGE ALL FIVE TOGETHER (each of those carries the same note; the Why intro
   joined on 2026-08-13).

   Brought onto that treatment 2026-08-12 at Shawn's request, from 30px (lg-xl) at the
   1.42 line-height tuned to that size. One size at every width now: the old lg tablet
   step equals the new base and the md mobile step would have dropped BELOW it.

   Colour is deliberately NOT synced — the other three sit on white, this sits on the
   tinted section surface. The shared treatment is typographic, not chromatic. */
.nk-about-one-team__copy {
	margin: 0;
	font-size: var(--nk-about-one-team-copy-size);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--md-tight);
	color: var(--wp--preset--color--surface-footer);
}

/* ---------- Media ---------- */

.nk-about-one-team__media {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
	margin: 0;
	/* The photograph running off the RIGHT viewport edge is the composition, and the
	   container's cap above would have ended it at 1440. The negative margin gives the
	   grid item back exactly the centring offset, so its right edge is the window edge
	   again while its left edge — and the copy column — stay where the grid put them.
	   Mirrors the media bleed in service-process. Floors at 0 below 1440. */
	--_bleed: max(0px, (100vw - var(--wp--custom--layout--max-width)) / 2);
	margin-right: calc(-1 * var(--_bleed));
}

/* Same intent as about-design-build and service-process — the photograph's height
   follows the copy column, with a floor (800px, its Figma height) so short copy
   can't shrink it, and object-fit: cover absorbing the difference.

   The mechanism differs because this figure ALSO carries the figcaption: an image
   positioned absolutely to fill it, as in those two blocks, would sit over the
   caption. So the image stretches as the figure's flex item instead — flex-basis is
   the floor, flex-grow takes the slack the copy column creates, and the caption
   keeps its own natural height below. */
.nk-about-one-team__image {
	display: block;
	width: 100%;
	flex: 1 1 var(--wp--custom--components--about--one-team-image-min-height);
	min-height: var(--wp--custom--components--about--one-team-image-min-height);
	object-fit: cover;
	object-position: center;
}

.nk-about-one-team__caption {
	max-width: var(--wp--custom--components--about--one-team-caption-width);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--lg-tight);
	color: var(--wp--preset--color--ink-secondary);
}

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

@media (max-width: 1023px) {
	.nk-about-one-team {
		--nk-about-one-team-heading-size: var(--wp--preset--font-size--xl);
	}

	.nk-about-one-team__container {
		column-gap: var(--wp--preset--spacing--10);
		padding-left: var(--wp--preset--spacing--12);
	}

	/* Still two columns here, so the stretch relationship holds — only the floor
	   comes down, since the narrower column would otherwise crop 800px of photo into
	   a much taller portrait than the design's. */
	.nk-about-one-team__image {
		flex-basis: var(--wp--custom--components--about--one-team-image-min-height-tablet);
		min-height: var(--wp--custom--components--about--one-team-image-min-height-tablet);
	}
}

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

@media (max-width: 767px) {
	.nk-about-one-team {
		--nk-about-one-team-heading-size: var(--wp--preset--font-size--xl-sm);
		--nk-about-one-team-columns: minmax(0, 1fr);

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

	.nk-about-one-team__container {
		row-gap: var(--wp--preset--spacing--8);
		padding-left: 0;
	}

	.nk-about-one-team__body {
		padding-inline: var(--wp--preset--spacing--6);
	}

	/* Single column here: there is no copy column to match, so the image goes back to
	   sizing itself — and with it the aspect-ratio, which is what holds the layout
	   stable while the photo loads.
	   Shared with about-design-build: both images drop their tall desktop crop for
	   the same landscape one at this width. */
	.nk-about-one-team__image {
		flex: 0 1 auto;
		min-height: 0;
		height: auto;
		aspect-ratio: var(--wp--custom--components--about--image-aspect-mobile);
	}

	.nk-about-one-team__caption {
		max-width: none;
		padding-inline: var(--wp--preset--spacing--6);
	}
}