/*
 * pm-product-intro — the product family page's intro section (WO-33).
 *
 * Source frame: docs/design/frames/33-product-page.json, node 55:1313 — a
 * row of two columns on Blush Linen: the family eyebrow and the page's H1
 * left, the intro text and the two CTA buttons right, bottom-aligned.
 *
 * Compiled to assets/css/components/product-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, 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 480px column, the 40px CTA
 * gap) are typed with a comment citing the extract key — the same technique
 * as the button's 14px label and the section header's 40px stack gap.
 */

/*
 * The section: a full-width band on Blush Linen (the frame's background
 * inherits it — set explicitly, the pm-products convention), row of two
 * columns, gap 96, padding 96 all sides (33-product-page.json#intro.layout
 * — 96 is --pm-space-24). The scaffold stylesheet (style.css) constrains
 * body to a centred 72rem column; the section escapes that box with the
 * same full-bleed technique as the intro (intro.css).
 */
.pm-product-intro {
	box-sizing: border-box;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	display: flex;
	align-items: stretch;
	gap: var(--pm-space-24);
	padding: var(--pm-space-24);
	background-color: var(--pm-color-surface);
}

/*
 * The left column: 480px wide (33-product-page.json#intro.left.width —
 * typed; no space token holds a width), the eyebrow and the H1 stacked
 * 32px apart (--pm-space-8). min-width: 0 so a long Dutch heading wraps
 * instead of stretching the column (MISTAKES.md §E4).
 */
.pm-product-intro__left {
	box-sizing: border-box;
	flex: none;
	width: 480px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pm-space-8);
}

/*
 * The page's H1 (33-product-page.json#intro.left.heading): Roboto Light 56
 * / 1 / -3, uppercase, Volcanic Ink — the WO-27 h1 tokens. The page title
 * is not rendered separately: this heading IS the page's H1 (the template's
 * scaffold title yields to Elementor pages, functions.php).
 */
.pm-product-intro__heading {
	margin: 0;
	font-family: var(--pm-font-family-base);
	font-size: var(--pm-font-size-h1);
	font-weight: var(--pm-font-weight-300);
	line-height: var(--pm-leading-tight);
	letter-spacing: var(--pm-tracking-h1);
	text-transform: uppercase;
	color: var(--pm-color-ink);
	/* A long Dutch heading wraps rather than overflowing (MISTAKES.md §E4). */
	overflow-wrap: break-word;
}

/*
 * The right column: the rest of the row (flex 1), its content
 * bottom-aligned (33-product-page.json#intro.right — "align: bottom
 * (justify-end)"), the text and the CTA row 32px apart (--pm-space-8).
 */
.pm-product-intro__right {
	box-sizing: border-box;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: var(--pm-space-8);
}

/*
 * The intro text (33-product-page.json#intro.right.text): Body Roboto
 * Light 16 / 1.6, body-text (Texte @64%), paragraphs preserved — the
 * stored rich HTML renders as a stack of <p>s.
 */
.pm-product-intro__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-body-text);
}

.pm-product-intro__text p {
	margin: 0;
}

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

/*
 * The CTA row: two pm-buttons 40px apart (33-product-page.json#intro.right
 * .ctas — "row gap 40"; no space token holds 40px, the intro.css
 * precedent). 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); Dutch and French labels run 20–30% longer
 * (MISTAKES.md §E4).
 */
.pm-product-intro__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}

/*
 * TODO(open-question): the extract measures one 1440 frame only —
 * MISTAKES.md §C7. Below tablet the section is one column, padding 64
 * block / 24 sides, heading 40px (WO-33 AC 1 — developer judgement per
 * MISTAKES.md §C7): 64 is --pm-space-16, 24 is --pm-space-6, 40px is the
 * h2 size token. Owner: the designer, with the missing mobile design.
 */
@media (max-width: 768px) {
	.pm-product-intro {
		flex-direction: column;
		gap: var(--pm-space-8);
		padding: var(--pm-space-16) var(--pm-space-6);
	}

	.pm-product-intro__left {
		width: 100%;
	}

	.pm-product-intro__heading {
		font-size: var(--pm-font-size-h2);
	}
}