/*
 * Compendion component styles.
 *
 * Patterns and template parts should use semantic class names with the
 * compendion- prefix when block settings are not expressive enough.
 */

/* ---------------------------------------------------------------------------
 * Wide-Layout-Wrapper (`.compendion-wide-layout`)
 *
 * Ersetzt die TT25-Constraint (~640px) durch eine breitere, eigene
 * Layout-Box. Wird auf `<main>` der Profilseite, der Mitwirkenden-Uebersicht
 * (`templates/archive-compendion-mitwirkende.html`), der Dachmarken-
 * Startseite (`templates/front-page-master.html`) sowie der Podcasts- und
 * Episoden-Page (`templates/page-podcasts.html`, `templates/page-episoden.html`)
 * gesetzt. Token-frei, deshalb in der globalen components.css verfuegbar.
 * ------------------------------------------------------------------------- */

.compendion-wide-layout {
	max-width: 1800px;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 3rem);
}

/*
 * `alignfull` innerhalb des Wide-Layout-Wrappers darf NICHT aus dem
 * padding-inline ausbrechen. WP setzt sonst per `.has-global-padding > .alignfull`
 * negative Margins (root-padding nach aussen), die unsere dynamischen Blocks
 * und Master-Sections bis ueber den Wrapper hinaus pressen. Wir wollen volle
 * Breite *innerhalb* des Wrappers, aber Padding zum Rand bleibt.
 *
 * Spezifitaet-Warum:
 *   - WP's Inline-Regel hat Spez 0,2,0.
 *   - Mein File laedt VOR WP's Inline-CSS — also gewinnt WP bei gleicher Spez.
 *   - Variante `.compendion-wide-layout.has-global-padding > .alignfull`
 *     (gleiches Element) hat Spez 0,3,0 und schlaegt WP zuverlaessig.
 *   - `.compendion-wide-layout .has-global-padding > .alignfull` greift bei
 *     verschachtelten `alignfull`-Layern (Master-Pattern in Pattern).
 */
.compendion-wide-layout .alignfull,
.compendion-wide-layout.has-global-padding > .alignfull,
.compendion-wide-layout .has-global-padding > .alignfull {
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
}

/* ---------------------------------------------------------------------------
 * Scroll-Top-Button (Markup in assets/js/compendion-scroll-top.js injiziert)
 *
 * Fixiert unten-rechts. Default versteckt; JS togglet `is-visible` ab einer
 * Bildschirmhoehe Scroll. Token-basiert fuer Dark-Mode-Kompatibilitaet:
 * Kontrast-Background, Base-Text — `compendion-dark.css` dreht die Tokens.
 * ------------------------------------------------------------------------- */

.compendion-back-to-top {
	position: fixed;
	bottom: clamp(1rem, 3vw, 2rem);
	right: clamp(1rem, 3vw, 2rem);
	z-index: 100;
	width: 2.75rem;
	height: 2.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent);
	border-radius: 50%;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
	opacity: 0;
	transform: translateY(0.5rem);
	transition: opacity 200ms ease, transform 200ms ease, background-color 150ms ease;
}

.compendion-back-to-top.is-visible {
	opacity: 0.85;
	transform: translateY(0);
}

.compendion-back-to-top:hover,
.compendion-back-to-top:focus-visible {
	opacity: 1;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 85%, var(--wp--preset--color--primary) 15%);
	outline: 2px solid color-mix(in srgb, var(--wp--preset--color--contrast) 40%, transparent);
	outline-offset: 2px;
}

.compendion-back-to-top svg {
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.compendion-back-to-top {
		transition: none;
	}
}

.compendion-podcast-front-page {
	--compendion-podcast-accent: var(--wp--preset--color--primary);
	--compendion-podcast-contrast: var(--wp--preset--color--contrast);
	--compendion-podcast-surface: var(--wp--preset--color--surface);
}

.compendion-site-header {
	border-block-end: 1px solid var(--wp--preset--color--line);
}

/* ---------------------------------------------------------------------------
 * Footer (parts/footer.html — `.compendion-site-footer`)
 *
 * Drei-Spalten-Layout mit „surface"-Hintergrund. Wir setzen hier die
 * Lese-Hierarchie: Headings in Vollkontrast, Body in `muted`, Links in
 * Kontrast mit dezenter Underline-Optik. Master-Site hat surface = schwarz,
 * Sub-Sites bringen ihren eigenen Surface-Ton mit; die Klassen unten lesen
 * Tokens, fixe Farben nur als Fallback.
 * ------------------------------------------------------------------------- */

