/*
 * Compendion Content-Card — eine Card-Komponente fuer Inhalts-Listen.
 *
 * Spec: docs/superpowers/specs/2026-05-20-content-card-familie-design.md
 *
 * Architektur in Stichworten:
 *   - Markup-Wurzel ist `.compendion-content-card` (z.B. `<li>` oder `<article>`).
 *     Sie ist Container-Query-Container (`container-type: inline-size`).
 *   - Innen liegt der `<a>` mit Klasse `__link` als komplette Klickflaeche.
 *   - Default-Layout: vertikal, Cover-Bereich `__media` ist eine 16:9-Box,
 *     das Cover `__cover` behaelt natives Aspect-Ratio (data-ar) und wird
 *     contained zentriert.
 *   - Modifier `.compendion-content-card--landscape` zwingt horizontales
 *     Layout (Cover rechts, Body links, Cover-Hoehe variabel je data-ratio).
 *     Wird vom Render-Helper gesetzt, sobald `layout=landscape` im args
 *     uebergeben wird — bewusst per List-Type, nicht reaktiv per Breite,
 *     damit Resize keine wilden Hin-und-Her-Spruenge ausloest.
 *   - Container-Query nur noch als Mobile-Fallback: unter 260px Container
 *     fallen landscape-Cards auf vertikal zurueck.
 *
 * Tokens aus theme.json — keine Hardcoded-Farben.
 */

/* === Card-Grid-Wrapper ===
 *
 * Listen-Container fuer Card-Strecken. Greift ueberall, wo Cards in einer
 * `<ul>` rendern — `compendion-latest-network-episodes` ist der Block-Wrapper
 * auf der Dachseite/Podcast-Front, `wp-block-post-template.compendion-episode-grid`
 * der Wrapper im `core/post-template` auf Sub-Site-Episodes-Archive.
 * Intrinsisch responsiv via `auto-fill, minmax(280px, 1fr)`: Wide 4 Spalten,
 * Tablet 2–3, Mobile 1.
 *
 * Hier zentral, weil das CSS sonst nur an den `compendion/latest-network-episodes`
 * Block haengt — Episodes-Archive rendert aber `compendion/episode-card` und
 * verlor die Grid-Regeln, Cards landeten als 1240px-Stack untereinander.
 */
.compendion-latest-network-episodes,
.wp-block-post-template.compendion-episode-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: clamp(0.75rem, 2vw, 1.25rem);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* post-template wickelt jedes Item in `<li class="wp-block-post">`. Die
 * tatsaechliche Card kommt aus `compendion/episode-card` und ist heute ein
 * `<article>` (vom Content-Card-Renderer, wrapper=article). Das outer-`<li>`
 * bleibt unsichtbarer Pass-Through-Container. */
.wp-block-post-template.compendion-episode-grid > .wp-block-post {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}

.wp-block-post-template.compendion-episode-grid > .wp-block-post > .compendion-content-card {
	flex: 1;
}

.compendion-latest-network-episodes--empty {
	color: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 60%, transparent);
}

.compendion-content-card {
	container-type: inline-size;
	container-name: card;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}

.compendion-content-card__link {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.4rem;
	background: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 5%, transparent);
	border-radius: 0.5rem;
	color: inherit;
	text-decoration: none;
	transition: background 150ms ease, transform 150ms ease;
}

.compendion-content-card__link:hover,
.compendion-content-card__link:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 9%, transparent);
	transform: translateY(-1px);
	outline: none;
}

.compendion-content-card__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, currentColor);
	outline-offset: 2px;
}

.compendion-content-card__media {
	width: 100%;
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.375rem;
	overflow: hidden;
}

