/*
 * pm-section-header — the section-header pattern (WO-28, ticket 11).
 *
 * Source frame: docs/design/frames/28-intro.json, node 55:501 — rule +
 * eyebrow + heading + body, the pattern every later section reuses.
 *
 * Compiled to assets/css/components/section-header.css by
 * src/build-tokens.mjs, which substitutes the breakpoint markers (a comment
 * holding `@bp <name>`) with the pixel value from tokens/tokens.json. Never
 * type a breakpoint width here.
 *
 * Every colour, font family, weight, size, leading and tracking is a --pm-*
 * token. No hex value and no literal breakpoint width may appear in this
 * file. Values the token file does not hold (the 40px stack gap, the 702px /
 * 560px measured widths, the 1px hairline) are typed with a comment citing
 * the extract key they come from — the same technique as the button's 14px
 * label and the header's 80px bar.
 */

.pm-section-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* 28-intro.json#measured.stack_gap. The space scale has no 40px step
	   (it runs 32 → 48), and WO-28's file list does not add one, so the
	   measured value is typed here. */
	gap: 40px;
}

/*
 * WO-28 AC 1 — the align control. Centred sections centre the boxes and
 * their text; left (the default) leaves both flush.
 */
.pm-section-header--center {
	align-items: center;
	text-align: center;
}

/*
 * The eyebrow row: the 40px rule and the caption text, 16px apart
 * (28-intro.json#measured.eyebrow.gap). 16px is --pm-space-4.
 */
.pm-section-header__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--pm-space-4);
}

/*
 * 28-intro.json#measured.eyebrow.line — 40px wide, 1px, Terra Sienna. The
 * 40px width and 1px hairline are measured values with no tokens; the colour
 * is the accent token, never a hex. flex: none keeps the rule at its measured
 * 40px when the row runs tight (375px, MISTAKES.md §C7) — the text wraps
 * instead of the rule shrinking.
 */
.pm-section-header__rule {
	flex: none;
	width: 40px;
	height: 1px;
	background-color: var(--pm-color-accent);
}

/*
 * 28-intro.json#measured.eyebrow.text — Roboto Regular 12px uppercase,
 * letter-spacing 1.5, Terra Sienna. Size, tracking and leading are tokens.
 */
.pm-section-header__eyebrow-text {
	font-family: var(--pm-font-family-base);
	font-size: var(--pm-font-size-caption);
	font-weight: var(--pm-font-weight-400);
	line-height: var(--pm-leading-normal);
	letter-spacing: var(--pm-tracking-caption);
	text-transform: uppercase;
	color: var(--pm-color-accent);
}

/*
 * 28-intro.json#measured.heading — Roboto ExtraLight 200, 40px, line-height
 * 1, letter-spacing -2, Volcanic Ink, 702px wide. The H2's line-height is 1
 * (the extract's "lh 100%"); no leading token holds 1 — leading.normal is
 * the CSS keyword — so it is typed here, citing the extract.
 */
.pm-section-header__title {
	max-width: 702px;
	margin: 0;
	font-family: var(--pm-font-family-base);
	font-size: var(--pm-font-size-h2);
	font-weight: var(--pm-font-weight-200);
	line-height: 1;
	letter-spacing: var(--pm-tracking-h2);
	color: var(--pm-color-ink);
}

/*
 * 28-intro.json#measured.body — Roboto Light 300, 16px, line-height 1.6,
 * black at 64% (--pm-color-body-text, now the Texte role), 560px wide. No
 * size token holds the body's 16px yet, so it is typed here citing the
 * extract, like the button's 14px label.
 */
.pm-section-header__body {
	max-width: 560px;
	margin: 0;
	font-family: var(--pm-font-family-base);
	font-size: 1rem;
	font-weight: var(--pm-font-weight-300);
	line-height: var(--pm-leading-body);
	color: var(--pm-color-body-text);
}

/*
 * The body renders through wpautop, so a multi-paragraph body is a stack of
 * <p>s. The stack gap already separates the body block from its neighbours;
 * inside it, paragraphs separate by one small token step.
 */
.pm-section-header__body p {
	margin: 0;
}

.pm-section-header__body p + p {
	margin-top: var(--pm-space-4);
}