/* Mapa sporta — nastavak MUSZG sustava (Švicarski modernizam).
   Osnovne boje, pisma i zaglavlje dolaze iz /static/style.css. */

.karta-stranica{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
.karta-stranica .zaglavlje{flex:0 0 auto;position:relative;z-index:70}
/* Zaglavlje mora ostati iznad zastora za odabir grada: bez ovoga zastor
   (#izbor-grada, z-index 60) prekrije logotip i izbornik, pa se s karte
   nije moglo natrag na stranicu dok se ne odabere grad. */
.karta-stranica .izbornik{gap:1.6rem}

#traka{flex:0 0 auto;background:var(--card-white);border-bottom:var(--rub);
  padding:1rem clamp(1.25rem,4vw,2.5rem) .75rem}
#naslov{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.7rem}
#naslov .oznaka{margin:0}
#brojac{font-size:.8rem;color:var(--anthracite);font-weight:500}

#trazilica{position:relative;max-width:520px}
#pretraga{width:100%;padding:.7rem .9rem;font-family:inherit;font-size:.95rem;
  border:var(--rub);background:var(--pure-light);color:inherit;border-radius:0}
#pretraga:focus{outline:2px solid var(--zagreb-blue);outline-offset:-2px;background:#fff}
#ocisti{position:absolute;right:.25rem;top:50%;transform:translateY(-50%);border:0;background:transparent;
  font-size:.9rem;color:var(--anthracite);padding:.4rem .6rem;cursor:pointer}

#filtri{display:flex;gap:.4rem;overflow-x:auto;padding-top:.75rem;scrollbar-width:none}
#filtri::-webkit-scrollbar{display:none}
#filtri button{flex:0 0 auto;font-family:inherit;font-size:.78rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;border:var(--rub);background:var(--card-white);color:var(--charcoal);
  padding:.45rem .85rem;border-radius:999px;cursor:pointer;white-space:nowrap}
#filtri button:hover{border-color:var(--zagreb-blue);color:var(--zagreb-blue)}
#filtri button[aria-pressed="true"]{background:var(--zagreb-blue);border-color:var(--zagreb-blue);color:#fff}
#filtri button small{font-family:var(--pismo-mono);font-weight:400;opacity:.7;margin-left:.4rem}
#filtri button[data-vrsta="ormaric"]{border-color:var(--anthracite);color:var(--anthracite)}
#filtri button[data-vrsta="ormaric"][aria-pressed="true"]{background:var(--anthracite);border-color:var(--anthracite);color:#fff}

#karta{flex:1;min-height:0;position:relative;background:var(--pure-light)}
.maplibregl-ctrl-attrib{font-size:10px;font-family:var(--pismo-mono)}
.maplibregl-ctrl-group{border-radius:0!important;box-shadow:none!important;border:var(--rub)!important}
.maplibregl-ctrl-group button{border-radius:0!important}

#gdje-sam{position:fixed;right:1.1rem;bottom:calc(1.3rem + env(safe-area-inset-bottom,0));z-index:20;
  width:50px;height:50px;border:1px solid var(--zagreb-blue);background:var(--card-white);
  color:var(--zagreb-blue);display:grid;place-items:center;cursor:pointer}
#gdje-sam[data-stanje="trazim"]{opacity:.6}
#gdje-sam[data-stanje="radi"]{background:var(--zagreb-blue);color:#fff}

#kartica{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--card-white);
  border-top:2px solid var(--zagreb-blue);padding:1.4rem clamp(1.25rem,4vw,2rem) calc(1.4rem + env(safe-area-inset-bottom,0));
  max-height:55vh;overflow-y:auto}
/* 55vh, a ne 62: na mobitelu iznad kartice ostaje samo traka karte, pa se ne vidi
   ni gdje je lokacija koju si upravo otvorio. */
#kartica h2{margin:0 2.5rem .6rem 0;font-size:1.3rem;letter-spacing:-.02em}
#kartica p{margin:.2rem 0;font-size:.92rem;max-width:none}
#zatvori{position:absolute;right:.9rem;top:.9rem;border:var(--rub);background:var(--card-white);
  width:34px;height:34px;font-size:.9rem;color:var(--anthracite);cursor:pointer}
/* Vrsta i sportovi su nizovi oznaka, ne rečenice (28. 8. 2026.): jedan registar
   zna u polje »vrsta« staviti dvije vrste, a sportova zna biti i dvanaest — kao
   rečenica se to ne čita. */
