/*
 * pm-story — the About page's story section (WO-37).
 *
 * Source frame: docs/design/frames/37-about.json, node 90:3973 — a
 * full-bleed row, gap 8: the gallery card left (836px at 1440), the
 * Volcanic Ink text panel right (flex 1).
 *
 * Compiled to assets/css/components/story.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 592px row height,
 * the 836px card column and the 836/592 stacked ratio) are typed with a
 * comment citing the extract key — the same technique as the section
 * header's 702px title width.
 *
 * Mobile-first (MISTAKES.md §C7 — only the navigation is designed for
 * mobile): the base layout is the stacked one, and the row is the
 * min-width: laptop branch — so "height 592 at ≥ laptop" holds at exactly
 * 1024 too.
 */

/*
 * The section: a full-bleed row (the intro's full-bleed technique — the
 * scaffold body constrains content to a centred 72rem column). Base
 * (below laptop): stacked, gap 32 — the panel's own stack step, the
 * developer judgement the work order's §C7 clause calls for.
 */
.pm-story {
	box-sizing: border-box;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--pm-space-8);
}

/*
 * The media slot: the WO-12 card fills it (the card's --fill branch,
 * height: 100%). Below laptop the slot owns the card's shape — the
 * extract's card ratio 836/592 (37-about.json#story.left.width ×
 * #story.layout height), typed here like the gallery grid's ratios.
 */
.pm-story__media {
	box-sizing: border-box;
	min-width: 0;
	aspect-ratio: 836 / 592;
}

/*
 * The ink panel: flex 1 of the row, Volcanic Ink, padding 64 block /
 * 96 sides (37-about.json#story.right — 64 is --pm-space-16, 96 is
 * --pm-space-24), its content stacked 32px apart (--pm-space-8). The
 * panel's content is vertically centred: the frame shows the text block
 * sitting off the top edge with equal space above and below — the extract
 * records no alignment, so this is developer judgement (MISTAKES.md §C7);
 * the team section's "items centred vertically" is the same reading.
 */
.pm-story__panel {
	box-sizing: border-box;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: var(--pm-space-8);
	padding: var(--pm-space-12) var(--pm-space-6);
	background-color: var(--pm-color-ink);
}

/*
 * The panel's H2 (37-about.json#story.right.heading): Roboto ExtraLight
 * 40 / 1 / -2 — the WO-28 H2 tokens — in White (the on-accent role; B5:
 * dark sections use the same named tokens as light ones).
 */
.pm-story__heading {
	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: var(--pm-leading-tight);
	letter-spacing: var(--pm-tracking-h2);
	color: var(--pm-color-on-accent);
	/* A long Dutch heading wraps rather than overflowing (MISTAKES.md §E4). */
	overflow-wrap: break-word;
}

/*
 * The story text (37-about.json#story.right.paragraphs): Body Roboto
 * Light 16 / 1.6 in Blush Linen — the surface role, the panel's own
 * background read as text (B5). Paragraphs preserved: the WYSIWYG's <p>s
 * render as a stack, separated by one small token step (the section-header
 * body's pattern).
 */
.pm-story__text {
	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-surface);
}

.pm-story__text p {
	margin: 0;
}

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

/*
 * ≥ laptop (37-about.json#story.layout): the row — gap 8 (--pm-space-2),
 * height 592 (typed; no space token holds it, and a fixed height would
 * clip a long Dutch story, so min-height — the rendered height at the
 * frame's own copy is 592 either way), the card column taking the frame's
 * own share of the width, the panel taking the rest.
 *
 * The card's share is 836/1440 = 58% (37-about.json#story.left.width over
 * the frame width — typed like the 836px column below). A fixed 836px
 * card only fits once the viewport leaves room for the panel's own
 * minimum: 836 + gap 8 + the panel's 96-side paddings overflowed every
 * viewport from laptop up to ~1150px (WO-37 test finding 2 — scrollWidth
 * 1102 at 1024). So between laptop and wide the card keeps the design's
 * proportion (58%) and the panel's side padding steps down one token
 * (96 → 48, --pm-space-12); the panel is flex 1 either way.
 */
@media (min-width: 1024px) {
	.pm-story {
		flex-direction: row;
		gap: var(--pm-space-2);
		min-height: 592px;
	}

	.pm-story__media {
		flex: 0 0 58%;
		/* The slot's height is the row's (stretch); the aspect-ratio below
		   laptop gives way — both axes are definite here. */
		aspect-ratio: auto;
	}

	.pm-story__panel {
		padding: var(--pm-space-16) var(--pm-space-12);
	}
}

/*
 * ≥ wide — the frame's own 1440 (tokens.json#breakpoints.wide, DoD 1):
 * the card pins at its measured 836px (37-about.json#story.left.width,
 * typed — no token holds it) and the panel takes the rest with its
 * designed padding 64 / 96. 58% of 1440 is 835.2, so the fixed column
 * takes over here to hold the extract's number exactly.
 */
@media (min-width: 1440px) {
	.pm-story__media {
		flex-basis: 836px;
	}

	.pm-story__panel {
		padding: var(--pm-space-16) var(--pm-space-24);
	}
}