/*
 * pm-products — the homepage products section (WO-30, frame 55:545).
 *
 * Source frame: docs/design/frames/30-products.json — the section header and
 * the featured showcase card on the left; on the right an accordion of the
 * four product families, one open with its description and a "More
 * information" link. The 1440 frame is an accordion in a two-column layout
 * (30-products.json#contradictions[0]); the responsive node's four-across
 * card variant is not built.
 *
 * Compiled to assets/css/components/products.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 and no literal
 * breakpoint width may appear in this file. Since WO-33 the accordion ROWS
 * (title, icon, panel, description) are the shared pm-accordion component —
 * accordion.css owns their presentation, this file only the section's
 * two-column layout and the featured card's slot. The featured card's own
 * presentation is the pm-gallery-card component's since WO-12
 * (gallery-card.css).
 */

.pm-products {
	/* 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), because the frame is a full-width band on
	   Blush Linen. */
	box-sizing: border-box;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	display: flex;
	align-items: stretch;
	/* 30-products.json#measured.column_gap — the two equal columns sit 80px
	   apart (--pm-space-20, added by WO-30). */
	gap: var(--pm-space-20);
	/* 30-products.json#measured.padding — 96px all around (--pm-space-24). */
	padding: var(--pm-space-24);
	/* The frame's background is Blush Linen — the surface token. */
	background-color: var(--pm-color-surface);
}

/*
 * Two equal columns (30-products.json#measured.columns — "two equal flex-1
 * columns, stretch"). min-width: 0 lets a long Dutch family title wrap
 * instead of stretching the column (MISTAKES.md §E4).
 */
.pm-products__left,
.pm-products__accordion {
	flex: 1 1 0;
	min-width: 0;
}

/*
 * The left column: the section header, then the card filling the remaining
 * height (30-products.json#measured.left — gap 32, --pm-space-8). Default
 * align-items: stretch is what gives the card its full column width — its
 * own children are absolutely positioned and would otherwise collapse it.
 */
.pm-products__left {
	display: flex;
	flex-direction: column;
	gap: var(--pm-space-8);
}

/*
 * The featured card's slot (30-products.json#measured.left.card — a gallery
 * card that fills the remaining height): the header takes what it needs, the
 * slot grows over the rest. The 240px floor is developer judgement
 * (MISTAKES.md §C7 — no mobile design): the card's children are absolute,
 * so without a floor a short accordion would collapse it to nothing.
 *
 * WO-12 AC 7 — the card inside is the pm-gallery-card component, which owns
 * its own overflow, radius, image and caption (gallery-card.css); this rule
 * keeps only the slot's metrics. No ratio is passed, so the component's
 * height: 100% branch fills this slot.
 */
.pm-products__card {
	flex: 1 1 auto;
	min-height: 240px;
}

/*
 * WO-30 AC 6 — below the laptop breakpoint the two columns stack: header,
 * card, then the four rows. The 80px column gap would be a hole between the
 * card and the rows; the stack uses the left column's own 32px gap.
 * Developer judgement (MISTAKES.md §C7 — only the navigation is designed
 * for mobile).
 */
@media (max-width: 1024px) {
	.pm-products {
		flex-direction: column;
		gap: var(--pm-space-8);
	}
}

/* TODO(open-question): the side padding below tablet is developer judgement,
   mirroring the intro's step (intro.css) — the extract measures one 1440
   frame only. Owner: the designer, with the missing mobile design. */
@media (max-width: 768px) {
	.pm-products {
		padding: var(--pm-space-24) var(--pm-space-6);
	}
}