/**
 * Compendion Serienguide — Trek-Episoden-Uebersicht.
 *
 * Struktur an den Retro-Katalog angelehnt: dunkle Panel-Karten je Staffel
 * (surface-panel), Akzent aus Palette-Tokens, Segmented-Control fuer den
 * Staffel-Filter. Im Masterlist-Modus (LOG): offene Folgen gedaempft, die naechste
 * mit Akzent-Badge. Farben ausschliesslich ueber Tokens (--wp--preset--color--*
 * / --compendion-color-*). Pill 999px, Karte 1rem.
 *
 * @package Compendion_WP_Theme
 */

.csg {
	margin-block: 1.5rem;
	--csg-card-bg:   var(--compendion-color-surface-panel, #22151e);
	--csg-ink:       var(--compendion-color-on-surface-panel, #f4f1f2);
	--csg-accent:    var(--wp--preset--color--primary, #c00191);
	--csg-hover:     color-mix(in srgb, var(--csg-ink) 8%, transparent);
	--csg-hairline:  color-mix(in srgb, var(--csg-ink) 14%, transparent);
}

/* Lese-Spalte zentriert auf breiten Screens (folgt dem Retro-Muster). */
.csg__intro,
.csg__stats,
.csg__bar {
	max-width: 60rem;
	margin-inline: auto;
}

/* --- Intro -------------------------------------------------------------- */

.csg__intro {
	margin-block-end: 0.75rem;
}

.csg__intro-title {
	margin: 0 0 0.35rem;
	font-size: clamp(1.7rem, 4vw, 2.4rem);
	line-height: 1.15;
}

.csg__intro-text {
	margin: 0;
	max-width: 60ch;
	opacity: 0.88;
}

.csg__stats {
	margin: 0 0 1rem;
	font-size: 0.9rem;
	opacity: 0.78;
}

/* --- Steuerleiste ------------------------------------------------------- */

.csg__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	align-items: center;
	justify-content: space-between;
	margin-block-end: 1.25rem;
}

.csg__search-wrap {
	flex: 1 1 14rem;
}

.csg__search {
	width: 100%;
	box-sizing: border-box;
	padding: 0.5rem 0.85rem;
	border-radius: 0.5rem;
	border: 1px solid var(--csg-hairline);
	background: var(--csg-card-bg);
	color: var(--csg-ink);
	font: inherit;
}

.csg__search::placeholder {
	color: var(--csg-ink);
	opacity: 0.55;
}

/* Segmented Control (Staffel-Filter) — Muster wie Retro-Katalog.
 * Rahmen/Trennlinien aus `contrast` (mode-aware gegen den SEITEN-Hintergrund,
 * auf dem die Leiste sitzt) statt aus dem Panel-Ink `--csg-hairline` — letzteres
 * ist von `on-surface-panel` (hell) abgeleitet und im Light Mode auf hellem
 * Seiten-Bg unsichtbar. Dezente `contrast 6%`-Füllung macht den Track auch ohne
 * Auswahl sichtbar. */
.csg-seg {
	display: inline-flex;
	flex-wrap: wrap;
	border-radius: 0.5rem;
	overflow: hidden;
	border: 1px solid color-mix( in srgb, var(--wp--preset--color--contrast, #000) 30%, transparent );
	background: color-mix( in srgb, var(--wp--preset--color--contrast, #000) 6%, transparent );
}

.csg-pill {
	appearance: none;
	border: 0;
	border-left: 1px solid color-mix( in srgb, var(--wp--preset--color--contrast, #000) 18%, transparent );
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.9rem;
	padding: 0.35rem 0.8rem;
	cursor: pointer;
	line-height: 1.2;
	transition: background 0.15s, color 0.15s;
}

.csg-pill:first-child {
	border-left: 0;
}

.csg-pill:hover:not( .is-active ),
.csg-pill:focus-visible:not( .is-active ) {
	background: color-mix( in srgb, var(--wp--preset--color--contrast, #000) 12%, transparent );
}

/* Aktiv = Akzentfarbe (primary) mit on-primary-Text → klar abgehoben in beiden
 * Modi. */
.csg-pill.is-active {
	background: var(--csg-accent);
	color: var(--compendion-color-on-primary, var(--wp--preset--color--base, #fff));
}

.csg :focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* --- Staffeln ----------------------------------------------------------- */

.csg__seasons {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.csg-season {
	background: var(--csg-card-bg);
	color: var(--csg-ink);
	border-radius: 1rem;
	border: 1px solid var(--csg-hairline);
	border-left: 4px solid var(--csg-accent);
	/* Tiefe wie DML `.crk-cart` — die Karte hebt sich satt vom Seiten-Hintergrund
	 * ab, statt als dünner Balken zu schweben. */
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
	padding: 0.85rem 1.05rem;
	transition: box-shadow 0.15s, border-color 0.15s;
}

.csg-season[open] {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.26);
}

/* Subtiler Hover auf der ganzen Karte (Muster DML `.crk-cart:hover`): leicht
 * angehobener Schatten, Akzent-Border bleibt intakt. */
.csg-season:hover {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.26);
}

.csg-season[hidden] {
	display: none;
}

/* Staffel-Kopf = klickbares <summary>. Default-Disclosure-Marker weg, eigener
 * Chevron rechts (rotiert bei [open]). */
.csg-season__head {
	display: flex;
	align-items: center;
	gap: 0.6rem 0.9rem;
	flex-wrap: wrap;
	margin: 0;
	font-size: 1.15rem;
	cursor: pointer;
	list-style: none;
}

.csg-season__head::-webkit-details-marker {
	display: none;
}

.csg-season__title {
	font-weight: 700;
	font-size: 1.05rem;
}

/* Chevron als letztes Element (mr-auto schiebt ihn nach rechts). */
.csg-season__head::after {
	content: "";
	margin-inline-start: auto;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	opacity: 0.6;
	transition: transform 0.15s;
}

.csg-season[open] > .csg-season__head::after {
	transform: rotate(45deg);
}

.csg-season__head:hover {
	color: var(--csg-accent);
}

.csg-season__list {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
	/* Folgen je Staffel fliessen in responsive CSS-Columns (Muster Retro-Katalog
	 * `.crk__list`): `column-width` schaltet je nach Breite 1–4 Spalten, break-
	 * inside-Schutz hält jede Zeile zusammen. Kompakt = schmalere Spalten (mehr),
	 * Detail = breitere (das Jahr braucht Platz) — s. View-Block weiter unten. */
	column-width: 19rem;
	column-gap: 1.5rem;
}

/* --- Folgen-Zeile ------------------------------------------------------- */

.csg-ep {
	display: grid;
	grid-template-columns: 4rem 1fr auto;
	align-items: baseline;
	gap: 0.3rem 0.6rem;
	padding: 0.28rem 0.4rem;
	border-radius: 0.5rem;
	border-top: 1px solid var(--csg-hairline);
	/* Zeile nie zwischen zwei Spalten zerreissen (gleiches Schutzmuster wie
	 * Retro `.crk-row`), greift im 2-Spalten-Modus auf breiten Screens. */
	break-inside: avoid;
}

.csg-ep:first-child {
	border-top: 0;
}

.csg-ep[hidden] {
	display: none;
}

.csg-ep:hover {
	background: var(--csg-hover);
}

.csg-ep__code {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	/* Panel-Ink statt Akzent: der Akzent (= primary) ist gegen den variablen
	 * surface-panel NICHT kontrast-sicher — auf der olivgrünen LOG-Palette kaum
	 * lesbar. Ink (on-surface-panel) liest auf jeder Palette; der Akzent lebt im
	 * Staffel-Rand + „nächste"-Badge weiter. */
	color: var(--csg-ink);
	white-space: nowrap;
}

/* Titel-Block: Haupttitel + gedaempfter Zweittitel untereinander. */
.csg-ep__titles {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.05rem;
}

.csg-ep__title {
	color: inherit;
	text-decoration: none;
	font-weight: 500;
}

a.csg-ep__title:hover {
	text-decoration: underline;
}

.csg-ep__title-alt {
	font-size: 0.8rem;
	opacity: 0.62;
}

/* Podcast-Episoden-Pille (rechts), Muster wie Retro `crk-game__ep`. */
.csg-ep__ep {
	align-self: center;
	font-size: 0.78rem;
	font-weight: 700;
	text-decoration: none;
	padding: 0.05rem 0.55rem;
	border-radius: 999px;
	color: inherit;
	white-space: nowrap;
	/* Etwas kräftigere Ink-Tönung, damit die Pille auch auf hellen Paletten als
	 * eigenständiges Element liest (Ink-Text auf Ink-Tint bleibt kontrast-sicher). */
	background: color-mix( in srgb, currentColor 18%, transparent );
}

a.csg-ep__ep:hover,
a.csg-ep__ep:focus-visible {
	background: var(--csg-accent);
	color: var(--wp--preset--color--contrast, #fff);
}

/* Keine Zeilen-Dämpfung: offene und besprochene Folgen erscheinen gleich stark
 * (Arne 2026-06-15). Der Unterschied liegt allein in Pille/Link (besprochen) bzw.
 * „nächste"-Badge (erste offene), nicht in der Opazität der Zeile. */

/* „nächste"-Badge (rechte Spalte, wo bei besprochenen Folgen die Pille sitzt):
 * Akzent-Füllung + on-primary-Text, damit der Einstiegspunkt klar heraussticht. */
.csg-ep__next {
	align-self: center;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.05rem 0.55rem;
	border-radius: 999px;
	white-space: nowrap;
	background: var(--csg-accent);
	color: var(--compendion-color-on-primary, var(--wp--preset--color--contrast, #fff));
}

.csg__noresults {
	margin-top: 1rem;
	opacity: 0.8;
}

/* Ruhiger Cross-Promo-Hinweis (kein Kasten): Hairline oben, gedämpft. */
.csg__promo {
	display: block;
	max-width: 60rem;
	margin: 2rem auto 0;
	padding-top: 1rem;
	border-top: 1px solid var(--csg-hairline);
	font-size: 0.92rem;
	line-height: 1.6;
	opacity: 0.82;
}

.csg__promo p {
	margin: 0;
	max-width: 65ch;
}

/* --- Multi-Serien-Katalog (GHU) ----------------------------------------- */

/* Steuerleiste im Multi-Modus traegt mehrere Filtergruppen -> umbrechen lassen,
 * Suche bekommt eine ganze Zeile auf schmalen Screens. */
.csg__bar--multi {
	max-width: 60rem;
	margin-inline: auto;
	align-items: flex-end;
}

.csg__filtergroup {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

/* Staffel-Filtergruppe ist server-seitig ausgeblendet, bis JS sie nach
 * Serienauswahl füllt. `[hidden]` allein greift nicht gegen `display:flex`. */
.csg__filtergroup[hidden] {
	display: none;
}

.csg__filter-label {
	font-size: 0.78rem;
	font-weight: 600;
	opacity: 0.7;
}

.csg__series-list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Serien-Abschnitt = abgehobenes Panel-Card mit eigener Serien-Akzentfarbe
 * (Poster + Border-left + Fortschritt), Muster DML `.crk-cart`. Jede Serie traegt
 * `--csg-series-accent` inline (Token-Zyklus, s. PHP). Default = Primaerfarbe. */
.csg-series {
	--csg-series-accent: var(--wp--preset--color--primary, #c00191);
	background: var(--csg-card-bg);
	color: var(--csg-ink);
	border: 1px solid var(--csg-hairline);
	border-left: 4px solid var(--csg-series-accent);
	border-radius: 1rem;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
	padding: 1rem 1.15rem;
	transition: box-shadow 0.15s;
}

.csg-series[open] {
	box-shadow: 0 4px 22px rgba(0, 0, 0, 0.3);
}

.csg-series[hidden] {
	display: none;
}

/* Kopf = Poster (links) + Textspalte (Name + Meta + Fortschritt) + Chevron. */
.csg-series__head {
	display: flex;
	align-items: center;
	gap: 0.9rem 1.1rem;
	margin: 0;
	cursor: pointer;
	list-style: none;
}

.csg-series[open] > .csg-series__head {
	margin-bottom: 0.95rem;
}

.csg-series__head::-webkit-details-marker {
	display: none;
}

/* Poster-Kachel: Serien-Code/Initialen als farbiges Monogramm auf dunklem Chip —
 * bringt Farbe und einen visuellen Anker (Ersatz fuer ein Serien-Cover). Der Chip
 * ist ein FESTER dunkler Grund (mode-unabhaengig, Muster DML-Scrim), die Initialen
 * tragen die Serien-Akzentfarbe: helle wie dunkle Akzente lesen zuverlaessig auf
 * Dunkel, anders als weisse Schrift auf hellen Akzenten (Grün/Orange/Pink). */
.csg-series__poster {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.4rem;
	height: 3.4rem;
	border-radius: 0.5rem;
	background: #1e1820;
	color: var(--csg-series-accent);
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0.03em;
	font-variant-numeric: tabular-nums;
	box-shadow: inset 0 0 0 1px color-mix( in srgb, var(--csg-series-accent) 55%, transparent ), 0 1px 5px rgba(0, 0, 0, 0.3);
}

.csg-series__body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.csg-series__title {
	font-size: clamp(1.2rem, 2.4vw, 1.55rem);
	font-weight: 700;
	line-height: 1.15;
	transition: color 0.15s;
}

.csg-series__meta {
	font-size: 0.8rem;
	opacity: 0.72;
	font-variant-numeric: tabular-nums;
}

/* Chevron rechts (margin-auto schiebt ihn an die Kante, neben die Textspalte). */
.csg-series__head::after {
	content: "";
	flex: 0 0 auto;
	margin-inline-start: auto;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	opacity: 0.55;
	transition: transform 0.15s;
}

.csg-series[open] > .csg-series__head::after {
	transform: rotate(45deg);
}

.csg-series__head:hover .csg-series__title {
	color: var(--csg-series-accent);
}

/* Im Multi-Modus sind die Staffeln innere Akkordion-Baender im Serien-Card —
 * KEINE eigenstaendigen Panels (sonst Panel-im-Panel, gleiche Flaeche, keine
 * Hierarchie). Dezenter Ink-Tint + Akzent-Strich links, geteilter Container. */
.csg--multi .csg__seasons {
	gap: 0.6rem;
}

/* Band-Tint aus `contrast` (mode-aware, neutral) statt aus dem Panel-Ink — der
 * Ink ist auf manchen Sites farbig (GHU: rot), ein Ink-Tint faerbte die Baender;
 * `contrast` gibt eine neutrale Ab-/Aufhellung auf der Panel-Flaeche. */
.csg--multi .csg-season {
	background: color-mix( in srgb, var(--wp--preset--color--contrast, #000) 5%, transparent );
	border: 0;
	border-left: 3px solid var(--csg-series-accent);
	border-radius: 0.5rem;
	box-shadow: none;
	padding: 0.6rem 0.8rem;
}

.csg--multi .csg-season[open] {
	background: color-mix( in srgb, var(--wp--preset--color--contrast, #000) 8%, transparent );
	box-shadow: none;
}

.csg--multi .csg-season:hover {
	background: color-mix( in srgb, var(--wp--preset--color--contrast, #000) 10%, transparent );
	box-shadow: none;
}

/* Staffel-Fortschritt im Multi traegt ebenfalls die Serien-Akzentfarbe. */
.csg--multi .csg-season .csg-progress__fill {
	background: var(--csg-series-accent, var(--csg-accent));
}

/* --- Mobil -------------------------------------------------------------- */

@media (max-width: 600px) {
	.csg-ep {
		grid-template-columns: 3.4rem 1fr auto;
	}

	.csg--detail .csg-ep {
		grid-template-columns: 3.4rem 1fr auto auto;
	}

	/* Serien-Poster etwas kleiner auf dem Handy. */
	.csg-series__poster {
		width: 2.9rem;
		height: 2.9rem;
		font-size: 0.85rem;
	}
}

/* --- Fortschritt · Steuer-Panel · Ansicht · Reset (Feature-Runde 2026-06-16) --- */

/* Fortschrittsbalken (Staffel- + Serien-Kopf): Track + akzentgefüllter Balken
 * + „X / Y besprochen". Sitzt im <summary> neben dem Titel. */
.csg-progress {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
	font-size: 0.8rem;
}

.csg-progress__track {
	display: inline-block;
	width: clamp(4rem, 12vw, 7rem);
	height: 0.4rem;
	border-radius: 999px;
	background: color-mix( in srgb, currentColor 16%, transparent );
	overflow: hidden;
}

.csg-progress__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--csg-accent);
}

.csg-progress__label {
	opacity: 0.75;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Im Serien-Kopf (Multi) deutlich breiter + höher ablesbar; Füllung trägt die
 * Serien-Akzentfarbe (Kohäsion mit Poster + Border-left). */
.csg-series__body .csg-progress__track {
	width: clamp(8rem, 32vw, 14rem);
	height: 0.5rem;
}

.csg--multi .csg-series .csg-progress__fill {
	background: var(--csg-series-accent, var(--csg-accent));
}

/* Steuer-Panel (surface-panel) hebt die Filter vom Seiten-Hintergrund ab
 * (palettenunabhängig, Muster wie Retro `.crk__toolbar`). */
.csg__toolbar {
	max-width: 60rem;
	box-sizing: border-box;
	margin: 0 auto 1.25rem;
	padding: 1rem 1.1rem;
	background: var(--csg-card-bg);
	color: var(--csg-ink);
	border: 1px solid color-mix( in srgb, var(--csg-ink) 14%, transparent );
	border-radius: 1rem;
}

/* Bar im Panel braucht keine eigene Breitenbegrenzung mehr. */
.csg__toolbar .csg__bar,
.csg__toolbar .csg__bar--multi {
	max-width: none;
	margin: 0;
}

/* Label-Zeile = Label + Reset-×. */
.csg__filter-labelrow {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

/* Reset-× pro Filtergruppe + Such-Lösch-×. */
.csg-group-reset,
.csg__search-clear {
	appearance: none;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	line-height: 1;
	padding: 0;
	opacity: 0.6;
}

.csg-group-reset {
	font-size: 0.95rem;
}

.csg-group-reset:hover,
.csg-group-reset:focus-visible,
.csg__search-clear:hover,
.csg__search-clear:focus-visible {
	opacity: 1;
	color: var(--csg-accent);
}

.csg-group-reset[hidden],
.csg__search-clear[hidden] {
	display: none;
}

/* Such-Lösch-× im Eingabefeld rechts. */
.csg__search-wrap {
	position: relative;
}

.csg__search-clear {
	position: absolute;
	right: 0.55rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.15rem;
}

.csg__search {
	padding-right: 1.9rem; /* Platz für das Lösch-× */
}

/* --- Ansicht: Kompakt (Default) / Detail -------------------------------- */

/* Erstausstrahlungsjahr: eigene rechtsbuendige Grid-Spalte ganz rechts, nur in
 * der Detail-Ansicht. In Kompakt `display:none` -> faellt aus dem Grid-Fluss,
 * die Zeile bleibt dreispaltig. */
.csg-ep__year {
	align-self: center;
	justify-self: end;
	text-align: right;
	font-size: 0.78rem;
	opacity: 0.6;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.csg--compact .csg-ep__year {
	display: none;
}

/* Detail-Ansicht: Zeile bekommt eine vierte Spalte fuers Jahr (Code · Titel ·
 * Pille · Jahr), und breitere Spalten, weil das Jahr Platz braucht. */
.csg--detail .csg-ep {
	grid-template-columns: 4rem 1fr auto auto;
}

.csg--detail .csg-season__list {
	column-width: 24rem;
}

/* Detail: Haupttitel etwas praesenter, Zweittitel bleibt klein/gedaempft. */
.csg--detail .csg-ep__title {
	font-size: 1rem;
}