@charset "UTF-8";

/* ============================================================
   Blok: MT Mapa punktów sprzedaży — mt/mapa-punktow

   Geometria mapy przychodzi z wtyczki (`Front\Map`), wygląd jest tutaj.
   Klasy `.mt-map*` są kontraktem między jednym i drugim — nazwy muszą
   zostać takie, jakie wypisuje klasa Map.
   ============================================================ */

.mt-mapa { padding-block: 2rem; }
.mt-mapa__title { text-align: center; }
.mt-mapa__intro {
	max-width: 62ch;
	margin-inline: auto;
	margin-bottom: 2rem;
	text-align: center;
}
.mt-mapa__intro > *:last-child { margin-bottom: 0; }

/* Mapa nad listą na telefonie, obok siebie od 900 px — jak w Elementorze
   (tam było 50% / 50%). */
.mt-mapa__cols {
	display: grid;
	gap: 2rem;
	align-items: start;
}

.mt-mapa__map { margin: 0; }
.mt-mapa__cap {
	margin-top: .6rem;
	font-size: .85rem;
	color: var(--mt-muted, #6b7280);
	text-align: center;
}
.mt-mapa__src { display: block; font-size: .8rem; }

/* ---------- sama mapa (SVG z wtyczki) ---------- */

.mt-map {
	display: block;
	width: 100%;
	max-width: 620px;
	height: auto;
	margin: 0 auto;
}

/* Wypełnienia i kreski to OSOBNE elementy SVG — wypełnienie nie ma obrysu,
   żeby żadne nie zasłaniało cudzej granicy, a wszystkie kreski idą na wierzch
   jednym przebiegiem i mają jednakową grubość. */
.mt-map-f { stroke: none; transition: fill .12s; }

/* Kreska jest CIEMNA, nie biała, i to nie kwestia gustu: Mierzeja Helska ma
   w najwęższym miejscu ~300 m, czyli mniej niż piksel przy szerokości mapy
   620 px — cypel rysuje kreska, nie wypełnienie. Biały obrys zamalowywał
   mierzeję i Hel znikał z mapy.
   `vector-effect` trzyma grubość w pikselach ekranu, więc ta sama reguła daje
   ostrą linię i na dużej mapie, i na miniaturze. */
.mt-map-l {
	fill: none;
	stroke: #2f6b53;
	stroke-width: 1;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	pointer-events: none;
}

/* Pięć stopni natężenia — kwantyle liczby punktów, nie zakres wartości. */
.mt-map-q0 { fill: #eceeed; }
.mt-map-q1 { fill: #dcece4; }
.mt-map-q2 { fill: #b3dbc9; }
.mt-map-q3 { fill: #7cc4a7; }
.mt-map-q4 { fill: #3ba980; }
.mt-map-q5 { fill: #00995d; }

/* Morskie wody wewnętrzne kolorem tła — granice województw obejmują Zatokę
   Gdańską i zalewy, bez tego Mierzeja Helska tonie w jednolitej plamie.
   `pointer-events: none`, żeby kliknięcie w zatokę trafiało w województwo. */
.mt-map-w { fill: #fff; stroke: #fff; stroke-width: .8; pointer-events: none; }

.mt-map a { cursor: pointer; }
.mt-map a:hover .mt-map-f,
.mt-map a:focus-visible .mt-map-f { fill: #007346; }
.mt-map a:focus-visible { outline: 2px solid var(--mt-text, #404040); outline-offset: 2px; }

.mt-map-n {
	font-size: 26px;              /* w jednostkach SVG, więc skaluje się z mapą */
	font-weight: 700;
	text-anchor: middle;
	dominant-baseline: middle;
	fill: #14563c;
	pointer-events: none;
}
/* Na ciemniejszych obszarach ciemna liczba przestaje być czytelna. */
.mt-map-q4 + .mt-map-n,
.mt-map-q5 + .mt-map-n { fill: #fff; }
.mt-map a:hover .mt-map-n,
.mt-map a:focus-visible .mt-map-n { fill: #fff; }

/* ---------- lista województw ---------- */

.mt-woj-list {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Lista „samych województw" na szerokim ekranie idzie w dwóch kolumnach —
   szesnaście wierszy jeden pod drugim byłoby wyższe niż mapa obok.
   `auto-fill` z minimum 14 rem sam wraca do jednej kolumny, gdy miejsca
   jest mniej; nie ma tu żadnej wartości do zgadywania.
   Akordeon zostaje jednokolumnowy (patrz `render.php`). */
@media (min-width: 900px) {
	.mt-woj-list--lista {
		grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
		gap: 6px;
	}
}

.mt-woj__box { background: #fff; }

/* `<summary>` z własnym znacznikiem: domyślny trójkącik zastępujemy
   plusem/minusem, jak na dzisiejszej stronie. */
.mt-woj__head,
.mt-woj__link {
	display: flex;
	align-items: center;
	gap: .8rem;
	padding: .7rem 1rem;
	border: 1px solid var(--mt-line, #e2e5e4);
	border-radius: 4px;
	background: #fff;
	color: var(--mt-green, #14945c);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	list-style: none;             /* Firefox */
}
.mt-woj__head::-webkit-details-marker { display: none; }
.mt-woj__head::before {
	content: "+";
	flex: 0 0 1em;
	font-size: 1.2em;
	line-height: 1;
	text-align: center;
	color: var(--mt-green, #14945c);
}
.mt-woj__box[open] > .mt-woj__head::before { content: "\2212"; }   /* minus */

.mt-woj__head:hover,
.mt-woj__link:hover { background: var(--mt-green-pale, #dcece4); }
.mt-woj__box[open] > .mt-woj__head { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.mt-woj__name { flex: 1 1 auto; }
.mt-woj__count {
	flex: 0 0 auto;
	font-weight: 400;
	font-size: .85rem;
	color: var(--mt-muted, #6b7280);
}

.mt-woj__body {
	padding: .8rem 1rem 1rem;
	border: 1px solid var(--mt-line, #e2e5e4);
	border-top: 0;
	border-radius: 0 0 4px 4px;
}
.mt-woj__empty { margin: 0; color: var(--mt-muted, #6b7280); }
.mt-woj__more { margin: .8rem 0 0; font-size: .9rem; }

/* Miejscowości — kolumny tak wąskie, jak pozwoli najdłuższa nazwa. */
.mt-city-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: .15rem .8rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .9rem;
}
.mt-city a {
	color: var(--mt-green-alt, #00995d);
	font-weight: 600;
	text-decoration: none;
}
.mt-city a:hover { text-decoration: underline; }
/* Miejscowość bez punktu sprzedaży — ta sama umowa co dziś: zieleń znaczy
   „można kupić", szarość „szukamy punktu". */
.mt-city--seeking a { color: var(--mt-text, #404040); font-weight: 400; }

.mt-star { color: var(--mt-muted, #6b7280); }

.mt-mapa__legend {
	margin-top: 1rem;
	font-size: .85rem;
	color: var(--mt-muted, #6b7280);
}
.mt-legend--has { color: var(--mt-green-alt, #00995d); }
.mt-legend--seeking { color: var(--mt-text, #404040); }

/* Widok w edytorze — bez mapy, więc bez dwóch kolumn. */
.mt-mapa--edytor .mt-editor-note { margin-top: 1rem; }

@media (min-width: 900px) {
	/* Mapa nieco węższa niż połowa: lista w dwóch kolumnach potrzebuje
	   miejsca, a mapa przy 620 px i tak jest u kresu swojej użytecznej
	   szerokości. */
	.mt-mapa__cols { grid-template-columns: 44% 1fr; gap: 2.5rem; }
}