/* =====================================================================
   mobile.css — zajednički sloj za telefone
   ---------------------------------------------------------------------
   Uključuje se POSLJEDNJI u <head>, iza inline <style> svake stranice, da
   bi bez !important nadjačao pravila iste specifičnosti. Naslovna je
   iznimka: njen <style> stoji u <body>, pa njene mobilne popravke žive
   u samoj stranici.

   Ovdje ide SAMO ono što vrijedi na više stranica i tiče se dodira i
   čitljivosti. Raspored se već svugdje lomi u jedan stupac — ne diramo ga.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. KLIZAČI (input[type=range])
   Bili su bez ikakvog stila, dakle sistemski: 16px visine i sitan palac.
   Na dodiru je to promašaj za promašajem. Crtamo vlastitu stazu i palac,
   a plohu za prst dižemo na 44px preko providnog paddinga.
   Napomena: -webkit- i -moz- pravila se NE smiju spojiti u jednu listu —
   preglednik odbaci cijelo pravilo ako ne prepozna jedan selektor.
   --------------------------------------------------------------------- */
@media (pointer:coarse),(max-width:760px){
  .rng{gap:12px;flex-wrap:wrap}
  .rng input[type=range]{
    -webkit-appearance:none;appearance:none;
    width:100%;min-width:180px;flex:1 1 180px;
    height:44px;                 /* dodirna ploha */
    margin:0;padding:0;
    background:transparent;      /* stazu crta ::-webkit-slider-runnable-track */
    cursor:pointer;
    touch-action:pan-y;          /* okomiti skrol stranice ostaje moguć */
  }
  .rng input[type=range]:focus{outline:none}
  .rng input[type=range]:focus-visible{outline:2px solid var(--gold,#C9A227);outline-offset:2px;border-radius:6px}

  /* --- staza --- */
  .rng input[type=range]::-webkit-slider-runnable-track{
    height:6px;border-radius:999px;
    background:rgba(79,109,138,.26);
  }
  .rng input[type=range]::-moz-range-track{
    height:6px;border-radius:999px;
    background:rgba(79,109,138,.26);
  }
  .rng input[type=range]::-moz-range-progress{
    height:6px;border-radius:999px;
    background:var(--gold,#C9A227);
  }

  /* --- palac ---
     margin-top centrira palac na stazu: (staza 6px - palac 26px) / 2 = -10px.
     Bez toga WebKit prilijepi palac uz vrh staze. */
  .rng input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;
    width:26px;height:26px;margin-top:-10px;
    border-radius:50%;
    background:var(--gold,#C9A227);
    border:2px solid #fff;
    box-shadow:0 2px 8px rgba(11,31,51,.34);
  }
  .rng input[type=range]::-moz-range-thumb{
    width:26px;height:26px;
    border-radius:50%;
    background:var(--gold,#C9A227);
    border:2px solid #fff;
    box-shadow:0 2px 8px rgba(11,31,51,.34);
  }
  .rng input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}
  .rng input[type=range]:active::-moz-range-thumb{transform:scale(1.12)}

  /* Očitanje pored klizača ne smije skakati u novi red pri svakoj promjeni. */
  .rng b{font-size:13px;min-width:0;flex:0 0 auto}
}

/* ---------------------------------------------------------------------
   2. „PONIŠTI FILTERE"
   Tekstualno dugme visine 16px — jedini način da se pogodi je sreća.
   Zadržavamo izgled (podvučeni verzal), dodajemo samo plohu.
   --------------------------------------------------------------------- */
@media (pointer:coarse),(max-width:760px){
  .freset,.reset{
    display:inline-flex;align-items:center;
    min-height:44px;padding:0 2px 2px;
    font-size:12px;
  }
}

/* ---------------------------------------------------------------------
   3. VODORAVNI SKROLERI
   Tlocrt garaže (#planin) namjerno se pomiče u stranu na uskom ekranu —
   uklopljen u širinu, svako parking mjesto bi palo na ~13px. Stranica to
   već rješava (`.scrollhint` sa strelicom + `-webkit-overflow-scrolling`),
   pa ovdje dodajemo samo ono što joj nedostaje: skrol garaže ne smije
   povući cijelu stranicu kad se dođe do ruba.

   NE stavljati `mask-image` na .planin: fade bi ostao i kad se dođe do
   kraja, pa bi izgledalo kao da je crtež odsječen.
   --------------------------------------------------------------------- */
@media (pointer:coarse),(max-width:760px){
  .planin{overscroll-behavior-x:contain}
}

/* ---------------------------------------------------------------------
   4. SITAN TEKST
   Ispod ~11px se na telefonu čita s naporom, pogotovo u verzalu s velikim
   letter-spacingom. Dižemo najgore slučajeve i stišćemo razmak slova.
   --------------------------------------------------------------------- */
@media (max-width:760px){
  .flab{font-size:11px;letter-spacing:.14em}
  .tag,.cno{font-size:11px;letter-spacing:.08em}
  .csold,.cgo{font-size:12px}
  .fcount,.fcount b{font-size:13px}
}

/* ---------------------------------------------------------------------
   5. DODIRNE PLOHE U FILTERIMA
   Čipovi i <select> moraju biti barem 44px visoki, inače se biranje
   pretvara u pogađanje. `font-size:16px` na <select> sprječava iOS da
   zumira stranicu pri otvaranju liste — to je Safarijevo pravilo, ne stil.
   --------------------------------------------------------------------- */
@media (pointer:coarse),(max-width:760px){
  .chip,.ch,.sel,select{min-height:44px}
  /* `select.sel` (0,1,1) je specifičniji od golog `.sel`, pa ga moramo
     pogoditi istim oblikom — inače iOS ostane na 12px i zumira stranicu
     čim se lista otvori, a nazad se ne vraća sam. */
  select.sel,select{font-size:16px}
  .fgrp{gap:10px}
}

/* ---------------------------------------------------------------------
   6. UVEĆANI TLOCRT (.zm na poslovnim prostorima)
   Prikaz već postoji i već je svjestan telefona (1150px široka slika u
   skrolabilnom okviru, centrirana pri otvaranju). Nedostaju mu dvije
   stvari: dovoljno velika dugmad i naznaka da se slika pomiče u stranu.
   --------------------------------------------------------------------- */
@media (pointer:coarse),(max-width:760px){
  .zm-x{padding-top:calc(14px + env(safe-area-inset-top,0px))}
  .zm-x button,.xbtn{min-width:44px;min-height:44px}
  .zm-s{
    padding:12px;
    overscroll-behavior:contain;         /* ne vuče stranicu ispod sebe */
    touch-action:pan-x pan-y pinch-zoom; /* pinch-zoom ostaje korisniku */
  }
  /* Sigurnosni razmak na dnu za iOS gestu i traku preglednika. */
  .zm-s{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
}

/* ---------------------------------------------------------------------
   7. LEAFLET NA DODIR (kontakt)
   Karta je 534px visoka i puna širine. S uključenim `dragging` prst koji
   želi skrolati stranicu umjesto toga pomiče kartu — korisnik zapne.
   Logika „dva prsta za pomicanje" je u kontakt.html uz inicijalizaciju
   karte; ovdje je samo natpis koji se tada pojavi.
   --------------------------------------------------------------------- */
.dpk-map-hint{
  position:absolute;inset:0;z-index:401;
  display:flex;align-items:center;justify-content:center;
  padding:16px;
  background:rgba(11,31,51,.44);
  color:#FAFBFC;
  font-family:Barlow,sans-serif;font-size:13px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;text-align:center;
  opacity:0;pointer-events:none;
  transition:opacity 200ms ease;
}
.dpk-map-hint.is-on{opacity:1}

/* ---------------------------------------------------------------------
   8. TABLET (i telefon položen na stranu)
   Kartice traže minimalno 340/350px, pa na 768px ostane 685px korisne
   širine — taman premalo za dvije (2×340 + 32 razmaka = 712). Rezultat je
   jedna kartica raširena preko 685px, što izgleda kao greška.
   Spuštanjem minimuma na 300px dvije stanu, a tri i dalje ne (3×300+40 =
   940 > 685), pa se ništa ne stisne preko mjere.

   Gornja granica je 1040px jer tu ponuda stanova ionako mijenja raspored
   heroja; donja 700px da na telefonu ostane jedna kartica po redu. */
@media (min-width:700px) and (max-width:1040px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
}

/* ---------------------------------------------------------------------
   9. PUNI PANEL NA POSLOVNIM PROSTORIMA
   Na ≤900px panel .pn ide preko cijelog ekrana (top:0, 100dvh), pa mu
   zaglavlje s X dugmetom na telefonima s urezom ulazi pod statusnu traku.
   Isti razlog i ista mjera kao u unit-panel.css.
   --------------------------------------------------------------------- */
@media(max-width:900px),(max-height:520px){
  .pn-x{padding-top:calc(14px + env(safe-area-inset-top,0px))}
  .pn-right,.pn-left{padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))}
}