.compendion-site-footer {
	border-block-start: 1px solid var(--wp--preset--color--line);
	color: color-mix(in srgb, var(--compendion-color-on-surface, var(--wp--preset--color--contrast)) 78%, transparent);
	font-size: 0.95rem;
	line-height: 1.5;
}

.compendion-site-footer :where(h2, h3) {
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));
	margin-block-start: 0;
	margin-block-end: 0.6em;
}

.compendion-site-footer :where(p) {
	margin-block: 0 0.65em;
}

.compendion-site-footer :where(p):last-child {
	margin-block-end: 0;
}

.compendion-network-note {
	background: color-mix(in srgb, var(--wp--preset--color--compendion) 82%, var(--wp--preset--color--base));
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 1.25rem;
	color: var(--compendion-color-on-base, var(--wp--preset--color--contrast));
	padding: clamp(1rem, 3vw, 1.5rem);
}

.compendion-card {
	border-radius: 1.5rem;
	overflow: hidden;
}

.compendion-network-kicker {
	color: var(--wp--preset--color--muted);
	margin-top: var(--wp--preset--spacing--30);
}

.compendion-site-footer a {
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, var(--compendion-color-on-surface, var(--wp--preset--color--contrast)) 40%, transparent);
	text-underline-offset: 0.18em;
	transition: text-decoration-color 150ms ease;
}

.compendion-site-footer a:hover,
.compendion-site-footer a:focus-visible {
	text-decoration-color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));
}

.compendion-site-footer .compendion-footer-links {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
}

.compendion-site-footer .compendion-footer-links li {
	margin: 0;
}

/*
 * Footer-Links als Touch-Targets: jedes `a` mindestens 44px hoch, damit
 * auch mit dem Daumen treffbar (Smashing Touch-Checklist 01/04).
 */
.compendion-site-footer .compendion-footer-links a {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	padding-block: 0.25rem;
}

@media (max-width: 600px) {
	.compendion-site-footer .wp-block-columns {
		gap: var(--wp--preset--spacing--40);
	}

	.compendion-site-footer .wp-block-column {
		flex-basis: 100% !important;
	}
}

.wp-element-button:not(:hover),
.wp-block-button__link:not(:hover) {
	color: var(--compendion-color-on-primary, var(--wp--preset--color--contrast));
	box-shadow: 0 0 0 2px currentColor;
}

/*
 * Outline-Buttons haben bereits einen sichtbaren Rand (border: 2px solid).
 * Der generische box-shadow wuerde einen doppelten Ring erzeugen — Reset.
 */
.wp-block-button[class*="is-style-outline"] .wp-block-button__link:not(:hover),
.wp-block-button[class*="is-style-outline"] .wp-element-button:not(:hover) {
	box-shadow: none;
}

.compendion-footer-links {
	list-style: none;
	padding-left: 0;
}

.compendion-hero-card,
.compendion-podcast-card,
.compendion-support-card {
	background: var(--compendion-podcast-surface, var(--wp--preset--color--surface));
	border: 1px solid var(--wp--preset--color--line);
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));
	padding: clamp(1.25rem, 4vw, 2rem);
}

.compendion-hero-card :where(.compendion-kicker, p, a),
.compendion-podcast-card :where(.compendion-kicker, p, a),
.compendion-support-card :where(.compendion-kicker, p, a) {
	color: inherit;
}

