/*
 * pm-deliver — the product family page's "What we deliver" section (WO-33).
 *
 * Source frame: docs/design/frames/33-product-page.json, node 55:1382 — a
 * full-bleed row: an ink panel sized to its content (the heading and the
 * check list) beside the family's hero card.
 *
 * Compiled to assets/css/components/deliver.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; the heading's size, leading and
 * tracking are the WO-28 typography tokens. No hex value and no literal
 * breakpoint width may appear in this file. Values the token file does not
 * hold (the 489px row height, the 40% panel cap, the 18px item label, the
 * 716/489 mobile ratio) are typed with a comment citing the extract key or
 * the acceptance criterion behind them — the same technique as the button's
 * 14px label. The card's own presentation is the pm-gallery-card
 * component's (gallery-card.css).
 */

/*
 * The section: a full-bleed row, gap 8, no padding
 * (33-product-page.json#deliver.layout — 8 is --pm-space-2). 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-deliver {
	box-sizing: border-box;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	display: flex;
	align-items: stretch;
	gap: var(--pm-space-2);
}

/*
 * The ink panel, sized to its content: `width: max-content` — the extract's
 * "content-sized: 96 + list + 96 (510 in 68:193, 523 in the other three)" —
 * capped at 40% of the row (the same extract key), so a long Dutch item
 * wraps instead of stretching the panel across the page (MISTAKES.md §E4).
 * Padding 64 block / 96 sides, the stack 32px apart
 * (33-product-page.json#deliver.left — 64 is --pm-space-16, 96 is
 * --pm-space-24, 32 is --pm-space-8).
 */
.pm-deliver__panel {
	box-sizing: border-box;
	flex: none;
	width: max-content;
	max-width: 40%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pm-space-8);
	padding: var(--pm-space-16) var(--pm-space-24);
	background-color: var(--pm-color-ink);
}

/*
 * The panel's H2 (33-product-page.json#deliver.left.heading): Roboto
 * ExtraLight 40 / 1 / -2 — the WO-28 H2 tokens — in White (the on-accent
 * role).
 */
.pm-deliver__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 stretching the panel past its
	   cap (MISTAKES.md §E4). */
	overflow-wrap: break-word;
}

/*
 * The deliver list (33-product-page.json#deliver.left.list): gap 16
 * (--pm-space-4), no list markers — the check icon is the marker.
 */
.pm-deliver__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pm-space-4);
}

/*
 * One item: the 16px check icon, then the label, 8px apart
 * (33-product-page.json#deliver.left.list.item — 8 is --pm-space-2).
 */
.pm-deliver__item {
	display: flex;
	align-items: center;
	gap: var(--pm-space-2);
}

/*
 * The check icon: the committed icon-check.svg, painted Blush Linen — the
 * export's own fill, the surface token — 16px wide
 * (33-product-page.json#deliver.left.list.item). Specificity note: the
 * svg is sized here, not in the component's own attributes alone, so the
 * 16px is one rule and one place.
 */
.pm-deliver__item-icon {
	flex: none;
	display: inline-flex;
	color: var(--pm-color-surface);
}

.pm-deliver__item-icon svg {
	display: block;
	width: 16px;
	height: auto;
}

/*
 * The item's label: H4 Label, Roboto Regular 18 / 1, in Powder Blush (the
 * surface-alt role) — 33-product-page.json#deliver.left.list.item. No size
 * token holds 18px, so it is typed here citing the extract, like the
 * gallery card's caption title.
 */
.pm-deliver__item-text {
	font-family: var(--pm-font-family-base);
	font-size: 18px;
	font-weight: var(--pm-font-weight-400);
	line-height: var(--pm-leading-tight);
	color: var(--pm-color-surface-alt);
	/* A long Dutch item wraps within the panel's cap (MISTAKES.md §E4). */
	overflow-wrap: break-word;
}

/*
 * The hero card's slot: the rest of the row. display: flex so the card
 * inside stretches to the slot's height as a flex item — the card's
 * children are absolute, so a content-height slot would collapse it.
 */
.pm-deliver__card {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
}

.pm-deliver__card .pm-gallery-card {
	flex: 1 1 0;
}

/*
 * The row is 489 high at ≥ laptop (33-product-page.json#deliver.layout —
 * "height 489"; WO-33 AC 2). Below laptop no fixed height: the panel's
 * content owns the row's height (WO-33 AC 2 — "min-height not fixed
 * below").
 */
@media (min-width: 1024px) {
	.pm-deliver {
		min-height: 489px;
	}
}

/*
 * TODO(open-question): the extract measures one 1440 frame only —
 * MISTAKES.md §C7. Below tablet the section stacks, panel first (the DOM
 * order), and the card takes the frame's 716/489 ratio (WO-33 AC 2 —
 * developer judgement per MISTAKES.md §C7). The panel's side padding
 * follows the intro's mobile step (24px, --pm-space-6) — 96px sides would
 * leave a 180px column at 375px. Owner: the designer, with the missing
 * mobile design.
 */
@media (max-width: 768px) {
	.pm-deliver {
		flex-direction: column;
	}

	.pm-deliver__panel {
		width: 100%;
		max-width: 100%;
		padding: var(--pm-space-16) var(--pm-space-6);
	}

	.pm-deliver__card {
		flex: none;
	}

	.pm-deliver__card .pm-gallery-card {
		height: auto;
		aspect-ratio: 716 / 489;
	}
}