/* Cała Polska (template-parts/polska.php): kropkowa mapa w wizjerze kamery + treść i CTA wyceny.
   Wpięta na home i /kontakt/. Kolory tylko z tokenów, same szarości.
   Ruch tylko transform / opacity / stroke-dashoffset. Stany z c-polska.js:
   .is-armed (mapa czeka na kadr), .is-on (sekwencja wejścia), .is-paused (pętle stoją poza kadrem).
   Bez JS i przy prefers-reduced-motion skrypt nie uzbraja mapy, więc stoi w stanie końcowym. */

/*--------------------------------------------------------------
# Układ: mapa z lewej (ok. 58%), nagłówek i treść z prawej
--------------------------------------------------------------*/
.pl__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	grid-template-rows: 1fr auto auto 1fr;
	grid-template-areas: "map ." "map head" "map body" "map .";
	column-gap: clamp(2rem, 5vw, 4.5rem);
}
.pl__head { grid-area: head; }
.pl-map { grid-area: map; align-self: center; }
.pl__body { grid-area: body; }

.pl__head h2 { font-size: var(--fs-800); line-height: 1.12; letter-spacing: -.028em; max-width: 14em; }
.pl__lead { margin-top: var(--sp-4); font-size: var(--fs-400); line-height: 1.6; color: var(--t2); max-width: 32em; }

.pl__points { display: grid; margin: var(--sp-6) 0 0; padding: 0; list-style: none; }
.pl__points li { display: flex; align-items: flex-start; gap: var(--sp-4); padding-block: var(--sp-4); border-top: 1px solid var(--line); }
.pl__points li:last-child { border-bottom: 1px solid var(--line); }
.pl__points .ico-tile { margin: 0; }
.pl__point { display: grid; gap: 2px; min-width: 0; font-size: var(--fs-300); line-height: 1.5; color: var(--t2); }
.pl__point strong { font-weight: 500; color: var(--t1); letter-spacing: -.005em; }

.pl__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

/*--------------------------------------------------------------
# Mapa: wizjer (narożniki, północ, współrzędne, podziałka) i płótno SVG
--------------------------------------------------------------*/
.pl-map { position: relative; margin: 0; }
.pl-map__stage { position: relative; padding: clamp(2.25rem, 4vw, 3rem) clamp(1rem, 2.4vw, 2rem); }
.pl-map__canvas { position: relative; }
.pl-map__svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Narożniki kadru: wspólne .vf z main.css (rozmiar i linia z kanonu), tu tylko położenie na
   krawędzi sceny i kolor. Odczyty kartograficzne zamiast REC (to jest w hero). */
.pl-map__stage { --vf-in: 0px; --vf-c: var(--t1); }

.pl-north, .pl-geo {
	position: absolute; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .02em;
	color: var(--t3); white-space: nowrap; pointer-events: none;
}
.pl-north { top: 10px; left: 30px; display: inline-flex; align-items: center; gap: 5px; color: var(--t1); font-weight: 600; }
.pl-north svg { width: 10px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pl-geo { bottom: 10px; left: 30px; font-variant-numeric: tabular-nums; }

/* Podziałka: 100 km = 81,8 jednostki viewBox (13,63% szerokości płótna, projekcja z lat0 52°). */
.pl-scale {
	position: absolute; right: 0; bottom: -2px; width: 13.63%;
	padding-bottom: 6px; font-size: 12px; font-weight: 500; line-height: 1; text-align: right;
	color: var(--t3); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none;
}
.pl-scale::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; border: 1px solid var(--t3); border-top: 0; }

