/* Team member hero — individual page section 1 (components/team-hero/team-hero.php) */

/* Navy band that slides up behind the floating header card, like the home hero. */
.team-hero {
	background: var(--color-navy-mid); /* #1C3153 */
	color: var(--color-off-white);
	margin-top: calc(-1 * var(--header-sticky-h));
	padding-top: calc(var(--header-sticky-h) + 16px);
	overflow: hidden; /* clip the photo where it bleeds past the band */
}

.team-hero__inner {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 40px;
	align-items: end; /* photo sits flush with the bottom of the band */
	min-height: 540px;
}

/* Left text — vertically centred, indented so it aligns with the Figma (not the
   far content edge). */
.team-hero__text {
	align-self: center;
	padding: 40px 0 80px 56px;
	width: fit-content; /* shrink to the title so the role can centre under it */
}
.team-hero__name {
	font-family: var(--font-display);
	font-weight: var(--weight-regular);
	font-size: 82px;
	line-height: 88px; /* Figma */
	letter-spacing: -0.02em; /* Figma: -2% */
	margin: 0 0 12px;
}
.team-hero__meet { color: var(--color-off-white); }
.team-hero__role {
	font-family: var(--font-body);
	font-weight: var(--weight-regular);
	font-size: 18px;
	color: var(--color-off-white); /* F7F9F8 */
	text-align: center; /* centred under the title (Figma) */
	margin: 0;
}

/* Right photo — bottom-aligned, sits just right of the title (navy to its right). */
.team-hero__media {
	align-self: end;
	display: flex;
	justify-content: flex-start;
}
.team-hero__media img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 600px;
	object-fit: contain;
	object-position: bottom;
}

@media (max-width: 1024px) {
	.team-hero__inner { min-height: 440px; }
	.team-hero__name { font-size: 64px; line-height: 1.07; }
	.team-hero__text { padding-left: 24px; }
}
@media (max-width: 768px) {
	.team-hero__inner { grid-template-columns: 1fr; align-items: center; text-align: center; min-height: 0; }
	.team-hero__text { padding: 24px 0 32px; }
	.team-hero__name { font-size: 40px; }
	.team-hero__media { justify-content: center; }
	.team-hero__media img { max-height: 420px; }
}