/* PTE Page Banner — interior page header */

/* Establish stacking context so teal selector can slide under with lower z-index */
.pte-page-banner { position: relative; z-index: 2; }

.pte-page-banner__bg {
	--pb-edge: clamp(1.25rem, 9.8vw, 140px);   /* match the report's 140px gutter */
	position: relative;
	min-height: clamp(420px, 46vw, 660px);
	display: flex;
	align-items: flex-end;                     /* content sits low in the banner */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--pte-blue-dark, #005474);
	border-radius: 0 0 clamp(24px, 3vw, 50px) clamp(24px, 3vw, 50px);
	overflow: hidden;
}
.pte-page-banner__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(0,40,60,.62) 0%, rgba(0,40,60,.30) 55%, rgba(0,40,60,.08) 100%);
	pointer-events: none;
}
/* Darker navy strip across the top of the banner, behind the eyebrow. */
.pte-page-banner__bg::before {
	content: ""; position: absolute; left: 0; right: 0;
	top: clamp(28px, 3.2vw, 46px); height: clamp(44px, 4.2vw, 61px);
	background: #204663; z-index: 1;
}
.pte-page-banner .container {
	position: relative; z-index: 2;
	max-width: none !important; width: 100%; margin: 0;
	padding-left: var(--pb-edge); padding-right: var(--pb-edge);
	box-sizing: border-box;
}
.pte-page-banner__content { max-width: 1160px; color: #fff; padding: 0 0 clamp(40px, 5vw, 72px); }
/* Green eyebrow on the navy strip, aligned to the 140px gutter. */
.pte-page-banner__eyebrow {
	position: absolute; z-index: 3;
	top: clamp(30px, 3.6vw, 52px); left: var(--pb-edge);
	background: #00a94f; color: var(--pte-ink, #251e20);
	font-size: clamp(.9rem, 1.15vw, 1.0625rem); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
	padding: .85rem 1.5rem; border-radius: 8px; margin: 0; line-height: 1;
}
.pte-page-banner__title { color: #fff; font-size: clamp(2.25rem, 5vw, 4.5rem); line-height: 1.167; font-weight: 700; margin: 0; }
.pte-page-banner__subtitle { font-size: clamp(1.25rem, 2.22vw, 2rem); font-weight: 500; line-height: 1.4; margin-top: clamp(1rem, 2vw, 1.75rem); max-width: 1004px; color: #fff; }
.pte-page-banner__subtitle p { margin: 0; }

/* In-banner year navigation (jumps to page anchors). */
.pte-page-banner__yearnav { margin-top: clamp(2.25rem, 4.4vw, 4rem); }
.pte-page-banner__yearnav-pill {
	display: inline-flex; flex-wrap: wrap; align-items: center; gap: .7rem;
	border: 2.5px solid rgba(255, 255, 255, .75); border-radius: 28px; padding: 1rem 1.15rem;
	max-width: 100%;
}
/* Each year is its own outlined pill; the active one is a solid lime fill. */
.pte-page-banner__yeartab {
	display: inline-block; padding: .8rem 1.7rem; border-radius: 999px;
	border: 1.5px solid rgba(255, 255, 255, .55);
	color: #fff; font-weight: 300; font-size: clamp(1rem, 1.25vw, 1.125rem);
	text-decoration: none; white-space: nowrap; transition: background .15s, color .15s, border-color .15s;
}
.pte-page-banner__yeartab:hover,
.pte-page-banner__yeartab:focus-visible { background: rgba(255, 255, 255, .18); }
.pte-page-banner__yeartab.is-active { background: var(--pte-lime, #c3df6c); color: var(--pte-ink, #251e20); border-color: transparent; }

/* --- Lime / light theme (Supporters cluster) --------------------------------
   Green background (--pte-lime) with dark text. No dark scrim overlay.
   Navy strip (::before) is kept — it's part of the eyebrow design.
   In Figma/Astro: lime band 1019px tall, title colour #000, intro colour #000.
*/
.pte-page-banner--lime .pte-page-banner__bg {
	background-color: var(--pte-lime, #c3df6c);
}
.pte-page-banner--lime .pte-page-banner__scrim {
	display: none;
}
.pte-page-banner--lime .pte-page-banner__bg::before {
	background: var(--pte-navy, #00142a); /* Figma navy strip: #00142a / var(--navy) */
}
.pte-page-banner--lime .pte-page-banner__content { color: #000; }
.pte-page-banner--lime .pte-page-banner__title { color: #000; }
.pte-page-banner--lime .pte-page-banner__subtitle { color: #000; }
.pte-page-banner--lime .pte-page-banner__eyebrow {
	background: var(--pte-green, #00a94f);
	color: #000;
}

/* Alumni page: Figma shows lime (#aecf46) eyebrow, not the default green */
.page-id-2327 .pte-page-banner__eyebrow { background: #aecf46; }

@media (max-width: 1200px) {
	.pte-page-banner__bg { --pb-edge: clamp(1.25rem, 5vw, 72px); }
}