/**
 * Layout primitives: container, sections, and the grid system.
 *
 * All spacing uses logical properties so RTL needs no separate stylesheet.
 */

/* ---------------------------------------------------------------
 * Container — LOCKED: 1280px wide, 760px content measure
 * --------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

/* Long-form reading measure. */
.container--content {
	max-width: var(--content-max);
}

/* Full-bleed background with contained children. */
.container--wide {
	max-width: none;
}

/* ---------------------------------------------------------------
 * Sections — LOCKED spacing: 56px mobile, 72px tablet, 96px desktop.
 * The step-ups live in responsive.css via --section-spacing.
 * --------------------------------------------------------------- */
.section {
	padding-block: var(--section-spacing);
}

.section--tight {
	padding-block: calc(var(--section-spacing) / 2);
}

.section--flush-top {
	padding-block-start: 0;
}

.section--flush-bottom {
	padding-block-end: 0;
}

.section--alt {
	background-color: var(--color-bg-alt);
}

/* ---------------------------------------------------------------
 * Grid — LOCKED gap: 32px
 *
 * Mobile-first: every grid is a single column until responsive.css opens
 * it up. .grid--auto is intrinsically responsive and needs no breakpoint.
 * --------------------------------------------------------------- */
.grid {
	display: grid;
	gap: var(--grid-gap);
	grid-template-columns: 1fr;
}

.grid--auto {
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.grid--gap-sm {
	gap: var(--space-4);
}

.grid--gap-lg {
	gap: var(--space-12);
}

/* ---------------------------------------------------------------
 * Flow — vertical stack with a consistent gap
 * --------------------------------------------------------------- */
.stack {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.stack--sm {
	gap: var(--space-2);
}

.stack--lg {
	gap: var(--space-8);
}

/* ---------------------------------------------------------------
 * Cluster — horizontal group that wraps (button rows, tag lists)
 * --------------------------------------------------------------- */
.cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
}

.cluster--between {
	justify-content: space-between;
}

.cluster--center {
	justify-content: center;
}

/* ---------------------------------------------------------------
 * Media object — icon or image beside text
 * --------------------------------------------------------------- */
.media {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
}

.media__body {
	flex: 1;
	min-width: 0;
}

/* ---------------------------------------------------------------
 * Centring helper
 * --------------------------------------------------------------- */
.center {
	margin-inline: auto;
	text-align: center;
}

.center .container__inner {
	margin-inline: auto;
}