/*
 * 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.5rem;
	padding: 0.35rem;
}

.compendion-content-card--landscape .compendion-content-card__media {
	width: auto;
	aspect-ratio: auto;
	flex-shrink: 0;
	order: 2;
	align-self: center;
}

.compendion-content-card--landscape .compendion-content-card__media[data-ratio="1x1"]   { height: 80px; }
.compendion-content-card--landscape .compendion-content-card__media[data-ratio="4x3"]   { height: 72px; }
.compendion-content-card--landscape .compendion-content-card__media[data-ratio="16x9"]  { height: 64px; }
.compendion-content-card--landscape .compendion-content-card__media[data-ratio="221x1"] { height: 56px; }

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

.compendion-content-card--landscape .compendion-content-card__body {
	order: 1;
	flex: 1;
	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 kompakte Listen-Form mit Cover rechts (Hoehe ~80px).
 * Sie bleibt nur in einem mittleren Card-Breitenfenster sinnvoll.
 *
 * - Unter ~260px wirkt Landscape gequetscht (Sidebar, Phone-Single-Column).
 * - Ueber ~400px wird das winzige Cover laecherlich; das Episoden-Cover
 *   gehoert dann oben, gross und prominent — vertikales Default-Layout.
 *
 * Beide Aussenbereiche kippen die Landscape-Card zurueck ins vertikale
 * Default-Layout (Cover oben in 16:9-Box, Body unten). Identische Regeln,
 * eine fuer den Mobile-Fallback (max 260px), eine fuer Wide-Container
 * (min 400px) — Container-Queries haben keinen `or`-Selector, deshalb
 * dupliziert; gemeinsame Regel waere CSS-magic ohne Mehrwert.
 */
@container card (max-width: 260px) {
	.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: 400px) {
	.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;
	}
}