/*
 * KONTRAST-PFLICHT (gilt fuer ALLE compendion-*.css Dateien):
 * - Hintergrundfarbe immer ueber die Theme-Tokens `--wp--preset--color--*`
 *   (base, contrast, surface, line, primary, secondary, muted, accent) bzw.
 *   die Site-Palette-Variablen `--compendion-podcast-*`. Diese Tokens werden
 *   pro Site umgefaerbt - hardcodierte Hex/rgb-Werte brechen das.
 * - Textfarbe IMMER explizit setzen, wenn ein Element einen Hintergrund setzt.
 *   Niemals `background` ohne `color` auf demselben Element.
 * - Text auf einer eingefaerbten Flaeche IMMER ueber das passende Companion-
 *   Token `--compendion-color-on-<flaeche>` setzen, mit dem Theme-Token als
 *   Fallback. Diese on-Tokens emittiert die Site-Palette per-Site WCAG-geprueft
 *   (includes/palette/site-palette.php).
 *
 * Compendion Podcasts-Galerie (Go-Live 2026-07-06, produktiv auf `/podcasts`)
 * — "Regal mit Charakter": ein sofort vergleichbares Karten-Grid in
 * redaktionellen Cluster-Abschnitten. Jede Karte emittiert ihre eigene Show-Palette als
 * Custom-Properties `--pg-bg`/`--pg-ink`/`--pg-ink-muted` (scoped Selektor pro
 * Karte, aus dem PHP-Renderer via `compendion_podcasts_gallery_palette_css()`).
 * Hex-Werte existieren NUR im PHP-emittierten Inline-Block, hier stehen
 * ausschliesslich `var(--pg-*)` plus `color-mix()` dagegen. Kartenflaeche =
 * `base` der Show (Farbwelt), nicht `primary` (Akzent) - Runde 4, 2026-07-06.
 *
 * Pro Karte zwei CTAs (`.cmp-pg__ctas`-Wrapper): "Starte hier" (gefuellt) +
 * optional "Abonnieren" (`.cmp-pg__cta--outline`, entfaellt ohne
 * `subscribe_url`). Kein Modal-Steckbrief mehr (Arne 2026-07-06: dupliziert
 * die Karte, kaum Mehrwert).
 *
 * BEM-Praefix: `.cmp-pg`.
 */

.cmp-pg {
	overflow-x: clip;
	display: flex;
	flex-direction: column;
}

/* Mini-Hero ----------------------------------------------------------------- */

.cmp-pg__hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.75rem;
	padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 4vw, 3rem);
	background: var(--wp--preset--color--base);
	color: var(--compendion-color-on-base, var(--wp--preset--color--contrast));
}

.cmp-pg__claim {
	margin: 0;
	font-size: clamp(1.5rem, 4vw, 2.5rem);
	line-height: 1.15;
}

/* Zwei kontrollierte Claim-Zeilen (Arne 2026-07-06): "N Shows. Starke Crews."
   und "Gute Podcasts, die sich Zeit nehmen." — je ein Block; auf schmalen
   Viewports wrappt der Text innerhalb der Zeile normal weiter. Das fruehere
   max-width: 22ch am h1 entfaellt (haette Zeile 2 zwangsumbrochen). */
.cmp-pg__claim-line {
	display: block;
}

.cmp-pg__stats-line {
	margin: 0;
	color: var(--c-on-base-muted, var(--compendion-color-on-base, var(--wp--preset--color--contrast)));
	font-size: clamp(0.95rem, 1.8vw, 1.1rem);
}

/* Sprung-Pills: Outline-Muster gegen die Hero-Flaeche (base). */
.cmp-pg__cluster-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}

.cmp-pg__cluster-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1.1rem;
	border: 2px solid var(--c-on-base, var(--compendion-color-on-base, var(--wp--preset--color--contrast)));
	border-radius: 999px;
	color: var(--c-on-base, var(--compendion-color-on-base, var(--wp--preset--color--contrast)));
	background: transparent;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}

