/*
 * pm-intro — the homepage intro section (WO-28, frame 55:501).
 *
 * Source frame: docs/design/frames/28-intro.json, node 55:501 — the
 * section-header pattern centred on Blush Linen, with a CTA row of two
 * pm-buttons 40px apart (secondary, then primary).
 *
 * Compiled to assets/css/components/intro.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 is a --pm-color-* token; no hex value appears in this
 * file.
 */

.pm-intro {
	/* The scaffold stylesheet (style.css) constrains body to a centred 72rem
	   column with --pm-space-8 padding; the section escapes that box with the
	   same full-bleed technique as the header (header.css), because the frame
	   is a full-width band — 1440 wide with its own 280px side padding
	   (28-intro.json#measured.padding). Revisit with the scaffold body styles
	   when the layout epic replaces them. */
	box-sizing: border-box;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	display: flex;
	flex-direction: column;
	align-items: center;
	/* 28-intro.json#measured.stack_gap — the same 40px as the section
	   header's own stack; no space token holds 40px (WO-28's file list does
	   not add one), so the measured value is typed here. */
	gap: 40px;
	/* 28-intro.json#measured — 96px block padding (--pm-space-24), 280px
	   side padding at 1440. No space token holds 280px, so it is typed here
	   citing the extract. */
	padding: var(--pm-space-24) 280px;
	/* The frame's background is Blush Linen — the surface token. */
	background-color: var(--pm-color-surface);
}

/*
 * TODO(open-question): the extract measures one 1440 frame only
 * (28-intro.json#measured.padding.sides = 280) — MISTAKES.md §C7. The two
 * steps below are developer judgement, not design: below laptop the side
 * padding becomes 96px (--pm-space-24), below tablet 24px (--pm-space-6).
 * Owner: the designer, with the missing mobile design.
 */
@media (max-width: 1024px) {
	.pm-intro {
		padding: var(--pm-space-24) var(--pm-space-24);
	}
}

/* TODO(open-question): same developer-judgement step as above. */
@media (max-width: 768px) {
	.pm-intro {
		padding: var(--pm-space-24) var(--pm-space-6);
	}
}

/*
 * The CTA row: two pm-buttons 40px apart (28-intro.json#measured.cta_row.gap
 * — typed; no space token holds 40px). Wraps below the point where the two
 * buttons plus the gap no longer fit — the 375px judgement, since only the
 * navigation is designed for mobile (MISTAKES.md §C7).
 */
.pm-intro__ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px;
}