/**
 * S+W Filialen — Widget-Styles.
 * Aufgeräumtes Karten-Raster (max. 3 Spalten wie im PDF): gleichmäßige
 * Kartenhöhen je Reihe (Grid-Stretch), gepunktete Gold-Trenner bündig an der
 * Reihen-Unterkante, klare Informationshierarchie (Name → Adresse → Kontakt →
 * Öffnungszeiten). Alle Werte aus den sw-Tokens (Child-Theme).
 */

.sw-filialen {
	--sw-filialen-min-width: 260px;
	--sw-filialen-col-gap: 2.25rem;
	--sw-filialen-row-gap: 2.75rem;
	--sw-filialen-day-col: 4.5em; /* Breite der Wochentags-Spalte in den Öffnungszeiten */
	/* Sekundärton für nachrangige Infos, aus dem Text-Token abgeleitet. */
	/* 65 % statt 60 %: bei 60 % kommt der gedämpfte Ton auf Weiß nur auf
	   4,47:1 und reißt damit knapp die WCAG-AA-Schwelle von 4,5:1 — in Meta Pro
	   Light bei 18,4px doppelt spürbar. 65 % ergibt 5,2:1 bei praktisch
	   gleicher Wirkung als Nebenebene. */
	--sw-filialen-muted: color-mix(in srgb, var(--sw-color-text, #1D1D1B) 65%, transparent);

	display: grid;
	/* Deckelung auf 3 Spalten ohne Media-Queries: die Spaltenbreite ist
	   mindestens ein Drittel des Containers — mehr als 3 Spalten passen nie.
	   Wird ein Drittel schmaler als die Mindestbreite, reduziert auto-fill
	   automatisch auf 2 bzw. 1 Spalte. */
	grid-template-columns: repeat(
		auto-fill,
		minmax( max( var(--sw-filialen-min-width), calc( ( 100% - 2 * var(--sw-filialen-col-gap) ) / 3 ) ), 1fr )
	);
	gap: var(--sw-filialen-row-gap) var(--sw-filialen-col-gap);
	align-items: stretch; /* gleichmäßige Kartenhöhen je Reihe */

	font-family: var(--sw-font-sans, 'Meta Pro', 'Fira Sans', sans-serif);
	font-size: var(--sw-fs-body, 1.25rem);
	font-weight: 300; /* Meta Pro Light — Kartentext lt. PDF */
	line-height: 1.45;
	color: var(--sw-color-text, #1D1D1B);
}

.sw-filialen__card {
	display: flex;
	flex-direction: column;
	padding-bottom: 1.6rem;
	/* Gepunkteter Gold-Trenner bündig an der Karten-/Reihen-Unterkante
	   (border-style dotted wäre zu dicht). */
	background-image: radial-gradient(circle, var(--sw-color-gold, #D3B880) 1.5px, transparent 1.6px);
	background-size: 12px 4px;
	background-repeat: repeat-x;
	background-position: left bottom;
}

/* ==========================================================================
   Informationshierarchie
   ========================================================================== */

/* 1) Name — Pill in Beige, fett. Doppelte Spezifität schlägt den .sw-pill-Default. */
/* Ruhigere Einblendung als der 0.6s-Default (Karten faden nur, kein Transform).
   Doppelte Klassen-Spezifität schlägt die Dauer aus [data-sw-anim]. */
.sw-filialen .sw-filialen__card {
	transition-duration: var(--sw-anim-duration-slow);
}

.sw-filialen .sw-pill.sw-filialen__name {
	background-color: var(--sw-color-beige, #EBE3D1);
	font-size: inherit;
	font-weight: 700;
	margin-bottom: 0.6rem;
}

/* Variante ohne Pill (z. B. Firmenzentrale): fette Textzeile bündig links. */
.sw-filialen__name--plain {
	font-weight: 700;
	margin-bottom: 0.6rem;
}

/* Fette Zusatzzeile direkt unter dem Label ("im REWE-Markt Seper" …). */
.sw-filialen__sublabel {
	font-weight: 700;
	margin-top: -0.25rem;
}

/* 2) Adresse — primäre Sachinfo, volle Textfarbe. */
.sw-filialen__address {
	margin-bottom: 0.5rem;
}

/* 3) Kontakt — nachrangig: gedämpfte Farbe, etwas kleiner. */
.sw-filialen__contact {
	color: var(--sw-filialen-muted);
	font-size: 0.92em;
	line-height: 1.5;
}

/* Telefonnummer ist wählbar (tel:), soll die gedämpfte Kontaktebene aber
   nicht mit Linkfarbe und Unterstreichung aufbrechen — sichtbar wird der
   Link erst bei Hover und Tastatur-Fokus. */
.sw-filialen__contact .sw-filialen__tel {
	color: inherit;
	text-decoration: none;
}

.sw-filialen__contact .sw-filialen__tel:hover,
.sw-filialen__contact .sw-filialen__tel:focus-visible {
	color: var(--sw-color-wine);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.sw-filialen__contact .sw-filialen__tel:focus-visible {
	outline: 2px solid var(--sw-color-wine);
	outline-offset: 3px;
	border-radius: 2px;
}

/* 4) Öffnungszeiten — Detailebene: durch Abstand abgesetzt, tabellarisch.
   Wochentag fett in fester Spalte, die erste Zeit beginnt in derselben Zeile;
   Folgezeilen (nach <br>) richten sich an der Zeitspalte aus (hängender Einzug). */
/*
 * Öffnungszeiten sitzen an der Kartenunterkante.
 *
 * Die Karten einer Reihe sind gleich hoch (align-items: stretch), ihr Inhalt
 * ist aber unterschiedlich lang. Oben ausgerichtet ließ das bei kurzen Karten
 * eine große Leerfläche über dem gepunkteten Gold-Trenner stehen — sie las
 * sich als Loch, nicht als Absicht. Mit margin-top: auto rutschen die
 * Öffnungszeiten ans untere Ende, sodass sie über eine Reihe hinweg auf einer
 * Linie liegen; der Ausgleich wandert in den Textkörper, wo er als Luft
 * durchgeht. Das padding-top hält dabei den Leerzeilen-Abstand aus dem PDF
 * als Mindestabstand, auch wenn die Karte randvoll ist.
 */
.sw-filialen__hours {
	margin-top: auto;
	padding-top: 1.15em;
}

.sw-filialen__hours p {
	margin: 0;
	padding-left: var(--sw-filialen-day-col);
	text-indent: calc(-1 * var(--sw-filialen-day-col));
}

.sw-filialen__hours p strong {
	display: inline-block;
	/* min-width statt width: ein längeres Tageskürzel schiebt die Zeiten nach
	   rechts, statt sich mit ihnen zu überlagern. Das padding-right hält den
	   Spaltenabstand frei (box-sizing: border-box). */
	min-width: var(--sw-filialen-day-col);
	padding-right: 0.75em;
	text-indent: 0;
	font-weight: 700; /* Tag als Anker der Zeile hervorgehoben */
}

/* Hinweiszeilen ohne Wochentag ("Mi Nachmittag geschlossen") bündig links und
   gedämpft — nachrangig gegenüber den eigentlichen Öffnungszeiten. */
.sw-filialen__hours p:not(:has(strong)) {
	padding-left: 0;
	text-indent: 0;
	color: var(--sw-filialen-muted);
}

/* Nachlaufende Anmerkung (folgt auf Öffnungszeiten): Luft davor. */
.sw-filialen__hours p:has(strong) + p:not(:has(strong)) {
	margin-top: 0.75em;
}

/* Einleitende Anmerkung (leitet Öffnungszeiten ein, z. B. "Imbiss/Warme Küche
   geöffnet:"): Luft danach. */
.sw-filialen__hours p:not(:has(strong)):has(+ p:has(strong)) {
	margin-bottom: 0.75em;
}