/* ==========================================================================
   Interaktywna mapa Polski — WSPÓLNY komponent (jedno źródło prawdy).
   Wyjście renderu: inc/home/area-map.php → zk_hm_area_map_render()
   (<svg class="zk-hm__area-map-svg"> + <a class="zk-hm__voivo ...">).
   Używane na: stronie głównej (moduł 07) i stronie /gdzie-dzialamy/ (hub).
   Kontener/otoczenie mapy stylują strony u siebie; tu tylko sam SVG i regiony.
   Kolory z tokenów --zk-* (fallbacki dla warunkowego ładowania CSS).
   ========================================================================== */
.zk-hm__area-map-svg {
	display: block;
	width: 100%; max-width: 460px; height: auto;
	margin-inline: auto;
	overflow: visible; /* powiększony region + cień nie są ucinane */
}

/* Pojedyncze województwo = link (crawlowalny, z klawiatury). */
.zk-hm__voivo { cursor: pointer; outline: none; }
.zk-hm__voivo path {
	stroke: var(--zk-bg, #fff);
	stroke-width: 1.4; stroke-linejoin: round;
	transition: fill .18s ease, transform .18s ease, filter .18s ease;
	transform-box: fill-box; transform-origin: center;
}

/* Cztery tonacje marki (4-kolorowanie: żadne dwa stykające się województwa
   nie mają tej samej barwy). */
.zk-hm__voivo--c0 path { fill: var(--zk-bg-green, #e8f2d6); }
.zk-hm__voivo--c1 path { fill: #dcecc4; }
.zk-hm__voivo--c2 path { fill: var(--zk-bg-green-soft, #eef5e2); }
.zk-hm__voivo--c3 path { fill: var(--zk-bg-soft, #f2f4ec); }

/* Hover / focus: delikatne powiększenie + akcent marki (unosi region ponad sąsiadów). */
.zk-hm__voivo:hover path,
.zk-hm__voivo:focus-visible path {
	fill: var(--zk-green, #84BF2A);
	stroke: var(--zk-green-dark, #487214);
	stroke-width: 1.8;
	transform: scale(1.045);
	filter: drop-shadow(0 6px 14px rgba(20, 32, 4, .28));
}
.zk-hm__voivo:focus-visible path { stroke-width: 2.4; }

/* Etykieta nazwy — ukryta, pojawia się na hover/focus. Biała obwódka
   (paint-order) => czytelna na dowolnym wypełnieniu. */
.zk-hm__voivo-label {
	fill: var(--zk-ink, #23291c);
	font-family: var(--zk-font, sans-serif);
	font-size: 15px; font-weight: 700;
	text-anchor: middle; dominant-baseline: middle;
	pointer-events: none; opacity: 0;
	paint-order: stroke; stroke: var(--zk-bg, #fff);
	stroke-width: 3.5; stroke-linejoin: round;
	transition: opacity .18s ease;
}
.zk-hm__voivo:hover .zk-hm__voivo-label,
.zk-hm__voivo:focus-visible .zk-hm__voivo-label { opacity: 1; }

@media (max-width: 820px) {
	.zk-hm__voivo-label { font-size: 17px; } /* czytelność na mniejszej mapie */
}

@media (prefers-reduced-motion: reduce) {
	.zk-hm__voivo path { transition: fill .01s; }
	.zk-hm__voivo:hover path,
	.zk-hm__voivo:focus-visible path { transform: none; }
}