.cmp-pg__cluster-pill:hover,
.cmp-pg__cluster-pill:focus-visible {
	background: var(--c-on-base, var(--compendion-color-on-base, var(--wp--preset--color--contrast)));
	color: var(--wp--preset--color--base);
	outline: none;
}

/* Abschnitte ------------------------------------------------------------------ */

/* Abschnitte einheitlich auf base - die Farbwirkung kommt von den Karten,
   die Abschnittsflaeche bleibt ruhig. */
.cmp-pg__cluster {
	padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3.5rem);
	background: var(--wp--preset--color--base);
	color: var(--compendion-color-on-base, var(--wp--preset--color--contrast));
}

/* Kein interner Breiten-Deckel: die Seite laeuft im compendion-wide-layout
   (1800px), Grid + Abschnitts-Kopf fuellen die volle Wrapper-Breite
   (Arne 2026-07-06). Lesbarkeitsmasse (22ch Claim, 65ch Lede) bleiben. */
.cmp-pg__cluster-heading {
	margin: 0 0 0.5rem;
	font-size: clamp(1.4rem, 3vw, 2rem);
}

.cmp-pg__cluster-lede {
	margin: 0 0 1.5rem;
	max-width: 65ch;
	color: var(--c-on-base-muted, var(--compendion-color-on-base, var(--wp--preset--color--contrast)));
	font-size: 1rem;
}

/* Karten-Grid ------------------------------------------------------------------ */

.cmp-pg__grid {
	display: grid;
	/* Mindestbreite 370px statt 300px (Arne 2026-07-06: Karten zu schmal) -
	   die beiden Karten-CTAs ("Starte hier" + "Abonnieren") brauchen im
	   Karten-Fuss nebeneinander Platz, groessere Mindestbreite heisst
	   ausserdem weniger Spalten-Spruenge beim Resize. min(370px, 100%)
	   verhindert Overflow auf Viewports unter 370px. */
	grid-template-columns: repeat(auto-fill, minmax(min(370px, 100%), 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cmp-pg__grid > li {
	display: flex;
}

/* Karte -------------------------------------------------------------------- */

.cmp-pg__card {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	width: 100%;
	/* Card-Padding als Custom-Property (statt hartem 1.25rem an zwei Stellen):
	   der CTA-Fussbereich (.cmp-pg__ctas) braucht denselben Wert negativ, um
	   full-bleed gegen dieses Padding zu laufen - eine Quelle speist beides. */
	--pg-card-pad: 1.25rem;
	padding: var(--pg-card-pad);
	/* Rahmen gegen die base-Flaeche des Abschnitts: manche Show-Farben beissen
	   sich mit dem Compendion-Gelb. --compendion-page-border wird per Site
	   WCAG-getunt GEGEN base berechnet (site-palette.php,
	   compendion_site_palette_border_on), Alias --c-page-border. */
	border: 1px solid var(--c-page-border, var(--compendion-page-border, color-mix(in srgb, var(--compendion-color-on-base, var(--wp--preset--color--contrast)) 35%, transparent)));
	border-radius: 1rem;
	background: var(--pg-bg, var(--wp--preset--color--surface));
	color: var(--pg-ink, var(--compendion-color-on-surface, var(--wp--preset--color--contrast)));
	box-shadow: 0 1px 4px color-mix(in srgb, var(--compendion-color-on-base, var(--wp--preset--color--contrast)) 12%, transparent);
	/* Clippt den vollflaechigen CTA-Fussbereich auf den Karten-Radius (der
	   Fuss laeuft full-bleed bis an die Kartenkante); box-shadow liegt AM
	   Element, nicht in seinem Inhalt, und bleibt davon unberuehrt. */
	overflow: hidden;
	text-align: left;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cmp-pg__card:hover,
.cmp-pg__card:focus-within {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--pg-ink, currentColor) 45%, transparent);
}

/* Cover ---------------------------------------------------------------------
   object-fit:contain (nie croppen), quadratischer Frame, Radius aus der
   Cover-Skala (0.375rem). */
.cmp-pg__cover {
	display: flex;
	justify-content: center;
	width: 100%;
}

/* Cover ist zusaetzlich zum Karten-CTA ein eigener Link auf die Show-Seite
   (Arne 2026-07-06). Der Accent-Glow bleibt am img/Fallback selbst, der Link
   ist rein struktureller Wrapper (display:block, volle Breite, gleicher
   Radius wie das Cover fuer eine saubere Fokus-Kontur). */
.cmp-pg__cover-link {
	display: block;
	width: 100%;
	border-radius: 0.375rem;
}

.cmp-pg__cover-link:focus-visible {
	outline: 2px solid var(--pg-ink, var(--compendion-color-on-surface, var(--wp--preset--color--contrast)));
	outline-offset: 2px;
}

.cmp-pg__cover-img {
	display: block; /* Firefox-Inline-Gap-Falle. */
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: 0.375rem;
	background: color-mix(in srgb, var(--pg-ink, currentColor) 6%, transparent);
	/* Accent-Glow in der Show-Zweitfarbe (Arne 2026-07-06, MWM-Beispiel):
	   zeichnet das Cover deutlich, aber schmal von der Kartenflaeche ab -
	   1px-Ring + enger Schein statt breiter Aura. Layout-neutral (box-shadow),
	   Radius 0.7rem passt unter das Karten-Padding (--pg-card-pad: 1.25rem),
	   bleibt also innerhalb von .cmp-pg__card (overflow:hidden) ungeclippt. */
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--pg-accent, var(--wp--preset--color--primary)) 85%, transparent),
		0 0 0.7rem color-mix(in srgb, var(--pg-accent, var(--wp--preset--color--primary)) 55%, transparent);
}

