/* Primavino — mapa Slovenska v sekcii „Vybrané prevádzky".
 *
 * Kresba je VLASTNÁ: obrys štátu a okresné čiary vznikli z otvorených dát
 * (OSM, admin_level 6) skriptom `navrh/tools/mapa_sk.py`. Web zámerne
 * nenačítava žiadnu cudziu mapovú službu ani dlaždice — nie je to len otázka
 * vzhľadu, ale pravidlo webu: stránka neposiela návštevníka tretej strane.
 *
 * Sekcia `.prevadzky` si sama predefinuje `--fg`, `--line` a `--accent` na
 * tmavú paletu, takže farby sa tu berú z premenných a fungujú aj v svetlej téme.
 */
.pv-mapa {
  margin-top: clamp(48px, 7vw, 96px); padding-top: clamp(36px, 5vw, 64px);
  border-top: 1px solid var(--line);
  display: grid; gap: 32px;
  grid-template-areas: "text" "mapa" "zoznam";
}
.pv-mapa-text   { grid-area: text; }
.pv-mapa-plocha { grid-area: mapa; }
.pv-mapa-zoznam { grid-area: zoznam; }
/* Na telefóne ide mapa medzi úvod a zoznam — najprv KDE, potom KTO.
   Na širokej obrazovke je vedľa a text so zoznamom tvoria ľavý stĺpec. */
@media (min-width: 960px) {
  .pv-mapa {
    grid-template-columns: 4fr 7fr; column-gap: 64px; row-gap: 24px;
    grid-template-areas: "text mapa" "zoznam mapa";
    align-items: start;
  }
  .pv-mapa-plocha { align-self: center; }
}
.pv-mapa-h { font-family: var(--f-display); font-weight: 400; font-size: clamp(26px, 3vw, 36px); margin-top: 14px; }
.pv-mapa-lead { margin-top: 16px; font-size: 16px; color: #D8CBC1; }

.pv-mesta { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pv-mesta > li {
  padding: 14px 0; border-bottom: 1px solid var(--line);
  transition: border-color .25s var(--ease);
}
.pv-mesta > li > b {
  display: block; font-family: var(--f-mono); font-weight: 400; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2);
  transition: color .25s var(--ease);
}
.pv-mesta ul { list-style: none; margin: 7px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.pv-mesta ul li { font-family: var(--f-display); font-size: 19px; line-height: 1.35; }
.pv-mesta ul li::before { content: "·"; color: var(--accent); margin-right: 9px; }
.pv-mesta > li.je-aktivne { border-bottom-color: var(--accent); }
.pv-mesta > li.je-aktivne > b { color: var(--accent); }
.pv-mesta > li:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.pv-mapa-pozn { margin-top: 18px; font-size: 10px; color: var(--fg-dim); }

.pv-mapa-plocha { margin: 0; min-width: 0; }
.pv-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pv-okresy { fill: none; stroke: var(--fg); stroke-width: .8; opacity: .11; }
.pv-obrys {
  fill: rgba(255,255,255,.028); stroke: var(--straw); stroke-width: 1.9;
  stroke-linejoin: round; stroke-linecap: round;
}
.pv-mapa-plocha figcaption {
  margin-top: 14px; font-size: 10px; color: var(--fg-dim); text-align: right;
}

/* Body miest. `r` sa dá meniť aj z CSS (SVG geometry property), takže
   zvýraznenie nepotrebuje ani riadok skriptu navyše. */
.pv-bod { transition: opacity .7s var(--ease); }
.pv-bod-kruh { fill: none; stroke: var(--accent); stroke-width: 1.3; opacity: .5; transition: opacity .25s var(--ease), r .25s var(--ease); }
.pv-bod-jadro { fill: var(--accent); transition: r .25s var(--ease); }
.pv-bod-nazov { fill: var(--fg); font-family: var(--f-display); font-size: 21px; transition: fill .25s var(--ease); }
.pv-bod-pocet {
  fill: var(--fg-2); font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
}
.pv-bod.je-aktivne .pv-bod-kruh { opacity: 1; r: 17; }
.pv-bod.je-aktivne .pv-bod-jadro { r: 6; }
.pv-bod.je-aktivne .pv-bod-nazov { fill: var(--accent); }

/* Príchod bodov až keď sa sekcia odhalí (triedu `in` dopĺňa app.js). */
.js .pv-mapa.reveal:not(.in) .pv-bod { opacity: 0; }
.pv-bod[data-mesto="bratislava"] { transition-delay: .10s; }
.pv-bod[data-mesto="trnava"]     { transition-delay: .22s; }
.pv-bod[data-mesto="piestany"]   { transition-delay: .34s; }
.pv-bod[data-mesto="trencin"]    { transition-delay: .46s; }

/* Na telefóne by popisky v mierke mapy vyšli na 7 px. Mestá pomenúva zoznam
   pod mapou, takže na mape zostanú len body — a tie sú väčšie, aby boli vidno. */
@media (max-width: 759px) {
  .pv-bod-nazov, .pv-bod-pocet { display: none; }
  .pv-bod-kruh { r: 19; stroke-width: 2.6; }
  .pv-bod-jadro { r: 7; }
  .pv-bod.je-aktivne .pv-bod-kruh { r: 24; }
  .pv-bod.je-aktivne .pv-bod-jadro { r: 9; }
}
@media (prefers-reduced-motion: reduce) {
  .pv-bod, .pv-bod-kruh, .pv-bod-jadro { transition: none; }
}