/* Kropki: kreska o długości zero z okrągłym końcem = kropka co 9 jednostek. */
.pl-dots path { fill: none; stroke: var(--line-strong); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 0 9; }
.pl-outline { fill: none; stroke: var(--line-strong); stroke-width: 1.1; stroke-linejoin: round; }
.pl-scan { fill: none; stroke: var(--t1); stroke-width: 1.2; opacity: 0; }
.pl-arc { fill: none; stroke: var(--t1); stroke-width: 1.3; stroke-linecap: round; }
.pl-run { fill: none; stroke: var(--t1); stroke-width: 5.5; stroke-linecap: round; stroke-dasharray: 0 2; opacity: 0; }
.pl-city { fill: var(--bg); stroke: var(--t1); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; }
.pl-ping { fill: none; stroke: var(--t1); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pl-base__halo { fill: var(--bg); stroke: var(--line-strong); stroke-width: 1; transform-box: fill-box; transform-origin: center; }
.pl-base__dot { fill: var(--t1); transform-box: fill-box; transform-origin: center; }
.pl-base__ring { fill: none; stroke: var(--t1); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* Podpisy miast w HTML: czytelne 12 do 13 px niezależnie od skali mapy. */
.pl-lbl {
	position: absolute; left: var(--x); top: var(--y);
	padding: 3px 4px; font-size: var(--fs-200); font-weight: 500; line-height: 1;
	color: var(--t3); white-space: nowrap; background: var(--bg); pointer-events: none;
}
.pl-lbl--r { transform: translate(7px, -50%); }
.pl-lbl--l { transform: translate(calc(-100% - 7px), -50%); }
.pl-lbl--t { transform: translate(-50%, calc(-100% - 7px)); }
.pl-lbl--b { transform: translate(-50%, 7px); }
.pl-lbl--base {
	padding: 7px 9px; font-size: 12px; color: var(--white); background: var(--ink);
	border-radius: var(--radius-sm); transform: translate(16px, -50%);
}
.pl-lbl__sep { margin-inline: 5px; color: var(--ink-t2); }

/*--------------------------------------------------------------
# Ruch: sekwencja wejścia (skan, kontur, baza, łuki), potem spokojne pętle
--------------------------------------------------------------*/
.pl-map.is-armed .pl-dots path { opacity: 0; }
.pl-map.is-armed .pl-outline,
.pl-map.is-armed .pl-arc { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.pl-map.is-armed .pl-city,
.pl-map.is-armed .pl-base__dot { transform: scale(0); }
.pl-map.is-armed .pl-lbl,
.pl-map.is-armed .pl-north,
.pl-map.is-armed .pl-geo,
.pl-map.is-armed .pl-scale { opacity: 0; }
.pl-map.is-armed .pl-base__halo { transform: scale(0); }

/* Rzędy kropek wchodzą razem z linią skanu (y rzędu / 560 × 1 s). */
.pl-map.is-on .pl-dots path { opacity: 1; transition: opacity .4s var(--ease) calc(40ms + var(--r) * 16ms); }
.pl-map.is-on .pl-scan { animation: pl-scan 1s cubic-bezier(.45, 0, .55, 1) both; }
.pl-map.is-on .pl-outline { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--ease-out) .35s; }
.pl-map.is-on .pl-base__dot { transform: none; transition: transform .55s cubic-bezier(.3, 1.6, .5, 1) .95s; }
.pl-map.is-on .pl-base__ring { animation: pl-ring 2.8s var(--ease-out) 1.2s infinite; }
.pl-map.is-on .pl-base__ring--2 { animation-delay: 2.6s; }
.pl-map.is-on .pl-arc { stroke-dashoffset: 0; transition: stroke-dashoffset 1s cubic-bezier(.6, 0, .2, 1) calc(1.15s + var(--a) * 90ms); }
.pl-map.is-on .pl-city { transform: none; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1) calc(2s + var(--a) * 90ms); }
.pl-map.is-on .pl-lbl { opacity: 1; transition: opacity .5s var(--ease) calc(2.05s + var(--a, 0) * 90ms); }
.pl-map.is-on .pl-lbl--base { transition-delay: 1.1s; }
.pl-map.is-on .pl-north,
.pl-map.is-on .pl-geo,
.pl-map.is-on .pl-scale { opacity: 1; transition: opacity .4s var(--ease); }
.pl-map.is-on .pl-base__halo { transform: none; transition: transform .6s var(--ease-out) .85s; }
.pl-map.is-on .pl-run { animation: pl-run var(--p) linear var(--w) infinite; }
.pl-map.is-on .pl-ping { animation: pl-ping var(--p) linear var(--w) infinite; }

/* Poza kadrem wszystkie pętle stoją. */
.pl-map.is-paused .pl-run,
.pl-map.is-paused .pl-ping,
.pl-map.is-paused .pl-base__ring { animation-play-state: paused; }

@keyframes pl-scan {
	0% { transform: translateY(0); opacity: 0; }
	8%, 90% { opacity: 1; }
	100% { transform: translateY(560px); opacity: 0; }
}
@keyframes pl-ring {
	0% { transform: scale(1); opacity: .5; }
	100% { transform: scale(4.4); opacity: 0; }
}
/* Pierwsza połowa okresu: kropka jedzie z bazy do miasta. Druga: przerwa. */
@keyframes pl-run {
	0% { stroke-dashoffset: 0; opacity: 0; animation-timing-function: cubic-bezier(.45, .05, .55, .95); }
	5%, 45% { opacity: 1; }
	50%, 100% { stroke-dashoffset: -1; opacity: 0; }
}
/* Miasto odpowiada błyskiem w chwili dojazdu kropki (połowa okresu). */
@keyframes pl-ping {
	0%, 49% { transform: scale(1); opacity: 0; }
	50% { transform: scale(1); opacity: .55; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
	78%, 100% { transform: scale(3.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.pl-run, .pl-ping, .pl-scan, .pl-base__ring { display: none; }
}

/*--------------------------------------------------------------
# Tablet i telefon: nagłówek, mapa na pełną szerokość, treść
--------------------------------------------------------------*/
@media (max-width: 900px) {
	.pl__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-template-areas: "head" "map" "body";
	}
	/* Na tablecie mapa na całą szerokość byłaby wyższa niż ekran. */
	.pl-map { width: 100%; max-width: 560px; margin: var(--sp-5) auto 0; }
	.pl__head h2 { max-width: 16em; }
	.pl__lead { margin-top: var(--sp-5); }
}
@media (max-width: 600px) {
	/* Mapa od krawędzi do krawędzi ekranu, kreski grubsze, żeby przy skali 0,6 nie znikały. */
	.pl-map { width: auto; max-width: none; margin-inline: calc(12px - var(--gutter)); }
	.pl-map__stage { padding: 2.25rem 4px 2.25rem; }
	.pl-north, .pl-geo { left: 14px; }
	.pl-north { top: 6px; }
	.pl-geo { bottom: 6px; }
	.pl-scale { bottom: -22px; right: 10px; font-size: 11px; }
	.pl-dots path { stroke-width: 4.2; }
	.pl-outline { stroke-width: 1.7; }
	.pl-arc { stroke-width: 2.1; }
	.pl-run { stroke-width: 8; }
	.pl-city { stroke-width: 2.4; }
	.pl-base__ring { stroke-width: 1.8; }
	.pl-lbl { font-size: 12px; }
	.pl-lbl--desk { display: none; }
	.pl-lbl--base { padding: 6px 8px; transform: translate(12px, -50%); }
	.pl__cta .btn { flex: 1 1 100%; }
}