/*
 * foundation-layout.css — component family "ad/foundation-layout" v1.0.0 (Wave 0, 2026-08-22).
 *
 * Layout primitives every article/interactive component composes from, so mobile recomposition
 * (per the integration contract: "the visual RECOMPOSES, never shrinks to 8px text") is built
 * in once instead of re-solved per component. Container-query-driven, not viewport-driven --
 * these respond to the .ad-fnd-shell they're nested in (see foundation-shell.css), which is what
 * lets the same component recompose correctly whether it sits in the full-width article body or
 * a narrower sidebar/card context.
 *
 * Namespacing rule: every selector starts with `.ad-fnd-`. Zero bare element selectors.
 */

/* --- stack: default vertical flow, the safe fallback every layout degrades to --- */
.ad-fnd-stack {
	display: flex;
	flex-direction: column;
	gap: var(--ad-fnd-stack-gap, 1rem);
	min-inline-size: 0; /* prevents flex children from refusing to shrink -- the #1 cause of
	                        horizontal overflow inside a flex/grid ancestor */
}

/* --- cluster: horizontal row that wraps, for legends/tags/compact card rows --- */
.ad-fnd-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ad-fnd-cluster-gap, 0.5rem);
	min-inline-size: 0;
}

/* --- split: two-region layout (e.g. desktop lead image ~44% / content ~56%, homepage module) ---
   Default (narrow container / mobile): stacks. Recomposes to a row once the SHELL is wide enough
   -- this is a @container query against the .ad-fnd-shell ancestor, not the viewport, so a split
   inside a narrower sidebar module stays stacked even on a wide screen. */
.ad-fnd-split {
	display: flex;
	flex-direction: column;
	gap: var(--ad-fnd-split-gap, 1.5rem);
	min-inline-size: 0;
}

.ad-fnd-split > * {
	min-inline-size: 0;
	flex: 1 1 auto;
}

@container ad-fnd-shell (min-width: 640px) {
	.ad-fnd-split[data-ad-fnd-ratio="lead"] {
		flex-direction: row;
		align-items: flex-start;
	}
	.ad-fnd-split[data-ad-fnd-ratio="lead"] > :first-child {
		flex: 0 1 44%;
	}
	.ad-fnd-split[data-ad-fnd-ratio="lead"] > :last-child {
		flex: 1 1 56%;
	}
}

/* --- grid: dense card/comparison layouts that collapse to a single column below the shell's
   own container-query breakpoint, never the viewport's --- */
.ad-fnd-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ad-fnd-grid-gap, 1rem);
	min-inline-size: 0;
}

@container ad-fnd-shell (min-width: 560px) {
	.ad-fnd-grid[data-ad-fnd-cols="2"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container ad-fnd-shell (min-width: 840px) {
	.ad-fnd-grid[data-ad-fnd-cols="3"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --- media-frame: intrinsic-sized visual region with an explicit aspect-ratio, preventing CLS
   (integration contract: "explicit aspect-ratio to prevent CLS"). aspect_ratio is chosen per the
   density band (16:9 / 3:2 / 2:1 / ~5:2) via a data attribute, never a hard-coded pixel height. */
.ad-fnd-media-frame {
	inline-size: 100%;
	overflow: hidden;
	border-radius: var(--ad-fnd-media-radius, 8px);
}

.ad-fnd-media-frame[data-ad-fnd-aspect="16-9"] {
	aspect-ratio: 16 / 9;
}
.ad-fnd-media-frame[data-ad-fnd-aspect="3-2"] {
	aspect-ratio: 3 / 2;
}
.ad-fnd-media-frame[data-ad-fnd-aspect="2-1"] {
	aspect-ratio: 2 / 1;
}
.ad-fnd-media-frame[data-ad-fnd-aspect="5-2"] {
	aspect-ratio: 5 / 2;
}

.ad-fnd-media-frame > img,
.ad-fnd-media-frame > svg {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}