/* ==========================================================================
   responsive.css — nadgradnje za večje zaslone (mobile-first osnova)
   ========================================================================== */

/* --- Tablice ------------------------------------------------------------ */
@media (min-width: 640px) {
  .tool-grid { grid-template-columns: 1fr 1fr; }
  .category-list { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
  .article-list { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .error-page .btn + .btn { margin-left: var(--space-3); }
}

/* --- Namizje ------------------------------------------------------------ */
@media (min-width: 900px) {
  .site-nav { display: block; }
  .menu-toggle { display: none; }

  /* Asimetrična postavitev: obrazec širši, rezultat ožji in lepljiv */
  .calculator-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-5);
  }
  .calculator-result {
    position: sticky;
    top: 88px;
  }
}

/* --- Širši zaslon ------------------------------------------------------- */
@media (min-width: 1180px) {
  .tool-grid { grid-template-columns: repeat(3, 1fr); }
  .article-list { grid-template-columns: repeat(3, 1fr); }
}

/* --- Mobilno: gumb čez celo širino ------------------------------------- */
@media (max-width: 639px) {
  .form-actions .btn { width: 100%; }
}

/* ==========================================================================
   MOBILNO: iskalnik ostane ENA vrstica
   --------------------------------------------------------------------------
   Prej je veljalo `.hero-search__control { flex-wrap: wrap }` + gumb čez celo
   širino. Ovoj iskalnika pa je PILULA (`--radius-pill`), oblikovana za eno
   vrstico [lupa] [polje] [gumb]. Ob prelomu se je zaobljeni rob ovil okoli dveh
   vrstic, gumb je »plaval« znotraj pilule in celota je bila videti kot napaka —
   poleg tega je zavzela pribl. 110 px višine.

   Namesto tega: gumb postane okrogla dotik-tarča 44 × 44 z lupo, lupa z levega
   roba pa se umakne (dve lupi v isti pilulici bi bili odveč). Pilula ostane
   pilula, višina pade na pribl. 60 px, polje pa dobi pribl. 270 px širine.
   ========================================================================== */
@media (max-width: 639px) {
  .hero-search__control { flex-wrap: nowrap; }

  /* Lupa se preseli v gumb. */
  .hero-search__icon { display: none; }
  .hero-search__submit-text { display: none; }
  .hero-search__submit-icon { display: flex; }

  .hero-search__submit {
    flex: none;
    width: 44px;          /* dotik-tarča ostane >= 44 px */
    height: 44px;
    padding: 0;
  }

  /* 17 px (>= 16, torej brez iOS povečave) — pilula je tako visoka kot gumb. */
  .hero-search__input {
    font-size: var(--text-base);
    padding-block: 0.5rem;
    min-width: 0;         /* brez tega dolga ograda razširi pilulo čez zaslon */
  }
}

/* ==========================================================================
   MOBILNO: tipografska lestvica
   --------------------------------------------------------------------------
   Ista lestvica na 1440 px in na 390 px ni ista stvar: na telefonu je vrstica
   trikrat krajša, zato je pri enaki velikosti pisave in enakem razmiku besedilo
   videti razpotegnjeno in zahteva več drsenja.
   Zmanjšamo za eno stopnjo in vrstice nekoliko stisnemo (1,6 -> 1,5).

   MEJA, KI SE JE NE PRESTOPI: vnosna polja ostanejo pri 16 px. Pod tem iOS ob
   dotiku SAM POVEČA stran in uporabnika vrže iz konteksta — zato je `--text-base`
   natanko 1rem in ne manj. Vsa druga besedila so lahko manjša.

   Spremenljivke prevozimo samo tu: vse ostalo (naslovi, pomoč, kartice) se
   preračuna samo, ker povsod uporabljamo žetone in ne trdih velikosti.
   ========================================================================== */
@media (max-width: 639px) {
  :root {
    --text-xs:   0.75rem;     /* 13 -> 12 */
    --text-sm:   0.875rem;    /* 15 -> 14 */
    --text-base: 1rem;        /* 17 -> 16 — meja iOS, nižje ne gremo */
    --text-lg:   1.0625rem;   /* 19 -> 17 */

    --leading-body: 1.5;      /* 1,6 -> 1,5 */

    /* Naslova sta bila na telefonu nesorazmerno velika: h1 je pri 390 px zavzel
       skoraj tretjino prvega zaslona. Spodnja meja clamp() se zniža, zgornja
       (namizna) ostane nedotaknjena. */
    --text-2xl:  clamp(1.3rem, 1.1rem + 1.2vw, 2rem);
    --text-3xl:  clamp(1.6rem, 1.2rem + 2.3vw, 2.9rem);
  }
}

