/*
  PROPLANAK — raspored za šire ekrane (queries.css)

  style.css je raspored za telefon; ovde je sve što se menja od šire
  širine. Upiti su u em (16 px), pa ne zavise od korena od 10 px i od
  skaliranja na 4K ekranu (general.css).

  30em  480 px  — veći telefon
  40em  640 px  — mali tablet
  48em  768 px  — tablet: kartica u herou u jednom redu, sheet u sredini
  64em  1024 px — desktop: navigacija, hero u dve kolone, bez donje trake
  80em  1280 px — širok desktop: ivice kao u hero stranici (80 px)
*/

/* ////////////////////////////////////////////////////////////////////
   30em
   //////////////////////////////////////////////////////////////////// */

@media (min-width: 30em) {
  .hk-slika {
    height: 22rem;
  }

  .cinjenice {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .galerija-mreza {
    grid-auto-rows: 18rem;
  }
}

/* ////////////////////////////////////////////////////////////////////
   40em
   //////////////////////////////////////////////////////////////////// */

@media (min-width: 40em) {
  .usluge-mreza {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .usluge-mreza--proizvodi {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ostava {
    padding: 3.2rem 2.4rem 2.4rem;
  }

  .udaljenosti {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .utisci-lista {
    grid-auto-columns: minmax(30rem, 46%);
  }

  .rez-blok {
    padding: 2.4rem 2.4rem;
  }

  .rez-kalendar {
    padding-inline: 1.6rem;
  }

  .kal-strelica--nazad {
    left: 1.6rem;
  }

  .kal-strelica--napred {
    right: 1.6rem;
  }

  .kal-ucitavanje {
    left: 1.6rem;
    right: 1.6rem;
  }
}

/* ////////////////////////////////////////////////////////////////////
   48em — tablet
   //////////////////////////////////////////////////////////////////// */

@media (min-width: 48em) {
  :root {
    --ivica-strane: 4rem;
    --visina-zaglavlja: 8.4rem;
  }

  .sekcija {
    padding-block: 10rem;
  }

  /* HERO — kartica ostaje ispod teksta, ali je traka u jednom redu i
     traka dana ima svih 14 */
  /* na tabletu naslov ide preko cele širine — sunce ostaje iznad i
     desno od prvog reda */
  .hero-sunce {
    top: calc(env(safe-area-inset-top, 0px) + 8rem);
    right: -5rem;
    width: 16rem;
    height: 16rem;
  }

  .hero {
    --brda: 28rem;
  }

  .hero-omot {
    padding-bottom: 11rem;
  }

  /* od tableta ocena staje pored potpisa na tamnoj traci */
  .hero-ocena {
    display: flex;
  }

  .hero-potpis,
  .hero-potpis:link,
  .hero-potpis:visited {
    min-height: 5.4rem;
    gap: 1.2rem;
    padding: 0.7rem 0.7rem 0.7rem 1.2rem;
  }

  .hp-znak {
    width: 3.2rem;
    height: 3.2rem;
  }

  .hp-ime {
    font-size: 2rem;
  }

  .hp-strelica {
    width: 3.8rem;
    height: 3.8rem;
  }

  .hk-slika {
    height: 26rem;
  }

  .hk-natpis {
    top: 2.2rem;
    left: 2.8rem;
  }

  .hk-naslov {
    font-size: 3rem;
  }

  .hk-ocena {
    top: 2.2rem;
    right: 2.4rem;
  }

  .hk-traka {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto;
    align-items: center;
    margin: -3.4rem 2.4rem 0;
    padding: 0.8rem;
  }

  .hk-polje {
    padding: 0.6rem 1.6rem;
  }

  .hk-polje + .hk-polje {
    border-left: 1px solid var(--ivica);
  }

  .hk-polje:nth-child(-n + 2) {
    border-bottom: 0;
  }

  .hk-dugme,
  .hk-dugme:link,
  .hk-dugme:visited {
    margin: 0 0 0 0.4rem;
    min-height: 4.8rem;
    padding: 0 1.8rem;
  }

  .hk-kalendar {
    padding: 2.2rem 2.4rem 0;
  }

  .hk-dani {
    grid-template-columns: repeat(14, minmax(0, 1fr));
  }

  .hk-dno {
    margin: 2rem 2.4rem 0;
    padding: 1.6rem 0 2.2rem;
  }

  /* GALERIJA */
  .zaglavlje-sekcije--red {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4rem;
    max-width: none;
  }

  .zaglavlje-sekcije--red .tekst {
    max-width: 44ch;
    margin-top: 0;
  }

  /* i na tri kolone: velika (2×2) + šest + široka poslednja = 12 polja,
     bez rupe */
  .galerija-mreza {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 20rem;
    gap: 1.4rem;
  }

  /* OKOLINA — staza u dve kolone */
  .staza {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.4rem;
    row-gap: 3.2rem;
  }

  .staza::before {
    display: none;
  }

  .stanica {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.2rem;
  }

  /* isprekidana linija od čiode do sledeće u redu */
  .stanica::before {
    content: "";
    position: absolute;
    top: 1.9rem;
    left: 4.8rem;
    right: -2.4rem;
    border-top: 2px dashed var(--brdo-3);
  }

  .stanica:nth-child(2n)::before,
  .stanica:last-child::before {
    display: none;
  }

  /* CENE */
  .cene-mreza {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 1.6rem;
  }

  .cena-kartica--istaknuta {
    transform: translateY(-1.2rem);
  }

  .pravila {
    padding: 3.6rem 4rem;
  }

  .pravila-lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.4rem 3.2rem;
  }

  /* REZERVACIJA */
  .rez-polja {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rez-polja .polje:nth-child(4) {
    grid-column: 1 / -1;
  }

  .rez-racun {
    padding: 2.8rem 2.8rem 2.8rem;
  }

  /* LOKACIJA */
  .mapa-okvir {
    aspect-ratio: 16 / 10;
  }

  /* PODNOŽJE */
  .podnozje-brda {
    height: 10rem;
  }

  .podnozje-telo {
    padding-top: 3.2rem;
  }

  .podnozje-mreza {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }

  .podnozje-kolona--logo {
    grid-column: auto;
  }

  /* SHEET — dijalog u sredini ekrana */
  .sheet-panel {
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    width: min(48rem, calc(100% - 4rem));
    max-height: calc(100vh - 8rem);
    padding: 2rem 2.4rem 2.4rem;
    border-radius: var(--r-veliko);
    opacity: 0;
    transform: translate(-50%, calc(-50% + 2.4rem)) scale(0.98);
    transition: transform 520ms var(--ease-izlaz), opacity 320ms var(--ease);
  }

  .sheet.je-otvoren .sheet-panel {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  .sheet-rucica {
    display: none;
  }

  .tost-omot {
    top: calc(var(--visina-zaglavlja) + 1.6rem);
  }
}

/* ////////////////////////////////////////////////////////////////////
   64em — desktop
   //////////////////////////////////////////////////////////////////// */

@media (min-width: 64em) {
  :root {
    --visina-zaglavlja: 9.6rem;
  }

  body {
    font-size: 1.8rem;
  }

  .sekcija {
    padding-block: 12rem;
  }

  /* ZAGLAVLJE — navigacija, CTA; bez menija */
  .zaglavlje-nav {
    display: flex;
    align-items: center;
    gap: 3.2rem;
    margin-left: auto;
    margin-right: 1.6rem;
  }

  .nav-link,
  .nav-link:link,
  .nav-link:visited {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 4.4rem;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--naslov);
    text-decoration: none;
    transition: color 200ms var(--ease);
  }

  .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.8rem;
    height: 2px;
    border-radius: 1px;
    background: var(--akcenat);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 400ms var(--ease-izlaz);
  }

  .nav-link.je-aktivan::after {
    transform: scaleX(1);
  }

  .zaglavlje-cta {
    display: inline-flex !important;
    margin-left: 0.8rem;
    box-shadow: none !important;
    border-radius: 1rem !important;
  }

  .zaglavlje-meni {
    display: none;
  }

  /* HERO — dve kolone kao u hero stranici: tekst levo, kartica desno,
     brda preko donjeg dela */
  .hero {
    padding-top: calc(var(--visina-zaglavlja) + 3.6rem);
  }

  /* desktop: kao u hero stranici — 192 px, 118 px od vrha, viri iza kartice */
  .hero-sunce {
    top: 11.8rem;
    right: -4.8rem;
    width: 19.2rem;
    height: 19.2rem;
  }

  /* HERO PREKO CELOG EKRANA — na svakoj rezoluciji (i 4K):
     • brda su visoka najviše 34% ekrana (na niskom laptopu manja);
     • tekst i kartica su vertikalno u sredini prostora IZNAD brda —
       padding-bottom 70% visine brda: tu počinje srednji, tamniji sloj sa
       borovima, pa tekst nikad ne pada na njih (ranije je na 4K bor
       prolazio kroz „Sauna u buretu");
     • kartica sme da uđe u brda (negativna margina), kao na maketi. */
  .hero {
    --brda: min(32rem, 34vh);
  }

  .hero-omot {
    grid-template-columns: minmax(0, 1fr) minmax(0, 56rem);
    align-items: start;
    align-content: center;
    gap: 4rem 5.6rem;
    padding-bottom: calc(var(--brda) * 0.7);
  }

  .hero-kartica {
    margin-bottom: calc(var(--brda) * -0.4);
  }

  .hero-tekst {
    padding-top: 1rem;
  }

  .hero-uvod {
    font-size: 1.9rem;
  }

  .hero-kartica {
    margin-top: 0.4rem;
  }

  .hk-dani {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  /* traka je donjih ~28% brda — potpis stoji na njenoj sredini */
  .hero-dno {
    bottom: max(1rem, calc(var(--brda) * 0.14 - 3.2rem));
  }

  .hero-ocena {
    font-size: 1.4rem;
  }

  /* potpis izrade na desktopu veći — vlasnik projekta želi da brend
     cabindesign bude jasno vidljiv već u herou */
  .hero-potpis,
  .hero-potpis:link,
  .hero-potpis:visited {
    min-height: 6.4rem;
    gap: 1.4rem;
    padding: 0.8rem 0.8rem 0.8rem 1.4rem;
    border-radius: 1.4rem;
  }

  .hp-znak {
    width: 3.8rem;
    height: 3.8rem;
  }

  .hp-uvod {
    font-size: 1.05rem;
  }

  .hp-ime {
    font-size: 2.4rem;
  }

  .hp-strelica {
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 1rem;
  }

  .hp-strelica .ikona {
    width: 1.9rem;
    height: 1.9rem;
  }

  /* KUĆICA — slika i tekst jedno uz drugo */
  .kucica-omot {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: 7.2rem;
  }

  .kucica-slika img {
    aspect-ratio: 4 / 5;
  }

  .sadrzaj-kuce {
    display: grid;
    grid-template-columns: 22rem minmax(0, 1fr);
    align-items: center;
    gap: 3.2rem;
    padding: 3.2rem 4rem;
  }

  .sadrzaj-cipovi {
    margin-top: 0;
  }

  /* GALERIJA — četiri kolone, prva slika 2×2, poslednja široka */
  .galerija-mreza {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 22rem;
    gap: 1.6rem;
  }

  /* OKOLINA — tri stanice u redu */
  .staza {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 3.2rem;
    row-gap: 4.8rem;
  }

  .stanica::before {
    right: -3.2rem;
  }

  .stanica:nth-child(2n)::before {
    display: block;
  }

  .stanica:nth-child(3n)::before,
  .stanica:last-child::before {
    display: none;
  }

  /* PONUDA */
  .usluge-mreza {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }

  .usluge-mreza--proizvodi {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1.4rem;
  }

  .ostava {
    margin-top: 7.2rem;
    padding: 4rem 3.2rem 3.2rem;
  }

  .ostava-uvod {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4rem;
    margin-bottom: 3.2rem;
  }

  .ostava-uvod .tekst {
    max-width: 46ch;
    margin-top: 0;
  }

  /* CENE */
  .cena-kartica {
    padding: 3.6rem 3.2rem;
  }

  .pravila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 4rem;
  }

  .pravila-naslov {
    grid-column: 1 / -1;
  }

  .pravila-lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 0;
  }

  /* REZERVACIJA — forma levo, priznanica desno i lepi se uz vrh */
  .rez-forma {
    grid-template-columns: minmax(0, 1fr) minmax(0, 40rem);
    align-items: start;
    column-gap: 2.8rem;
    row-gap: 1.6rem;
  }

  .rez-blok {
    grid-column: 1;
  }

  .rez-racun {
    grid-column: 2;
    grid-row: 1 / span 4;
    position: sticky;
    top: calc(var(--visina-zaglavlja) + 2rem);
  }

  .rez-uspeh {
    grid-column: 1 / -1;
  }

  /* UTISCI — prvi utisak velik, ostali u mreži */
  .utisci-vrh {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4rem;
  }

  .utisci-lista {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    margin-inline: 0;
    padding: 0;
    gap: 1.8rem;
  }

  .utisak:first-child {
    grid-row: span 2;
    justify-content: flex-start;
    padding: 3.6rem 3.2rem;
  }

  .utisak:first-child .utisak-tekst {
    flex: 1;
  }

  .utisak:first-child .utisak-tekst p {
    font-family: var(--font-naslov);
    font-size: 3rem;
    line-height: 1.25;
    color: var(--naslov);
  }

  .utisak:first-child::before {
    height: 4.4rem;
    font-size: 11rem;
  }

  /* LOKACIJA */
  .lokacija-omot {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 6.4rem;
  }

  .udaljenosti {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mapa-okvir {
    aspect-ratio: 5 / 6;
  }

  /* PITANJA — naslov levo, lepi se dok se lista */
  .pitanja-omot {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: start;
    gap: 6.4rem;
  }

  .pitanja-omot .zaglavlje-sekcije {
    position: sticky;
    top: calc(var(--visina-zaglavlja) + 3.2rem);
  }

  .pitanja-lista {
    padding: 1rem 3.2rem;
  }

  .pitanje summary {
    font-size: 1.8rem;
  }

  /* PODNOŽJE — bez donje trake nema potrebe za dodatnim prostorom */
  .podnozje-telo {
    padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
  }

  .podnozje-poziv {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 4rem;
  }

  .podnozje-dugmad {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
  }

  .dno-traka {
    display: none;
  }
}

/* ////////////////////////////////////////////////////////////////////
   80em — širok desktop
   //////////////////////////////////////////////////////////////////// */

@media (min-width: 80em) {
  :root {
    --ivica-strane: 8rem;
  }

  .hero-omot {
    grid-template-columns: minmax(0, 1fr) minmax(0, 66rem);
    gap: 4rem 6rem;
  }

  .hk-dani {
    grid-template-columns: repeat(14, minmax(0, 1fr));
  }

  .hk-slika {
    height: 29rem;
  }

  .hk-natpis {
    top: 2.2rem;
    left: 2.8rem;
  }

  .rez-forma {
    grid-template-columns: minmax(0, 1fr) minmax(0, 42rem);
    column-gap: 3.6rem;
  }
}

/* ////////////////////////////////////////////////////////////////////
   NIZAK DESKTOP (laptop 1366×768 i slični, ispod 800 px visine) —
   hero se sabija da i tu stane u ekran: manji naslov (po visini
   ekrana), niža ilustracija u kartici, 14 dana u jednom redu
   //////////////////////////////////////////////////////////////////// */

@media (min-width: 64em) and (max-height: 50em) {
  .hero {
    padding-top: calc(var(--visina-zaglavlja) + 1.2rem);
  }

  .hero-omot {
    padding-bottom: calc(var(--brda) * 0.62);
  }

  .hero-naslov {
    margin-top: 1.2rem;
    font-size: min(9.6rem, 11.5vh);
  }

  .hero-uvod {
    margin-top: 1.4rem;
    font-size: 1.7rem;
  }

  .hero-dugmad {
    margin-top: 2rem;
  }

  .hero-odlike {
    margin-top: 1.8rem;
  }

  /* ispod ~20rem crtež se seče odozgo (slice) i kućica uđe u natpis */
  .hk-slika {
    height: 20rem;
  }

  .hk-status {
    min-height: 3.8rem;
  }

  .hk-kalendar {
    padding-top: 1.2rem;
  }

  .hk-kal-vrh {
    gap: 0.4rem 0.8rem;
  }

  .hk-strelica {
    width: 3rem;
    height: 3rem;
  }

  .hk-dani {
    grid-template-columns: repeat(14, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .hk-dan {
    height: 4.2rem;
  }

  .hk-dno {
    margin-top: 1.2rem;
    padding: 1.1rem 0 1.2rem;
  }

  .hero-potpis,
  .hero-potpis:link,
  .hero-potpis:visited {
    min-height: 5.6rem;
  }

  .hp-znak {
    width: 3.2rem;
    height: 3.2rem;
  }

  .hp-ime {
    font-size: 2.1rem;
  }

  .hp-strelica {
    width: 4rem;
    height: 4rem;
  }
}