/*
 * pm-hero — the homepage hero (WO-27, frame 27-hero.json / 27-hero-55-439.png).
 *
 * Compiled to assets/css/components/hero.css by src/build-tokens.mjs, which
 * substitutes the breakpoint markers (a comment holding `@bp <name>`) with
 * the pixel value from tokens/tokens.json. Custom properties cannot resolve
 * inside @media conditions and a bare integer is invalid CSS, so the build
 * appends the unit. Never type a breakpoint width here.
 *
 * Every colour is a --pm-color-* token; the H1's size, leading and tracking
 * are the WO-27 typography tokens. No hex value and no literal breakpoint
 * width may appear in this file.
 */

/*
 * The hero fills the first viewport exactly: full-bleed (the header's own
 * technique — the scaffold body constrains content to a centred 72rem
 * column), with WO-16's 80px header bar above it. The bar is a solid
 * --pm-color-ink block on the negative variant, so flow-below and a true
 * overlay render identically — the seam is ink on ink — and flow-below
 * avoids a pull-up margin whose collapse would have to thread Elementor's
 * entire wrapper chain. 80px is the header's height, typed in header.css
 * too (WO-16). The svh repeat keeps mobile browser UI honest where
 * supported; the vh line is the fallback.
 *
 * The frame's nav band sits at y 40–120 with the content frame's 96px
 * padding-top below it, which puts the H1 top at y ≈216 (client feedback
 * point 1). WO-16's built header occupies 0–80, so the hero carries the
 * frame's 40px top inset as its own padding-top: 80 (header) + 40 (this
 * inset) + 96 (content padding) = 216. Applied in the WO-27 fix round on
 * the launch instruction — the frame's reading, no longer open. 40px is
 * typed like the gap below (no space token sits between the 32/48 steps).
 */
.pm-hero {
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	/* The frame's 40px top inset — see the block comment above: it is what
	   lands the H1 at the frame's y ≈216 under WO-16's 0–80 header. */
	padding-top: 40px;
	min-height: calc(100vh - 80px);
	min-height: calc(100svh - 80px);
	/* With no video and no poster the hero is exactly the frame's canvas:
	   Volcanic Ink under the 60% overlay. */
	background-color: var(--pm-color-ink);
	color: var(--pm-color-on-accent);
	font-family: var(--pm-font-family-base), system-ui, sans-serif;
}

/*
 * WO-27 AC 3 — content padding 96 top / 96 sides / 64 bottom, column gap
 * 40 (27-hero.json#measured.content). The gap has no space token (the
 * scale steps 32/48 around it), so it is typed here like the button's 14px
 * label and the header's 80px bar.
 */
.pm-hero__inner {
	position: relative; /* paints above the absolute media layers */
	display: flex;
	align-items: stretch;
	gap: 40px;
	width: 100%;
	flex: 1 1 auto;
	padding: var(--pm-space-24) var(--pm-space-24) var(--pm-space-16);
}

/*
 * The main column: H1 at the top, the family links at the bottom —
 * space-between is what holds them apart (WO-27 AC 3).
 */
.pm-hero__main {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * The sidebar: a fixed 382px column (frame measurement, typed like the
 * logo's 137px), its content pushed to the hero's bottom edge.
 */
.pm-hero__sidebar {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--pm-space-4);
	flex: 0 0 382px;
	width: 382px;
}

/*
 * The H1 (WO-27 AC 2): the base family at weight 300, 56px / line-height 1 /
 * tracking
 * −3px — all tokens — White, capped at the frame's 510px measure (typed
 * like the sidebar's 382px). The content is sentence case and translatable;
 * the uppercase is design, applied here. Below the design width the size
 * scales fluidly to a 40px floor: at 375px a fixed 56px cannot fit the
 * viewport minus padding. Decision made under the WO's "responsive on your
 * own judgement" mandate; at 1440px the clamp resolves to exactly the
 * token's 56px.
 */
.pm-hero__title {
	margin: 0;
	max-width: 510px;
	font-size: clamp(2.5rem, 7.5vw, var(--pm-font-size-h1));
	line-height: var(--pm-leading-tight);
	letter-spacing: var(--pm-tracking-h1);
	font-weight: var(--pm-font-weight-300);
	text-transform: uppercase;
	color: var(--pm-color-on-accent);
	/* Break long family words rather than overflow a 375px viewport. */
	overflow-wrap: break-word;
}

/*
 * The sidebar paragraph (WO-27 AC 5): 16px/1.6 — typed, like every recorded
 * text size before a size token exists — in Blush Linen on the ink overlay.
 */
.pm-hero__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--pm-color-surface);
}