#k-vrsta,#k-sportovi{display:flex;flex-wrap:wrap;gap:.35rem;margin:.2rem 0 .7rem}
#k-vrsta[hidden],#k-sportovi[hidden]{display:none}
#kartica .znak{margin-bottom:0}
#kartica .sport{display:inline-block;font-size:.78rem;padding:.2rem .5rem;
  background:var(--subtle-gray,#eef0f4);color:var(--charcoal,#2b2d42);border-radius:1rem}
#k-detalji{margin:.9rem 0 0;font-size:.88rem;display:grid;grid-template-columns:auto 1fr;gap:.35rem .9rem}
#k-detalji dt{color:var(--anthracite);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  padding-top:.15rem}
#k-detalji dd{margin:0}
#k-gumbi{display:flex;gap:.6rem;margin-top:1.2rem}
#k-gumbi .gumb{flex:1;text-align:center;padding:.75rem .5rem}
.sitno{margin-top:.9rem;font-size:.72rem;color:var(--anthracite)}

#poruka{position:fixed;left:50%;transform:translateX(-50%);bottom:5.5rem;z-index:40;
  background:var(--charcoal);color:#fff;padding:.7rem 1rem;font-size:.85rem;max-width:90vw;
  font-family:var(--pismo)}

.grozd-broj{font-family:var(--pismo-mono);font-weight:700;font-size:12px;color:#fff;pointer-events:none}

@media (min-width:900px){
  #kartica{left:auto;right:1.5rem;bottom:1.5rem;width:400px;max-height:72vh;border:var(--rub);
    border-top:2px solid var(--zagreb-blue)}
}
@media (max-width:720px){
  .karta-stranica .izbornik{display:none}
  .karta-stranica .hamburger{display:none}
}

/* ---------- izbor grada ---------- */
#izbor-grada{position:fixed;inset:0;z-index:60;background:var(--pure-light);
  display:grid;place-items:center;padding:1.5rem}
#izbor-grada[hidden]{display:none}   /* inače grid nadjača ugrađeni [hidden] */
/* Grad je zadan u adresi (`/karta?grad=zagreb`) — izbor se ne pokazuje ni na tren.
   Razred postavlja `pred-izbor.js` prije nego što se tijelo stranice iscrta. */
.ima-grad #izbor-grada{display:none}
/* Stoji dok stiže `gradovi.json`; zamjenjuju ga gumbi gradova. */
.izbor__cekanje{font-family:var(--pismo-mono);font-size:.82rem;color:var(--anthracite);margin:0}
.izbor__okvir{max-width:520px;width:100%;background:var(--card-white);border:var(--rub);padding:2.2rem}
.izbor__okvir h1{font-size:clamp(1.8rem,4vw,2.6rem);margin:0 0 .6rem}
.izbor__okvir p{color:#444;font-size:.95rem;margin-bottom:1.6rem}
#izbor-popis{display:grid;gap:.6rem}
.izbor__grad{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;
  font-family:inherit;text-align:left;padding:.9rem 1.1rem;border:var(--rub);
  background:var(--card-white);color:var(--charcoal);cursor:pointer}
.izbor__grad strong{font-size:1.05rem;letter-spacing:-.015em}
.izbor__grad small{font-family:var(--pismo-mono);font-size:.75rem;color:var(--anthracite)}
.izbor__grad:hover{border-color:var(--zagreb-blue);color:var(--zagreb-blue)}
.izbor__grad--uskoro{opacity:.5;cursor:not-allowed}
.izbor__grad--uskoro:hover{border-color:var(--subtle-gray);color:var(--charcoal)}
.izbor__grad--zadnji{border-color:var(--zagreb-blue)}
/* Brojke o zbirci: prvo što se vidi kad se otvori mapa (19. 8. 2026.). */
.izbor__brojke{display:grid;grid-template-columns:repeat(2,1fr);gap:.2rem 1rem;
  border-top:var(--rub);border-bottom:var(--rub);padding:1.1rem 0;margin:0 0 1.6rem}
.izbor__brojke b{display:block;font-family:var(--pismo-mono);font-weight:700;
  font-size:clamp(1.5rem,3.4vw,2rem);letter-spacing:-.03em;color:var(--charcoal);line-height:1.15}
.izbor__brojke span{font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--anthracite)}

#promijeni-grad{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
#promijeni-grad:hover{color:var(--zagreb-blue)}

#sponzor{margin:.6rem 0 0;font-family:var(--pismo-mono);font-size:.72rem;letter-spacing:.02em;
  color:var(--anthracite);border-left:3px solid var(--zagreb-blue);padding-left:.6rem}
#sponzor[hidden]{display:none}
#sponzor b{color:var(--zagreb-blue);font-weight:600}

/* Trajna obavijest kad podloga karte ne stiže (npr. 403 s OpenStreetMapa).
   Namjerno ne nestaje sama: kratka poruka koja bljesne i ode ostavlja dojam
   da se karta „samo tako“ ugasila. */
.trak-greske{position:fixed;left:0;right:0;top:0;z-index:80;margin:0;
  background:#fef3c7;border-bottom:1px solid #f59e0b;color:#7c2d12;
  padding:.7rem 1rem;font-size:.9rem;line-height:1.35}
.trak-greske[hidden]{display:none}