/*
 * pm-models — the product family page's models & technique section (WO-33).
 *
 * Source frame: docs/design/frames/33-product-page.json, node 55:1435 — the
 * section header and the models accordion in a 505px left column; the
 * collage image right, stretched to the row's height. The accordion is the
 * shared pm-accordion component (accordion.css) — this file owns only the
 * section's layout and the media panel's swap.
 *
 * Compiled to assets/css/components/models.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. Values the token file does not
 * hold (the 505px column, the 716/489 mobile ratio) are typed with a
 * comment citing the extract key or the acceptance criterion behind them.
 */

/*
 * The section: a full-width band on Blush Linen (the surface token, set
 * explicitly — the pm-products convention), row of two columns, gap 80
 * (--pm-space-20, the products section's column gap), padding 96 block and
 * 96 LEFT, 0 right (33-product-page.json#models.layout — the collage
 * touches the page's right edge). 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-models {
	box-sizing: border-box;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	display: flex;
	align-items: stretch;
	gap: var(--pm-space-20);
	padding: var(--pm-space-24) 0 var(--pm-space-24) var(--pm-space-24);
	background-color: var(--pm-color-surface);
}

/*
 * The left column: 505px wide (33-product-page.json#models.left.width —
 * typed; no space token holds a width), the section header and the
 * accordion stacked. min-width: 0 so a long Dutch title wraps instead of
 * stretching the column (MISTAKES.md §E4).
 */
.pm-models__left {
	box-sizing: border-box;
	flex: none;
	width: 505px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* The frame shows a small gap between the header's text and the first
	   row's top border; the extract states no value — 16px
	   (--pm-space-4), developer judgement (MISTAKES.md §C7). */
	gap: var(--pm-space-4);
}

/*
 * The media panel: the rest of the row, stretched to the row's height —
 * the row's height is the left column's content height. The panel's own
 * background is the surface-alt block the "no images at all" state shows
 * (WO-33 AC 3): with no image inside, the panel IS that block, layout
 * kept.
 */
.pm-models__media {
	box-sizing: border-box;
	flex: 1 1 0;
	min-width: 0;
	position: relative;
	overflow: hidden;
	background-color: var(--pm-color-surface-alt);
}

/*
 * The images: the collage and every model's image, stacked and covering
 * the panel (33-product-page.json#models.right — "object-fit: cover,
 * stretched to the row's height"). Only the visible one is opaque; the
 * swap crossfades over --pm-motion-duration-base (WO-33 AC 3 — "no
 * animation beyond opacity"). Specificity ≥ (0,1,1) on the <img> —
 * Elementor's own `.elementor img { height: auto; max-width: 100% }`
 * beats a single-class selector (MISTAKES.md §C15).
 */
.pm-models .pm-models__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	transition-property: opacity;
	transition-duration: var(--pm-motion-duration-base);
	transition-timing-function: var(--pm-motion-ease-standard);
}

.pm-models .pm-models__image--visible {
	opacity: 1;
}

/*
 * WO-33 AC 3 — none of the swap under reduced motion: the state snaps.
 */
@media (prefers-reduced-motion: reduce) {
	.pm-models .pm-models__image {
		transition: none;
	}
}

/*
 * TODO(open-question): the extract measures one 1440 frame only —
 * MISTAKES.md §C7. Below laptop the section is one column, the image ABOVE
 * the accordion (WO-33 AC 3 — developer judgement per MISTAKES.md §C7),
 * padding 64 block / 24 sides (the intro's mobile step). The media panel
 * takes the project's 716/489 ratio (the deliver card's mobile ratio,
 * WO-33 AC 2) — stacked, nothing else gives it a height. Owner: the
 * designer, with the missing mobile design.
 */
@media (max-width: 1024px) {
	.pm-models {
		flex-direction: column;
		gap: var(--pm-space-8);
		padding: var(--pm-space-16) var(--pm-space-6);
	}

	.pm-models__left {
		width: 100%;
	}

	/* The image above the accordion — the DOM order is header, accordion,
	   media; the order property moves the media up without duplicating
	   markup. */
	.pm-models__media {
		order: -1;
		flex: none;
		aspect-ratio: 716 / 489;
	}
}