/*
 * 02-layout.css — Raster, Container, Sektionsrhythmus, Flaechenwechsel.
 *
 * 12 Spalten Desktop, 6 Tablet, 4 Mobile, 24 px Rinne (DESIGN.md, Layout).
 * Sektionen trennen sich ueber Kontrast, Beschnitt und Rhythmus —
 * nicht ueber gerundete Container und Schatten.
 */

.wp-site-blocks {
	display: flow-root;
}

/* --- Container ------------------------------------------------------------ */

.photon-container {
	inline-size: 100%;
	max-inline-size: var(--photon-wide);
	margin-inline: auto;
	padding-inline: var(--photon-space-lg);
}

@media (min-width: 64em) {
	.photon-container {
		padding-inline: var(--photon-space-xl);
	}
}

/* --- Raster ---------------------------------------------------------------
 * Ein einziges Raster fuer die ganze Seite. Sektionen legen nur fest, in
 * welchen Spalten sie sitzen — nicht, wie breit eine Spalte ist.
 */

.photon-grid {
	display: grid;
	grid-template-columns: repeat(var(--photon-columns), minmax(0, 1fr));
	column-gap: var(--photon-gutter);
	row-gap: var(--photon-space-xl);
	align-items: start;
}

/* --- Sektionen ------------------------------------------------------------ */

.photon-section {
	position: relative;
	padding-block: var(--photon-space-section);
}

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

.photon-section--paper {
	background-color: var(--photon-secondary);
	color: var(--photon-text-on-light);
}

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

/*
 * Auf dunklen Flaechen wechseln Text-, Rahmen- und Akzentrollen mit.
 * Das ist der einzige Ort, an dem der Wechsel steht — Komponenten weiter
 * unten fragen nicht nach der Flaeche, auf der sie liegen.
 */
.photon-section--dark {
	--photon-text: var(--photon-text-on-dark);
	--photon-text-muted: var(--photon-text-muted-dark);
	--photon-accent-text: var(--photon-tertiary-on-dark);
	--photon-rule: var(--photon-border-dark-decor);
	--photon-rule-control: var(--photon-border-dark-control);
	--photon-surface: var(--photon-surface-dark);
}

.photon-section--light,
.photon-section--paper {
	--photon-text: var(--photon-text-on-light);
	--photon-text-muted: var(--photon-text-muted-light);
	--photon-accent-text: var(--photon-tertiary-on-light);
	--photon-rule: var(--photon-border-light-decor);
	--photon-rule-control: var(--photon-border-light-control);
}

.photon-section--light {
	--photon-surface: var(--photon-surface-light);
}

.photon-section--paper {
	--photon-surface: var(--photon-secondary);
}

/* --- Spaltenzuweisungen ---------------------------------------------------
 * Mobil belegt jedes Kind die volle Breite. Erst ab Tablet lohnt sich eine
 * Aufteilung, erst ab Desktop die asymmetrische.
 */

.photon-grid > * {
	grid-column: 1 / -1;
	/*
	 * Raster- und Flexelemente haben min-width:auto. Bei reinem Textzoom
	 * (html{font-size:32px}) waechst ein einzelnes Wort ueber die Spurbreite
	 * hinaus und schiebt die ganze Seite auf — gemessen scrollWidth 1406 bei
	 * 1280 px Viewport. Der Seitenzoom war davon nie betroffen, WCAG 1.4.4
	 * meint aber ausdruecklich auch die Textvergroesserung.
	 */
	min-inline-size: 0;
}

/*
 * Dieselbe Regel eine Ebene tiefer. Die Sektionen verschachteln Raster —
 * ein min-width:auto in der zweiten Ebene sprengt die Spur genauso wie in
 * der ersten. Auf Elementen, die weder Raster- noch Flexkinder sind, tut
 * die Angabe nichts.
 */
.photon-grid > * > *,
.photon-header__inner > * > * {
	min-inline-size: 0;
}

@media (min-width: 64em) {
	.photon-col-1-5 { grid-column: 1 / span 5; }
	.photon-col-1-6 { grid-column: 1 / span 6; }
	.photon-col-1-7 { grid-column: 1 / span 7; }
	.photon-col-1-8 { grid-column: 1 / span 8; }
	.photon-col-1-9 { grid-column: 1 / span 9; }
	.photon-col-1-10 { grid-column: 1 / span 10; }
	.photon-col-3-8 { grid-column: 3 / span 6; }
	.photon-col-5-8 { grid-column: 5 / span 4; }
	.photon-col-7-6 { grid-column: 7 / span 6; }
	.photon-col-8-5 { grid-column: 8 / span 5; }
	.photon-col-9-4 { grid-column: 9 / span 4; }
	.photon-col-10-3 { grid-column: 10 / span 3; }
}

/* --- Textmass ------------------------------------------------------------- */

.photon-measure {
	max-inline-size: var(--photon-measure);
}

.photon-measure--tight {
	max-inline-size: 46ch;
}

/* --- Trennlinien ----------------------------------------------------------
 * Eine Haarlinie, kein Schatten, kein Radius. Sie ist zugleich der Traeger
 * der Alignment-Bewegung: sie waechst aus ihrem linken Rand heraus.
 */

.photon-rule {
	border: 0;
	block-size: var(--photon-hairline);
	inline-size: 100%;
	margin: 0;
	background-color: var(--photon-rule);
	transform-origin: left center;
}

.photon-rule--accent {
	background-color: var(--photon-tertiary);
	block-size: 2px;
}