/* Wektor Wiedzy – Mapka szkoleń stacjonarnych.
 * Kolory w zmiennych (jak w kafelkach „Lokalizacje szkoleń”) — da się je nadpisać w Elementorze, w „Własnym CSS”
 * widżetu albo sekcji, np. selector .wms-mapa { --wms-pinezka: #0033a1; }.
 * Reguły mają co najmniej dwie klasy: zestaw Elementora (.elementor-kit-52 a) i motyw Hello (button) mają wagę
 * jednej klasy z elementem i wygrywały z regułami na jednej klasie (PODRĘCZNIK, sekcja 7).
 * Stany (pinezka wybrana, karta pod pinezką) ustawia skrypt zmiennymi --wms-skala, --wms-kolor, --wms-y
 * w atrybucie style — bez klas dodawanych skryptem, których „usuń nieużywany CSS” by nie zostawił. */

.wms-mapa {
	--wms-kraj: #eef3fa;
	--wms-wojewodztwa: #c9d6ea;
	--wms-granica: #17468f;
	--wms-pinezka: #17468f;
	--wms-pinezka-aktywna: #0e2f63;
	--wms-obwodka: #ffa924;
	--wms-etykieta: #17468f;
	--wms-karta-tlo: #fff;
	--wms-karta-ramka: #e3e9f2;
	--wms-miasto: #17468f;
	--wms-tekst: #5a6472;
	--wms-przycisk: #457c00; /* przycisk „KUP TERAZ” jak w kafelkach terminów */
	--wms-przycisk-napis: #fff;
	--wms-przycisk-najechany: #17468f;
	width: 100%;
	min-width: min(100%, 300px); /* w kontenerze-rzędzie bez podanej szerokości mapka by się zwinęła (container-type) */
	container-type: inline-size;
}

.wms-mapa .wms-obszar { position: relative; }
.wms-mapa .wms-svg { display: block; width: 100%; height: auto; overflow: visible; }

.wms-mapa .wms-kraj { fill: var(--wms-kraj); }
.wms-mapa .wms-wojewodztwa { fill: none; stroke: var(--wms-wojewodztwa); }
.wms-mapa .wms-granica { fill: none; stroke: var(--wms-granica); }

.wms-mapa .wms-pin { cursor: pointer; outline: none; }
.wms-mapa .wms-pin:hover,
.wms-mapa .wms-pin:focus-visible { --wms-skala: 1.18; --wms-kolor: var(--wms-pinezka-aktywna); }
.wms-mapa .wms-pin-g { transform: scale(calc(var(--wms-baza, 1) * var(--wms-skala, 1))); transition: transform .15s ease; }
.wms-mapa .wms-pin-ksztalt { fill: var(--wms-kolor, var(--wms-pinezka)); transition: fill .15s ease; }
.wms-mapa .wms-pin:focus-visible .wms-pin-ksztalt { stroke: var(--wms-obwodka); stroke-width: 3; }

/* Wielkość nazw: --wms-napis z suwaka widżetu (Styl → Nazwy miast), w jednostkach obrazka — skaluje się razem
   z mapą. Biała obwódka liter rośnie razem z nimi (4 przy 17, jak do 1.2.2). */
.wms-mapa .wms-etykieta {
	fill: var(--wms-etykieta);
	font-size: var(--wms-napis, 26px);
	font-weight: 600;
	paint-order: stroke;
	stroke: #fff;
	stroke-width: calc(var(--wms-napis, 26px) * .235);
	stroke-linejoin: round;
}

.wms-mapa .wms-karta {
	position: absolute;
	z-index: 5;
	width: max-content;
	max-width: min(300px, 80%);
	box-sizing: border-box;
	transform: translate(calc(-50% + var(--wms-przesuniecie, 0px)), var(--wms-y, calc(-100% - 8px)));
	padding: 14px 36px 14px 16px;
	background: var(--wms-karta-tlo);
	border: 1px solid var(--wms-karta-ramka);
	border-radius: 10px;
	box-shadow: 0 6px 18px rgba(23, 70, 143, .15);
	color: var(--wms-tekst);
	font-size: 15px;
	line-height: 1.6;
	text-align: left;
}
.wms-mapa .wms-karta[hidden] { display: none; }
/* Bez skryptu (zablokowany albo opóźniony): kliknięta pinezka (#adres karty) pokazuje kartę pod mapą.
   Skrypt dopisuje mapce data-wms-gotowa, więc przy działającym skrypcie ta reguła nic nie robi. */