.compendion-content-card__cover {
	display: block;
	border-radius: 0.25rem;
	max-width: 100%;
	max-height: 100%;
	/* kein Crop, kein Stretch — Memory feedback_keine_cover_crops. Bucket-
	 * Toleranz kann ein Bild aufs falsche aspect-ratio mappen (z.B. ein
	 * 1920x800-Cover landet im 16x9-Default-Bucket); object-fit: contain
	 * sorgt dafuer, dass das Bild dann mit Letterbox/Pillarbox im Container
	 * sitzt statt verzerrt zu werden. */
	object-fit: contain;
}

.compendion-content-card__cover[data-ar="1x1"]   { aspect-ratio: 1 / 1;   height: 100%; width: auto; }
.compendion-content-card__cover[data-ar="4x3"]   { aspect-ratio: 4 / 3;   height: 100%; width: auto; }
.compendion-content-card__cover[data-ar="16x9"]  { aspect-ratio: 16 / 9;  width: 100%; height: 100%; }
.compendion-content-card__cover[data-ar="221x1"] { aspect-ratio: 2.21 / 1; width: 100%; height: auto; }

.compendion-content-card__cover--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 55%, transparent);
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 8%, transparent);
}

.compendion-content-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.15rem 0.35rem 0.35rem;
	min-width: 0;
}

.compendion-content-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem;
}

.compendion-content-card__badge {
	display: inline-block;
	background: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 12%, transparent);
	padding: 0.075rem 0.5rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.6875rem;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast, inherit);
}

.compendion-content-card__badge--external {
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #000) 35%, transparent);
}

.compendion-content-card__source {
	font-size: 0.6875rem;
	color: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 60%, transparent);
}

.compendion-content-card__source-domain {
	font-weight: 600;
}