.cmp-pg__cover-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 0.375rem;
	background: color-mix(in srgb, var(--pg-ink, currentColor) 12%, transparent);
	color: var(--pg-ink, inherit);
	/* Gleicher Accent-Glow wie .cmp-pg__cover-img (Arne 2026-07-06) - der
	   Fallback ersetzt visuell das Cover, muss also gleich abgesetzt sein. */
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--pg-accent, var(--wp--preset--color--primary)) 85%, transparent),
		0 0 0.7rem color-mix(in srgb, var(--pg-accent, var(--wp--preset--color--primary)) 55%, transparent);
	font-weight: 700;
	font-size: clamp(1.5rem, 4vw, 2.5rem);
}

.cmp-pg__name {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.2;
}

/* Dark-Mode-Reset: der globale Dark-Heading-Recolor (compendion-dark.css,
   :where(h1,h2,h3) -> base-Akzent) wuerde den Karten-Titel auf der
   Show-Farbflaeche (--pg-bg) umfaerben -> Kontrastbruch. Mode-scoped
   explizit auf das Karten-Paar zuruecksetzen (gleiches Muster wie die
   Support-Karten-Titel). Die Cluster-Heading braucht KEINEN Reset - sie
   liegt auf base, dort ist der Recolor das gewollte Paar. */
@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) .cmp-pg__name {
		color: var(--pg-ink, var(--compendion-color-on-surface, var(--wp--preset--color--contrast)));
	}
}

html[data-color-scheme="dark"] .cmp-pg__name {
	color: var(--pg-ink, var(--compendion-color-on-surface, var(--wp--preset--color--contrast)));
}

/* Wrapper nur fuer den Fall mehrerer Badges nebeneinander (HIAN: "Extern" +
   "Läuft gerade") - eine Badge allein braucht ihn nicht, schadet aber nicht. */
.cmp-pg__badges {
	display: flex;
	flex-wrap: wrap;
	align-self: flex-start;
	gap: 0.4rem;
}