/* ==========================================================================
   MOBILNO: strnjen kalkulator
   --------------------------------------------------------------------------
   Namizna postavitev je na telefonu zapravljala prostor v dveh smereh.

   1) VODORAVNO — dvojni odmik. Do vnosnega polja sta bila DVA odmika:
      ovoj (`--gutter`, 20 px) + kartica (`--space-6`, 32 px) = 52 px na vsako
      stran. Od 390 px zaslona je vsebini ostalo 286 px. Kartico zato raztegnemo
      čez celo širino zaslona in odmik ostane samo eden -> vsebina 358 px (+25 %).

   2) NAVPIČNO — razmiki, primerni širokemu zaslonu, na telefonu prisilijo v
      nepotrebno drsenje. Zmanjšani so odmiki kartice, razmik med polji in
      višina vnosnih polj.

   ČESA NE ZMANJŠUJEMO:
   - dotik-tarče ostanejo >= 44 px (segmentirani gumbi, stikala, vnosna polja),
   - pisava v vnosnih poljih ostane >= 16 px — pod tem iOS ob dotiku SAM POVEČA
     stran in uporabnika vrže iz konteksta,
   - razmerja med oznako, poljem in pomočjo ostanejo enaka, da ostane pregledno.
   ========================================================================== */
@media (max-width: 639px) {
  /* Kartica čez celo širino zaslona. Negativni odmik natanko izniči odmik ovoja,
     zato NE nastane vodoravno drsenje (100vw bi ga pri vidnem drsniku povzročil). */
  .calculator-form,
  .calculator-result {
    margin-inline: calc(var(--gutter) * -1);
    border-radius: 0;
    border-inline: 0;
    padding: var(--space-4);
  }

  /* Rezervirana višina rezultata je tu manjša: obstaja zato, da vsebina pod njo
     ob sprotnem izračunu ne poskakuje (CLS) — na telefonu je rezultat pod
     obrazcem, zato zadošča manj. */
  .calculator-result { min-height: 120px; }

  /* Dokler rezultata ni, kartice na telefonu ne kažemo.
     Na namizju stoji OB obrazcu in navodilo v njej ima smisel; na telefonu je
     POD obrazcem, kamor bralec pride šele, ko je polja že izpolnil — takrat mu
     isti stavek, ki ga je prebral pod naslovom, samo doda drsenje.
     `js-ready` doda skript: če se ta ne naloži, ostane kartica vidna z vsem
     (opozorilo, panel virov). Skok postavitve tu ni težava za CLS, ker se zgodi
     kot odziv na vnos, ne sam od sebe. */
  .calculator-result.js-ready:not(.has-result) { display: none; }

  .calculator-head { padding-top: var(--space-4); }
  .calculator-intro { font-size: var(--text-base); }
  .calculator-layout { margin-top: var(--space-4); }
  .calculator-sections { margin-top: var(--space-6); }
  .calculator-sections > section + section { margin-top: var(--space-6); }

  /* Polja bliže skupaj — 24 px razmika je na 390 px zaslona preveč. */
  .form-field { margin-bottom: var(--space-4); }
  .field-row { gap: var(--space-4) var(--space-3); margin-bottom: var(--space-4); }
  .form-actions { margin-top: var(--space-4); }

  /* Nižja vnosna polja: 17 px pisave (>= 16, torej brez iOS povečave) in manjši
     navpični odmik dasta pribl. 50 px višine — udobno nad mejo 44 px. */
  .field-control input,
  .field-control select,
  .select-control select {
    font-size: var(--text-base);
    padding-block: 0.7rem;
  }
  .select-control select { padding-right: 2.5rem; }
}

/* Tri polja v vrstici ostanejo na telefonu ZLOŽENA (--field-basis: 100 % iz forms.css).
   Preizkušeno in zavrnjeno: tri polja v vrsto prihranijo pribl. 200 px drsenja, a pri
   390 px se ograde odrežejo ("npr. 2,5" -> "npr. 2"), pri 320 px pa se oznaka "Dolžina
   sobe" prelomi v dve vrstici, druge ne, in vnosna polja niso več poravnana.
   Manj drsenja ne odtehta nepreglednega obrazca. */