/* ==========================================================================
   BKA 2026 v5 · 3/8 LAYOUT – shell, full-bleed bands, grids.
   A page is a stack of full-width bands (.v5-band) with a tone; content sits
   in a centred shell. Bands never touch without a tone change or a rule.
   ========================================================================== */

.v5-shell {
	width: 100%;
	max-width: calc(var(--v5-shell) + 2 * var(--v5-gutter));
	margin-inline: auto;
	padding-inline: var(--v5-gutter);
}
.v5-shell--narrow { max-width: calc(var(--v5-shell-narrow) + 2 * var(--v5-gutter)); }
.v5-shell--wide { max-width: calc(90rem + 2 * var(--v5-gutter)); }

.v5-main { display: block; }
.v5-main:focus { outline: none; }

/* Bands */
.v5-band {
	position: relative;
	padding-block: var(--v5-section-y);
	background: var(--v5-white);
	color: var(--v5-ink);
}
.v5-band--tight { padding-block: var(--v5-section-y-tight); }
.v5-band--flush-top { padding-top: 0; }
.v5-band--mist { background: var(--v5-mist); }
.v5-band--blush { background: var(--v5-red-100); }
.v5-band--lavender { background: var(--v5-mist-2); }
.v5-band--red { background: var(--v5-red); color: var(--v5-on-red); }
.v5-band--red :where(h1, h2, h3, h4) { color: var(--v5-on-red); }
.v5-band--red :where(a:not([class])) { color: #fff; }
.v5-band--red :where(:focus-visible) { box-shadow: var(--v5-focus-on-red); }
.v5-band--white + .v5-band--white,
.v5-band:not([class*="v5-band--"]) + .v5-band:not([class*="v5-band--"]) { border-top: 1px solid var(--v5-line); }

/* Section heading block */
.v5-heading {
	display: grid;
	gap: 1rem 4rem;
	margin-bottom: clamp(2rem, 1.4rem + 2vw, 3.5rem);
}
.v5-heading > * { margin: 0; }
.v5-heading--split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; }
.v5-heading--center { justify-items: center; text-align: center; }
.v5-heading__title { max-width: 22ch; }
.v5-heading__lead { max-width: 40rem; color: var(--v5-ink-soft); font-size: var(--v5-fs-lead); line-height: 1.6; }
.v5-band--red .v5-heading__lead { color: var(--v5-on-red-soft); }

/* Grids */
.v5-grid {
	display: grid;
	gap: var(--v5-gap);
	grid-template-columns: repeat(var(--v5-cols, 3), minmax(0, 1fr));
}
.v5-grid--2 { --v5-cols: 2; }
.v5-grid--3 { --v5-cols: 3; }
.v5-grid--4 { --v5-cols: 4; }
.v5-grid--5 { --v5-cols: 5; }
.v5-grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

.v5-split {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--v5-gap-lg);
	align-items: start;
}
.v5-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v5-split--reverse > :first-child { order: 2; }
.v5-split--center { align-items: center; }
.v5-sticky { position: sticky; top: calc(var(--v5-header-h) + 1.5rem); }

.v5-stack > * + * { margin-top: var(--v5-stack, 1.25rem); }
.v5-cluster { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }

@media (max-width: 68.75rem) {
	.v5-grid--4,
	.v5-grid--5 { --v5-cols: 2; }
	.v5-heading--split { grid-template-columns: 1fr; }
}

@media (max-width: 56rem) {
	.v5-split,
	.v5-split--even { grid-template-columns: 1fr; }
	.v5-split--reverse > :first-child { order: 0; }
	.v5-grid--3 { --v5-cols: 2; }
	.v5-sticky { position: static; }
}

@media (max-width: 40rem) {
	.v5-grid,
	.v5-grid--2,
	.v5-grid--3,
	.v5-grid--4,
	.v5-grid--5 { --v5-cols: 1; }
}