/*
 * 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);
}

/* ------------------------------------------------------------------
 * Mitwirkende-Grid: keine max-width auf der Episode-Seite (Aufgabe 3)
 *
 * Der Default in compendion-components.css ist
 *   grid-template-columns: repeat(auto-fit, clamp(180px, 18vw, 220px));
 * mit `justify-content: center` — das zentriert Cards bei wenig
 * Inhalt und limitiert die Anzahl pro Reihe durch die starre
 * 220-px-Track-Obergrenze.
 *
 * Auf der Episode-Single ist die Section ohnehin schon `alignwide`
 * (siehe Player-Wrapping), wir wollen so viele Cards nebeneinander
 * wie reinpassen. Mit `auto-fill` + `minmax(170px, 1fr)` füllen die
 * Tracks die ganze Breite und es passen 4–6 Cards in eine Reihe.
 * ------------------------------------------------------------------ */

.compendion-single-episode .compendion-episode-mitwirkende__grid {
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	justify-content: stretch;
	max-width: none;
}

/* ------------------------------------------------------------------
 * Host/Guest-Sektionen (Aufgabe 4)
 *
 * Container ist ein Flex-Row mit Wrap: bei genug Platz stehen Hosts-
 * und Guests-Sektion nebeneinander, jeweils `flex: 1 1 320px`.
 * Bei <600px stacken sie automatisch durch den Flex-Basis-Wrap.
 *
 * Gap zwischen den Sektionen ist `2.5rem` — größer als der Card-Gap
 * (~1rem) im inneren Grid, damit die Sektionsgrenze visuell klarer
 * ist als die Card-Lücken.
 *
 * Wichtig: der Outer-Wrapper (`.compendion-episode-mitwirkende`)
 * existiert auch wenn nur eine Sektion vorhanden ist (z.B. Episode
 * ohne Gäste). In dem Fall greift `flex: 1 1 100%` automatisch und
 * die einzelne Sektion füllt die volle Breite.
 * ------------------------------------------------------------------ */

.compendion-episode-mitwirkende {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
	width: 100%;
}

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

.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;
}

/*
 * Bei sehr schmalen Viewports unter 600px sicherheitshalber stacken
 * erzwingen — flex-basis 320px würde bei 400-px-Viewport zwar
 * trotzdem wrappen, aber `flex-grow: 1` sorgt dafür dass eine
 * einzelne Sektion ihre Breite hat. Ohne `width: 100%` hier könnten
 * Margin-/Padding-Konflikte des Parent-Layouts die Sektionen schmaler
 * machen als nötig.
 */
@media (max-width: 599px) {
	.compendion-episode-mitwirkende {
		gap: 1.75rem;
	}

	.compendion-episode-mitwirkende__section {
		flex: 1 1 100%;
		width: 100%;
	}
}