/*
 * Compendion Episode-Single — Layout-Polish für `single-podcast.html`.
 *
 * Eingebunden global per `wp_enqueue_style` in functions.php; die Regeln
 * sind alle an `.compendion-single-episode`-Scope oder eigene
 * BEM-Klassen gebunden, greifen also außerhalb der Episode-Seite nicht.
 *
 * Drei Schwerpunkte:
 * 1. Tags wandern als kleiner abgesetzter Footer-Bereich ans Ende der Seite.
 *    Vorher war die Tag-Wolke im oberen Meta-Bereich und nahm bei
 *    Filmographie-/Cast-Tags (Anson Mount, Babs Olusanmokun, …) extrem
 *    viel vertikalen Platz weg. Jetzt: dezenter Heading + reduzierte
 *    Pill-Größe.
 * 2. Mehr Luft zwischen Podlove-Player und Mitwirkende-Grid (`--spacing--50`).
 * 3. Host/Guest-Sektionen nebeneinander wenn Platz, gestapelt auf Mobile.
 *    Mitwirkende-Grid auf der Episode-Seite ohne max-width — `auto-fill`
 *    mit `minmax(170px, 1fr)` füllt die volle Spaltenbreite.
 */

/* ------------------------------------------------------------------
 * Schlagwörter-Footer (Aufgabe 1)
 * ------------------------------------------------------------------ */

.compendion-episode-tags {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
}

.compendion-episode-tags__heading {
	font-size: 0.9rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent);
	margin: 0;
}

/*
 * Die Post-Terms-Liste rendert WP als inline-Liste aus <a>-Tags ohne
 * Wrapper-Klassenkontrolle, die einzelnen Links bekommen also nur
 * `.wp-block-post-terms` am Container. Pills nicht als Hintergrund-
 * Buttons — das gäbe nochmal mehr visuelles Gewicht — sondern als
 * dezente Inline-Links mit Komma-Separator (WP-Default), aber
 * kleinerer Font-Size und gedämpfter Farbe.
 */
.compendion-episode-tags .wp-block-post-terms,
.compendion-episode-tags__list {
	font-size: 0.8rem;
	line-height: 1.5;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent);
}

.compendion-episode-tags .wp-block-post-terms a,
.compendion-episode-tags__list a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent);
}

.compendion-episode-tags .wp-block-post-terms a:hover,
.compendion-episode-tags .wp-block-post-terms a:focus-visible,
.compendion-episode-tags__list a:hover,
.compendion-episode-tags__list a:focus-visible {
	color: var(--wp--preset--color--accent, var(--wp--preset--color--contrast));
	text-decoration-color: currentColor;
}

/* ------------------------------------------------------------------
 * Player → Mitwirkende-Abstand (Aufgabe 2)
 *
 * Die `compendion-episode-contributors`-Section bekommt direkt unter
 * dem Player mehr Luft. clamp() liefert auf Mobile 2rem, auf Desktop
 * bis 3rem — knapp unter `--spacing--50` (in TT5 ca. 3.5rem) damit
 * der Bereich „atmet" ohne den Lesefluss zu zerreißen.
 * ------------------------------------------------------------------ */

.compendion-single-episode .compendion-episode-contributors {
	margin-top: clamp(2rem, 5vw, 3rem);
}

/* ------------------------------------------------------------------
 * Host/Guest-Sektionen auf der Episode-Single — GESTAPELT, Gaeste zuerst
 *
 * KEINE Grid-Sonderregeln: die Person-Cards nutzen dasselbe Grid wie ueberall
 * (`.compendion-mitwirkende-overview__grid` in compendion-components.css —
 * auto-fit, clamp(180px,18vw,220px), zentriert). Arne 2026-05-30: keine
 * Sonderwuensche, eine Grid-Wahrheit.
 *
 * Hier nur die SEKTIONS-Anordnung: frueher lagen Hosts- und Gast-Sektion per
 * Flex NEBENEINANDER (je `flex: 1 1 320px`) → bei ungleicher Personenzahl
 * Schieflage, und die wichtigeren Gaeste standen rechts/sekundaer. Jetzt
 * gestapelt (`flex-direction: column`), Gaeste via `order: -1` zuerst (oben).
 * Reihenfolge per CSS `order` — DOM bleibt Hosts→Gaeste, kein PHP-Eingriff.
 * ------------------------------------------------------------------ */

.compendion-episode-mitwirkende {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	width: 100%;
}

.compendion-episode-mitwirkende__section {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.compendion-episode-mitwirkende__section--guests {
	order: -1;
}

.compendion-episode-mitwirkende__heading {
	font-size: 0.95rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent);
	margin: 0;
}

@media (max-width: 599px) {
	.compendion-episode-mitwirkende {
		gap: 1.5rem;
	}
}