.wms-mapa:not([data-wms-gotowa]) .wms-karta:target {
	display: block;
	position: relative;
	left: auto;
	top: auto;
	width: auto;
	max-width: none;
	margin-top: 12px;
	transform: none;
}
.wms-mapa .wms-karta:focus { outline: none; }
.wms-mapa .wms-karta:focus-visible { outline: 2px solid var(--wms-obwodka); outline-offset: 2px; }

.wms-mapa .wms-karta .wms-zamknij,
.wms-mapa .wms-karta .wms-zamknij:hover,
.wms-mapa .wms-karta .wms-zamknij:focus {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wms-tekst);
	font-size: 20px;
	line-height: 28px;
	text-align: center;
}
.wms-mapa .wms-karta .wms-zamknij:hover { background: var(--wms-kraj); }
.wms-mapa .wms-karta .wms-zamknij:focus-visible { outline: 2px solid var(--wms-obwodka); }

.wms-mapa .wms-pozycja + .wms-pozycja { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--wms-karta-ramka); }
.wms-mapa .wms-miasto { color: var(--wms-miasto); font-size: 18px; font-weight: 600; line-height: 1.4; }
.wms-mapa .wms-hotel { margin: 2px 0 4px; }
.wms-mapa .wms-termin strong { color: var(--wms-miasto); }

/* Przycisk przy terminie: wygląd przycisku z kafelka (zieleń, po najechaniu granat, zaokrąglony, 14 px, 600). */
.wms-mapa .wms-karta .wms-kup,
.wms-mapa .wms-karta .wms-kup:visited {
	display: block;
	margin-top: 10px;
	padding: 13px 18px;
	border: 0;
	border-radius: 89px;
	background: var(--wms-przycisk);
	color: var(--wms-przycisk-napis);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	transition: background-color .15s ease;
}
.wms-mapa .wms-karta .wms-kup:hover,
.wms-mapa .wms-karta .wms-kup:focus {
	background: var(--wms-przycisk-najechany);
	color: var(--wms-przycisk-napis);
	text-decoration: none;
}
.wms-mapa .wms-karta .wms-kup:focus-visible { outline: 2px solid var(--wms-obwodka); outline-offset: 2px; }

.wms-mapa .wms-uwagi {
	margin-top: 12px;
	padding: 10px 14px;
	border-left: 4px solid var(--wms-obwodka);
	background: #fff8ec;
	color: #3c434a;
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
}
.wms-mapa .wms-uwagi ul { margin: 6px 0 0 18px; padding: 0; }

/* Wąska kolumna albo telefon: karta pod mapą zamiast dymka. */
@container (max-width: 520px) {
	.wms-mapa .wms-karta {
		position: relative; /* nie static: „×” ma stać w rogu karty, nie mapy */
		width: auto;
		max-width: none;
		margin-top: 12px;
		transform: none;
	}
}
/* Palec (telefon, tablet) i wąska mapka: pinezka i niewidoczny krąg wokół niej na tyle duże, żeby trafić palcem
   (ok. 25 px przy mapce 340 px), a bez podpisów miast — przy powiększonych pinezkach nie mają miejsca.
   Do 1.2.2 tak było przy każdej mapce węższej niż 520 px, także z myszką: na komputerze napisy znikały już przy
   kolumnie 48% (mapka 517 px, Mobbing 03.11). Od 1.2.3 z myszką napisy zostają do 300 px. */
@media (pointer: coarse) {
	@container (max-width: 520px) {
		.wms-mapa .wms-obszar { --wms-baza: 1.7; }
		.wms-mapa .wms-etykieta { display: none; }
	}
}
@container (max-width: 300px) {
	.wms-mapa .wms-etykieta { display: none; }
}