/* 20-layout.css — containers, sections, full-bleed breakout (no 100vw), grids. */

.aic-page .aic-wrap {
	max-width: var(--aic-wrap-max);
	margin-inline: auto;
	padding-inline: var(--aic-wrap-pad);
}

.aic-page .aic-section {
	padding-block: var(--aic-section-pad);
}

.aic-page .aic-section--dark {
	background: var(--aic-bg-navy);
	color: var(--aic-on-dark);
}

.aic-page .aic-section--dark h1,
.aic-page .aic-section--dark h2,
.aic-page .aic-section--dark h3 {
	color: var(--aic-on-dark);
}

.aic-page .aic-section--dark p {
	color: var(--aic-on-dark-soft);
}

.aic-page .aic-section--subtle {
	background: var(--aic-bg-subtle);
}

/* Full-bleed rule: edge-to-edge surfaces are authored as SECTION BANDS —
   .aic-section spans the viewport naturally (block element), .aic-wrap
   constrains content inside it. Never simulate bleed with 100vw/cqw math
   (scrollbar width causes horizontal overflow).
   .aic-breakout only escapes the wrap's inline padding for media that should
   touch the container edge on mobile. */
.aic-page .aic-breakout {
	margin-inline: calc(-1 * var(--aic-wrap-pad));
}

@media (min-width: 1168px) { /* wrap-max 1120 + 2*24 padding: stop escaping once the wrap floats centered */
	.aic-page .aic-breakout {
		margin-inline: 0;
	}
}

/* Grids: mobile-first single column */
.aic-page .aic-grid {
	display: grid;
	gap: var(--aic-space-4);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.aic-page .aic-grid--2,
	.aic-page .aic-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
	.aic-page .aic-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.aic-page .aic-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Flow helpers */
.aic-page .aic-stack > * + * {
	margin-block-start: var(--aic-space-3);
}

.aic-page .aic-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aic-space-2) var(--aic-space-3);
	align-items: center;
}