/*
 * Hero. design/DESIGN-SYSTEM.md §5.4 (media treatment), §4.22 (diagonal cut),
 * §1.2 (type scale); design/PAGE-STRUCTURE.md §2.1 (home) and §3.1 (inner pages).
 *
 * General purpose, not home-only:
 *   .sp-hero            the shell -- full-bleed media, scrim, copy on top
 *   .sp-hero--video     background video player mounts into .sp-hero__frame
 *   .sp-hero--page      shorter still-image hero for inner pages
 *   .sp-hero--end       copy sits at the trailing edge (home)
 *   .sp-hero--center    copy is centred in the shell, and centred within itself
 *   .sp-hero--bottom    copy sits on the baseline (inner pages)
 *   .sp-hero--cut       adds the diagonal wedge that bites into the next section
 */

.sp-hero {
	position: relative;
	display: flex;
	align-items: center;
	overflow: hidden;
	min-height: clamp(580px, 82vh, 860px);
	background: var(--sp-bg-deep);
}

.sp-hero--page {
	min-height: clamp(360px, 46vh, 520px);
}

.sp-hero--bottom {
	align-items: flex-end;
}

/* ---------------------------------------------------------------- media */

.sp-hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--sp-bg-deep);
}

/*
 * A still filling the shell. The inner-page heroes use it as their only
 * background; the home hero deliberately ships none, because a still under a
 * video is only on screen long enough to be replaced -- the reasoning is in
 * template-parts/home/hero.php.
 */
.sp-hero__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 42%;
}

/*
 * 16:9 cover maths: whichever axis constrains, the frame still fills the box.
 * scale(1.4) crops in far enough that the player chrome never enters frame.
 */
.sp-hero__video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw;
	min-width: 177.78vh;
	min-height: 100%;
	transform: translate(-50%, -50%) scale(1.4);
	pointer-events: none;
}

/*
 * The player replaces the mount node with its own <iframe>, so the size is
 * pinned to whatever the direct child happens to be at the time.
 */
.sp-hero__frame,
.sp-hero__video > *,
.sp-hero__video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.sp-hero__scrim {
	position: absolute;
	inset: 0;
	background: var(--sp-scrim-hero);
}

.sp-hero__scrim--top {
	background: var(--sp-scrim-top);
}

/* The signature diagonal bite out of the hero base (§4.22). */
.sp-hero__wedge {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: clamp(56px, 8vw, 130px);
	background: var(--sp-bg);
	clip-path: var(--sp-clip-hero-cut);
}

/* ----------------------------------------------------------------- copy */

.sp-hero__inner {
	position: relative;
	z-index: var(--sp-z-raised);
	display: flex;
	padding-block: clamp(56px, 8vw, 110px);
}

.sp-hero--cut .sp-hero__inner {
	padding-block-end: calc(clamp(56px, 8vw, 110px) + clamp(56px, 8vw, 130px));
}

.sp-hero--page .sp-hero__inner {
	padding-block: clamp(40px, 6vw, 90px);
}

.sp-hero--end .sp-hero__inner {
	justify-content: flex-end;
}

/*
 * Centred variant: the copy column sits in the middle of the shell and every
 * row inside it -- eyebrow, actions, stats -- centres on the same axis.
 */
.sp-hero--center .sp-hero__inner {
	justify-content: center;
}

.sp-hero--center .sp-hero__copy {
	text-align: center;
}

.sp-hero--center .sp-hero__eyebrow,
.sp-hero--center .sp-hero__actions,
.sp-hero--center .sp-hero__stats {
	justify-content: center;
}

.sp-hero__copy {
	max-width: 680px;
	animation: riseIn .7s var(--sp-ease) both;
}

/* The hero eyebrow is full white, unlike the dimmed split-band variant. */
.sp-hero__eyebrow {
	margin-bottom: 10px;
}

.sp-hero__eyebrow .sp-eyebrow__text {
	color: var(--sp-text);
}

.sp-hero__eyebrow + .sp-hero__title {
	margin-top: 0;
}

.sp-hero__title {
	margin: 0;
	font-size: var(--sp-fs-hero);
	font-weight: 900;
	line-height: var(--sp-lh-hero);
}

.sp-hero--page .sp-hero__title {
	font-size: var(--sp-fs-display-lg);
	line-height: var(--sp-lh-display);
}

.sp-hero__lead {
	margin-top: var(--sp-6);
}

.sp-hero--page .sp-hero__lead {
	max-width: 640px;
	font-size: var(--sp-fs-lede-sm);
	color: var(--sp-text-78);
}

.sp-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	margin-top: var(--sp-12);
}

/* ---------------------------------------------------------------- stats */

.sp-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(20px, 3vw, 52px);
	margin: 44px 0 0;
	padding-top: var(--sp-9);
	/* 0.14 is the hero-stat rule alpha (§1.1 Borders); tokens.css does not name it. */
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.sp-hero__stat-value {
	display: block;
	font-family: var(--sp-font-display);
	font-style: italic;
	font-weight: 900;
	font-size: clamp(24px, 2.6vw, 36px);
	line-height: var(--sp-lh-display);
	color: var(--sp-text);
}

.sp-hero__stat-label {
	display: block;
	font-size: var(--sp-fs-micro);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sp-text-55);
}

/* -------------------------------------------------------- reduced motion */

/*
 * No autoplay when the visitor asked for less motion: the player is never
 * booted (assets/js/pages/home.js checks the same query), and what remains on
 * the home hero is the shell's own dark ground under the scrim, with the copy
 * on top. That is the intended resting state, not a degraded one.
 */
@media (prefers-reduced-motion: reduce) {
	.sp-hero__video {
		display: none;
	}
}