/*
 * Schicht 20: Layout. Container, Sektionsrhythmus, Raster.
 */

/*
 * Vollflächige Bänder stossen ohne Lücke aneinander.
 * WordPress setzt zwischen Blöcken auf oberster Ebene einen Abstand
 * (blockGap). Für Sektionen, Hero, Kopf und Fussbereich ist dieser Abstand
 * falsch, weil jede Sektion ihren Innenabstand selbst mitbringt.
 * Der Abstand für redaktionelle Inhalte innerhalb einer Sektion bleibt erhalten.
 */
.wp-site-blocks > * + *,
.wp-block-post-content > * + * {
	margin-block-start: 0;
}

.lg-section {
	background-color: var(--lg-ctx-bg);
	color: var(--lg-ctx-ink);
	padding-block: var(--lg-section-y);
	padding-inline: var(--lg-gutter);
	position: relative;
	overflow: clip;
}

.lg-section--tight {
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

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

.lg-shell {
	max-width: var(--lg-wide);
	margin-inline: auto;
	position: relative;
	z-index: 1;
}

.lg-shell--data {
	max-width: var(--lg-data);
}

.lg-shell--text {
	max-width: var(--lg-content);
}

/* Rasterhilfen. Mobil eine Spalte, dann aufklappend. */
.lg-grid {
	display: grid;
	gap: var(--lg-space-5);
}

@media (min-width: 640px) {
	.lg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lg-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lg-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
	.lg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.lg-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.lg-grid { gap: var(--lg-space-6); }
}

/* Zweispaltiges Layout mit betonter Hauptspalte. */
.lg-split {
	display: grid;
	gap: var(--lg-space-6);
	align-items: start;
}

@media (min-width: 960px) {
	.lg-split {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: var(--lg-space-8);
	}

	.lg-split--balanced {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lg-split--reverse > :first-child {
		order: 2;
	}
}

/* Sektionskopf: Eyebrow, Titel, Lead, optionaler Link. */
.lg-section-header {
	display: grid;
	gap: var(--lg-space-4);
	margin-bottom: var(--lg-space-7);
}

@media (min-width: 960px) {
	.lg-section-header--split {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
		column-gap: var(--lg-space-6);
	}

	.lg-section-header--split .lg-section-header__text {
		max-width: 46ch;
	}
}

.lg-section-header__title {
	margin: 0;
	color: var(--lg-ctx-ink);
}

.lg-section-header__lead {
	margin: var(--lg-space-3) 0 0;
	color: var(--lg-ctx-ink-muted);
	max-width: 58ch;
}

/* Mobiles horizontales Wischen für Kartenreihen. */
@media (max-width: 639px) {
	.lg-swipe {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(78%, 1fr);
		gap: var(--lg-space-4);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: var(--lg-space-4);
		margin-inline: calc(var(--lg-gutter) * -1);
		padding-inline: var(--lg-gutter);
		scrollbar-width: thin;
	}

	.lg-swipe > * {
		scroll-snap-align: start;
	}
}