/**
 * Compendion List-View – geteiltes, kompaktes Listen-Pattern.
 *
 * Genutzt von Retro-Game-Liste (`[compendion-retro-index]`, Lead-Slot = Cover)
 * und Getränkeliste (`[compendion-shownotes-index]`, Lead-Slot = prominente
 * Episodennummer, kein Cover). Eine Zeile: Lead-Slot links, rechts Titel +
 * Untertext. Optional Such-Feld + Filter-Dropdown in der Leiste.
 *
 * Farben strikt über Tokens. Pill 999px, Cover 0.375rem, Zeile 1rem.
 *
 * @package Compendion_WP_Theme
 */

.compendion-list {
	margin-block: 1.5rem;
}

/* Leiste: Suche + optionales Dropdown ------------------------------------ */

.compendion-list__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin-bottom: 1.5rem;
}

.compendion-list__search {
	flex: 1 1 16rem;
}

.compendion-list__search-input {
	width: 100%;
	max-width: 28rem;
	padding: 0.55rem 2.4rem 0.55rem 0.9rem;
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--compendion-color-on-base, var(--wp--preset--color--contrast));
	font-size: 0.95rem;
}

.compendion-list__search-input:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
}

.compendion-list__field {
	position: relative;
	width: 100%;
	max-width: 28rem;
}

/* Loesch-× im Suchfeld: rund, rechts im Feld, nur bei Text sichtbar (JS-Toggle). */
.compendion-list__search-clear {
	position: absolute;
	right: 0.4rem;
	top: 50%;
	transform: translateY(-50%);
	width: 1.7rem;
	height: 1.7rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: var(--compendion-color-on-base, var(--wp--preset--color--contrast));
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
}

.compendion-list__search-clear:hover,
.compendion-list__search-clear:focus-visible {
	background: color-mix( in srgb, var(--wp--preset--color--contrast, #000) 10%, transparent );
	outline: none;
}

.compendion-list__search-clear[hidden] {
	display: none;
}

.compendion-list__filter {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.compendion-list__select {
	max-width: 22rem;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}

.compendion-list__select:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
}

.compendion-list__reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.compendion-list__reset:hover,
.compendion-list__reset:focus-visible {
	border-color: var(--wp--preset--color--primary);
	outline: none;
}

/* Zeilen ----------------------------------------------------------------- */

.compendion-list__rows {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.compendion-list-row {
	margin: 0;
}

.compendion-list-row__link {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.5rem;
	border-radius: 1rem;
	text-decoration: none;
	color: inherit;
	transition: background 0.15s;
}

/* Hover: transluzenter contrast-Tint statt solidem surface – sonst säße der
 * Zeilentext (on-base/muted, für den Seiten-Hintergrund gedacht) auf einer
 * fremden Fläche und verlöre den Kontrast (DML-surface ist dunkel). Gleiches
 * Muster wie compendion-content-card; funktioniert in Light + Dark. */
.compendion-list-row__link:hover,
.compendion-list-row__link:focus-visible {
	background: color-mix( in srgb, var(--wp--preset--color--contrast, #000) 8%, transparent );
	outline: none;
}

.compendion-list-row__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Lead-Slot (links) – Cover ODER prominente Nummer, gleiche Breite ------- */

.compendion-list-row__lead {
	flex: 0 0 auto;
	width: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.compendion-list-row__cover {
	width: 48px;
	aspect-ratio: 3 / 4;
	border-radius: 0.375rem;
	object-fit: cover;
	display: block;
	background: var(--wp--preset--color--surface);
}

.compendion-list-row__cover--empty {
	background: var(--wp--preset--color--surface);
}

.compendion-list-row__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 56px;
	padding: 0.3rem 0.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	color: var(--compendion-color-on-surface, var(--wp--preset--color--contrast));
	font-size: 0.95rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

/* Body (rechts) ---------------------------------------------------------- */

.compendion-list-row__body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.compendion-list-row__title {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--compendion-color-on-base, var(--wp--preset--color--contrast));
}

.compendion-list-row__year {
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--muted);
}

.compendion-list-row__sub {
	font-size: 0.85rem;
	color: var(--compendion-color-on-base, var(--wp--preset--color--contrast));
	opacity: 0.85;
}

.compendion-list-row__episode {
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
}

/* Leer-/Kein-Treffer-Zustände ------------------------------------------- */

.compendion-list__empty,
.compendion-list__noresults {
	color: var(--wp--preset--color--muted);
	font-style: italic;
}