/* ==========================================================================
   Person Hero (neilkelly/person-hero)
   Figma: Designer Profile / Hero (1149:409) — LIGHT redesign, supersedes 1051:247.
   Dark strip behind the transparent header → full-bleed decorative photo band →
   headshot (left, overlapping the band) beside the identity column (right,
   bottom-aligned): name, role, credential pills, Specialties, years stats.
   Token-driven, plain CSS.
   Wrapper: .wp-block-neilkelly-person-hero.nk-person-hero
   ========================================================================== */
.nk-person-hero {
	position: relative;
	box-sizing: border-box;
	/* The nav row's top pad on a profile — tighter than the site-wide 33px. Comes from
	   the shared components.person.hero-nav-pad token, which blocks/site-header also
	   reads for its .single-person override of --nk-header-top-pad. ONE number in
	   theme.json drives both: this sets how tall the dark strip is, that sets how tall
	   the header actually renders, and any mismatch would show as a dark sliver under
	   the nav or white behind it. Retune it in theme.json, not here. */
	--nk-person-hero-header-top-pad: var(--wp--custom--components--person--hero-nav-pad);
	/* The transparent header overlay this hero sits under, with the nav row's top pad
	   counted TWICE: once for the real space above the nav, once again below it — so the
	   dark region carries the same 16px past the header's bottom edge before the photo
	   band starts, leaving the nav optically centred in the dark instead of cut off
	   flush. Counting the pad rather than adding a separate value keeps the two halves
	   equal if that pad ever changes.
	   Drives the strip height, the band's top and the content's top offset together, so
	   they can't drift apart. */
	--nk-person-hero-topbar: calc( var(--wp--custom--components--site-header--announcement-height) + ( var(--nk-person-hero-header-top-pad) * 2 ) + var(--wp--custom--layout--header--height) );
	/* Light body — the dark strip below is the only dark region now. */
	background: var(--wp--preset--color--surface-page);
	/* Symmetric gutter, like every other section: the content box must line up with
	   the header and the blocks below. Figma's deep right inset is a constraint on the
	   identity COPY, not on the container — it lives on __identity's max-width. (As
	   section padding it made this box 1176 wide at 1440 and, past 1440, de-centered it
	   ~60px left of every other block.) */
	padding: calc( var(--nk-person-hero-topbar) + var(--wp--custom--components--person--hero-pad-top) ) var(--wp--preset--spacing--gutter) var(--wp--custom--components--person--hero-pad-bottom);
	font-family: var(--wp--preset--font-family--inter);
	overflow: hidden;
}

/* No Hero Background band selected: the tall top pad (tuned so the photo overlaps the
   band) leaves a big empty gap under the header. Match the top gap to the space below the
   photo, measured to the breadcrumb trail: hero-pad-bottom (photo → hero end) + the
   breadcrumbs bar's own top padding (spacing--8, hero end → nk-breadcrumbs__trail). */
.nk-person-hero--no-band {
	padding-top: calc( var(--nk-person-hero-topbar) + var(--wp--custom--components--person--hero-pad-bottom) + var(--wp--preset--spacing--8) );
}

/* Dark strip behind the transparent site header (which keeps its white nav/logo on
   person pages). Sized to the overlay height so the seam lands exactly where the
   header ends and the decorative band begins. */
.nk-person-hero__topbar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--nk-person-hero-topbar);
	background: var(--wp--preset--color--surface-dark);
	z-index: 0;
}

/* Decorative photo band, full-bleed, starting where the strip ends. Sits behind the
   content so the headshot card can overlap it (Figma: card crosses the band's
   lower edge). */
.nk-person-hero__band {
	position: absolute;
	top: var(--nk-person-hero-topbar);
	left: 0;
	right: 0;
	height: var(--wp--custom--components--person--hero-band-height);
	z-index: 0;
	pointer-events: none;
	background: var(--wp--preset--color--surface-section);
}

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

/* Figma lays this out at 1440 where the asymmetric padding already stops the copy
   short of the edge, so the cap is inactive at and below that width and only kicks
   in on wider screens — keeping the composition from bleeding, same intent as the
   previous dark version. */
.nk-person-hero__content {
	position: relative;
	z-index: 1;
	max-width: var(--wp--custom--layout--content-width);
	margin-inline: auto;
	display: flex;
	/* Equal-height columns: the identity stretches to the headshot card so its own
	   top pad — not its content height — decides where the name lands. Only the card
	   is meant to cross the band's lower edge (Figma 1149:409: band 96–372, card
	   236–806, name 413.5). Centering or bottom-aligning would let the name drift
	   with the amount of copy and, on a full profile, print it over the band. */
	align-items: stretch;
	gap: var(--wp--preset--spacing--gutter);
}

.nk-person-hero__photo {
	flex: 0 0 var(--wp--custom--components--person--hero-image-width);
	width: var(--wp--custom--components--person--hero-image-width);
	height: var(--wp--custom--components--person--hero-image-height);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	background: var(--wp--preset--color--surface-section);
}

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

/* Identity fills the rest of the row and is stretched to the card's height by the
   parent. The top pad measures the card top → name distance from Figma (413.5 − 236),
   so the name always clears the band regardless of how much copy follows; the rest of
   the column flows down from there and the stats land near the card's lower edge on a
   full profile. */
.nk-person-hero__identity {
	flex: 1 1 auto;
	min-width: 0;
	/* Figma's Identity frame is 724 of the 1296 content box (524 → 1248), stopping the
	   copy short of the content edge while the container itself stays aligned with the
	   header. Inactive below ~1320px, where the column is already narrower than this. */
	max-width: var(--wp--custom--components--person--hero-identity-max);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	padding-top: var(--wp--custom--components--person--hero-identity-pad-top);
	gap: var(--wp--preset--spacing--5);
}