.cmp-pg__badge {
	display: inline-flex;
	align-self: flex-start;
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--pg-ink, currentColor) 14%, transparent);
	color: var(--pg-ink, inherit);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.cmp-pg__tagline {
	margin: 0;
	font-size: 0.95rem;
}

.cmp-pg__numbers {
	margin: 0;
	color: var(--pg-ink-muted, var(--pg-ink, inherit));
	font-size: 0.88rem;
}

/* Host-Avatar-Strip: wiederverwendete Content-Card-Strip-Klassen
   (compendion-content-card.css, global enqueued, flache Selektoren) - hier
   nur der Wrapper plus Kontrast-Override: das Original-Paar (Outline +
   Initialen-BG aus --compendion-card-accent, gegen base getunt) ist gegen
   die Show-Farbflaeche (--pg-bg) nicht geprueft -> auf das WCAG-gepruefte
   Karten-Paar --pg-ink/--pg-bg umlenken. */
.cmp-pg__hosts {
	margin: 0;
}

.cmp-pg__card .compendion-content-card__contributor-avatar {
	outline-color: color-mix(in srgb, var(--pg-ink, currentColor) 45%, transparent);
	background: color-mix(in srgb, var(--pg-ink, currentColor) 8%, transparent);
	color: var(--pg-ink, inherit);
}

.cmp-pg__card .compendion-content-card__contributor-avatar--initials {
	background: var(--pg-ink, var(--compendion-color-on-surface, var(--wp--preset--color--contrast)));
	color: var(--pg-bg, var(--wp--preset--color--surface));
}

/* Host-Avatar -> Profilseite (Arne 2026-07-06). Verlinkte UND unverlinkte
   Hosts teilen sich diese Klasse (Link bzw. Span-Wrapper um Avatar/
   Initialen), damit beide gleich aussehen - der Unterschied ist nur
   Interaktivitaet/Fokussierbarkeit, nicht Optik. */
.cmp-pg__host-link {
	display: inline-flex;
	border-radius: 999px;
}

.cmp-pg__host-link:focus-visible {
	outline: 2px solid var(--pg-ink, var(--compendion-color-on-surface, var(--wp--preset--color--contrast)));
	outline-offset: 2px;
}

a.cmp-pg__host-link:hover {
	transform: scale(1.08);
}

a.cmp-pg__host-link {
	transition: transform 0.15s ease;
}

/* CTA-Fussbereich: eigene, abgetrennte Flaeche unten an der Karte in voller
   Show-Markenfarbe (--pg-accent) - loest die verworfene Akzent-Kante ab
   (Arne 2026-07-06: "sieht in dem Rahmen seltsam aus"). Full-bleed gegen
   das Karten-Padding (negative Margin = --pg-card-pad, DRY mit der Karte),
   eigenes Innenpadding, dadurch clippt .cmp-pg__card (overflow:hidden) die
   Ecken auf ihren eigenen 1rem-Radius. margin-top:auto schiebt den Fuss ans
   Kartenende; padding-top etwas grosszuegiger als das Innenpadding, damit
   die Flaeche gegen den Karteninhalt nicht zu knapp wirkt (zusaetzlich zum
   ohnehin vorhandenen Karten-`gap` davor). Paar-Pflicht: der Fuss traegt
   jetzt Text (die CTAs) -> background+color as Paar, WCAG-gepruefte
   on_accent-Ink aus der Palette. */
.cmp-pg__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-top: auto;
	margin-inline: calc(-1 * var(--pg-card-pad, 1.25rem));
	margin-bottom: calc(-1 * var(--pg-card-pad, 1.25rem));
	padding: 1.1rem var(--pg-card-pad, 1.25rem) 0.85rem;
	/* Rahmenfarbiger Trenner zwischen Kartenflaeche (base) und Fuss (primary),
	   damit die beiden Show-Farben nicht direkt aufeinanderprallen — dieselbe
	   Farbkette wie der 1px-Kartenrahmen (Arne 2026-07-06). */
	border-top: 1px solid var(--c-page-border, var(--compendion-page-border, color-mix(in srgb, var(--compendion-color-on-base, var(--wp--preset--color--contrast)) 35%, transparent)));
	background: var(--pg-accent, var(--wp--preset--color--primary));
	color: var(--pg-on-accent, var(--compendion-color-on-primary, var(--wp--preset--color--base)));
}

