/* hero-page — Figma 243:685 (ethics code frame 243:684): the navy name box.
   Every value from tokens (R8), logical properties (R9); the box's height comes
   from its text column + padding tokens, never from the Figma frame (R4).
   Shares its vocabulary with hero-home, mirrored and on navy. */

.hero-page {
	display: flow-root; /* keeps the box's negative end margin inside the section (no collapse) */
	position: relative;
	isolation: isolate;
	overflow: clip; /* the box's rounded bottom and the portrait run on under the title band */
	padding-block-start: var(--space-hero-page-top);
	padding-inline: var(--gutter);
}

/* ---- The box (navy, radius 40, soft shadow) ----
   Three tracks, right to left (RTL): the portrait's area, the text column, the
   empty end padding. Figma widths 601 / 451 / 149 of the 1201px box, kept as
   ratios so the column narrows with the box. */

.hero-page__box {
	position: relative;
	container-type: inline-size; /* the portrait's offsets scale with the box */
	display: grid;
	grid-template-columns: minmax(0, 601fr) minmax(0, 451fr) minmax(0, 149fr);
	max-inline-size: 75.0625rem; /* lint-ok: 1201px — the Figma box width, a cap */
	margin-inline: auto;
	/* The bottom edge (its rounded corners) sits under the title band: the
	   section ends one radius before the box does, as in Figma. */
	margin-block-end: calc(-1 * var(--radius-lg));
	padding-block: var(--space-box-page);
	border-radius: var(--radius-lg);
	background: var(--color-ink);
	color: var(--color-surface);
	box-shadow: var(--shadow-box-soft);
}

.hero-page__content {
	position: relative;
	z-index: 1;
	grid-column: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start; /* RTL: the column's right edge, as in Figma */
}

.hero-page__heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-fluid-sm);
	align-self: stretch;
}

/* Flower + stem on the visual LEFT, the cream line to its RIGHT, bottoms
   aligned. RTL: the line is the first child (right), the flower second (left). */
.hero-page__mark {
	display: flex;
	align-items: flex-end;
	inline-size: 100%;
}

.hero-page__mark-line {
	flex: 1 1 0;
	border-block-start: 2px solid var(--color-surface);
}

.hero-page__deco-flower {
	flex: none;
	inline-size: 63.3%; /* 285 of 451px */
	block-size: auto;
	margin-inline-start: -4%; /* Figma: the flower overlaps the line by 18px */
}

.hero-page__title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-hero-name);
	font-weight: var(--fw-regular);
	text-align: center;
}

.hero-page__name,
.hero-page__tagline {
	display: block;
	text-box: trim-both cap alphabetic;
	white-space: nowrap; /* one line each, as in Figma, while the box is side-by-side */
}

.hero-page__name {
	font-size: var(--fs-800);
	letter-spacing: var(--tracking-name);
	margin-inline-end: calc(-1 * var(--tracking-name)); /* drop the trailing tracking so centring matches Figma */
}

.hero-page__tagline {
	font-size: var(--fs-700);
	font-weight: var(--fw-light);
	letter-spacing: var(--tracking-tagline);
	margin-inline-end: calc(-1 * var(--tracking-tagline));
}

.hero-page__text {
	position: relative;
	inline-size: fit-content;
	margin-block-start: var(--space-fluid-lg);
	font-size: var(--fs-500);
}

.hero-page__cfp-logo {
	position: absolute;
	inset-block-start: calc(var(--size-cfp) * -0.545); /* Figma: 54 of 99px above the text */
	inset-inline-end: 0;
	inline-size: var(--size-cfp);
	block-size: auto;
}

.hero-page__cta {
	margin-block-start: var(--space-fluid-lg);
}

/* Portrait: the RIGHT 53.3% of the box (640 of 1201px), 39.5px past its right
   edge, 29px below its top, spilling below the box under the title band.
   Positioned so the text column — not the photo — defines the box's height. */
.hero-page__portrait {
	position: absolute;
	inset-block-start: 2.415cqi; /* 29 of 1201px */
	inset-inline-start: -3.29%; /* RTL: past the box's right edge */
	inline-size: 53.29%;
	block-size: auto;
	pointer-events: none;
}

/* ---- Tablet + phone: the home hero's profile card, on navy ----
   Same treatment the client approved for hero-home (2026-09-24): a round
   profile photo straddling the box's top edge (white ring, cream→navy
   gradient behind the cut-out), the flower centred above the name. */

@media (max-width: 1023px) { /* bp: --bp-lg — the text column gets too narrow beside the photo */
	.hero-page {
		--hero-avatar: min(52vw, 17.5rem); /* lint-ok: phone/tablet avatar size, capped */
		padding-block-start: calc(var(--space-hero-page-top) + var(--hero-avatar) / 2);
	}
	.hero-page__box {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-block: 0 calc(var(--space-box-page) + var(--radius-lg)); /* the band covers one radius */
		padding-inline: var(--space-box-side);
	}
	.hero-page__portrait {
		position: static;
		order: -1;
		inline-size: var(--hero-avatar);
		aspect-ratio: 1;
		margin-block: calc(var(--hero-avatar) / -2) var(--space-fluid-sm);
		border: 5px solid var(--color-white); /* lint-ok: avatar ring */
		border-radius: var(--radius-full);
		background: linear-gradient(135deg, var(--color-surface) 20%, var(--color-ink)); /* same palette as the about photo card */
		box-shadow: var(--shadow-box);
		object-fit: cover;
		object-position: 50% 0; /* head and shoulders */
	}
	.hero-page__content {
		max-inline-size: 30rem; /* lint-ok: comfortable phone measure */
		align-items: center;
		text-align: center;
	}
	.hero-page__mark {
		justify-content: center;
	}
	.hero-page__mark-line {
		display: none;
	}
	.hero-page__deco-flower {
		inline-size: 45%;
		margin-inline-start: 0;
	}
	.hero-page__name,
	.hero-page__tagline {
		white-space: normal;
	}
	.hero-page__text {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-4);
	}
	.hero-page__cfp-logo {
		position: static;
		order: -1;
	}
	.hero-page__text,
	.hero-page__cta {
		margin-block-start: var(--space-fluid-md);
	}
}

@media (max-width: 767px) { /* bp: --bp-md */
	.hero-page__deco-flower {
		inline-size: 38%;
	}
}