.compendion-kicker {
	color: var(--wp--preset--color--secondary);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.compendion-podcast-cover-placeholder {
	aspect-ratio: 1;
	align-items: center;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 1.5rem;
	box-shadow: 0 1rem 3rem color-mix(in srgb, var(--compendion-podcast-accent, currentColor) 12%, transparent);
	color: var(--wp--preset--color--muted);
	display: flex;
	justify-content: center;
	min-height: 12rem;
}

.compendion-podcast-cover-placeholder p {
	opacity: 0.68;
}

.compendion-podcast-cover {
	margin-inline: auto;
}

.compendion-podcast-cover :where(img) {
	aspect-ratio: 1;
	border-radius: 1.25rem;
	box-shadow: 0 1rem 3rem color-mix(in srgb, var(--compendion-podcast-accent, currentColor) 16%, transparent);
	height: auto;
	object-fit: cover;
	width: min(100%, 20rem);
}

.compendion-support-card {
	min-height: 100%;
}

.compendion-featured-episode-card .podlove-web-player {
	margin-block: var(--wp--preset--spacing--30);
}

.compendion-episode-list {
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.compendion-episode-card {
	border-block-start: 1px solid var(--wp--preset--color--line);
	padding: clamp(1.25rem, 4vw, 2rem);
}

.compendion-episode-card time {
	color: var(--wp--preset--color--muted);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.compendion-episode-card .wp-block-post-title {
	margin-block: 0.35rem 0.65rem;
}

.compendion-episode-card .wp-block-post-excerpt__more-link {
	display: inline-flex;
	min-height: 3.125rem;
	align-items: center;
	text-underline-offset: 0.16em;
}

.compendion-episode-list--compact {
	display: block;
	gap: 0;
}

.compendion-episode-row {
	align-items: baseline;
	border-block-start: 1px solid var(--wp--preset--color--line);
	column-gap: var(--wp--preset--spacing--30);
	min-height: 3.125rem;
	row-gap: 0.25rem;
}

.compendion-episode-row__title {
	margin-block: 0;
	flex: 1 1 60%;
	min-width: 0;
}

.compendion-episode-row__title a {
	text-decoration: none;
}

.compendion-episode-row__title a:hover,
.compendion-episode-row__title a:focus-visible {
	text-decoration: underline;
}

.compendion-episode-row__date {
	color: var(--wp--preset--color--muted);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	flex: 0 0 auto;
}

.compendion-support-card {
	border-block-start: 0.35rem solid var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------------------
 * Network content (Feature 7 Schicht 2)
 * Erfolgs-Pfad: kein spezielles Styling — der eingebettete Master-Inhalt
 * behält die Standard-Block-Darstellung des aktiven Themes.
 * Fallback-Pfad: eine freundliche Karte mit Link auf die Dachmarke, falls
 * die Master-Seite (noch) nicht existiert oder nicht geladen werden konnte.
 * ------------------------------------------------------------------------- */

.compendion-network-content--fallback {
	max-inline-size: 40rem;
	margin-block: var(--wp--preset--spacing--40);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0.5rem;
	background-color: var(--compendion-color-surface-soft, color-mix(in srgb, var(--wp--preset--color--surface) 92%, var(--wp--preset--color--base)));
	color: var(--compendion-color-on-surface-soft, var(--compendion-color-on-surface, var(--wp--preset--color--contrast)));
	text-align: center;
}

.compendion-network-content--fallback .compendion-network-content__title {
	margin-block-start: 0;
	font-size: var(--wp--preset--font-size--large);
}

.compendion-network-content__fallback-text {
	color: var(--compendion-color-on-surface-soft-muted, inherit);
	margin-block: var(--wp--preset--spacing--20);
}

.compendion-network-content__fallback-link {
	display: inline-block;
	margin-block-start: var(--wp--preset--spacing--20);
	padding: 0.6rem 1.15rem;
	border-radius: 0.375rem;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	font-weight: 600;
}

.compendion-network-content__fallback-link:hover,
.compendion-network-content__fallback-link:focus-visible {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
}

/*
 * Mitwirkende-Visitenkarte (Feature 8 / Schicht 4).
 * Render-Quelle: includes/person-shortcode.php — `[compendion-person ...]`.
 * Bewusst kompakt gehalten; Sub-Sites koennen die Klassen ueberschreiben,
 * ohne die HTML-Struktur anzufassen.
 */
.compendion-person {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20, 1rem);
	margin: 0;
	padding: var(--wp--preset--spacing--20, 1rem);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 1rem;
	background: color-mix(in srgb, var(--wp--preset--color--base) 96%, var(--wp--preset--color--contrast));
}

.compendion-person__avatar {
	flex: 0 0 auto;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 50%;
	object-fit: cover;
}

.compendion-person__caption {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.compendion-person__name {
	font-weight: 600;
	line-height: 1.2;
}

.compendion-person__role {
	color: var(--wp--preset--color--muted);
	font-size: 0.9em;
}

.compendion-person__link {
	margin-top: 0.25rem;
	font-size: 0.85em;
	text-underline-offset: 0.16em;
}

/* ---------------------------------------------------------------------------
 * Mitwirkenden-Card-Komponente (.compendion-mitwirkende-card)
 *
 * Quergeschnittene Karte fuer Mitwirkende — wird sowohl vom Master-Block
 * `compendion/mitwirkende-grid` (auf /mitwirkende/) als auch vom Sub-Site-
 * Shortcode `[compendion-contributors]` benutzt. Layout, Farben, Mobile-
 * Verhalten sind absichtlich identisch. Hier liegt die einzige Wahrheit.
 *
 * Robustheit gegen Master-Palette: `surface` und `contrast` sind auf der
 * Master-Site identisch (beide fast schwarz), `primary` ist identisch mit
 * `base` (beide fast gelb). Card-Backgrounds und sichtbare Borders werden
 * deshalb gegen `base` und `contrast` gemischt — nicht gegen `surface`
 * oder `primary`.
 * ------------------------------------------------------------------------- */

.compendion-mitwirkende-card {
	background: color-mix(in srgb, var(--wp--preset--color--base) 92%, var(--wp--preset--color--contrast) 8%);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
	border-radius: 1rem;
	overflow: hidden;
	transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.compendion-mitwirkende-card:hover,
.compendion-mitwirkende-card:focus-within {
	border-color: var(--wp--preset--color--contrast);
	transform: translateY(-2px);
	box-shadow: 0 6px 20px color-mix(in srgb, var(--wp--preset--color--contrast) 22%, transparent);
}

/*
 * Card-Layout: Avatar oben full-bleed (Polaroid-Look), Body unten mit
 * Padding. Der ganze Inhalt liegt im `__link`-Wrapper (`<a>` bei
 * verfuegbarem Profil-URL, `<div>` als Fallback), damit die Card als
 * eine Touch-Zone klickbar ist (Smashing-Checklist: Touch-Target) und
 * die Mobile-Umordnung (siehe unten) konsistent greift.
 */
.compendion-mitwirkende-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.compendion-mitwirkende-card__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--contrast);
	outline-offset: -4px;
}

.compendion-mitwirkende-card__avatar-wrap {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: color-mix(in srgb, var(--wp--preset--color--base) 88%, var(--wp--preset--color--contrast) 12%);
}

.compendion-mitwirkende-card__avatar {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.compendion-mitwirkende-card__avatar--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 55%, transparent);
	font-family: var(--wp--preset--font-family--display, inherit);
	font-weight: 700;
	font-size: clamp(2rem, 6vw, 3.25rem);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/*
 * Body fuellt die Cardhoehe (`flex: 1`), damit Cards in einer Reihe gleich
 * hoch sind — Grid stretch greift, Avatar bleibt 1:1, Body waechst auf
 * Row-Resthoehe. Name + Badges sitzen am oberen Body-Rand (kein
 * `margin-top: auto` auf Badges; eine Luecke zwischen Name und Badges sah
 * frueher haesslich aus). Restliche Body-Hoehe ist Card-Background — bei
 * inhaltsaehnlichen Reihen kaum sichtbar.
 *
 * Master-Block und Sub-Site-Shortcode nutzen exakt dieselben Werte —
 * eine Wahrheit.
 */
.compendion-mitwirkende-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 0.6rem 0.75rem 0.55rem;
	flex: 1;
}

/* Name: Primary gross/fett (Realname), Secondary kursiv eine Zeile darunter
 * (Publicname, falls vom Realname abweichend). Bei nur einem Namen
 * verschwindet die zweite Zeile komplett — kein Leerraum.
 */
.compendion-mitwirkende-card__name {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.compendion-mitwirkende-card__name-primary {
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
}

.compendion-mitwirkende-card__name-secondary {
	font-style: italic;
	font-weight: 400;
	font-size: 0.8rem;
	line-height: 1.25;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 65%, transparent);
	overflow-wrap: anywhere;
}

/* Badges: Compendion-Look — dunkler Hintergrund, helle Schrift, deutlicher
 * Kontrast auf jeder Palette. Pillen stapeln vertikal (eine pro Zeile), Breite
 * folgt dem Inhalt; Schriftgroesse ist so gewaehlt, dass auch der laengste
 * Show-Name („Gestern Heute Uebermorgen") in der schmalsten Card (~180px)
 * einzeilig bleibt. „+N"-Badge teilt das Geometrie-Setup, ist aber mit Border
 * statt Fill als Indikator gekennzeichnet (kein Tooltip — bewusst statisch,
 * siehe Konstanten-Kommentar in mitwirkende-overview.php).
 */
.compendion-mitwirkende-card__badges {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.compendion-mitwirkende-card__badge {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	border-radius: 999px;
	font-size: 0.62rem;
	font-weight: 600;
	padding: 0.2em 0.7em;
	line-height: 1.35;
	white-space: nowrap;
	max-width: 100%;
}

.compendion-mitwirkende-card__badge--more {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--contrast);
}

.compendion-mitwirkende-card__badge a,
.compendion-mitwirkende-card__badge a:hover,
.compendion-mitwirkende-card__badge a:focus-visible {
	color: inherit;
	text-decoration: none;
}

/*
 * Card-Grid: feste Spurbreite (clamp 180-220px), auto-fit, Spuren mittig im
 * Wide-Layout-Container. Default `align-items: stretch` greift — Cards in
 * einer Reihe sind gleich hoch (auf die hoechste). Avatare bleiben
 * quadratisch (aspect-ratio 1/1, full-bleed an der Card-Breite), die
 * Body-Resthoehe wird ueber `flex: 1` (siehe `__body`) gefuellt — kein
 * Card-Background-Streifen unter dem Body.
 *
 * Wird ebenfalls von Master-Block und Sub-Site-Shortcode genutzt
 * — eine Wahrheit, ein Grid.
 */
.compendion-mitwirkende-overview__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, clamp(180px, 18vw, 220px));
	gap: clamp(0.875rem, 2vw, 1.25rem);
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

@media (max-width: 479px) {
	.compendion-mitwirkende-overview__grid {
		grid-template-columns: 1fr;
	}
}

/*
 * Unter 480px faellt das Grid auf 1 Spalte — eine full-bleed Avatar-Card
 * pro Reihe wuerde dann mehr als ein Drittel der Bildschirmhoehe fressen.
 * Stattdessen: horizontales Layout — Avatar links auf voller Karten-Hoehe
 * (quadratisch, Breite ergibt sich aus Hoehe), Name/Badges rechts.
 *
 * Karten-Hoehe ist auf das Maximum aller Varianten gepinnt (`min-height`),
 * damit die Card-Reihe nicht „flattert", wenn Personen unterschiedlich viele
 * Pillen haben. Bemessung: Body-Padding (2 × 0.75rem) + Name-Primary
 * (~0.95rem × 1.2) + Name-Gap (0.1rem) + Name-Secondary (~0.8rem × 1.25)
 * + Body-Gap (0.3rem) + 4 × Badge-Hoehe (je 0.62rem × 1.35 + 2 × 0.2em)
 * + 3 × Badge-Gap (0.25rem) ≈ 9.13rem; 9.5rem deckt das mit Puffer ab.
 * 4 Badges = `COMPENDION_MITWIRKENDE_OVERVIEW_MAX_BADGES` (3) + 1 „+N"-Pille.
 *
 * `align-items: stretch` zieht den Avatar-Wrap auf die gepinnte Card-Hoehe,
 * `aspect-ratio: 1/1` leitet die Breite ab. Buendig mit Karten-Kanten
 * links/oben/unten — `overflow: hidden` + `border-radius: 1rem` an der
 * Card klippt die Avatar-Ecken sauber mit.
 */
@media (max-width: 479px) {
	.compendion-mitwirkende-card {
		min-height: 9.5rem;
	}

	.compendion-mitwirkende-card__link {
		flex-direction: row;
		align-items: stretch;
	}

	.compendion-mitwirkende-card__avatar-wrap {
		width: auto;
		flex-shrink: 0;
		aspect-ratio: 1 / 1;
		border-radius: 0;
	}

	/* `min-width: 0` erlaubt dem Body-Flex-Child zu shrinken — sonst
	 * blaehen lange Namen mit `nowrap` den Body in die Breite, der Avatar
	 * folgt ueber `aspect-ratio` in der Hoehe und die Card sprengt das
	 * 1fr-Grid. Truncation auf den Namens-Zeilen darunter haengt davon ab.
	 */
	.compendion-mitwirkende-card__body {
		padding: 0.75rem 0.9rem;
		min-width: 0;
	}

	/* Lange Personen-Namen (z.B. „Alexander Waschkau") wuerden zweizeilig
	 * brechen, was den Body verlaengert; der Avatar ist `aspect-ratio: 1/1`
	 * + `align-self: stretch`, also wuerde er entsprechend breiter und
	 * die Card waere breiter als die Nachbarn (1fr-Grid bricht). Deshalb
	 * Namen einzeilig erzwingen und truncaten.
	 */
	.compendion-mitwirkende-card__name-primary,
	.compendion-mitwirkende-card__name-secondary {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* Shortcode-Wrapper auf der Sub-Site-Frontpage. Erbt Card-Stil von oben,
 * druckt nur das Padding-Verhalten des Master-Overviews zurueck (Master-
 * Overview ist eine eigene Page, der Shortcode lebt eingebettet in einem
 * Block-Group-Wrapper mit eigenem Padding).
 */
.compendion-mitwirkende-overview--inline {
	display: flex;
	flex-direction: column;
	gap: clamp(2.5rem, 5vw, 4.5rem);
}

.compendion-mitwirkende-overview--inline .compendion-mitwirkende-overview__group {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.compendion-mitwirkende-overview--inline .compendion-mitwirkende-overview__group h2 {
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	margin-block: 0;
}

/* ---------------------------------------------------------------------------
 * Sub-Site-Frontpage (`templates/front-page.html`) — Sektionen "Weitere Folgen"
 * und "Mitwirkende".
 *
 * Layout-Entscheidungen:
 *   - Section-Headings werden auf die Lesebreite (`contentSize` = 720px aus
 *     theme.json) geklemmt und sitzen linksbuendig — sie sollen nicht ueber
 *     die ganze Breite springen, sondern in einer ruhigen Spalte stehen,
 *     unabhaengig davon wie weit der Card-Bereich darunter aufgeht.
 *   - Card-Grids zentrieren ihre Spuren via `justify-content: center`. Bei
 *     wenigen Cards (z.B. 3 Hosts, 4 Mitwirkende) wirkt der Bereich dadurch
 *     ausbalanciert, statt mit grossem Leerraum rechts. Bei vielen Cards
 *     sind die Reihen ohnehin voll, das Zentrieren ist dann visuell ein
 *     No-op.
 *   - Spuren-Breite via `clamp()` an Viewport gekoppelt: Episode-Tiles
 *     260–320px, Mitwirkende-Cards 180–220px. `auto-fit` kollabiert leere
 *     Spuren, sodass das Grid sich an die Card-Anzahl anpasst.
 * ------------------------------------------------------------------------- */

/*
 * Headings stehen in einer eigenen 720px-Spalte, mittig zur Viewport-Achse
 * — gleich wie der 1800px-Cards-Container darunter. Beide Container sind
 * dadurch zentriert; der Text im Heading bleibt linksbuendig innerhalb der
 * 720px-Box (h2-Default `text-align: left`). Karten-Grid ist davon
 * entkoppelt und nimmt die volle Wide-Layout-Breite ein, zentriert seine
 * Spuren.
 */
.compendion-podcast-front-page .compendion-latest-episodes > h2,
.compendion-front-mitwirkende h2 {
	max-width: var(--wp--style--global--content-size, 720px);
	margin-inline: auto;
	width: 100%;
}

.compendion-podcast-front-page .compendion-latest-network-episodes {
	grid-template-columns: repeat(auto-fit, clamp(260px, 22vw, 320px));
	justify-content: center;
}

/* ---------------------------------------------------------------------------
 * Primary navigation — Aktiv-State
 * Hebt den aktuellen Menüpunkt sichtbar hervor. WordPress setzt auf passende
 * Items automatisch `current-menu-item`, bei verschachtelten Submenus zusätzlich
 * `current-menu-ancestor` / `current-menu-parent` sowie das ARIA-Attribut
 * `aria-current="page"`. Wir adressieren alle Varianten, damit Sub-Site-
 * Hauptnavigation (flach) und Dachmarken-Navigation (wp_navigation-Post mit
 * möglichen Submenus) gleich aussehen.
 *
 * Unterstrich-Farbe = `currentColor` (Linkfarbe selbst). Das funktioniert auf
 * jeder Site, weil sich die Linkfarbe per definitionem vom Header-Hintergrund
 * abheben muss — andernfalls wäre der Text selbst unlesbar. Eine vorherige
 * Variante mit `--wp--preset--color--primary` war auf der Dachmarke unsichtbar
 * (primary == base == gelb → Unterstrich auf gelbem Header verschwand).
 * ------------------------------------------------------------------------- */

.compendion-primary-nav .wp-block-navigation-item.current-menu-item > :where(a, button),
.compendion-primary-nav .wp-block-navigation-item.current-menu-ancestor > :where(a, button),
.compendion-primary-nav .wp-block-navigation-item.current-menu-parent > :where(a, button),
.compendion-primary-nav .wp-block-navigation-item :where(a, button)[aria-current="page"] {
	font-weight: 700;
	text-decoration-line: underline;
	text-decoration-thickness: 0.15em;
	text-underline-offset: 0.3em;
	text-decoration-color: currentColor;
}

/* ---------------------------------------------------------------------------
 * Master-Frontpage (compendion.net/) — Section-Rhythmus + Visitenkarten-Look
 * Gilt nur fuer das Template `front-page-master.html`. Sub-Sites laden
 * dasselbe CSS, treffen die `.compendion-home-master__*`-Klassen aber nirgends.
 * Section-Stack: Hero → Stats → Network-Grid → Latest-Network-Episodes.
 *
 * Master-Tokens (per Inline-Palette aus Compendion Core, nicht in theme.json):
 *   base #F5D80E (gelb), contrast #181816 (schwarz), primary #F5D80E (gelb),
 *   surface #181816 (schwarz), line #FFFFFF (weiss), accent #70630B (dunkel-
 *   gelb). primary == base, deshalb wird die Markenfarbe als Section-Trenner
 *   nicht verwendet — wir greifen auf contrast/line zurueck.
 * ------------------------------------------------------------------------- */

/*
 * Section-Trenner. Linie auf jeder `__section`, wenn ein Sibling davorliegt —
 * der Hero ist seit dem 2-Column-Umbau kein `__section` mehr, soll aber von
 * der ersten Section dennoch durch eine Linie getrennt werden.
 */
.compendion-home-master__section:not(:first-child) {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #000) 18%, transparent);
}

.compendion-home-master__section > :where(h2, .compendion-kicker) {
	margin-top: 0;
}

.compendion-home-master__section .compendion-kicker {
	margin-bottom: 0.25rem;
}

.compendion-home-master__section > h2 {
	font-weight: 700;
	letter-spacing: -0.01em;
	margin-block-end: 0.4em;
}

/*
 * Hero auf Master: groesserer Visitenkarten-Eindruck — H1 darf richtig knallen.
 * Greift nur, wenn der Hero im Master-Template gerendert wird (Pattern
 * `compendion/hero-compendion` ist auf compendion.net die einzige Quelle).
 *
 * Seit dem 2-Column-Umbau: links Logo/H1/Subtitle/Buttons (zentriert in der
 * 2/3-Spalte), rechts der `compendion/network-stats`-Block (1/3-Spalte).
 * Spaltenstack via WP-Default (<= 781px).
 */
.compendion-home-master .compendion-hero-network {
	padding-block: clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 5vw, 3rem);
}

.compendion-home-master .compendion-hero-network h1 {
	font-size: clamp(2.75rem, 9vw, 5.25rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.02;
	margin-block: 0.2em 0.1em;
}

.compendion-home-master .compendion-hero-network .wp-block-buttons {
	gap: 0.75rem;
	margin-top: var(--wp--preset--spacing--30);
	justify-content: center;
}

.compendion-home-master .compendion-hero-card-master .wp-block-site-logo {
	margin-bottom: var(--wp--preset--spacing--20);
}

/*
 * Mobile-Stack: WP-Default-Breakpoint fuer wp:columns liegt bei 781px. Unter
 * dem stehen Hero und Stats untereinander. Etwas Luft zwischen den beiden,
 * damit die Stats nicht direkt auf den Buttons kleben.
 */
@media (max-width: 781px) {
	.compendion-home-master .compendion-hero-stats-column {
		margin-top: var(--wp--preset--spacing--40);
	}
}

@media (max-width: 480px) {
	.compendion-home-master__section + .compendion-home-master__section {
		padding-top: var(--wp--preset--spacing--40);
	}
}