/* CTA: Pill, invertiert gegen die Fussflaeche (Text-/Flaechenfarbe getauscht
   - dasselbe WCAG-gepruefte Paar --pg-accent/--pg-on-accent). Marker-Klasse
   compendion-cta ist Pflicht (Dark-Mode-Link-Recolor-Ausnahme, siehe
   netzwerk-landing.php Kommentare). */
.cmp-pg__cta {
	display: inline-flex;
	align-self: flex-start;
	padding: 0.7rem 1.5rem;
	border-radius: 999px;
	background: var(--pg-on-accent, var(--compendion-color-on-primary, var(--wp--preset--color--base)));
	color: var(--pg-accent, var(--wp--preset--color--primary));
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease;
}

.cmp-pg__cta:hover,
.cmp-pg__cta:focus-visible {
	/* Hover = Glow-Farbe der Show (Arne 2026-07-06): dieselbe Komplementaer-
	   Formel wie das `glow`-Token der Site-Palette (site-palette.php, oklch
	   from primary, Hue +180 — Cover-Glow/Dreieck-Notch/wp-block-button-Hover,
	   Arne-Fix 2026-07-02), hier gegen das Karten-primary (--pg-accent)
	   gerechnet. Text = contrast wie im Bestandsmuster (glow ist Deko-Akzent
	   ohne dediziertes on-Paar — dort wie hier ungeprueft, Sichtcheck Arne).
	   Erste Zeile = Fallback fuer Browser ohne relative Farb-Syntax. */
	background: var(--pg-contrast, var(--wp--preset--color--contrast));
	background: oklch(from var(--pg-accent, var(--wp--preset--color--primary)) 0.62 0.21 calc(h + 180));
	color: var(--pg-contrast, var(--wp--preset--color--contrast));
	outline: none;
}

/* Abonnieren-Pill: Outline-Muster (Rand+Text = --pg-on-accent, transparente
   Flaeche) - unterscheidet sich optisch klar vom gefuellten "Starte hier".
   Padding um die 2px Border reduziert, damit beide Pillen gleich hoch
   wirken (0.7rem - ~2px Randausgleich = 0.55rem/1.35rem). Hover fuellt sich
   analog zum invertierten CTA. */
.cmp-pg__cta--outline {
	padding: 0.55rem 1.35rem;
	border: 2px solid var(--pg-on-accent, currentColor);
	background: transparent;
	color: var(--pg-on-accent, inherit);
}

.cmp-pg__cta--outline:hover,
.cmp-pg__cta--outline:focus-visible {
	background: var(--pg-on-accent, currentColor);
	color: var(--pg-accent, var(--wp--preset--color--primary));
	outline: none;
}

/* Progressive Enhancement: dezentes Karten-Reveal nur mit view-timeline-
   Support. Fallback (kein @supports-Treffer): Karten einfach sofort sichtbar,
   keine Animation. Deutlich subtiler als das fruehere Kapitel-Reveal. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.cmp-pg__grid > li {
			animation: cmp-pg-card-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 25%;
		}

		@keyframes cmp-pg-card-reveal {
			from {
				opacity: 0;
				transform: translateY(1rem);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.cmp-pg__grid > li {
		animation: none !important;
	}

	.cmp-pg__card,
	.cmp-pg__cluster-pill,
	.cmp-pg__cta,
	.cmp-pg__cta--outline,
	a.cmp-pg__host-link {
		transition: none !important;
	}

	a.cmp-pg__host-link:hover {
		transform: none;
	}
}