/**
 * Layout: container, 12-column grid, section rhythm and background regions.
 */

/**
 * Container.
 *
 * Horizontal padding comes from --alt-page-padding, which resolves per breakpoint in
 * tokens.css, so no component repeats the 24/48/80 sequence.
 */
.alt-container {
	width: 100%;
	max-width: var(--alt-container);
	margin-inline: auto;
	padding-inline: var(--alt-page-padding);
}

.alt-container--text {
	max-width: calc(var(--alt-content-text) + (var(--alt-page-padding) * 2));
}

/**
 * Section.
 *
 * Vertical rhythm scales with the breakpoint. Density modifiers exist because the brand
 * system explicitly allows tighter spacing for technical tables and data blocks.
 */
.alt-section {
	padding-block: var(--alt-section-space);
}

/* The design system's dense rhythm, for technical tables and data blocks. */
.alt-section--tight {
	padding-block: var(--section-y-dense);
}

/**
 * Two sections of the same background are one visual region, so the rhythm between them is one
 * gap, not two. Without this the bottom padding of one section adds to the top padding of the
 * next and a light region appears to have a hole in the middle of it - which is what it looked
 * like before this rule existed.
 *
 * The brand system asks a background region to hold two to four related blocks; this is what
 * makes several sections read as that one region.
 */
.alt-section--light + .alt-section--light,
.alt-section--dark + .alt-section--dark,
.alt-section--dark-2 + .alt-section--dark-2 {
	padding-top: 0;
}

/**
 * A hero carries a heading and a line or two of text. Padding sized for a full content section
 * leaves it mostly empty, so it gets a shorter top - the header already sits above it - and
 * keeps a full gap below, where the content actually starts.
 */
.alt-section--hero {
	padding-top: calc(var(--alt-section-space) * 0.5);
	padding-bottom: var(--alt-section-space);
}

.alt-section--flush {
	padding-block: 0;
}

/**
 * Background regions.
 *
 * A region normally holds 2-4 related blocks; the brand system forbids alternating the
 * background on every small section. Each variant sets both background and text colour so a
 * region is never half-inverted.
 */
.alt-section--dark {
	background-color: var(--surface-dark);
	color: var(--text-on-dark);
}

.alt-section--dark-2 {
	background-color: var(--surface-dark-raised);
	color: var(--text-on-dark);
}

.alt-section--light {
	background-color: var(--surface-light);
	color: var(--text-on-light);
}

/* Links invert with the region: signal on dark, signal-dark on light. */
/* Link colour follows the region's accent token rather than being restated per background. */
.alt-section a:hover,
.alt-on-dark a:hover {
	color: var(--alt-accent);
}

/**
 * Grid.
 *
 * Two kinds, and the difference matters.
 *
 * Named splits (7/5, 8/4, 3/9, 6/6) are editorial proportions: a narrative beside a fact rail,
 * a heading beside evidence. They hold their ratio and collapse to one column when narrow.
 *
 * Card rows auto-fit instead, so three cards become two and then one as the viewport allows,
 * rather than being forced into twelfths that leave a lone card stranded on its own row.
 */
.alt-grid {
	display: grid;
	gap: var(--alt-gutter);
	grid-template-columns: 1fr;
}

/* A hero pairs text with media of a different height; centring keeps the pair optically level. */
.alt-grid--center {
	align-items: center;
}

.alt-grid--cards {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--alt-space-5);
}

.alt-grid--cards-wide {
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--alt-space-6);
}

.alt-grid--stats {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--alt-space-5);
}

@media (min-width: 1024px) {
	.alt-grid--7-5,
	.alt-grid--6-6,
	.alt-grid--4-4-4,
	.alt-grid--8-4,
	.alt-grid--3-9 {
		grid-template-columns: repeat(var(--alt-columns), minmax(0, 1fr));
		gap: var(--alt-space-6);
	}

	/* Named arrangements from the brand system section 4.3. */
	.alt-grid--7-5 > :first-child { grid-column: span 7; }
	.alt-grid--7-5 > :nth-child(2) { grid-column: span 5; }

	.alt-grid--6-6 > * { grid-column: span 6; }

	.alt-grid--4-4-4 > * { grid-column: span 4; }

	.alt-grid--8-4 > :first-child { grid-column: span 8; }
	.alt-grid--8-4 > :nth-child(2) { grid-column: span 4; }

	.alt-grid--3-9 > :first-child { grid-column: span 3; }
	.alt-grid--3-9 > :nth-child(2) { grid-column: span 9; }
}

/* Stack utilities: vertical spacing between siblings without margins on the children. */
.alt-stack > * + * {
	margin-top: var(--alt-space-3);
}

.alt-stack--tight > * + * {
	margin-top: var(--alt-space-2);
}

.alt-stack--loose > * + * {
	margin-top: var(--alt-space-5);
}

/**
 * Wide technical content.
 *
 * A specification table scrolls horizontally rather than dropping columns, per the mobile
 * principles. tabindex on the wrapper is set in markup so the scroll area is reachable by
 * keyboard.
 */
.alt-scroll-x {
	overflow-x: auto;
	max-width: 100%;
	-webkit-overflow-scrolling: touch;
}

.alt-scroll-x:focus-visible {
	outline: var(--alt-datum-line) solid var(--alt-signal-dark);
	outline-offset: 2px;
}

/* Hairline rules and the heavier datum line, which carries meaning rather than decoration. */
.alt-hairline {
	border-top: var(--alt-hairline) solid var(--alt-hairline-color);
}

/* The datum line is a named brand device: 56 px wide, 2 px, in the region's datum colour. */
.alt-datum {
	width: 56px;
	border-top: var(--alt-datum) solid var(--alt-datum-color);
}

.alt-section--dark .alt-datum,
.alt-section--dark-2 .alt-datum,
.alt-on-dark .alt-datum {
	border-top-color: var(--alt-signal);
}

.alt-section--dark .alt-hairline,
.alt-section--dark-2 .alt-hairline,
.alt-on-dark .alt-hairline {
	border-top-color: var(--alt-steel-700);
}

main {
	display: block;
}