/**
 * Subpage hero (Figma node 390:1880, values per the designer's spec rather
 * than the sketch). A .band with a full-bleed photo, a dark panel cut across
 * it at a true 60 degrees, and bottom-aligned content in the left half.
 *
 * Shared by every subpage template (References, About, Contact,
 * Certifications, Career) via template-parts/components/page-hero.php.
 */

.page-hero {
	display: flex;
	align-items: flex-end; /* content sits on the bottom edge, as on the homepage hero */
	min-height: 50svh; /* a floor, never a fixed height: the band grows with content */
}

/* --------------------------------------------------------------------
 * The photo, constrained to the right half above the switch
 *
 * The panel covers the left half, so the photo only ever shows to the right
 * of it and a full-bleed image spends half its pixels behind an opaque
 * shape. 50% is exactly the right cut-off, not an approximation: the panel's
 * edge reaches 50% only at the band's BOTTOM, and rises to the right from
 * there at 60 degrees, so at every other height it covers more than half.
 * 50% is therefore the leftmost point the photo is ever visible, and nothing
 * that was on screen is lost.
 *
 * This also changes the default crop. The box used to be the whole band, so
 * `cover` centred the photo across it and the visible right half showed the
 * photo's RIGHT side; the box is now the right half itself, so the same
 * `cover` shows the photo's CENTRE. That is intended, and sub_image_position
 * is there to move it when a particular photo wants otherwise.
 * -------------------------------------------------------------------- */

@media (min-width: 1025px) {
	.page-hero .band__media {
		left: 50%;
		right: auto;
		width: 50%;
	}
}

/* --------------------------------------------------------------------
 * The 60 degree cut
 *
 * Same technique as the what-we-do polygon, and for the same reason: a
 * clip-path alone cannot hold a constant angle at an unknown height, because
 * its percentage coordinates stretch with the box. So an oversized shape of
 * FIXED height carries the angle, and an overflow-hidden wrapper performs the
 * horizontal cut at whatever height the band turns out to be.
 *
 * Anchoring the shape to the bottom is what puts the 50% point exactly on the
 * band's bottom edge: the shape is 2000px tall whatever the band does, and
 * the wrapper clips away everything above the band's top. At the bottom of
 * the shape the right edge sits at (50% + 2000/tan60) - 2000/tan60 = 50%,
 * and it moves right as it rises at exactly 60 degrees from horizontal.
 * -------------------------------------------------------------------- */

.page-hero__cut {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 1; /* over the photo, under the content */
}

.page-hero__cut::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	height: 2000px; /* oversized on purpose; the wrapper cuts it to the band */
	width: calc(50% + 2000px / tan(60deg));
	background-color: var(--color-surface-darkest);
	clip-path: polygon(0 0, 100% 0, calc(100% - 2000px / tan(60deg)) 100%, 0 100%);
}

/* --------------------------------------------------------------------
 * Content
 * -------------------------------------------------------------------- */

.page-hero__content {
	position: relative;
	z-index: 2;
	padding-block: 4rem; /* 64px, matching the homepage hero */
}

/* The container is centred in the band, so the band's 50% line falls at
   exactly half the container's width. The column is therefore half the
   container minus a gutter, and no part of this has to know the band width.
   The 32px gutter is the designer's ruling: it keeps text off the diagonal. */
.page-hero__column {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2rem; /* 32px */
	max-width: calc(50% - 32px);
}

.page-hero__headline {
	color: var(--color-heading-text-on-dark);
}

.page-hero__text {
	font-size: var(--type-body-lg-size);
	line-height: var(--type-body-lg-line);
	letter-spacing: var(--type-body-lg-spacing);
	font-weight: var(--type-body-lg-weight);
	color: var(--color-body-text-on-dark);
}

/* --------------------------------------------------------------------
 * Gradient variant (careers)
 *
 * The same hero: same band, same 60 degree cut, same inset and radius, same
 * column geometry. Two surfaces change and the type follows them.
 *
 * The band's own background changes too, which is not decoration. Below 1024
 * the cut is display: none and the content sits directly on the band, so a
 * band left at --color-surface-darkest would put dark text on a dark panel.
 * -------------------------------------------------------------------- */

.page-hero--gradient {
	background-color: var(--color-page-bg);
}

.page-hero__gradient {
	background-image: linear-gradient(
		135deg,
		var(--color-gradient-start) 0%,
		var(--color-gradient-end) 100%
	);
}

/* The cut carries the page background instead of the darkest surface. Only
   the colour differs: the shape, the 2000px height and the 60 degree
   clip-path are inherited from the rule above and never restated. */
.page-hero--gradient .page-hero__cut::before {
	background-color: var(--color-page-bg);
}

/* Light surface, so the light-surface type tokens. The eyebrow needs nothing
   here: it simply does not get --on-dark, so .eyebrow's own colours apply. */
.page-hero--gradient .page-hero__headline {
	color: var(--color-heading-text);
}

.page-hero--gradient .page-hero__text {
	color: var(--color-body-text);
}

/* --------------------------------------------------------------------
 * PROVISIONAL responsive (<=1024)
 *
 * NOT DESIGNED YET. Milan is doing this in Figma; replace this whole block
 * when that lands, do not extend it. The diagonal is a wide-screen device
 * (half a phone width leaves no room for a headline), so the provisional
 * stack drops it entirely: photo on top, content below on the band's own dark
 * background, full container width.
 * -------------------------------------------------------------------- */

@media (max-width: 1024px) {
	/* min-height is deliberately NOT reset here: the 50svh floor holds at
	   every width, matching desktop and matching the homepage hero, which
	   also stays full height on mobile. Only the internal layout changes. */
	.page-hero {
		display: block;
	}

	/* Out of the absolute media slot and into flow, above the content. */
	.page-hero .band__media {
		position: relative;
		height: 15rem; /* 240px, provisional */
	}

	/* No diagonal at this width. The dark panel below the photo is the band's
	   own background, so nothing needs to draw it. */
	.page-hero__cut {
		display: none;
	}

	.page-hero__content {
		padding-block: 3rem; /* 48px, provisional */
	}

	.page-hero__column {
		max-width: none;
	}
}