/* ==========================================================================
   Strona „Gdzie działamy" (hub lokalizacji) — prefiks .zk-loc__.
   Tokeny --zk-* (fallbacki). Mapa: wspólny komponent assets/area-map.css.
   ========================================================================== */
.zk-loc { color: var(--zk-ink, #23291c); }
.zk-loc__inner {
	max-width: var(--zk-max, 1240px);
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 1.25rem);
}
.zk-loc__h2 {
	font-size: clamp(1.5rem, 3.2vw, 2rem);
	font-weight: 800; color: var(--zk-ink, #23291c);
	letter-spacing: -.01em; margin: 0 0 .5rem;
}

/* --- 01 Hero (kompaktowy, w stylu Kalkulatora BDO: biały, breadcrumb + H1 + lead) ---
   WAŻNE: linia separatora i odstępy pionowe siedzą na WEWNĘTRZNYM kontenerze
   (.zk-loc__inner, max-width 1240), nie na sekcji pełnej szerokości — dlatego
   kreska ma szerokość kontenera, nie ekranu (jak `.zk-kb > section` na kalkulatorze).
   Wartości paddingu identyczne z kalkulatorem BDO. */
.zk-loc__hero .zk-loc__inner {
	padding-block: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1rem, 2.5vw, 1.5rem);
	border-bottom: 1px solid var(--zk-line, #e6e8e1);
}
/* Breadcrumb = wspólny komponent .zk-ui-breadcrumb (zk-ui.css, margin-bottom 22px). */
.zk-loc__title {
	font-size: clamp(1.7rem, 4vw, 2.4rem);
	font-weight: 800; line-height: 1.14; letter-spacing: -.01em;
	color: var(--zk-ink, #23291c); margin: 0 0 .9rem; max-width: 26ch;
}
.zk-loc__intro {
	max-width: 70ch; color: var(--zk-ink, #23291c);
	font-size: 1.08rem; line-height: 1.6;
}
.zk-loc__intro p { margin: 0; }

/* --- 02 Mapa --- */
.zk-loc__map-section { padding-block: clamp(2rem, 5vw, 3.5rem); text-align: center; }
.zk-loc__map-intro {
	color: var(--zk-muted, #5b6152); margin: 0 auto 1.5rem; max-width: 52ch;
}
.zk-loc__map { display: flex; justify-content: center; }
.zk-loc__map .zk-hm__area-map-svg { max-width: 620px; }

/* --- 03 Katalog województw (linia oddzielająca też w kontenerze, nie na całą szerokość) --- */
.zk-loc__catalog { padding-top: 0; padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.zk-loc__catalog .zk-loc__inner {
	border-top: 1px solid var(--zk-line, #e6e8e1);
	padding-top: clamp(2rem, 5vw, 3.5rem);
}
.zk-loc__catalog-intro {
	color: var(--zk-muted, #5b6152); margin: .4rem 0 0; max-width: 62ch; line-height: 1.55;
}
.zk-loc__grid {
	list-style: none; margin: 1.6rem 0 0; padding: 0;
	display: grid; gap: 1rem; align-items: start; /* karty do wysokości treści — bez pustych luk */
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.zk-loc__card {
	background: var(--zk-bg, #fff);
	border: 1px solid var(--zk-line, #e6e8e1);
	border-radius: var(--zk-r-card, 12px);
	padding: 1.05rem 1.1rem 1.15rem;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.zk-loc__card:hover {
	border-color: #cfe3a8;
	box-shadow: 0 12px 30px -16px rgba(20, 32, 4, .28);
	transform: translateY(-2px);
}
/* Nagłówek karty = link do strony województwa: pinezka + nazwa + strzałka. */
.zk-loc__card-head {
	display: flex; align-items: center; gap: .55rem;
	text-decoration: none; color: var(--zk-ink, #23291c);
}
.zk-loc__card-pin { display: inline-flex; flex: 0 0 auto; color: var(--zk-green-dark, #487214); }
.zk-loc__card-pin svg { width: 18px; height: 18px; }
.zk-loc__card-name { flex: 1 1 auto; font-size: 1.1rem; font-weight: 800; }
.zk-loc__card-arrow {
	flex: 0 0 auto; color: var(--zk-green-dark, #487214); font-weight: 700;
	transition: transform .15s ease;
}
.zk-loc__card-head:hover .zk-loc__card-name { color: var(--zk-green-dark, #487214); }
.zk-loc__card-head:hover .zk-loc__card-arrow { transform: translateX(3px); }

/* Miasta jako zwarte chipy-linki (zawijają się). */
.zk-loc__cities {
	list-style: none; margin: .85rem 0 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: .4rem;
}
.zk-loc__city {
	display: inline-flex; align-items: center;
	padding: .3rem .65rem; font-size: .88rem; text-decoration: none;
	color: var(--zk-ink, #23291c);
	background: var(--zk-bg-soft, #f2f4ec);
	border: 1px solid var(--zk-line, #e6e8e1);
	border-radius: var(--zk-r-control, 8px);
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.zk-loc__city:hover { color: var(--zk-green-dark, #487214); border-color: #cfe3a8; background: var(--zk-bg, #fff); }
/* Chip „+ więcej" — sygnał, że pokazane miasta to tylko wybór; link do regionu. */
.zk-loc__city--more {
	background: transparent;
	border-style: dashed; border-color: #cfe3a8;
	color: var(--zk-green-dark, #487214); font-weight: 700;
}
.zk-loc__city--more:hover {
	background: var(--zk-bg-green-soft, #eef5e2);
	border-style: solid; border-color: #cfe3a8;
	color: var(--zk-green-dark, #487214);
}
/* Anchor pełny „Kontener na gruz {Miasto}" dla SEO; wizualnie tylko nazwa miasta. */
.zk-loc__city-full {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}