/*
 * Compendion Netzwerksuche – Ergebnis-Zeilen fuer die Live-Meilisearch-Suche
 * auf `/suche/`. Such-Feld + Filter-Pillen kommen unveraendert aus
 * `compendion-cardlist.css` (`.ccl-search`, `.ccl-pills`, `.ccl-pill`,
 * `.ccl-spinner`) – dieses File deckt nur, was dort fehlt: Ergebnis-Zeile,
 * Snippet-Highlight, Status-/Leerzustand.
 *
 * Farben ausschliesslich ueber Theme-/Site-Palette-Tokens (feedback_contrast_
 * convention): jede background-Flaeche traegt ihr definiertes on-Token.
 */

/* `.compendion-wide-layout` (Template-Main) laeuft volle Breite (Fundus/
 * Podcasts/Profil-Konvention) – `.compendion-search` selbst bleibt ungedeckelt,
 * jeder Abschnitt zentriert sich stattdessen EINZELN mit seiner eigenen Breite
 * (Korrekturrunde 2, Arne 2026-08-28: Suchfeld/Pillen bleiben wie zuvor,
 * NUR die Ergebnisliste bekommt eine eigene, groessere Breite). */

/* Suchfeld + Pillen: unveraendert aus Korrekturrunde 1 (WP-Content-Size,
 * exakt das compendion-mitwirkende-overview.css-Muster). */
.compendion-search .ccl-search,
.compendion-search .ccl-bar {
	width: 100%;
	max-width: var(--wp--style--global--content-size, 720px);
	margin-inline: auto;
}

/* `.ccl-search__field`/`.ccl-search__input` deckeln in compendion-cardlist.css
 * bewusst auf 28rem (Fundus/Anderswo: Suchfeld neben Titel) – hier soll das
 * Feld stattdessen die volle Breite seiner eigenen Zeile fuellen. Scoped auf
 * `.compendion-search`, damit die anderen Cardlist-Seiten unangetastet bleiben. */
.compendion-search .ccl-search__field,
.compendion-search .ccl-search__input {
	max-width: 100%;
}

/* Bug (Arne 2026-08-28): natives WebKit-Clear-"×" von `input[type=search]`
 * kollidierte mit dem eigenen `.ccl-search__clear`-Button — zwei ×-Icons
 * nebeneinander sobald Text im Feld steht. Nativen Cancel-Button
 * unterdruecken, eigener Button bleibt die einzige Loesch-Aktion. Scoped
 * auf `.compendion-search`, damit Fundus/Anderswo (dieselbe `.ccl-search__
 * input`-Klasse, aber ohne eigenen Clear-Button-Konflikt) unangetastet
 * bleiben. */
.compendion-search .ccl-search__input::-webkit-search-cancel-button,
.compendion-search .ccl-search__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

/* Ergebnisliste: eigene, breitere Spalte (Arne 2026-08-28 — Zeilenlaenge in
 * den Trefferkarten war bei 720px noch als "zu breit" empfunden worden;
 * 850px ist Arnes expliziter Zielwert, unabhaengig von Suchfeld/Pillen). */
.compendion-search .cs-status,
.compendion-search .cs-results {
	width: 100%;
	max-width: 850px;
	margin-inline: auto;
}

/* Pillen-Zeile + Sortierung nebeneinander (scoped, damit die anderen
 * Cardlist-Seiten ohne Sortier-Feld unangetastet bleiben). */
.compendion-search .ccl-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.compendion-search .ccl-pills {
	flex: 1 1 auto;
}

.cs-sort-field {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 0 0 auto;
}

.cs-sort-label {
	font-size: 0.8rem;
	color: var(--compendion-color-on-base-muted, var(--wp--preset--color--muted));
	white-space: nowrap;
}

.cs-sort {
	padding: 0.35rem 1rem;
	border: 1px solid var(--ccl-entry-border);
	border-radius: 999px;
	background-color: var(--wp--preset--color--base);
	color: var(--compendion-color-on-base, var(--wp--preset--color--contrast));
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}

.cs-sort:focus-visible {
	outline: 2px solid var(--ccl-badge-bg);
	outline-offset: 2px;
}

.cs-results {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.cs-hit {
	margin: 0;
}

.cs-hit__link {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--ccl-entry-border);
	border-radius: 0.75rem;
	background: var(--wp--preset--color--base);
	color: var(--compendion-color-on-base, var(--wp--preset--color--contrast));
	text-decoration: none;
	transition: background-color 150ms ease, border-color 150ms ease;
}

.cs-hit__link:hover,
.cs-hit__link:focus-visible {
	background: color-mix( in srgb, var(--wp--preset--color--contrast) 8%, transparent );
	border-color: var(--ccl-badge-bg);
	outline: none;
}

.cs-hit__meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
}

.cs-hit__type-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: var(--compendion-color-on-primary, var(--wp--preset--color--base));
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.7rem;
}

.cs-hit__site {
	color: var(--compendion-color-on-base-muted, var(--wp--preset--color--muted));
}

.cs-hit__title {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
}

.cs-hit__snippet {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--compendion-color-on-base-muted, var(--wp--preset--color--muted));
}

.cs-hit__mark {
	background: var(--wp--preset--color--accent);
	color: var(--compendion-color-on-accent, var(--wp--preset--color--base));
	padding: 0 0.15em;
	border-radius: 0.2em;
	font-style: normal;
	font-weight: 700;
}

.cs-status {
	margin: 0 0 0.5rem;
	font-size: 0.9rem;
	color: var(--compendion-color-on-base-muted, var(--wp--preset--color--muted));
}

.cs-status[data-cs-state="loading"]::before {
	content: "";
	display: inline-block;
	width: 0.9rem;
	height: 0.9rem;
	margin-right: 0.4rem;
	vertical-align: -0.15em;
	border: 2px solid var(--ccl-section-line);
	border-top-color: var(--ccl-badge-bg);
	border-radius: 50%;
	animation: ccl-spin 0.8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.cs-status[data-cs-state="loading"]::before { animation-duration: 2.4s; }
}

.cs-noscript {
	color: var(--compendion-color-on-base-muted, var(--wp--preset--color--muted));
}

@media (max-width: 599px) {
	.cs-hit__link { padding: 0.7rem 0.85rem; }
}