/**
 * S+W Filialkarte — Übersichtskarte des Teck-Umlands über dem Filialraster.
 *
 * Gehört zum Widget sw_filialen (Schalter „Karte anzeigen"). Der Ausschnitt
 * und damit die Lage der Punkte ist im PHP festgelegt (SW_Filialen_Widget::
 * KARTE_*); hier steht nur die Optik.
 *
 * Werte kommen aus sw-tokens.css. Die Karte ist eine Zugabe, keine Bedingung:
 * das Raster darunter bleibt die maßgebliche Darstellung, und alles, was die
 * Karte kann, geht auch ohne sie.
 */

.sw-filialkarte {
	--sw-karte-punkt: 0.75rem;         /* Durchmesser der Marke */
	--sw-karte-ring: 0.25rem;          /* Halo im Ruhezustand */
	--sw-karte-grund: var(--sw-color-cream, #F4EEE1);
	--sw-karte-linie: var(--sw-color-gold, #D3B880);
	--sw-karte-marke: var(--sw-color-wine, #631C39);

	margin: 0 0 clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

.sw-filialkarte__buehne {
	position: relative;
	aspect-ratio: var(--sw-karte-seitenverhaeltnis, 1000 / 938);
	max-width: 46rem;
	margin-inline: auto;
	background-color: var(--sw-karte-grund);
	overflow: hidden;
}

.sw-filialkarte__grund,
.sw-filialkarte__platzhalter {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.sw-filialkarte__grund {
	object-fit: cover;
}

/* Der Platzhalter soll da sein, aber nicht auffallen: er behauptet keine
   Geografie, er hält nur die Fläche, bis die Zeichnung vorliegt. */
.sw-filialkarte__platzhalter {
	color: color-mix(in srgb, var(--sw-karte-linie) 40%, transparent);
}

/* ==========================================================================
   Punkte
   ========================================================================== */

.sw-filialkarte__punkte {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sw-filialkarte__eintrag {
	position: absolute;
	left: var(--sw-karte-x, 50%);
	top: var(--sw-karte-y, 50%);
	transform: translate(-50%, -50%);
}

/*
 * Der Punkt ist ein echter Button: damit ist er ohne Zutun per Tab
 * erreichbar, mit Enter/Leertaste auslösbar und wird als Bedienelement
 * angesagt. Die Trefferfläche ist über das ::before deutlich größer als die
 * sichtbare Marke (WCAG 2.5.8) — auf dem Handy wären 12px sonst nicht zu
 * treffen, ohne dass die Marken optisch aufdringlich würden.
 */
/*
 * Doppeltes :root gegen den globalen Button-Stil des Kits.
 *
 * `.elementor-kit-5 button` (0,1,1) gibt jedem Button die Pill-Optik: weißer
 * Grund, Rahmen, Radius 60px, Padding 15/52, Schatten. Auf der Karte wurde aus
 * jedem Punkt dadurch eine große weiße Kapsel, die die halbe Karte verdeckte.
 * Ein einfacher Klassenselektor (0,1,0) verliert dagegen.
 */
:root:root .sw-filialkarte__punkt {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	letter-spacing: normal;
	font-family: var(--sw-font-sans);
	cursor: pointer;
	color: var(--sw-color-text, #1D1D1B);
}

.sw-filialkarte__punkt::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	width: 2.75rem;
	height: 2.75rem;
	transform: translate(-50%, -35%);
}

.sw-filialkarte__marke {
	width: var(--sw-karte-punkt);
	height: var(--sw-karte-punkt);
	border-radius: 50%;
	background-color: var(--sw-karte-marke);
	/* Heller Ring trennt die Marke vom Kartengrund, auch über dunklen
	   Bildstellen — ohne einen zweiten Kreis zeichnen zu müssen. */
	box-shadow: 0 0 0 var(--sw-karte-ring) var(--sw-karte-grund);
	transition:
		transform var(--sw-anim-duration-fast) var(--sw-anim-easing),
		box-shadow var(--sw-anim-duration-fast) var(--sw-anim-easing);
}

/*
 * Der Ortsname erscheint erst beim Ansprechen des Punktes.
 *
 * Dauerhaft eingeblendet ging es nicht auf: In Owen liegen drei Filialen
 * (Firmenzentrale, Filiale, Nahkauf Huber) keine 700 m auseinander — auf
 * dieser Karte rund 20 px. Ihre Beschriftungen überlagerten sich unauflösbar,
 * und kein Kürzen der Namen ändert daran etwas. Auch Beuren und Neuffen liegen
 * dicht beieinander.
 *
 * Die Punkte allein erzählen, worum es geht: dreizehn Orte rund um die Teck.
 * Wer wissen will, welcher welcher ist, zeigt darauf — und das vollständige
 * Verzeichnis steht ohnehin als Raster darunter. Ruhiger ist es außerdem.
 */
.sw-filialkarte__ort {
	position: absolute;
	top: calc(100% + 0.15rem);
	left: 50%;
	transform: translate(-50%, -0.25rem);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	/* Der Ortsname liegt über der Karte und muss auch auf gezeichneten
	   Linien lesbar bleiben. */
	padding: 0.1em 0.4em;
	background-color: color-mix(in srgb, var(--sw-karte-grund) 92%, transparent);
	border-radius: 2px;
	color: var(--sw-karte-marke);
	opacity: 0;
	pointer-events: none;
	transition:
		opacity var(--sw-anim-duration-fast) var(--sw-anim-easing),
		transform var(--sw-anim-duration-fast) var(--sw-anim-easing);
}

/* ---- Zustände: Hover, Tastaturfokus und die Gegenrichtung (Karte↔Punkt) ---- */

.sw-filialkarte__punkt:hover .sw-filialkarte__marke,
.sw-filialkarte__punkt:focus-visible .sw-filialkarte__marke,
.sw-filialkarte__eintrag.sw-ist-aktiv .sw-filialkarte__marke {
	transform: scale(1.5);
	box-shadow: 0 0 0 var(--sw-karte-ring) var(--sw-karte-grund),
	            0 0 0 calc(var(--sw-karte-ring) + 2px) var(--sw-karte-linie);
}

.sw-filialkarte__punkt:hover .sw-filialkarte__ort,
.sw-filialkarte__punkt:focus-visible .sw-filialkarte__ort,
.sw-filialkarte__eintrag.sw-ist-aktiv .sw-filialkarte__ort {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Aktive Punkte nach vorn, damit die Beschriftung nicht unter dem
   Nachbarpunkt verschwindet. */
.sw-filialkarte__eintrag:hover,
.sw-filialkarte__eintrag:focus-within,
.sw-filialkarte__eintrag.sw-ist-aktiv {
	z-index: 2;
}

/* Doppeltes :root auch hier: sonst gewinnt der dunkle Standard-Fokusring des
   Themes (3px) über die Markenfarbe. */
:root:root .sw-filialkarte__punkt:focus-visible {
	outline: 2px solid var(--sw-karte-marke);
	outline-offset: 4px;
	border-radius: 3px;
}

:root:root .sw-filialkarte__punkt:focus:not(:focus-visible) {
	outline: none;
}

/* ==========================================================================
   Karte im Raster hervorheben, wenn ihr Punkt angesprochen wird
   ========================================================================== */

.sw-filialen__card {
	transition: background-color var(--sw-anim-duration-fast) var(--sw-anim-easing);
}

.sw-filialen__card.sw-ist-hervorgehoben {
	background-color: color-mix(in srgb, var(--sw-color-cream, #F4EEE1) 70%, transparent);
}

.sw-filialkarte__caption {
	margin-top: 0.9rem;
	text-align: center;
	font-family: var(--sw-font-sans);
	font-size: var(--sw-fs-small);
	color: color-mix(in srgb, var(--sw-color-text, #1D1D1B) 65%, transparent);
}

/* ==========================================================================
   Schmale Viewports
   Unter 768px wird die Karte still: die Beschriftungen überlagerten sich, und
   die Punkte lägen zu dicht zum sicheren Treffen. Die Marken bleiben als
   Übersicht stehen, die Bedienung läuft über das Raster darunter — das ohnehin
   die vollständige Darstellung ist.
   ========================================================================== */

@media (max-width: 767px) {
	.sw-filialkarte__ort {
		display: none;
	}

	:root:root .sw-filialkarte__punkt {
		pointer-events: none;
	}

	.sw-filialkarte {
		--sw-karte-punkt: 0.6rem;
		--sw-karte-ring: 0.2rem;
	}
}

/* ==========================================================================
   Bewegungsreduzierung und zentrale Abschaltung
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.sw-filialkarte__marke,
	.sw-filialkarte__ort,
	.sw-filialen__card {
		transition: none;
	}
}

body.sw-anim-off .sw-filialkarte__marke,
body.sw-anim-off .sw-filialkarte__ort,
body.sw-anim-off .sw-filialen__card {
	transition: none;
}