/**
 * Datei: results.css
 * Modul: Search – Darstellung der Ergebnislisten
 *
 * Zweck:
 * - Struktur fuer Ergebniszaehler, Listen- und Grid-Wrapper
 * - Keine Card-Styles (Cards kommen aus cards.css im Cards-Core bzw. Search-Cards nur Layout)
 * - Keine Interaktionslogik
 * - Tokens statt fester Farben
 * - BFSG/WCAG: gut lesbare Abstaende und klare Trennung
 */

/* ==========================================================
   Ergebnis-Zaehler
========================================================== */
.mp-search-result-count{
	font-size:15px;
	font-weight:600;
	color:var(--text-main);
	margin-bottom:18px;
	padding:6px 0;

	/* weichere Trennung als harte Linie */
	border-bottom:1px solid color-mix(in srgb, var(--border-main) 70%, transparent);
}

/* ==========================================================
   Ergebnis-Listen (List-Layout)
========================================================== */
.mp-search-results-list{
	display:flex;
	flex-direction:column;
	gap:22px;
	margin-top:10px;
}

/* ==========================================================
   Ergebnis-Grid (Grid-Layouts)
========================================================== */
.mp-search-results-grid{
	display:grid;
	gap:20px;
	margin-top:10px;

	/* Default: 1 Spalte, damit ohne Media Query korrekt */
	grid-template-columns:1fr;
}

/* ==========================================================
   Grid: 2 Spalten (Desktop & Tablet)
========================================================== */
@media (min-width:700px){
	.mp-search-results-grid.mp-search-grid-2{
		grid-template-columns:repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================
   Mobile: Abstaende etwas kompakter
========================================================== */
@media (max-width:720px){
	.mp-search-results-list{
		gap:18px;
	}

	.mp-search-results-grid{
		gap:16px;
	}
}