/* Zemljevid z radijem — iskanje po bližini (najdi.html).
 *
 * Barve so izključno žetoni iz podobe: zemljevid je grafika znamke, ne
 * ločen otok.
 */
.zem {
  margin: 0 0 18px;
  border: 1px solid var(--meja);
  border-radius: var(--r-kartica);
  background: var(--plosca);
  overflow: hidden;
}

/* ── platno ─────────────────────────────────────────────────────────── */
.zem-platno {
  position: relative;
  width: 100%;
  height: clamp(210px, 34vw, 300px);
  background: var(--pesek);
  touch-action: none;          /* vlečenje premika središče, ne strani */
  cursor: grab;
  display: block;
}
.zem-platno:active { cursor: grabbing }
.zem-platno:focus-visible {
  outline: 2px solid var(--mrak);
  outline-offset: -3px;
}
/* Naslov sekcije nosi pomen za bralnik zaslona, na sliki pa bi bil odveč. */
.zem .vidno-skrito {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Fotografske podlage v HTML ni: element nastane šele, ko strežnik pove, da
 * podlaga obstaja. Slikovni element brez vira bi bil polomljena slika,
 * dokler je ne bi napolnili. */
.zem-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity .25s ease;
}
.zem-foto.vidna { opacity: 1 }
.zem-risba { position: absolute; inset: 0; width: 100%; height: 100% }

/* Risba brez fotografije: shema razdalj, ne zemljepis. To pove tudi napis. */
.zem-opomba {
  position: absolute; left: 12px; bottom: 10px;
  font-family: var(--num); font-size: var(--t-micro);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--telo);
  background: var(--steklo);
  border: 1px solid var(--meja2);
  border-radius: var(--r-oval);
  padding: 5px 11px;
  pointer-events: none;
}

/* ── krmilje ────────────────────────────────────────────────────────── */
.zem-krmilje {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 13px 16px;
  border-top: 1px solid var(--meja2);
}
.zem-drsnik { display: flex; align-items: center; gap: 11px; flex: 1; min-width: 220px }
.zem-drsnik label {
  font-family: var(--num); font-size: var(--t-micro);
  letter-spacing: .06em; text-transform: uppercase; color: var(--telo);
  white-space: nowrap;
}
.zem-vrednost {
  font-family: var(--num); font-size: var(--t-md); color: var(--sij);
  min-width: 4.5em; text-align: right; font-variant-numeric: tabular-nums;
}

/* Drsnik: tarča 44 px tudi takrat, ko je proga tanka. */
.zem-drsnik input[type=range] {
  flex: 1; min-width: 90px;
  height: 44px;
  background: none;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
}
.zem-drsnik input[type=range]:focus-visible { outline: 2px solid var(--mrak); outline-offset: 4px; border-radius: var(--r-oval) }
.zem-drsnik input[type=range]::-webkit-slider-runnable-track {
  height: 4px; border-radius: var(--r-oval); background: var(--meja);
}
.zem-drsnik input[type=range]::-moz-range-track {
  height: 4px; border-radius: var(--r-oval); background: var(--meja);
}
.zem-drsnik input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -9px;
  border-radius: var(--r-oval);
  background: var(--mrak); border: 2px solid var(--plosca);
  box-shadow: var(--senca-pilula);
}
.zem-drsnik input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: var(--r-oval);
  background: var(--mrak); border: 2px solid var(--plosca);
}

.zem-gumbi { display: flex; gap: 8px; flex-wrap: wrap }
.zem-gumb {
  min-height: 44px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  font-family: var(--num); font-size: var(--t-sm); letter-spacing: .02em;
  color: var(--sij);
  background: none;
  border: 1px solid var(--meja);
  border-radius: var(--r-oval);
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.zem-gumb:hover { border-color: var(--rob-k); background: var(--tan-sled) }
.zem-gumb:focus-visible { outline: 2px solid var(--mrak); outline-offset: 2px }
.zem-gumb .ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7 }

.zem-sporocilo {
  padding: 0 16px 13px;
  font-family: var(--body); font-size: var(--t-sm);
  color: var(--telo);
}
.zem-sporocilo:empty { display: none }
.zem-sporocilo[data-napaka] { color: var(--napaka) }

/* Razdalja na kartici ponudnika — v isti tihi tipografiji kot kraj. */
.pcard .odd {
  display: inline-block; margin-top: 10px;
  font-family: var(--num); font-size: var(--t-micro);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--telo);
}
/* V vrstici seznama stoji razdalja ob oceni, ne v svoji vrsti. */
#grid .pcard .odd { margin-top: 0; order: 2; white-space: nowrap; color: var(--telo-2) }
/* Na izpostavljeni kartici je podlaga temna (oder), zato mora
   biti besedilo napis s fotografije — merjeno je tu --telo padel na 1,19. */
#grid .pcard.izpostavljen .odd {
  order: 0; padding: 0 18px; margin: 0; opacity: .9;
  color: var(--foto-napis);
}

@media (prefers-reduced-motion: reduce) {
  .zem-foto { transition: none }
}

/* ── vstop na stran Blizu (najdi.html) ──────────────────────────────────
 * Zemljevid ima svojo stran, ker je svoje opravilo. Na Najdi ostane vabilo,
 * ki pove, kaj tam čaka — ne gol gumb brez pojasnila.
 */
.vstop-blizu {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 22px; padding: 14px 16px;
  border: 1px solid var(--meja); border-radius: var(--r-kartica);
  background: var(--plosca);
  color: var(--sij);
  transition: border-color .2s, background .2s;
}
.vstop-blizu:hover { border-color: var(--rob-k); background: var(--tan-sled) }
.vstop-blizu:focus-visible { outline: 2px solid var(--mrak); outline-offset: 2px }
.vb-znak {
  flex: none; width: 44px; height: 44px; border-radius: var(--r-oval);
  display: grid; place-items: center;
  background: var(--tan-mehki);
}
.vb-znak svg { width: 22px; height: 22px; fill: none; stroke: var(--mrak); stroke-width: 1.6 }
.vb-tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.vb-ime { font-family: var(--display); font-size: var(--t-lg) }
.vb-opis { font-family: var(--body); font-size: var(--t-sm); color: var(--telo) }
.vb-pusc { flex: none; margin-left: auto; width: 20px; height: 20px;
  fill: none; stroke: var(--telo-2); stroke-width: 1.6 }