.compendion-content-card__date {
	font-size: 0.6875rem;
	color: color-mix(in srgb, var(--wp--preset--color--contrast, #000) 60%, transparent);
	font-variant-numeric: tabular-nums;
	line-height: 1.3;
}

.compendion-content-card__title {
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast, inherit);
	margin: 0;
	margin-top: 0.15rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
}

/* === Landscape-Modifier: horizontales Layout pro Liste explizit ===
 *
 * Wird vom Renderer als Klasse `compendion-content-card--landscape` an die
 * Card-Wurzel gehaengt, sobald die Liste „Listen-Charakter" hat (Episoden-
 * Lists, Personenprofil-Episodenliste, /episodes/-Archiv). Bildbetonte
 * Listen (Anderswo, Personenprofil-Web-Entries) verzichten auf den
 * Modifier und nutzen die vertikale Default-Form mit grossem 16:9-Cover.
 */
.compendion-content-card--landscape .compendion-content-card__link {
	flex-direction: row;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem;
}

/* Landscape-Cover: prominenter 16:9-Block ~40% Card-Breite, Body daneben.
 * Vorher Thumbnail-Form (80×~64px); neu Listen-mit-Bildwirkung.
 * Slot folgt der Bucket-Ratio per data-ratio, Cover contain (kein Crop,
 * Letterbox bei Mismatch ist okay — Arne 2026-05-21). */
.compendion-content-card--landscape .compendion-content-card__media {
	width: 40%;
	flex-shrink: 0;
	order: 2;
	align-self: center;
	aspect-ratio: 16 / 9;
}

.compendion-content-card--landscape .compendion-content-card__media[data-ratio="1x1"]   { aspect-ratio: 1 / 1; }
.compendion-content-card--landscape .compendion-content-card__media[data-ratio="4x3"]   { aspect-ratio: 4 / 3; }
.compendion-content-card--landscape .compendion-content-card__media[data-ratio="221x1"] { aspect-ratio: 2.21 / 1; }

.compendion-content-card--landscape .compendion-content-card__cover {
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
}

.compendion-content-card--landscape .compendion-content-card__body {
	order: 1;
	flex: 1;
	min-width: 0;
	padding: 0.4rem 0.25rem 0.4rem 0.5rem;
	justify-content: center;
}

.compendion-content-card--landscape .compendion-content-card__title {
	margin-top: 0.2rem;
}

/* === Landscape-Layout-Schwellen (oben + unten) ===
 *
 * Landscape ist die prominent-bildbetonte Form mit 16:9-Cover rechts ~40%
 * der Card-Breite. Sie ergibt nur in einem mittleren Card-Breitenfenster
 * Sinn.
 *
 * - Unter ~450px ist die Card zu schmal: Cover + Body daneben quetschen
 *   sich; Titel verliert Platz, Cover wird Mini-Thumbnail. → vertikal,
 *   16:9-Cover füllt Card-Breite, Body darunter.
 * - Ueber ~700px wird die Card breit genug, dass ein voll-breites Cover
 *   oben mehr Schauwert hat als das halbe-Cover-Layout. → vertikal,
 *   gross und prominent.
 *
 * Beide Aussenbereiche kippen die Landscape-Card zurueck ins vertikale
 * Default-Layout (Cover oben in 16:9-Box, Body unten). Identische Regeln,
 * eine fuer Schmal-Fallback (max 450px), eine fuer Wide-Container
 * (min 700px) — Container-Queries haben keinen `or`-Selector, deshalb
 * dupliziert; gemeinsame Regel waere CSS-magic ohne Mehrwert.
 *
 * Schwellen-Update 2026-05-21 (Arne): 260/400 → 450/700, weil
 * Mittel-Band 260-400 fast nie traf (4-Spalten-Grid landet ~280-310 →
 * Landscape, aber Cover war Thumbnail; bei <260 Fallback war Card
 * squarish-vertikal). Neue Schwellen erlauben ein echtes Listen-Layout.
 */
@container card (max-width: 450px) {
	.compendion-content-card--landscape .compendion-content-card__link {
		flex-direction: column;
		align-items: stretch;
		padding: 0.4rem;
		gap: 0.5rem;
	}

	.compendion-content-card--landscape .compendion-content-card__media {
		width: 100%;
		aspect-ratio: 16 / 9;
		order: 0;
		align-self: auto;
		height: auto;
	}

	.compendion-content-card--landscape .compendion-content-card__cover[data-ar="1x1"]   { height: 100%; width: auto; max-width: 100%; }
	.compendion-content-card--landscape .compendion-content-card__cover[data-ar="4x3"]   { height: 100%; width: auto; max-width: 100%; }
	.compendion-content-card--landscape .compendion-content-card__cover[data-ar="16x9"]  { width: 100%; height: 100%; }
	.compendion-content-card--landscape .compendion-content-card__cover[data-ar="221x1"] { width: 100%; height: auto; max-height: 100%; }

	.compendion-content-card--landscape .compendion-content-card__body {
		order: 0;
		flex: initial;
		padding: 0.15rem 0.35rem 0.35rem;
		justify-content: flex-start;
	}
}

@container card (min-width: 700px) {
	.compendion-content-card--landscape .compendion-content-card__link {
		flex-direction: column;
		align-items: stretch;
		padding: 0.4rem;
		gap: 0.5rem;
	}

	.compendion-content-card--landscape .compendion-content-card__media {
		width: 100%;
		aspect-ratio: 16 / 9;
		order: 0;
		align-self: auto;
		height: auto;
	}

	.compendion-content-card--landscape .compendion-content-card__cover[data-ar="1x1"]   { height: 100%; width: auto; max-width: 100%; }
	.compendion-content-card--landscape .compendion-content-card__cover[data-ar="4x3"]   { height: 100%; width: auto; max-width: 100%; }
	.compendion-content-card--landscape .compendion-content-card__cover[data-ar="16x9"]  { width: 100%; height: 100%; }
	.compendion-content-card--landscape .compendion-content-card__cover[data-ar="221x1"] { width: 100%; height: auto; max-height: 100%; }

	.compendion-content-card--landscape .compendion-content-card__body {
		order: 0;
		flex: initial;
		padding: 0.15rem 0.35rem 0.35rem;
		justify-content: flex-start;
	}
}