/*
 * The family links (WO-27 AC 4): the frame's 24px gap between them. The
 * tabs are tertiaries drawn Regular uppercase — the page frames' treatment
 * (09-buttons.json#contradictions[-1]; the on-dark tertiary itself is
 * 27-hero.json#measured.tabs). WO-81 moved uppercase Regular into the
 * component for primary/secondary, but the tertiary variant itself is
 * SemiBold sentence case (the "View more" links), so the hero re-states
 * both here at a higher specificity.
 */
.pm-hero__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pm-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pm-hero__tabs .pm-button {
	text-transform: uppercase;
	font-weight: var(--pm-font-weight-400);
}

/*
 * The sidebar link (WO-27 AC 1, AC 4): the same tertiary-on-dark button as
 * the family links, drawn Regular uppercase like them (WO-81 —
 * 27-hero.json#measured.tabs), restated for the same reason. The sidebar's
 * own 16px gap (WO-27 AC 3) is what sets it 16px under the paragraph — no
 * spacing of its own.
 */
.pm-hero__sidebar .pm-button {
	text-transform: uppercase;
	font-weight: var(--pm-font-weight-400);
}

/*
 * The media layers: poster beneath, video above it, overlay above both,
 * content above everything (its position: relative wins the paint order).
 * The poster doubles as the reduced-motion stand-in, so it renders whenever
 * it exists — also while the video buffers, and alone when no video was
 * chosen (WO-27 AC 6: poster alone, no console error).
 */
.pm-hero__poster,
.pm-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pm-hero__overlay {
	position: absolute;
	inset: 0;
	/*
	 * TODO(open-question): the overlay's 60% strength is read off the
	 * frame, not recorded as a value (WO-27 open question 1, owner
	 * Eleonor). Volcanic Ink at 60% via color-mix; a derived colour role
	 * would be the token-clean form, but WO-27's file scope allows the H1
	 * tokens only — adding one is a one-line edit here when resolved.
	 */
	background-color: color-mix(in srgb, var(--pm-color-ink) 60%, transparent);
}

/*
 * WO-27 AC 6 — no autoplay under reduced motion: the video layer is
 * withdrawn and the poster stands in. The video element itself keeps
 * buffering; scripting the pause needs a theme JS file outside WO-27's
 * file scope — flagged in the work order's report.
 */
@media (prefers-reduced-motion: reduce) {
	.pm-hero__video {
		display: none;
	}
}

/*
 * WO-27 AC 9 — below the laptop breakpoint the columns stack, main first.
 * Side padding drops to 48px: the design's 96px is a 1440px measure and
 * would take a fifth of the laptop viewport.
 */
@media (max-width: 1024px) {
	.pm-hero__inner {
		flex-direction: column;
		padding-inline: var(--pm-space-12);
	}

	.pm-hero__sidebar {
		flex: 0 1 auto;
		width: 100%;
	}
}

/*
 * Below the tablet breakpoint the padding tightens further: 24px sides so
 * the 40px-floor H1 fits a 375px viewport with room to spare, 64px top and
 * 48px bottom to keep the stacked hero from ballooning. The links row also
 * becomes a column at the sidebar's 16px gap — a wrapped row of bordered
 * links reads as broken layout, a stacked list reads as designed. Judgement
 * call under the WO's "responsive on your own judgement" mandate: only the
 * navigation is designed for mobile, and this is deliberate and priced.
 */
@media (max-width: 768px) {
	.pm-hero__inner {
		padding: var(--pm-space-16) var(--pm-space-6) var(--pm-space-12);
	}

	.pm-hero__tabs {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--pm-space-4);
	}
}