.nk-person-hero__name {
	margin: 0;
	/* Case comes from the shared .nk-headline--content class (mapped in render.php);
	   the size is overridden here because this hero uses the larger hero step. */
	font-size: var(--wp--preset--font-size--hero);
	font-weight: var(--wp--custom--font-weight--extrabold);
	line-height: var(--wp--custom--line-height--none);
	letter-spacing: var(--wp--custom--components--person--hero-name-tracking);
	color: var(--wp--preset--color--ink-primary);
}

.nk-person-hero__role {
	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-primary);
}

.nk-person-hero__creds {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2);
}

/* Outlined pill — the border is now dark-on-light (was white-on-dark). */
.nk-person-hero__cred {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4-5);
	border: 1px solid var(--wp--custom--components--person--hero-cred-border);
	border-radius: var(--wp--custom--radius--full);
	font-size: var(--wp--preset--font-size--sm);
	line-height: var(--wp--custom--line-height--snug);
	font-weight: var(--wp--custom--font-weight--semibold);
	letter-spacing: var(--wp--custom--components--person--hero-cred-tracking);
	color: var(--wp--preset--color--ink-primary);
}

/* --- Specialties (absorbed from the removed standalone section) --- */
/* Capped narrower than the identity column so the tags wrap onto their second row
   where Figma breaks them (Specialties Section, 5768:108, is 579 of the column's 724)
   instead of running the full width. */
.nk-person-hero__specialties {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--4);
	width: 100%;
	max-width: var(--wp--custom--components--person--hero-specialties-max);
}

/* Reads as an overline, not a section title — small, uppercase, tracked out. */
.nk-person-hero__specialties-heading {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm-md);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--none);
	letter-spacing: var(--wp--custom--components--person--hero-specialties-tracking);
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-primary);
}

.nk-person-hero__specialty-tags {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--2-5);
}

/* Filled tag on the subtle surface — distinct from the outlined credential pills
   above it, which is how the design separates the two rows at a glance. The 15px
   step only exists as the ui-nav token. */
.nk-person-hero__specialty-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
	background: var(--wp--preset--color--surface-subtle);
	border-radius: var(--wp--custom--radius--lg);
	font-size: var(--wp--preset--font-size--ui-nav);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--none);
	color: var(--wp--preset--color--ink-primary);
}

/* --- Stats --- */
.nk-person-hero__stats {
	margin: 0;
	display: flex;
	gap: var(--wp--custom--components--person--hero-stats-gap);
	padding-top: var(--wp--preset--spacing--1);
}

/* column-reverse: value sits above the label visually, while the DOM keeps
   dt (label) before dd (value) so screen readers read "label: value". */
.nk-person-hero__stat {
	display: flex;
	flex-direction: column-reverse;
	gap: var(--wp--preset--spacing--1);
}

.nk-person-hero__stat-value {
	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);
}

.nk-person-hero__stat-label {
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--snug);
	letter-spacing: var(--wp--custom--components--person--hero-stat-label-tracking);
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-primary);
}

/* --- Responsive --- */
@media (max-width: 1023px) {
	.nk-person-hero {
		/* Tighter than the desktop gutter — at tablet width the full gutter starves the
		   identity column. Kept symmetric so the box stays centred. */
		padding-right: var(--wp--preset--spacing--12);
		padding-left: var(--wp--preset--spacing--12);
	}
	.nk-person-hero__content {
		gap: var(--wp--preset--spacing--12);
	}
	.nk-person-hero__name {
		font-size: var(--wp--preset--font-size--xxl);
	}
}

@media (max-width: 767px) {
	.nk-person-hero {
		/* Mobile header is the row only — no announcement bar or top pad. */
		--nk-person-hero-topbar: var(--wp--custom--layout--header--height);
		padding: calc( var(--nk-person-hero-topbar) + var(--wp--preset--spacing--10) ) var(--wp--preset--spacing--6) var(--wp--preset--spacing--16);
	}
	/* Shorter band: at full height it would swallow the stacked photo. */
	.nk-person-hero__band {
		height: var(--wp--preset--spacing--24);
	}
	/* Stack photo above identity (DOM order), centered. */
	.nk-person-hero__content {
		flex-direction: column;
		align-items: center;
		gap: var(--wp--preset--spacing--8);
		text-align: center;
	}
	/* Reset the desktop flex-basis (an intended WIDTH) so it doesn't become a
	   fixed HEIGHT in the mobile column layout — lets the hero size to content. */
	.nk-person-hero__photo {
		flex-basis: auto;
		width: 100%;
		max-width: var(--wp--custom--components--person--hero-image-width);
		height: auto;
		aspect-ratio: 380 / 570;
	}
	.nk-person-hero__identity {
		flex-basis: auto;
		width: 100%;
		align-items: center;
		/* Drop the desktop top pad: it measures the card-top → name gap in the
		   side-by-side layout, and here the identity sits BELOW the photo. */
		padding-top: 0;
		text-align: center;
	}
	.nk-person-hero__name {
		font-size: var(--wp--preset--font-size--xl-md);
	}
	.nk-person-hero__creds,
	.nk-person-hero__specialty-tags {
		justify-content: center;
	}
	.nk-person-hero__specialties {
		align-items: center;
	}
	.nk-person-hero__stats {
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--wp--preset--spacing--6);
	}
}

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