/* ─────────────────────────────────────────────────────────────
   Auto Škola Trijumf 2005 — sekcije
   Redom kojim idu na stranici. Zasad: hero, traka slogana.
   ───────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────
   PRAVILO PORAVNANJA — važi za cijelu stranicu

   Naslovi sekcija (eyebrow + H2 + uvodni pasus) UVIJEK sjede uz
   lijevu ivicu kontejnera. Sadržaj ispod njih smije biti uža
   centrirana kolona (cjenovnik, FAQ). Vertikalna linija naslova
   kroz cijelu stranicu se ne prekida.

   Praktično: `margin-inline:auto` ide na sadržajni blok, nikad na
   omotač koji sadrži i naslov.
   ───────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════
   TRAKA ZA HITNO

   Prva stvar u dokumentu, iznad headera i heroja. Postoji samo kad
   postoji aktivna objava tipa „Hitno" — templejt se sam ne ispiše.

   Ne zatvara se klikom, pa nema dugmeta, nema ikone i nema stanja.
   Jedan pasus: datum pa poruka.

   Nijedan amber piksel. Amber ima jedno mjesto i nije ovdje.
   ═══════════════════════════════════════════════════════════ */

.t-hitno{
  background:var(--t-b950);
  color:var(--t-text-on-dark);
}

/* Pasus je i kontejner — jedan element manje. `t-container` daje
   maksimalnu širinu i bočni pading, ovdje se dodaje samo vertikalni. */
.t-hitno__inner{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--t-2) var(--t-4);
  margin:0;
  padding-block:var(--t-3);
  font-size:var(--t-size-small);
  line-height:var(--t-lh-body);
}

/* Datum je oznaka, ne rečenica: monospace da se brojevi ne miješaju
   sa tekstom, i verzal-razmak kao kod ostalih oznaka na sajtu.

   Boja je --t-b200 preko --t-b950. Slabija od poruke jer je poruka
   ono što se čita; kontrast je i dalje izmjeren i prolazi AA — broj
   je u tokens.css, u bloku tvrdih pravila.

   `white-space:nowrap` drži datum u komadu kad se poruka prelomi. */
.t-hitno__datum{
  flex:0 0 auto;
  font-family:var(--t-font-mono);
  font-size:var(--t-size-label);
  letter-spacing:var(--t-track-label);
  color:var(--t-text-on-dark-2);
  white-space:nowrap;
}

/* `min-width:0` da se duga poruka prelomi umjesto da razvuče traku.
   Na telefonu poruka od dvije-tri rečenice zauzme tri do četiri reda i
   to je u redu — traka koja se skraćuje sa „…" je traka koja se ne
   pročita, a upravo je čitanje jedini razlog što postoji. */
.t-hitno__poruka{
  flex:1 1 auto;
  min-width:0;
}

@media (min-width:768px){
  .t-hitno__inner{ padding-block:var(--t-4); }
}


/* ═══════════════════════════════════════════════════════════
   ZAJEDNIČKO ZA SEKCIJE
   Eyebrow i H2 se ponavljaju u svakoj sekciji — jednom ovdje,
   umjesto jedanaest puta po sekcijama.
   ═══════════════════════════════════════════════════════════ */

.t-eyebrow{
  margin:0 0 var(--t-3);
  font-family:var(--t-font-display);
  font-size:var(--t-size-label);
  font-weight:800;
  line-height:1.2;
  letter-spacing:var(--t-track-label);
  text-transform:uppercase;
  color:var(--t-b700);          /* 6.65 na ground, 6.75 na surface-alt */
}

.t-naslov2{
  margin:0 0 var(--t-5);
  font-family:var(--t-font-display);
  font-size:var(--t-size-h2);
  font-weight:800;
  font-stretch:calc(var(--t-wdth-heading) * 1%);
  line-height:var(--t-lh-heading);
  letter-spacing:var(--t-track-heading);
  color:var(--t-text);
}

/* Amber dugme — mjesto 1 od 2 gdje amber smije.
   Boja teksta je navedena u SVAKOM stanju: Hello Elementor u
   reset.css nosi `a:hover{color:#336}`, što je (0,1,1) i tuče golu
   klasu (0,1,0). Hover blok bez `color` je ovdje bug, ne stil. */
.t-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding-inline:var(--t-6);
  background:var(--t-amber);
  color:var(--t-b950);          /* 8.81 — AAA */
  font-family:var(--t-font-body);
  font-size:var(--t-size-body);
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  border:1px solid var(--t-amber);
  border-radius:var(--t-r-full);
  transition:background-color var(--t-m-base) var(--t-ease),
             border-color var(--t-m-base) var(--t-ease);
}
.t-cta:hover,
.t-cta:focus,
.t-cta:focus-visible,
.t-cta:active{
  background:var(--t-amber-hover);
  color:var(--t-b950);
  border-color:var(--t-amber-hover);
}

/* Tiho dugme — obrub bez ispune. Vodi na drugu sekciju stranice, ne
   na upis, pa ne smije da se takmiči sa amber dugmetom. Nigdje amber,
   ni na hover. Boja teksta stoji u svakom stanju iz istog razloga kao
   gore: `a:hover{color:#336}` iz roditeljske teme inače pobijedi. */
.t-cta--tiho{
  background:transparent;
  color:var(--t-b950);          /* 15.20 na --t-ground */
  border-color:var(--t-b950);
}
.t-cta--tiho:hover,
.t-cta--tiho:focus,
.t-cta--tiho:focus-visible,
.t-cta--tiho:active{
  background:var(--t-b950);
  color:var(--t-n0);            /* 16.41 — AAA */
  border-color:var(--t-b950);
}

/* Oblik bedža. Amber podloga ovdje NEMA nijednog korisnika od
   03.09.2026: jedini amber bedž je bio „Gratis 75 €" i otišao je sa
   promocijom. Sve što danas nosi `.t-bedz` nosi i `.t-bedz--navy`,
   koji podlogu prebacuje na navy.

   Pravilo ostaje deklarisano jer `--navy` je modifikator i traži
   osnovu; kad bi se amber ovdje obrisao, navy bi ostao bez oblika.
   Ako se amber bedž nikad ne vrati, sljedeće čišćenje spaja ova dva
   pravila u jedno.

   Verzal radi CSS, ne HTML — inače neki čitači ekrana slovkaju
   B-E-D-Ž. */
.t-bedz{
  display:inline-block;
  padding:var(--t-1) var(--t-3);
  background:var(--t-amber);
  color:var(--t-b950);          /* 8.81 — AAA */
  font-family:var(--t-font-display);
  font-size:11px;
  font-weight:800;
  line-height:1.5;
  letter-spacing:var(--t-track-label);
  text-transform:uppercase;
  white-space:nowrap;
  border-radius:var(--t-r-full);
}

/* Navy varijanta istog bedža — tipovi objava („Hitno", „Ispit").
   Oznake „Besplatno" i „Uračunato" su je nosile u cjenovniku i u
   koracima dok je promocija postojala.
   Bijelo na --t-b950 je 16.41, AAA.

   Mora stajati POSLIJE `.t-bedz`: ista je specifičnost, pa odlučuje
   redoslijed u fajlu. Iznad njega je bedž ostajao amber. */
.t-bedz--navy{
  background:var(--t-b950);
  color:var(--t-n0);
}

/* ═══════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════ */

.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  min-height:100vh;    /* rezerva za pregledače bez svh */
  min-height:100svh;   /* vh na mobilnom skače kad se traka sakrije */
  background:var(--t-surface-dark);
  color:var(--t-text-on-dark);

  /* Header je dokovan za dno viewporta i odlijepljen od ivice, pa
     zauzima --t-header-band (visina + inset). Donji padding ga
     izuzima iz raspoloživog prostora, a `justify-content:center`
     centrira sadržaj u onome što ostane — ne u cijelom heroju.
     Zato ništa ne može završiti ispod headera. */
  padding-block:var(--t-8) calc(var(--t-header-band) + var(--t-5));
}

/* ── Pozadina ─────────────────────────────────────────────── */
.hero__media{
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

.hero__video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  /* Dok JS ne doda src, element je prazan — poster ide sa
     .hero__media, pa ovdje nema šta da se vidi. */
}

/* 55% preko videa. Jedina stvar između pozadine i teksta. */
.hero__overlay{
  position:absolute;
  inset:0;
  background:var(--t-b950);
  opacity:.55;
}

/* ── Sadržaj ──────────────────────────────────────────────── */
.hero__inner{
  position:relative;   /* iznad overlaya */
  z-index:1;
}

.hero__title{
  margin:0 0 var(--t-5);
  /* Dva reda, svaki svoj blok — ulaze sa suprotnih strana. */
  display:flex;
  flex-direction:column;
  gap:var(--t-3);
}

/* Brend red je korak NIŽE od slogana u hijerarhiji — zato b200, a
   ne bijelo. Bijelo je rezervisano isključivo za slogan.
   b200 na navy overlayu: 11.19 na čistoj podlozi, AAA. */
.hero__brand{
  font-family:var(--t-font-body);
  font-size:var(--t-size-body-lg);
  font-weight:700;
  line-height:1.3;
  letter-spacing:var(--t-track-label);
  text-transform:uppercase;
  color:var(--t-b200);
  /* transform-origin lijevo — red se ispravlja oko svoje početne
     ivice, ne oko sredine, pa ne „pluta" u letu. */
  transform-origin:left center;
}

.hero__slogan{
  font-family:var(--t-font-display);
  font-size:var(--t-size-hero);
  font-weight:800;
  font-stretch:calc(var(--t-wdth-hero) * 1%);
  line-height:var(--t-lh-hero);
  letter-spacing:var(--t-track-hero);
  color:var(--t-n0);
  transform-origin:left center;
}

.hero__lead{
  margin:0 0 var(--t-5);
  max-width:52ch;
  font-size:var(--t-size-body-lg);
  color:var(--t-text-on-dark);
}

/* Slogan škole, na mjestu gdje je do 03.09.2026 stajao amber bedž
   „Uz upis gratis 75 €".

   BEZ pilulice i bez ambera. Amber je boja radnje — dugme „Upiši se"
   je odmah ispod, i da slogan ostane amber, dvije amber mrlje jedna
   iznad druge bi se takmičile, a klikabilna je samo jedna.

   --t-b300 na --t-surface-dark je 8.9, AAA. Display font i tracking
   ga odvajaju od uvodnog pasusa iznad, pa se čita kao potpis, a ne
   kao još jedna rečenica. */
.hero__moto{
  margin:0 0 var(--t-6);
  font-family:var(--t-font-display);
  font-size:var(--t-size-body-lg);
  font-weight:700;
  font-stretch:calc(var(--t-wdth-title) * 1%);
  line-height:1.35;
  letter-spacing:var(--t-track-heading);
  color:var(--t-b300);
  text-wrap:balance;
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--t-3);
}

/* ── Dugmad ───────────────────────────────────────────────────
   TVRDO PRAVILO: boja teksta se navodi u SVAKOM stanju, ne samo
   u mirnom.

   Hello Elementor u reset.css nosi `a:active, a:hover { color:#336 }`.
   To je (0,1,1) i tuče golu klasu komponente (0,1,0), pa svaki link
   kojem hover boja nije eksplicitno napisana na hover postane
   #333366. Preko navy pozadine to je kontrast 1.42 — brojevi
   telefona praktično nestanu.

   Zato ispod nema nijednog :hover bloka bez `color`.            */
.hero__cta,
.hero__tel{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding-inline:var(--t-6);
  font-family:var(--t-font-body);
  font-size:var(--t-size-body);
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  border-radius:var(--t-r-full);
  transition:background-color var(--t-m-base) var(--t-ease),
             border-color var(--t-m-base) var(--t-ease),
             transform var(--t-m-base) var(--t-ease),
             box-shadow var(--t-m-base) var(--t-ease);
}

/* Amber, mjesto 1 od 2 — „Upiši se". Navy tekst, 8.81, AAA. */
.hero__cta{
  background:var(--t-amber);
  color:var(--t-b950);
  border:1px solid var(--t-amber);
}
.hero__cta:hover,
.hero__cta:focus,
.hero__cta:focus-visible,
.hero__cta:active{
  background:var(--t-amber-hover);
  color:var(--t-b950);
  border-color:var(--t-amber-hover);
}

/* Navy dugme. Bijelo na b950 = 16.5, bijelo na b800 = 10.9 — oba AAA.
   Tekst je bijel u sva četiri stanja i nikad se ne mijenja. */
.hero__tel{
  background:var(--t-b950);
  color:var(--t-n0);
  border:1px solid var(--t-b600);
}
.hero__tel:hover,
.hero__tel:active{
  background:var(--t-b800);
  color:var(--t-n0);
  border-color:var(--t-b600);
  transform:translateY(-1px);
  box-shadow:var(--t-shadow-float);
}
/* Fokus ne diže dugme — prsten dolazi iz base.css. Ovdje se samo
   zaključava boja teksta protiv roditeljskog a:hover pravila. */
.hero__tel:focus,
.hero__tel:focus-visible{
  color:var(--t-n0);
}

/* Fokus na tamnoj pozadini — ista uloga, svjetlija boja. */
.hero{ --t-focus:var(--t-b300); }

/* ── Ulazna animacija ─────────────────────────────────────────
   „Kretanje iz crtanog filma": redovi ulijeću sa suprotnih strana,
   iskošeni, i ispravljaju se u toku leta. Skew ide do 7deg —
   preko 8 prestaje da izgleda kao brzina i počne da liči na grešku.

   H1 je LCP element i zato NEMA opacity u svojoj animaciji.
   Oba reda su naslikana u prvom frejmu, samo pomjerena; Chrome
   mjeri LCP odmah. Opacity ide tek na elemente ispod naslova,
   koji LCP ne određuju.                                        */
@media (prefers-reduced-motion:no-preference){

  @keyframes hero-slijeva{
    from{ transform:translateX(-60px) skewX(-7deg); }
    to  { transform:translateX(0) skewX(0); }
  }
  @keyframes hero-zdesna{
    from{ transform:translateX(60px) skewX(7deg); }
    to  { transform:translateX(0) skewX(0); }
  }
  @keyframes hero-naviše{
    from{ opacity:0; transform:translateY(16px); }
    to  { opacity:1; transform:translateY(0); }
  }

  /* Stagger 180ms: brend → slogan → podnaslov → bedž → dugmad.
     Dva reda naslova lete duže (--t-m-slow), ostalo ostaje na
     --t-m-emph — inače bi se rep animacije previše otegao.

     Prvi red je BEZ delaya. To i nije stvar ukusa: kad bi H1
     kasnio, kasnio bi i LCP. */
  .hero__brand{
    animation:hero-slijeva var(--t-m-slow) var(--t-ease-emph) both;
  }
  .hero__slogan{
    animation:hero-zdesna var(--t-m-slow) var(--t-ease-emph) 180ms both;
  }
  .hero__lead{
    animation:hero-naviše var(--t-m-emph) var(--t-ease-emph) 360ms both;
  }
  .hero__moto{
    animation:hero-naviše var(--t-m-emph) var(--t-ease-emph) 540ms both;
  }
  .hero__actions{
    animation:hero-naviše var(--t-m-emph) var(--t-ease-emph) 720ms both;
  }

  /* ── Blijeđenje na scroll ───────────────────────────────────
     Scroll-driven animacija — nema scroll listenera, sve ide na
     compositoru. Gdje `animation-timeline` ne postoji (Safari,
     Firefox), hero.js pali .is-faded preko IntersectionObservera. */
  @supports (animation-timeline:scroll()){
    .hero__inner{
      animation:hero-blijedi linear both;
      animation-timeline:scroll(root block);
      animation-range:0 60vh;
    }
    @keyframes hero-blijedi{
      from{ opacity:1; transform:translateY(0); }
      to  { opacity:0; transform:translateY(-40px); }
    }
  }

  /* Rezervni put — binarno, ali u istom smjeru. */
  @supports not (animation-timeline:scroll()){
    .hero__inner{
      transition:opacity var(--t-m-slow) var(--t-ease),
                 transform var(--t-m-slow) var(--t-ease);
    }
    .hero.is-faded .hero__inner{
      opacity:0;
      transform:translateY(-40px);
    }
  }
}

/* ── Mobilno ──────────────────────────────────────────────── */
@media (max-width:767.98px){
  .hero__lead{ font-size:var(--t-size-body); }
  .hero__actions > *{ flex:1 1 auto; }
}

/* ── Nizak viewport ───────────────────────────────────────────
   Uslov je čisto visina, bez orijentacije: landscape telefon je
   ŠIRI od desktop praga (956×440), pa se ovaj režim ne može
   pogoditi širinom. Isti tretman dobija i nizak prozor na desktopu.

   Pravilo je: smanjuj tipografiju, ne guraj sadržaj. Header ostaje
   dolje kao svuda, hero i dalje centrira sadržaj u prostoru iznad
   njega — samo taj sadržaj postaje niži.

   Blok ide poslije `@media (max-width:767.98px)` jer nizak viewport zna
   biti i širi i uži od 768px, pa mora nadjačati oba slučaja.     */
@media (max-height:520px){

  .hero{
    /* min-height, ne height — sadržaj i dalje smije da preraste
       viewport i povuče stranicu u skrol. */
    min-height:100svh;
    padding-block:var(--t-5) calc(var(--t-header-band) + var(--t-5));
  }

  .hero__brand{
    font-size:var(--t-size-small);
    line-height:1.25;
  }

  .hero__slogan{
    /* Fiksno, ne clamp — clamp računa po ŠIRINI, a ovdje je uska
       dimenzija visina, pa bi 956px širine dalo naslov od 76px. */
    font-size:34px;
    line-height:1.05;
  }

  .hero__title{ gap:var(--t-2); margin-bottom:var(--t-4); }

  /* Dva reda i ni jedan više. */
  .hero__lead{
    display:-webkit-box;
    -webkit-line-clamp:2;
    line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin-bottom:var(--t-4);
    font-size:var(--t-size-small);
    max-width:60ch;
  }

  /* Slogan ostaje cio — kratak je i nosi ime škole. Skraćuje se samo
     razmak ispod njega, jer u pejzažu visina odlučuje sve. */
  .hero__moto{
    margin-bottom:var(--t-3);
    font-size:var(--t-size-small);
  }

  /* Jedno pored drugog, ne razvučeno preko cijelog reda. */
  .hero__actions{ flex-wrap:nowrap; gap:var(--t-2); }
  .hero__actions > *{ flex:0 0 auto; }
  .hero__cta,
  .hero__tel{
    min-height:44px;
    padding-inline:var(--t-5);
    font-size:var(--t-size-small);
  }
}

/* ── Vrlo nizak viewport ──────────────────────────────────────
   Ispod ove granice ni skraćena tipografija ne stane. Podnaslov
   ide van — H1, bedž i dugmad su ono što konvertuje, on nije.
   Prag je izmjeren, ne pogođen: na 390px visine sadržaj još staje
   sa podnaslovom, na 344 ne.                                    */
@media (max-height:380px){
  .hero__lead{ display:none; }
  .hero__title{ margin-bottom:var(--t-3); }
  .hero__slogan{ font-size:32px; }
}

/* ═══════════════════════════════════════════════════════════
   TRAKA SLOGANA
   ═══════════════════════════════════════════════════════════ */

.traka{
  overflow:hidden;
  min-height:12vh;
  min-height:13svh;
  display:flex;
  align-items:center;
  background:var(--t-surface-dark);
  color:var(--t-text-on-dark);
  border-block:1px solid rgba(181,220,243,.14);
}

.traka__staza{
  display:flex;
  flex-wrap:nowrap;
  width:max-content;
  /* Dvije identične kopije → put do -50% vraća drugu tačno na
     mjesto prve. Zato je šav nevidljiv. */
  animation:traka-klizi 30s linear infinite;
}

@keyframes traka-klizi{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

.traka__grupa{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  margin:0;
  padding:0;
  list-style:none;
}

.traka__stavka{
  display:flex;
  align-items:center;
  margin:0;
  padding-inline:var(--t-5);
  font-family:var(--t-font-display);
  font-size:clamp(17px,2.2vw,26px);
  font-weight:700;
  font-stretch:calc(var(--t-wdth-title) * 1%);
  letter-spacing:var(--t-track-heading);
  line-height:1.2;
  white-space:nowrap;
}

/* Razdjelnik. Dekorativan znak, ne tekst — 5.93 na navy. */
.traka__stavka::after{
  content:"·";
  margin-left:calc(var(--t-5) * 2);
  color:var(--t-b400);
  font-size:1.4em;
  line-height:0;
}

/* ── Reduced motion ───────────────────────────────────────────
   Traka staje i pokazuje prva tri slogana, centrirano. Druga
   kopija nema šta da radi kad nema kretanja.                  */
@media (prefers-reduced-motion:reduce){
  .traka__staza{
    animation:none;
    width:100%;
    justify-content:center;
  }
  .traka__grupa{
    flex-wrap:wrap;
    justify-content:center;
  }
  .traka__grupa[aria-hidden="true"]{ display:none; }
  .traka__stavka:nth-child(n+4){ display:none; }
  .traka__stavka:nth-child(3)::after{ content:none; }
}

/* ═══════════════════════════════════════════════════════════
   O NAMA
   ═══════════════════════════════════════════════════════════ */

.o-nama{
  background:var(--t-ground);
  padding-block:var(--t-section-y);
}

.o-nama__inner{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--t-8);
  align-items:center;
}

/* ── Tekst ────────────────────────────────────────────────────
   Mjera ide na PASUSE, ne na kolonu. Na koloni je stezala i naslov,
   pa je „Škola je nova, iskustvo nije" padalo u dva reda na svakoj
   širini — naslov od 38px ne staje u mjeru računatu za tekst od
   17px. Pasusi zadržavaju mjeru, naslov dobija punu širinu kolone. */
.o-nama__tekst p:not(.t-eyebrow){
  margin:0 0 var(--t-4);
  max-width:var(--t-measure);
  color:var(--t-text-2);
}
.o-nama__tekst p:last-child{ margin-bottom:0; }

/* Naslov ove sekcije je najduži na sajtu i staje u jedan red tek od
   oko 1200px naviše. Ispod toga pada u dva, pa `balance` izjednačava
   redove umjesto da ostavi rep od jedne riječi.

   `white-space:nowrap` NE dolazi u obzir — na telefonu bi izašao iz
   ekrana. */
.o-nama__tekst h2{
  text-wrap:balance;
}

.o-nama__akcija{
  margin:var(--t-6) 0 0;
}

/* ── Moto ─────────────────────────────────────────────────────
   Zatvara sekciju. Centriran je namjerno: nije naslov nego potpis,
   pa ne prati pravilo o lijevoj ivici — jedan kratak red u sredini
   se čita kao kraj poglavlja. */
.o-nama__moto{
  margin-top:var(--t-8);
  text-align:center;
}

.o-nama__slogan{
  margin:0;
  font-family:var(--t-font-display);
  font-size:var(--t-size-small);
  font-weight:800;
  line-height:1.4;
  letter-spacing:var(--t-track-label);
  text-transform:uppercase;
  color:var(--t-b950);          /* 15.20 na --t-ground */
}

/* ── Buket ────────────────────────────────────────────────────
   Tri karte neuredno spuštene na sto.

   Mjere su birane tako da ni jedna karta SA ROTACIJOM ne izađe iz
   kontejnera: rotirani pravougaonik w×h zauzima w·cosθ + h·sinθ po
   širini, što je pri 5° oko 6% više nego neokrenut. Zato karta ide
   na 56% širine, a ne na 65% — inače desna izleti preko ivice i
   napravi horizontalni skrol.

   Redoslijed po dubini prati DOM: prva karta je najviše.        */
.o-nama__buket{
  position:relative;
  width:100%;
  aspect-ratio:1;
}

.o-nama__karta{
  position:absolute;
  width:56%;
  padding:8px;                       /* bijeli okvir */
  background:var(--t-surface);
  border-radius:var(--t-r-lg);
  box-shadow:var(--t-shadow-float);
  transition:transform var(--t-m-base) var(--t-ease),
             box-shadow var(--t-m-base) var(--t-ease);
  will-change:transform;
}

.o-nama__karta img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4 / 5;
  object-fit:cover;
  /* Unutrašnji radijus je vanjski minus okvir — inače uglovi slike
     i kartice ne prate istu krivu. */
  border-radius:calc(var(--t-r-lg) - 8px);
}

/* top:2%, ne 0 — rotacija od -3° podigne gornji ugao oko 1.5% iznad
   sidra, pa bi na nuli karta virila iz okvira buketa. */
/* ── Buket po broju slika ──────────────────────────────────────
   Karta u odnosu 4:5 visoka je 1,25× svoje širine. Tri karte od 56%
   staju u kvadrat; šest ne staje nikako. Zato se sa svakom sljedećom
   slikom mijenja dvoje: karta se smanjuje, a okvir izdužuje.

   Desna ivica nijedne karte ne ide preko 96%: rotacija od 5° širi
   pravougaonik za oko 6%, pa bi na 100% izletjela i napravila
   horizontalni skrol.

   Dubina prati DOM — prva slika je najviše. */

/* Jedna slika: nema šta da se preklapa, pa stoji sredinom. */
.o-nama__buket--n1 .o-nama__karta--1{ left:22%; top:12%; z-index:1; transform:rotate(-2deg); width:60%; }

/* Dvije */
.o-nama__buket--n2 .o-nama__karta{ width:54%; }
.o-nama__buket--n2 .o-nama__karta--1{ left:28%; top:4%;  z-index:2; transform:rotate(-3deg); }
.o-nama__buket--n2 .o-nama__karta--2{ left:8%;  top:26%; z-index:1; transform:rotate(3deg); }

/* Tri — raspored kakav je bio od početka, nedirnut. */
.o-nama__buket--n3 .o-nama__karta--1{ left:22%; top:2%;  z-index:3; transform:rotate(-3deg); }
.o-nama__buket--n3 .o-nama__karta--2{ left:31%; top:17%; z-index:2; transform:rotate(5deg); }
.o-nama__buket--n3 .o-nama__karta--3{ left:10%; top:23%; z-index:1; transform:rotate(2deg); }

/* Četiri */
.o-nama__buket--n4{ aspect-ratio:1 / 1.1; }
.o-nama__buket--n4 .o-nama__karta{ width:48%; }
.o-nama__buket--n4 .o-nama__karta--1{ left:26%; top:0%;  z-index:4; transform:rotate(-3deg); }
.o-nama__buket--n4 .o-nama__karta--2{ left:46%; top:16%; z-index:3; transform:rotate(4deg); }
.o-nama__buket--n4 .o-nama__karta--3{ left:10%; top:30%; z-index:2; transform:rotate(2deg); }
.o-nama__buket--n4 .o-nama__karta--4{ left:32%; top:46%; z-index:1; transform:rotate(-2deg); }

/* Pet */
.o-nama__buket--n5{ aspect-ratio:1 / 1.15; }
.o-nama__buket--n5 .o-nama__karta{ width:44%; }
.o-nama__buket--n5 .o-nama__karta--1{ left:28%; top:0%;  z-index:5; transform:rotate(-3deg); }
.o-nama__buket--n5 .o-nama__karta--2{ left:50%; top:14%; z-index:4; transform:rotate(4deg); }
.o-nama__buket--n5 .o-nama__karta--3{ left:6%;  top:22%; z-index:3; transform:rotate(2deg); }
.o-nama__buket--n5 .o-nama__karta--4{ left:30%; top:40%; z-index:2; transform:rotate(-2deg); }
.o-nama__buket--n5 .o-nama__karta--5{ left:50%; top:58%; z-index:1; transform:rotate(3deg); }

/* Šest */
.o-nama__buket--n6{ aspect-ratio:1 / 1.18; }
.o-nama__buket--n6 .o-nama__karta{ width:42%; }
.o-nama__buket--n6 .o-nama__karta--1{ left:26%; top:0%;  z-index:6; transform:rotate(-3deg); }
.o-nama__buket--n6 .o-nama__karta--2{ left:50%; top:11%; z-index:5; transform:rotate(4deg); }
.o-nama__buket--n6 .o-nama__karta--3{ left:8%;  top:19%; z-index:4; transform:rotate(2deg); }
.o-nama__buket--n6 .o-nama__karta--4{ left:32%; top:31%; z-index:3; transform:rotate(-2deg); }
.o-nama__buket--n6 .o-nama__karta--5{ left:52%; top:45%; z-index:2; transform:rotate(3deg); }
.o-nama__buket--n6 .o-nama__karta--6{ left:16%; top:55%; z-index:1; transform:rotate(-4deg); }

/* Karta pod mišem ide na vrh — mijenja se i z-index, ne samo oblik.
   Bez toga bi se „podignuta" karta i dalje krila ispod susjedne. */
.o-nama__karta:hover,
.o-nama__karta:focus-within{
  z-index:9;
  transform:rotate(0deg) scale(1.03);
}

/* ── Desktop ──────────────────────────────────────────────── */
@media (min-width:768px){
  .o-nama__inner{
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:var(--t-9);
  }
}

/* ── Mobilno ──────────────────────────────────────────────────
   Buket na 390px izgleda kao greška, ne kao dizajn — tri karte na
   toj širini nemaju gdje da se raziđu. Zato red sa scroll-snapom:
   karte ostaju čitljive umjesto da se svedu na 100px sličice.

   Negativne margine vuku red do ivica ekrana da se vidi da ima jos
   sadržaja desno, a padding vraća prvu karticu u liniju sa tekstom. */
@media (max-width:767.98px){
  .o-nama__buket{
    position:static;
    aspect-ratio:auto !important;
    display:flex;
    gap:var(--t-4);
    /* width:auto, ne 100% — inače negativne margine samo pomjere red
       ulijevo umjesto da ga prošire do ivica ekrana. */
    width:auto;
    margin-inline:calc(var(--t-container-pad) * -1);
    padding-inline:var(--t-container-pad);
    /* Bez ovoga `scroll-snap-align:start` lijepi karticu za ivicu
       skrolporta i poništi padding — prva kartica ispadne iz linije
       sa tekstom. scroll-padding pomjera samu tačku lijepljenja. */
    scroll-padding-inline:var(--t-container-pad);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }

  .o-nama__karta{
    position:static;
    flex:0 0 68%;
    transform:none;
    scroll-snap-align:start;
  }
  .o-nama__buket .o-nama__karta{ transform:none; width:auto; }

  .o-nama__karta:hover,
  .o-nama__karta:focus-within{ transform:none; }
}

/* ── Reduced motion ───────────────────────────────────────────
   Bez rotacija i bez hover transformacija — tri uredne kartice
   jedna do druge. Preklapanje se gasi zajedno sa nagibom: bez
   pomjeranja na hover, karta ispod se nikad ne bi mogla vidjeti. */
@media (prefers-reduced-motion:reduce){
  .o-nama__buket{
    position:static;
    aspect-ratio:auto !important;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:var(--t-3);
    overflow:visible;
  }
  .o-nama__karta{
    position:static;
    width:auto !important;
    transform:none !important;
    transition:none !important;
  }
  .o-nama__karta:hover,
  .o-nama__karta:focus-within{ z-index:auto; }
}

/* ═══════════════════════════════════════════════════════════
   OBUKA
   ═══════════════════════════════════════════════════════════ */

/* Smjenjuje se sa O nama tonom površine, ne linijom — dubina se na
   ovom sajtu pravi tonom, a ne ivicama i sjenkama. */
.obuka{
  background:var(--t-surface-alt);
  padding-block:var(--t-section-y);
}

.obuka__uvod{
  margin:0 0 var(--t-7);
  max-width:var(--t-measure);
  font-size:var(--t-size-body-lg);
  color:var(--t-text-2);
}

/* ── Dvije kolone ─────────────────────────────────────────── */
.obuka__kolone{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--t-5);
  margin-bottom:var(--t-5);
}

.obuka__karta{
  padding:var(--t-5);
  background:var(--t-surface);
  border:1px solid var(--t-line);
  border-radius:var(--t-r-md);
}

.obuka__naslov3{
  margin:0 0 var(--t-3);
  font-family:var(--t-font-display);
  font-size:var(--t-size-h3);
  font-weight:800;
  font-stretch:calc(var(--t-wdth-title) * 1%);
  line-height:var(--t-lh-heading);
  letter-spacing:var(--t-track-heading);
  color:var(--t-text);
}

.obuka__karta p{
  margin:0;
  color:var(--t-text-2);
}

/* ── Blok uslova ──────────────────────────────────────────────
   Tamniji ton iste porodice — odvaja se od kartica bez ivice. */
.obuka__uslovi{
  padding:var(--t-5);
  background:var(--t-surface-emph);
  border-radius:var(--t-r-md);
}

.obuka__lista{
  display:flex;
  flex-direction:column;
  gap:var(--t-3);
  margin:0;
  padding:0;
  list-style:none;
}

.obuka__lista li{
  display:grid;
  /* Kvačica u svojoj koloni — tekst koji se prelomi ostaje poravnat
     ispod prvog reda, a ne ispod ikone. */
  grid-template-columns:20px 1fr;
  gap:var(--t-3);
  align-items:start;
  margin:0;
  /* Korak manje od tijela teksta. Nije ukras: na 17px tri stavke traže
     1064.7px + 2 × 24px razmaka = 1112.7px, a red ima 1072px. Jedna
     stavka bi se uvijek prelomila, a prelomljena stavka ima okvir širi
     od svog najdužeg reda — TO je bio nejednak razmak (izmjereno 16.3px
     viška). Na 15px sve tri stanu u jedan red i oba razmaka su tačno
     24px. Vidi komentar uz raspored ispod. */
  font-size:var(--t-size-small);
  color:var(--t-text);
}

.obuka__kvacica{
  width:20px;
  height:20px;
  /* Optičko poravnanje sa prvim redom teksta (line-height 1.62 na
     15px daje red od ~24px, ikona je 20px). */
  margin-top:2px;
  color:var(--t-potvrda);
  flex:0 0 auto;
}

/* ── Desktop ──────────────────────────────────────────────── */
@media (min-width:768px){
  .obuka__kolone{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--t-6);
    margin-bottom:var(--t-6);
  }
  .obuka__karta,
  .obuka__uslovi{ padding:var(--t-6); }

  /* Uslovi u red kad ima mjesta — tri kratke stavke jedna ispod
     druge preko cijele širine izgledaju kao rupa.

     JEDNAKI RAZMACI, ne jednake kolone. Ovdje je ranije stajalo
     `repeat(3, minmax(0,1fr))` i kolone jesu bile jednake — ali
     sadržaj im nije, pa se iza kratke druge stavke otvarala rupa do
     treće, veća od razmaka između prve i druge. Oko čita razmak, ne
     mrežu.

     Flex uzima prirodnu širinu svake stavke i stavlja isti `gap`
     između svih. `align-items:start` drži stavku koja se prelomi u
     dva reda poravnatu gore sa ostalima.

     BEZ gornje granice širine. Stavka je široka koliko joj tekst traži,
     a kad red ne može da je primi, cijela stavka pada u sljedeći red.

     Time je svaka stavka JEDNOREDNA, pa je razmak od kraja njenog teksta
     do kvačice sljedeće uvijek tačno gap — 24px, za svaki tekst, zauvijek.

     Ranije je ovdje stajala granica od trećine reda. Ona je davala okvire
     341 · 117 · 341, ali su se prva i treća stavka unutar okvira lomile u
     dva reda, a najduži red je bio uži od okvira. Razlika je bila 16.3px
     i baš to se vidjelo kao nejednak razmak (40.3px prema 24px).

     Okvir se u CSS-u ne može skupiti na širinu prelomljenog teksta —
     `fit-content`, `min-content` i `text-wrap:balance` tu ne pomažu.
     Jedini ispravan izlaz je da se prelom ne desi. Zato font-size korak
     niže (vidi .obuka__lista li) i bez granice.

     Ostatak reda ostaje na KRAJU: naslov iznad je uz lijevu ivicu, pa
     centriranje reda ne dolazi u obzir. */
  .obuka__lista{
    flex-direction:row;
    flex-wrap:wrap;
    gap:var(--t-5);
    align-items:start;
  }
}

/* ═══════════════════════════════════════════════════════════
   CJENOVNIK
   ═══════════════════════════════════════════════════════════ */

.cjenovnik{
  background:var(--t-ground);
  padding-block:var(--t-section-y);
}

.cjenovnik__uvod{
  margin:0 0 var(--t-7);
  max-width:var(--t-measure);
  font-size:var(--t-size-body-lg);
  color:var(--t-text-2);
}

/* ── Tabela ───────────────────────────────────────────────────
   `overflow:hidden` na tabeli ne radi u svim pregledačima, pa
   radijus i rez idu preko `border-radius` + `border-collapse:
   separate` sa razmakom nula. Tako uglovi odsijecaju i prvi i
   zadnji red, a linije između redova ostaju jednostruke.       */
.cjenovnik__tabela{
  width:100%;
  max-width:720px;
  margin-inline:auto;
  margin-bottom:var(--t-6);
  border-collapse:separate;
  border-spacing:0;
  background:var(--t-surface);
  border:1px solid var(--t-line);
  border-radius:var(--t-r-md);
  overflow:hidden;
  text-align:left;
}

/* Hello Elementor u reset.css nosi `table td, table th { border:1px
   solid hsla(0,0%,50%,.5) }` — SVE četiri ivice. Reset samo gornje
   ostavlja bočne i donju, pa tabela dobije stupce kojih u dizajnu
   nema. Zato `border:0` pa tek onda naša linija između redova. */
.cjenovnik__red > *{
  padding:var(--t-4) var(--t-5);
  border:0;
  border-top:1px solid var(--t-line);
  vertical-align:baseline;
}

/* Zebra pruge i hover iz iste teme:
     table tbody > tr:nth-child(odd) > td   → (0,1,3)
   Gola klasa (0,1,0) tu gubi, pa selektor mora biti dvoklasni.
   Tiče se samo <tbody> — <tfoot> nosi svoju pozadinu. */
.cjenovnik .cjenovnik__tabela tbody tr > th,
.cjenovnik .cjenovnik__tabela tbody tr > td,
.cjenovnik .cjenovnik__tabela tbody tr:hover > th,
.cjenovnik .cjenovnik__tabela tbody tr:hover > td{
  background-color:transparent;
}
/* Prvi red nema liniju iznad sebe — to je već ivica kartice. */
.cjenovnik__tabela tbody tr:first-child > *{ border-top:0; }

/* Podloga glavnog reda mora nadjačati zebra pravilo iznad, koje gasi
   pozadinu sa specifičnošću (0,3,3). Zato i ovdje tri klase. */
.cjenovnik .cjenovnik__tabela tbody tr.cjenovnik__red--glavni > th,
.cjenovnik .cjenovnik__tabela tbody tr.cjenovnik__red--glavni > td{
  background-color:var(--t-surface-alt);
}

.cjenovnik__naziv{
  font-weight:600;
  color:var(--t-text);
}

/* Sve cifre u tabeli su tabularne — kolona se poravnava po mjestu,
   ne po obliku broja.

   Kolone su od 03.09.2026 dvije. Treća je nosila precrtanu „redovnu"
   cijenu (`.cjenovnik__staro`, monospace, --t-text-2) i otišla je
   zajedno sa promocijom. */
.cjenovnik__novo{
  width:1%;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  text-align:right;
}

/* ── Istaknuti prvi red ───────────────────────────────────────
   Hijerarhija se od 03.09.2026 mora nositi ovdje, a ne sadržajem.

   Dok su ostale stavke bile besplatne, u koloni cijena je stajao
   jedan jedini broj — 870 € — i bio je krupan jer je bio sam. Sada su
   u toj koloni pet brojeva. Da su svi iste veličine, sekcija „Jedna
   cijena" bi izgledala kao spisak od pet cijena, a jedna od njih JE
   cijena obuke a četiri su takse.

   Zato: obične stavke 18px, glavni red 30px i svoja podloga. Razlika
   je 1.67× — dovoljno da oko odmah nađe glavni broj. */
.cjenovnik__red--glavni > *{
  background:var(--t-surface-alt);
}
.cjenovnik__red--glavni .cjenovnik__naziv{
  font-family:var(--t-font-display);
  font-size:var(--t-size-h3);
  font-weight:700;
  font-stretch:calc(var(--t-wdth-title) * 1%);
  letter-spacing:var(--t-track-heading);
}
.cjenovnik__cijena{
  font-family:var(--t-font-display);
  font-size:var(--t-size-body-lg);
  font-weight:700;
  font-stretch:calc(var(--t-wdth-title) * 1%);
  letter-spacing:var(--t-track-heading);
  color:var(--t-text);
}
.cjenovnik__red--glavni .cjenovnik__cijena{
  font-size:30px;
  font-weight:800;
}

/* ── Mali cjenovnik „Ako moraš ponovo" ────────────────────────
   Tiši od glavnog samo po onome što nosi poruku: nijedan amber
   piksel. Sve ostalo je isto — isti radijus, isti razmaci u redu,
   isti tretman iznosa — jer je ista vrsta podatka.

   Okvir je SKINUT sa omotača. Ranije je ovdje stajala kartica sa
   svojom ivicom, a unutar nje tabela sa svojom, pa je ispadao okvir
   u okviru sa 26px praznine između. Tabela sada nosi ivicu sama,
   isto kao glavna, i omotač je samo naslov plus širina.           */
.cjenovnik__ponovo{
  max-width:720px;
  margin:var(--t-8) auto 0;
}
.cjenovnik__ponovo-naslov{
  margin:0 0 var(--t-4);
  font-family:var(--t-font-display);
  font-size:var(--t-size-h3);
  font-weight:800;
  font-stretch:calc(var(--t-wdth-title) * 1%);
  letter-spacing:var(--t-track-heading);
  color:var(--t-text);
}

.cjenovnik__ponovo-napomena{
  max-width:var(--t-measure);
  margin:var(--t-4) 0 0;
  font-size:var(--t-size-small);
  line-height:var(--t-lh-body);
  color:var(--t-text);
}
/* Citat člana — prigušen, ali i dalje AA. `--t-text-3` bi ovdje
   pao na 3.97 preko bijelog, pa ide `--t-text-2` na 7.78. */
.cjenovnik__izvor{ color:var(--t-text-2); }

/* ── Ispod tabele ─────────────────────────────────────────── */
.cjenovnik__ispod{
  max-width:720px;
  margin-inline:auto;
  text-align:center;
}
.cjenovnik__rate{
  max-width:var(--t-measure);
  margin:0 auto var(--t-3);
  color:var(--t-text-2);
}
/* `--t-text-3` (#7B8088) je preko `--t-ground` podloge 3.90 i pada
   AA za normalan tekst. `--t-text-2` je 7.35 preko iste podloge. */
.cjenovnik__pdv{
  margin:0 0 var(--t-6);
  font-size:var(--t-size-small);
  color:var(--t-text-2);
}

/* ── Mobilno ──────────────────────────────────────────────────
   Tabela se NE skroluje bočno — prelazi u blokove.

   Kad `display:block` skine tabelarni raspored, <tr> POSTAJE običan
   blok i tek tada može da nosi ivicu. Zato linija između redova ide
   na red, a ne na ćelije: jedna linija umjesto tri koje se spajaju
   na različitim visinama.                                         */
@media (max-width:767.98px){
  .cjenovnik__tabela,
  .cjenovnik__tabela tbody{ display:block; }

  /* Ništa od stilizovanja ćelija ne preživljava prelazak. */
  .cjenovnik .cjenovnik__tabela th,
  .cjenovnik .cjenovnik__tabela td{
    background:none;
    border:0;
    padding:0;
    width:auto;
  }

  /* ── Običan red: naziv lijevo, cijena desno ────────────────
     Naziv raste i gura cijenu udesno. `space-between` ovdje nije
     potreban — ostala je jedna ćelija sa desne strane, ne dvije. */
  .cjenovnik__red{
    display:flex;
    align-items:center;
    gap:var(--t-2);
    padding:var(--t-3) var(--t-4);
    border-bottom:1px solid var(--t-line);
  }
  .cjenovnik__tabela tbody tr:last-child .cjenovnik__red,
  .cjenovnik__tabela tbody tr:last-child{ border-bottom:0; }

  .cjenovnik__naziv{
    flex:1 1 auto;
    min-width:0;
    font-family:var(--t-font-body);
    font-size:15px;
    font-weight:400;
    letter-spacing:normal;
    text-align:left;
  }

  .cjenovnik__novo{
    flex:none;
    white-space:nowrap;
    text-align:right;
  }
  .cjenovnik__novo:empty{ display:none; }

  /* ── Prvi red ostaje izdvojen ──────────────────────────────
     Jedini je blok, ne flex: naziv u svom redu, cijena ispod desno. */
  .cjenovnik__red--glavni{
    display:block;
    padding:var(--t-4);
    background:var(--t-surface-alt);
  }
  .cjenovnik__red--glavni .cjenovnik__naziv{
    display:block;
    margin-bottom:var(--t-1);
    font-family:var(--t-font-display);
    font-size:17px;
    font-weight:700;
    letter-spacing:var(--t-track-heading);
  }
  .cjenovnik__red--glavni .cjenovnik__novo{
    display:block;
    text-align:right;
  }
  .cjenovnik__red--glavni .cjenovnik__cijena{ font-size:26px; }

}

/* Na 360px je najduži naziv promašivao red za 4px i prelamao se u dva,
   pa je kartica rasla na 70px. Bočni padding sa 16 na 12 vraća 8px.
   Nazivi su od 03.09.2026 kraći („Polaganje testova" umjesto „Prvo
   polaganje testova"), pa rezerva stoji, ali se više ne troši. */
@media (max-width:399.98px){
  .cjenovnik__red{ padding-inline:var(--t-3); }
}

/* ═══════════════════════════════════════════════════════════
   KAKO DO VOZAČKE — proces
   ═══════════════════════════════════════════════════════════ */

.proces{
  background:var(--t-surface-alt);
  padding-block:var(--t-section-y);
}

.proces__uvod{
  margin:0 0 var(--t-7);
  max-width:var(--t-measure);
  font-size:var(--t-size-body-lg);
  color:var(--t-text-2);
}

/* ── Lista ────────────────────────────────────────────────── */
.proces__lista{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:var(--t-4);
  margin:0;
  padding:0;
  list-style:none;   /* broj ispisujemo sami; <ol> ostaje zbog čitača */
  counter-reset:none;
}

.proces__korak{
  position:relative;
  z-index:1;         /* iznad linije toka */
  padding:var(--t-5);
  background:var(--t-surface);
  border:1px solid var(--t-line);
  border-radius:var(--t-r-md);
  transition:transform var(--t-m-slow) var(--t-ease-emph),
             background-color var(--t-m-slow) var(--t-ease-emph),
             border-color var(--t-m-slow) var(--t-ease-emph);
}

.proces__broj{
  display:block;
  margin-bottom:var(--t-2);
  font-family:var(--t-font-display);
  font-size:13px;
  font-weight:800;
  line-height:1;
  letter-spacing:var(--t-track-label);
  color:var(--t-b700);          /* 7.18 na bijelom */
  transition:color var(--t-m-slow) var(--t-ease-emph),
             background-color var(--t-m-slow) var(--t-ease-emph),
             border-color var(--t-m-slow) var(--t-ease-emph);
}

/* Omot je ostao poslije uklanjanja bedža 03.09.2026: korak sada ima
   samo naslov. Stoji zato što `flex` drži naslov na svojoj liniji bez
   obzira na to hoće li se ovdje jednog dana vratiti druga stavka.
   `margin-bottom` je 0 — bez opisa ispod bi visio prazan razmak. */
.proces__glava{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--t-2);
  margin-bottom:0;
}

.proces__naslov{
  margin:0;
  font-family:var(--t-font-display);
  font-size:16px;
  font-weight:700;
  font-stretch:calc(var(--t-wdth-title) * 1%);
  line-height:1.25;
  letter-spacing:var(--t-track-heading);
  color:var(--t-text);
}

/* ── Aktivno stanje ───────────────────────────────────────────
   Isto za hover, fokus i automatsko kretanje — jedno pravilo, da
   se tri puta ne razidu.                                       */
.proces__korak:hover,
.proces__korak:focus-visible,
.proces__korak.je-aktivan{
  background:var(--t-surface-emph);
  border-color:var(--t-b300);
  transform:scale(1.04);
}
.proces__korak:hover .proces__broj,
.proces__korak:focus-visible .proces__broj,
.proces__korak.je-aktivan .proces__broj{
  color:var(--t-b950);
}

/* ── Mobilno: vertikalna linija, brojevi na njoj ──────────────
   Ispod 768px. Linija ide uz lijevu ivicu, broj sjedi na njoj kao
   krug, kartica je odmaknuta udesno.                           */
@media (max-width:767.98px){
  .proces__lista{
    padding-left:56px;
  }
  /* Linija ne ide do samog dna — staje na sredini posljednjeg
     broja, jer poslije zadnjeg koraka nema ničega. */
  .proces__lista::before{
    content:"";
    position:absolute;
    z-index:0;
    left:19px;
    top:var(--t-5);
    bottom:calc(var(--t-5) + 20px);
    width:2px;
    background:var(--t-b300);
  }

  .proces__broj{
    position:absolute;
    left:-56px;
    top:var(--t-5);
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    margin:0;
    background:var(--t-surface);
    border:2px solid var(--t-b300);
    border-radius:var(--t-r-full);
  }

  .proces__korak.je-aktivan .proces__broj,
  .proces__korak:hover .proces__broj,
  .proces__korak:focus-visible .proces__broj{
    background:var(--t-b300);
    border-color:var(--t-b300);
  }

  /* Skaliranje bi kartu izvuklo preko broja na liniji. */
  .proces__korak:hover,
  .proces__korak:focus-visible,
  .proces__korak.je-aktivan{ transform:none; }
}

/* ── Tablet: dvije kolone ─────────────────────────────────────
   Bez linije toka. Serpentina na dvije kolone je više šuma nego
   informacije, a vertikalna linija ne opisuje raspored 2×4.    */
@media (min-width:768px){
  .proces__lista{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--t-5);
  }
}

/* ── Desktop: 4×2 sa serpentinom ──────────────────────────────
   Tok ide 1→4 udesno, prelama se nadolje i vraća 5→8 ULIJEVO.
   Zato korak 5 stoji ISPOD koraka 4, a ne ispod koraka 1 —
   linija bi inače opisivala put kojim se ne ide.

   Posljedica: vizuelni redoslijed drugog reda je 8 7 6 5 gledano
   slijeva. Tab prati DOM, dakle 5→6→7→8, što je isti put kojim
   ide i linija.                                                */
@media (min-width:1024px){
  .proces__lista{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    grid-template-rows:repeat(2, 1fr);
    gap:var(--t-6);
  }

  .proces__korak:nth-child(5){ grid-column:4; grid-row:2; }
  .proces__korak:nth-child(6){ grid-column:3; grid-row:2; }
  .proces__korak:nth-child(7){ grid-column:2; grid-row:2; }
  .proces__korak:nth-child(8){ grid-column:1; grid-row:2; }

  /* Vodoravni segmenti kroz sredinu svakog reda.
     Red je (100% − gap) / 2 visok; sredina prvog je četvrtina te
     razlike, sredina drugog tri četvrtine plus gap. */
  .proces__lista::before,
  .proces__lista::after{
    content:"";
    position:absolute;
    z-index:0;
    height:2px;
    background:var(--t-b300);
  }

  /* Krajeve računa templejt iz broja koraka — vidi proces.php.
     Bez toga linija visi preko praznog mjesta čim koraka nije osam. */
  .proces__lista::before{
    top:calc((100% - var(--t-6)) / 4);
    left:12.5%;
    right:var(--p-r1-desno, 12.5%);
  }
  .proces__lista::after{
    top:calc((100% - var(--t-6)) * 0.75 + var(--t-6));
    left:var(--p-r2-lijevo, 12.5%);
    right:12.5%;
  }

  .proces__lista--bez-r1::before{ display:none; }
  .proces__lista--bez-r2::after{ display:none; }
  .proces__lista--bez-preloma .proces__korak:nth-child(4)::after{ display:none; }

  /* Prelom nadolje — tačno u razmaku između koraka 4 i 5, koji su
     u istoj koloni. Zato je pseudo-element na četvrtoj kartici i
     počinje na njenoj donjoj ivici: ne prelazi preko nje. */
  .proces__korak:nth-child(4)::after{
    content:"";
    position:absolute;
    left:50%;
    top:100%;
    width:2px;
    height:var(--t-6);
    background:var(--t-b300);
    transform:translateX(-50%);
  }
}

/* ── Reduced motion ───────────────────────────────────────────
   Bez skaliranja. Aktivno stanje ostaje čitljivo — mijenja se
   pozadina i ivica, što je promjena stanja, ne kretanje.
   Automatsko kretanje gasi JS, ne CSS.                         */
@media (prefers-reduced-motion:reduce){
  .proces__korak,
  .proces__broj{ transition:none !important; }

  .proces__korak:hover,
  .proces__korak:focus-visible,
  .proces__korak.je-aktivan{ transform:none !important; }
}

/* ═══════════════════════════════════════════════════════════
   OBJAVE — „Šta je novo"

   Između Cjenovnika i Čestih pitanja, a oba su na --t-ground. Zato je
   ova na --t-surface-alt: bez toga bi tri sekcije zaredom bile na istoj
   podlozi i granica među njima bi nestala.

   Mreža je tri kartice u redu na desktopu i jedna na telefonu. Nema
   međukoraka od dvije: sa najviše tri kartice, dvije u redu i jedna
   ispod izgledaju kao da je treća zaostala.

   Nijedan amber piksel — oznaka tipa je navy bedž, dugme je tiho.
   ═══════════════════════════════════════════════════════════ */

.objave{
  background:var(--t-surface-alt);
  padding-block:var(--t-section-y);
}

.objave__mreza{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--t-4);
  margin:0;
  padding:0;
  list-style:none;
}

/* `align-content:start` unutar kartice: kartice u istom redu su iste
   visine (grid ih rasteže), pa kraći tekst ne smije da se razvuče po
   visini nego da ostane uz vrh. */
.objave__kartica{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--t-3);
  margin:0;
  padding:var(--t-5);
  background:var(--t-surface);
  border:1px solid var(--t-line);
  border-radius:var(--t-r-md);
}

/* Oznaka tipa i datum u istom redu. `align-items:center` jer je bedž
   viši od datuma, pa bi po osnovnoj liniji visio. */
.objave__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--t-3);
  margin:0;
}

/* Monospace i verzal-razmak — isto kao datum u traci za hitno i kao
   citat člana u Propisima. Datum je oznaka, ne rečenica.

   --t-text-2 je 7.78 preko bijele kartice; --t-text-3 bi bio 3.97 i
   pao bi AA. */
.objave__datum{
  font-family:var(--t-font-mono);
  font-size:var(--t-size-label);
  letter-spacing:var(--t-track-label);
  color:var(--t-text-2);
  white-space:nowrap;
}

.objave__naslov{
  margin:0;
  font-family:var(--t-font-display);
  font-size:17px;
  font-weight:700;
  font-stretch:calc(var(--t-wdth-title) * 1%);
  line-height:1.3;
  letter-spacing:var(--t-track-heading);
  color:var(--t-text);
}

/* Bez mjere u znakovima: kartica je već uska (oko 350px na desktopu),
   pa red nikad ne pređe udoban opseg. Druga granica unutar okvira bi
   napravila prazan hodnik uz desnu ivicu — vidi pravilo u DESIGN.md. */
.objave__tekst{
  margin:0;
  font-size:var(--t-size-small);
  line-height:var(--t-lh-body);
  color:var(--t-text-2);
}

/* Dugme ka arhivi. Poravnato lijevo, uz naslov sekcije — ne
   centrirano: naslov iznad stoji uz lijevu ivicu i vertikalna linija
   se ne prekida. */
.objave__vise{
  margin:var(--t-6) 0 0;
}

@media (min-width:768px){
  .objave__mreza{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:var(--t-5);
  }
}

/* ── Arhiva ───────────────────────────────────────────────────
   Ista kartica kao na naslovnoj, samo bez ograničenja na tri. Podloga
   je --t-ground jer arhiva nema sekciju iznad ni ispod sebe sa kojom
   bi se smjenjivala — bijela kartica na svijetloj podlozi je dovoljna
   razlika.                                                       */
.objave-arhiva{
  background:var(--t-ground);
  padding-block:var(--t-section-y);
}

/* Istekla objava ostaje čitljiva, samo nije više vijest.

   Boja je --t-text-2, ne --t-text-3. Tercijar bi bio logičan izbor za
   sporednu oznaku, ali je preko bijele kartice IZMJERENO 3.97 i pada
   AA; --t-text-2 je 7.76. Razliku ovdje nosi riječ, ne blijeda boja.

   Ne gasi se ni providnošću — providan tekst obara kontrast na
   vrijednost koja se ne može izmjeriti unaprijed. */
.objave__isteklo{
  font-size:var(--t-size-label);
  letter-spacing:var(--t-track-label);
  text-transform:uppercase;
  color:var(--t-text-2);
  white-space:nowrap;
}

.objave-arhiva__prazno{
  margin:var(--t-6) 0 0;
  font-size:var(--t-size-body-lg);
  color:var(--t-text-2);
}

.objave-arhiva__strane{
  margin:var(--t-7) 0 0;
}
.objave-arhiva__strane ul{
  display:flex;
  flex-wrap:wrap;
  gap:var(--t-3);
  margin:0;
  padding:0;
  list-style:none;
}

.objave-arhiva__nazad{
  margin:var(--t-7) 0 0;
}

@media (min-width:768px){
  .objave__mreza--arhiva{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (min-width:1024px){
  .objave__mreza--arhiva{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}


/* ═══════════════════════════════════════════════════════════
   ČESTA PITANJA
   ═══════════════════════════════════════════════════════════ */

.faq{
  background:var(--t-ground);
  padding-block:var(--t-section-y);
}

/* Ograničeno na 820px — odgovor preko cijele širine kontejnera bio
   bi red od preko sto znakova. Kolona je centrirana, naslov sekcije
   iznad nje ostaje uz lijevu ivicu (vidi pravilo na vrhu fajla). */
.faq__lista{
  display:grid;
  gap:var(--t-3);
  max-width:var(--t-col-narrow);
  margin-inline:auto;
}

.faq__stavka{
  background:var(--t-surface);
  border:1px solid var(--t-line);
  border-radius:var(--t-r-md);
  /* Da pozadina otvorenog summaryja poštuje zaobljenje kartice. */
  overflow:hidden;
}

/* ── Pitanje ──────────────────────────────────────────────────
   Podrazumijevani marker se gasi na tri načina jer ga tri motora
   crtaju različito: `list-style` (Firefox), `::-webkit-details-marker`
   (stariji WebKit) i `::marker` (današnji standard).            */
.faq__pitanje{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--t-4);
  padding:var(--t-4);
  font-family:var(--t-font-display);
  font-size:16px;
  font-weight:700;
  font-stretch:calc(var(--t-wdth-title) * 1%);
  line-height:1.3;
  letter-spacing:var(--t-track-heading);
  color:var(--t-text);
  cursor:pointer;
  list-style:none;
  transition:background-color var(--t-m-fast) var(--t-ease);
}
.faq__pitanje::-webkit-details-marker{ display:none; }
.faq__pitanje::marker{ content:""; }

/* Prsten fokusa se crta UNUTRA, ne izvan.
   Kartica ima `overflow:hidden` zbog zaobljenja, pa bi ga podrazumijevani
   `outline-offset:2px` iz base.css izgurao van i kartica bi ga odsjekla —
   ostala bi vidljiva samo donja ivica. Negativan offset ga vraća unutar
   summaryja: ista debljina, ista boja, cijeli vidljiv. */
.faq__pitanje:focus-visible{ outline-offset:-3px; }

.faq__pitanje:hover{ background:var(--t-surface-alt); }

/* ── Znak + / − ───────────────────────────────────────────────
   Dvije crte, ne tekstualni karakter: „+" i „−" se razlikuju po
   širini i po visini osnovne linije od fonta do fonta, pa bi znak
   poskakivao pri promjeni stanja.                               */
.faq__znak{
  position:relative;
  flex:0 0 auto;
  width:18px;
  height:18px;
}
.faq__znak::before,
.faq__znak::after{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  width:100%;
  height:2px;
  margin-top:-1px;
  /* b700, ne b600: b600 je 4.76/4.41/4.48 i pada prag od 4.8 na dvije
     od tri svijetle podloge. Znak nije tekst, ali ide istim putem kao
     sve ostalo plavo na svijetlom — pravilo bez izuzetaka. Isti znak
     nosi i sekcija Propisi, pa boja mora biti ista na oba mjesta.
     Vidi tokens.css, blok tvrdih pravila. */
  background:var(--t-b700);
  border-radius:var(--t-r-full);
  transition:transform var(--t-m-base) var(--t-ease);
}
/* Uspravna crta se skuplja u ništa — plus postaje minus. */
.faq__znak::after{ transform:rotate(90deg); }
.faq__stavka[open] .faq__znak::after{ transform:rotate(90deg) scaleX(0); }

/* ── Otvoreno stanje ──────────────────────────────────────── */
.faq__stavka[open] > .faq__pitanje{
  background:var(--t-surface-alt);
  border-bottom:1px solid var(--t-line);
}

/* ── Odgovor ──────────────────────────────────────────────── */
.faq__odgovor{
  padding:var(--t-4);
}
/* BEZ mjere — puna širina kartice. Svjesna odluka klijenta, ne
   propust: vidio je oba stanja i prazan hodnik uz desnu ivicu mu je
   smetao više nego dug red.

   Za zapisnik: red ovdje ide oko 104 znaka, iznad udobnog opsega od
   45–75. NE „popravljaj" nazad na mjeru bez pitanja — vidi DESIGN.md,
   Layout, gdje je izuzetak zapisan sa razlogom. */
.faq__odgovor p{
  margin:0;
  color:var(--t-text-2);
}

/* ── Desktop ──────────────────────────────────────────────── */
@media (min-width:768px){
  .faq__pitanje{ padding:var(--t-4) var(--t-5); }
  .faq__odgovor{ padding:var(--t-5); }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .faq__pitanje,
  .faq__znak::before,
  .faq__znak::after{ transition:none !important; }
}

/* ═══════════════════════════════════════════════════════════
   GALERIJA
   ═══════════════════════════════════════════════════════════ */

.galerija{
  /* Fokus na tamnoj podlozi — ista uloga, svjetlija boja. */
  --t-focus:var(--t-b300);

  background:var(--t-surface-dark);
  padding-block:var(--t-section-y);
}

.galerija__eyebrow{ color:var(--t-b300); }
.galerija__naslov{ color:var(--t-n0); }

.galerija__uvod{
  margin:0 0 var(--t-7);
  max-width:var(--t-measure);
  font-size:var(--t-size-body-lg);
  color:var(--t-b200);
}

/* Omot postoji zbog strelica — one moraju biti sestre trake, ne
   njena djeca, jer bi dijete skrol kontejnera otplovilo zajedno sa
   slikama. U mreži je ovo običan blok koji ništa ne mijenja. */
.galerija__traka{ position:relative; }

/* Strelice pravi JS i samo dok je traka traka. Ovo je pojas i
   naramenice: da se ne pojave ni u jednom kadru ako se ekran
   proširi prije nego JS stigne da ih ukloni. */
.galerija__strelica{ display:none; }

/* ── Mreža ────────────────────────────────────────────────────
   `align-items:start` je obavezan: mjesta u istom redu imaju
   različite odnose stranica, pa bi ih rastezanje na visinu reda
   poništilo `aspect-ratio` i kadar bi se promijenio čim slika
   stigne. Bolje neujednačen red nego pomjeranje kasnije.       */
.galerija__mreza{
  display:grid;
  grid-template-columns:1fr;
  align-items:start;
  gap:var(--t-4);
}

.galerija__stavka{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:var(--t-r-md);
}

/* ── Placeholder ──────────────────────────────────────────── */
.galerija__stavka--prazna{
  background:var(--t-b900);
  border:1px dashed var(--t-b700);
}

.galerija__prazno{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--t-2);
  width:100%;
  height:100%;
  padding:var(--t-4);
  text-align:center;
}

.galerija__ikona{
  width:32px;
  height:32px;
  color:var(--t-b600);
  flex:0 0 auto;
}

/* b400 na b900 je 4.89 — na TAMNOJ podlozi prolazi AA.
   Zabrana iz tokens.css tiče se b400 na bijelom (2.75). */
.galerija__opis-praznog{
  font-size:var(--t-size-small);
  line-height:1.35;
  color:var(--t-b400);
}

/* ── Slika ────────────────────────────────────────────────── */
.galerija__okidac{
  display:block;
  width:100%;
  height:100%;
  padding:0;
  background:none;
  border:0;
  cursor:zoom-in;
}
.galerija__okidac img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--t-m-base) var(--t-ease);
}
.galerija__okidac:hover img,
.galerija__okidac:focus-visible img{ transform:scale(1.03); }

/* ── Lightbox ─────────────────────────────────────────────── */
.galerija__dialog{
  width:min(92vw, 1200px);
  max-width:none;
  max-height:92vh;
  padding:0;
  background:none;
  border:0;
  overflow:visible;
}
.galerija__dialog::backdrop{
  background:rgba(6, 30, 69, .92);
}

/* `width:auto` je namjerno, ne `100%`.
   Sa `width:100%` element slike pokriva cijelu širinu dijaloga, pa
   prazni pojasevi lijevo i desno od kadra i dalje pripadaju <img>.
   Klik tamo tada ne pogađa dijalog i „klik van slike zatvara" ostaje
   bez površine. Ovako se element skupi na stvarni kadar.        */
.galerija__velika{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:82vh;
  margin-inline:auto;
  border-radius:var(--t-r-md);
}

.galerija__natpis{
  margin:var(--t-3) 0 0;
  text-align:center;
  font-size:var(--t-size-small);
  color:var(--t-b200);
}

.galerija__zatvori{
  position:absolute;
  top:calc(var(--t-5) * -1);
  right:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0;
  background:var(--t-b950);
  color:var(--t-n0);
  border:1px solid var(--t-b600);
  border-radius:var(--t-r-full);
  cursor:pointer;
  transition:background-color var(--t-m-base) var(--t-ease);
}
.galerija__zatvori:hover,
.galerija__zatvori:focus,
.galerija__zatvori:active{
  background:var(--t-b800);
  color:var(--t-n0);
}
.galerija__zatvori svg{ width:22px; height:22px; }

/* ── Tablet: dvije jednake kolone ─────────────────────────── */
@media (min-width:768px){
  .galerija__mreza{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* ── Desktop: 12 kolona ───────────────────────────────────────
   Rasponi po redovima: 5+7, 6+6, 4+8 — svaki red daje tačno 12,
   pa automatsko slaganje samo od sebe pravi tri reda.

   Rasponi nisu proizvoljni: bira ih odnos stranica, da dvije slike u
   istom redu ispadnu približno iste visine. Visina je širina podijeljena
   odnosom, pa 4:3 uz 16:9 traži 5+7 (353 i 370 px), dva 4:3 traže 6+6,
   a uspravni 3:4 uz 4:3 traži 4+8 (501 i 564 px). Sa `align-items:start`
   nejednak red nije greška, ali ovako ga skoro i nema.

   Promijeni li se neka slika, promijeni i raspon — inače red ostane
   ragav a niko ne zna zašto.                                     */
@media (min-width:1024px){
  .galerija__mreza{
    grid-template-columns:repeat(12, minmax(0, 1fr));
  }
  .galerija__stavka:nth-child(1){ grid-column:span 5; }
  .galerija__stavka:nth-child(2){ grid-column:span 7; }
  .galerija__stavka:nth-child(3){ grid-column:span 6; }
  .galerija__stavka:nth-child(4){ grid-column:span 6; }
  .galerija__stavka:nth-child(5){ grid-column:span 4; }
  .galerija__stavka:nth-child(6){ grid-column:span 8; }
}

/* ── Telefon: vodoravna traka ─────────────────────────────────
   Uslov nije samo širina. Telefon u pejzažu je oko 844×390 — po
   širini je to iznad praga od 768px, pa bi dobio desktop mrežu, a
   pejzaž je upravo položaj zbog kojeg traka i postoji. Drugi uslov
   ga hvata sa druge strane: mala visina uz grub pokazivač.

   `pointer:coarse` stoji da nizak prozor na desktopu ostane mreža.
   Razlika nije u obliku prozora nego u ruci: prst traku prevlači,
   miš je ne prevlači nego traži gdje da klikne.

   Blok mora stajati POSLIJE mreža na 768 i 1024 — specifičnost je
   ista, pa odlučuje redoslijed u fajlu.

   Traka je običan skrol kontejner, ne karusel na `transform`.
   Time swipe, inercija, tastatura i čitači ekrana rade sami od
   sebe, a strelice i automatsko pomjeranje kasnije samo pozivaju
   `scrollBy()` — nema drugog, paralelnog stanja koje bi se moglo
   raziću sa stvarnim položajem trake.                          */
@media (max-width:767.98px),
       (max-height:500px) and (pointer:coarse){
  /* Visinu bira tjesnija strana ekrana. `46vw` drži najširu karticu
     (16/9) na oko 82% širine, pa sljedeća proviruje; `46vh` preuzima
     u pejzažu, gdje granica postaje visina, a ne širina; 220px je
     gornja granica za velike telefone.

     Stoji na omotu, ne na traci: nasljeđuje se naniže, pa istu mjeru
     vide i kartice u traci i strelice koje su traci sestre. */
  .galerija__traka{ --galerija-traka-h:min(46vw, 46vh, 220px); }

  .galerija__mreza{
    display:flex;
    gap:var(--t-4);

    /* Isti postupak kao buket u „O nama": negativne margine vuku
       traku do ivica ekrana da se vidi da ima još sadržaja desno,
       padding vraća prvu karticu u liniju sa tekstom, a
       scroll-padding pomjera i samu tačku lijepljenja — bez njega
       bi je snap zalijepio za ivicu skrolporta i poništio padding. */
    width:auto;
    margin-inline:calc(var(--t-container-pad) * -1);
    padding-inline:var(--t-container-pad);
    scroll-padding-inline:var(--t-container-pad);

    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }

  /* Jednaka visina, prirodna širina prema odnosu stranica slike.
     Visina je definitna, pa `aspect-ratio` sa inline stila sam
     prenosi mjeru na širinu — zato `width:auto` i `flex:0 0 auto`.
     Bilo kakav fiksan flex-basis bi odnos poništio i kadar bi se
     sjekao, a mjesto već drži tačan oblik za sliku koja stiže. */
  .galerija__stavka{
    flex:0 0 auto;
    width:auto;
    height:var(--galerija-traka-h);
    scroll-snap-align:start;
  }

  /* Kartica u traci je uža nego u mreži, pa opis praznog mjesta
     dobija uži padding — inače mu ostane oko 110px za četiri reda
     teksta. */
  .galerija__prazno{ padding:var(--t-3); }

  /* ── Strelice ───────────────────────────────────────────────
     Na dodiru su tehnički suvišne jer swipe radi — ali kažu da
     traka klizi prije nego korisnik uopšte pokuša.

     Podloga je ista kao na dugmetu za zatvaranje lightboxa: --t-b950
     sa bijelom, 16.41. Mora se vidjeti preko svake fotografije, pa
     ide i obod — bez njega bi se tamna dugmad izgubila na tamnom
     kadru. Ambera ovdje nema: on ima svoje jedno mjesto.

     Vodoravno stoje na ivici tekstualne kolone, pa preklapaju prvu
     odnosno posljednju vidljivu karticu. Uspravno ih centrira
     visina kartice — omot ne sadrži ništa osim trake.            */
  .galerija__strelica{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:2;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    padding:0;

    background:var(--t-b950);
    color:var(--t-n0);
    border:1px solid var(--t-b600);
    border-radius:var(--t-r-full);
    cursor:pointer;
    transition:background-color var(--t-m-base) var(--t-ease);
  }

  .galerija__strelica--nazad{ left:0; }
  .galerija__strelica--naprijed{ right:0; }

  .galerija__strelica svg{
    width:20px;
    height:20px;
    flex:0 0 auto;
  }

  .galerija__strelica:hover,
  .galerija__strelica:active{ background:var(--t-b800); }

  /* Na kraju trake strelica se ONEMOGUĆAVA, ne sakriva: dugme koje
     nestane pomjera raspored pod prstom. Prigušuje se strelica, ne
     cijelo dugme — --t-b400 na --t-b950 je 5.96, pa se i ugašeno
     stanje i dalje čita. */
  .galerija__strelica[disabled]{
    color:var(--t-b400);
    border-color:var(--t-b800);
    cursor:default;
  }
  .galerija__strelica[disabled]:hover{ background:var(--t-b950); }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .galerija__mreza{ scroll-behavior:auto !important; }
  .galerija__okidac img{ transition:none !important; }
  .galerija__okidac:hover img,
  .galerija__okidac:focus-visible img{ transform:none !important; }
}

/* ═══════════════════════════════════════════════════════════
   PRAVNA REGULATIVA

   Šest kartica, sve sklopljene na učitavanju. Bez modala.

   Izgled i ponašanje su preuzeti iz Čestih pitanja i tamo im je
   izvor: ista širina i centriranje, isti radijus i ivica, isti
   razmaci, isti znak plus/minus, ista svijetloplava pozadina
   zaglavlja kad je kartica otvorena. Razlikuju se samo po sadržaju.

   Ako se ove dvije sekcije negdje raziđu u sitnici, mijenja se OVA,
   ne FAQ.

   Jedina namjerna razlika je struktura zaglavlja: ovdje u summaryju
   stoje naslov I kratak odgovor, jedan ispod drugog, pa je znak
   poravnat sa prvim redom (`align-items:flex-start`), a ne sa
   sredinom. U FAQ-u je u summaryju samo pitanje, u jednom redu.

   Nijedan amber piksel u ovoj sekciji — amber ima jedno mjesto i
   nijedno nije ovdje.
   ═══════════════════════════════════════════════════════════ */

.pravna{
  background:var(--t-ground);
  padding-block:var(--t-section-y);
}

.pravna__uvod{
  margin:0 0 var(--t-7);
  max-width:var(--t-measure);
  font-size:var(--t-size-body-lg);
  color:var(--t-text-2);
}

/* Jedna kolona, centrirana, iste širine kao FAQ lista — isti token,
   ne prepisan broj. Otvaranje kartice pomjera samo ono ispod nje. */
.pravna__mreza{
  display:grid;
  gap:var(--t-3);
  max-width:var(--t-col-narrow);
  margin-inline:auto;
}

.pravna__kartica{
  background:var(--t-surface);
  border:1px solid var(--t-line);
  border-radius:var(--t-r-md);
  /* Da pozadina otvorenog zaglavlja poštuje zaobljenje kartice. */
  overflow:hidden;
}

/* ── Zaglavlje ────────────────────────────────────────────────
   Marker se gasi na tri načina jer ga tri motora crtaju različito:
   `list-style` (Firefox), `::-webkit-details-marker` (stariji
   WebKit) i `::marker` (današnji standard).

   Padding je na zaglavlju, ne na kartici: pozadina otvorenog stanja
   mora da ide od ivice do ivice, kao u FAQ-u.                   */
.pravna__zaglavlje{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--t-4);
  padding:var(--t-4);
  cursor:pointer;
  list-style:none;
  transition:background-color var(--t-m-fast) var(--t-ease);
}
.pravna__zaglavlje::-webkit-details-marker{ display:none; }
.pravna__zaglavlje::marker{ content:""; }

/* Prsten fokusa se crta UNUTRA — kartica ima `overflow:hidden` zbog
   zaobljenja, pa bi ga podrazumijevani `outline-offset:2px` izgurao
   van i kartica bi ga odsjekla. Isto rješenje kao u FAQ-u. */
.pravna__zaglavlje:focus-visible{ outline-offset:-3px; }

.pravna__zaglavlje:hover{ background:var(--t-surface-alt); }

.pravna__kartica[open] > .pravna__zaglavlje{
  background:var(--t-surface-alt);
  border-bottom:1px solid var(--t-line);
}

/* Naslov i kratak odgovor su jedna cjelina lijevo, znak desno. */
.pravna__glava{
  min-width:0;
}

.pravna__naslov{
  margin:0;
  font-family:var(--t-font-display);
  font-size:16px;
  font-weight:700;
  font-stretch:calc(var(--t-wdth-title) * 1%);
  line-height:1.3;
  letter-spacing:var(--t-track-heading);
  color:var(--t-text);
}

/* Kratak odgovor stoji u summaryju, odmah ispod naslova. Podebljan
   je jer je on odgovor — lista ispod je izvor, ne odgovor. */
.pravna__vodi{
  margin:var(--t-2) 0 0;
  font-size:var(--t-size-small);
  font-weight:700;
  line-height:var(--t-lh-body);
  color:var(--t-text);
}

/* ── Znak + / − ───────────────────────────────────────────────
   Isti kao u FAQ-u: dvije crte, ne tekstualni karakter — „+" i „−"
   se razlikuju po širini i osnovnoj liniji od fonta do fonta, pa bi
   znak poskakivao pri promjeni stanja.

   `margin-top` ga poravnava sa PRVIM redom naslova, ne sa sredinom
   bloka: zaglavlje je `align-items:flex-start`, a bez pomaka bi znak
   sjedio uz vrh velikih slova umjesto uz njihovu sredinu.        */
.pravna__znak{
  position:relative;
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin-top:2px;
}
.pravna__znak::before,
.pravna__znak::after{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  width:100%;
  height:2px;
  margin-top:-1px;
  background:var(--t-b700);
  border-radius:var(--t-r-full);
  transition:transform var(--t-m-base) var(--t-ease);
}
/* Uspravna crta se skuplja u ništa — plus postaje minus. */
.pravna__znak::after{ transform:rotate(90deg); }
.pravna__kartica[open] .pravna__znak::after{ transform:rotate(90deg) scaleX(0); }

/* ── Tijelo ───────────────────────────────────────────────── */
.pravna__telo{
  padding:var(--t-4);
}

.pravna__lista{
  display:grid;
  gap:var(--t-3);
  margin:0;
  padding:0 0 0 var(--t-4);
}

.pravna__lista li{
  margin:0;
  font-size:var(--t-size-small);
  line-height:var(--t-lh-body);
  color:var(--t-text-2);
}
/* b700 je 7.18 preko bijele kartice, b300 bi bio 1.93. Marker nije
   tekst i AA se na njega ne odnosi, ali ide istim putem kao i sve
   ostalo plavo na svijetloj podlozi — pravilo bez izuzetaka. */
.pravna__lista li::marker{ color:var(--t-b700); }

/* Citat člana ide na kraj stavke, u svom redu. Monospace da se broj
   ne miješa sa tekstom — citat, ne rečenica. Bez kurziva.

   Boja je --t-text-2, ne --t-text-3: tercijar je preko bijele
   kartice 3.97 i pada AA. --t-text-2 je 7.78. */
.pravna__izvor{
  display:block;
  margin-top:2px;
  font-family:var(--t-font-mono);
  font-size:var(--t-size-label);
  line-height:1.4;
  color:var(--t-text-2);
}

/* Spisak propisa ispod mreže. Razrješava skraćenice iz stavki.

   Prati mrežu: ista širina, isto centriranje. Bez mjere u znakovima
   — ovo nije proza nego spisak, i prelama se PO PROPISIMA. Svaki
   propis je u svom `.recenica`, pa tačka koja ih razdvaja pada na
   kraj reda umjesto usred naziva. */
.pravna__propisi{
  max-width:var(--t-col-narrow);
  margin:var(--t-6) auto 0;
  font-size:var(--t-size-label);
  line-height:1.6;
  color:var(--t-text-2);
}

.pravna__propisi .recenica{
  display:block;
}
.pravna__propisi .recenica + .recenica{
  margin-top:var(--t-1);
}

/* ── Desktop ──────────────────────────────────────────────────
   Iste vrijednosti kao u FAQ-u.                                */
@media (min-width:768px){
  .pravna__zaglavlje{ padding:var(--t-4) var(--t-5); }
  .pravna__telo{ padding:var(--t-5); }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .pravna__zaglavlje,
  .pravna__znak::before,
  .pravna__znak::after{ transition:none !important; }
}

/* ═══════════════════════════════════════════════════════════
   NAŠ TIM

   Mreža od četiri mjesta: desktop 4 u redu, tablet 2, telefon 1.
   Popunjena su dva, i to je namjerno — prazna mjesta se ne pune
   izmišljenim ljudima.

   Kartica ima dva dijela: lice u odnosu 4:5 i tekst ispod. Odnos je
   isti kao kod portreta iz spiska za snimanje, pa fotografija ulazi
   na mjesto monograma bez diranja rasporeda.

   Nijedan amber piksel u ovoj sekciji.
   ═══════════════════════════════════════════════════════════ */

.tim{
  background:var(--t-surface-alt);
  padding-block:var(--t-section-y);
}

.tim__uvod{
  margin:0 0 var(--t-7);
  max-width:var(--t-measure);
  font-size:var(--t-size-body-lg);
  color:var(--t-text-2);
}

/* `align-items:stretch` je podrazumijevano i ovdje je i potrebno:
   kartice u istom redu moraju biti iste visine bez obzira na dužinu
   biografije. Lice je fiksnog odnosa, pa se razlika skuplja u tekstu. */
.tim__mreza{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--t-5);
  margin:0;
  padding:0;
  list-style:none;
}

.tim__kartica{
  display:flex;
  flex-direction:column;
  margin:0;
}

/* ── Lice ─────────────────────────────────────────────────────
   4:5 uspravno. Isti odnos i za monogram i za pločicu „uskoro", pa
   su kartice iste visine i istog odnosa stranica.                */
.tim__lice{
  display:grid;
  place-items:center;
  aspect-ratio:4 / 5;
  width:100%;
  padding:var(--t-4);
  border-radius:var(--t-r-md);
  overflow:hidden;
}

/* Navy polje sa bijelim inicijalima — 16.5, AAA. */
.tim__lice--monogram{
  background:var(--t-b950);
}

.tim__inicijali{
  font-family:var(--t-font-display);
  font-size:clamp(48px, 7vw, 72px);
  font-weight:800;
  font-stretch:calc(var(--t-wdth-hero) * 1%);
  line-height:1;
  letter-spacing:var(--t-track-heading);
  color:var(--t-n0);
}

/* Fotografija umjesto monograma. MORA stajati POSLIJE `.tim__lice`:
   ista specifičnost (jedna klasa), pa odlučuje redoslijed u fajlu — a
   `.tim__lice` nosi `padding:var(--t-4)`, koji bi slici napravio okvir
   od 16px unutar zaobljenog ugla.

   `object-fit:cover` sa `aspect-ratio:4/5` sa roditelja: kadar je već
   izrezan u 4:5 pri obradi, pa cover ovdje samo hvata zaokruživanje na
   pola piksela i ne siječe ništa vidljivo.                          */
.tim__lice--foto{
  padding:0;
  background:var(--t-b100);
}

.tim__lice--foto img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Pravila za pločicu „uskoro" stoje iako pločica od 03.09.2026 nije u
   markupu: mreža je puna. Ostaju jer se četvrta kartica („dr") još može
   vratiti na pločicu dok ne stigne ime — vidi nas-tim.php, nalaz N15.
   Ako se to ne desi, brišu se zajedno sa `.tim__kartica--uskoro`,
   `.tim__uskoro` i `.tim__napomena`.                                */

/* Pločica „uskoro" — b100 sa navy tekstom, 13.9, AAA.
   Bez ivice i bez ikone, kako je dogovoreno. */
.tim__lice--uskoro{
  background:var(--t-b100);
}

.tim__uskoro{
  margin:0;
  font-family:var(--t-font-display);
  font-size:var(--t-size-h3);
  font-weight:800;
  font-stretch:calc(var(--t-wdth-title) * 1%);
  line-height:1.25;
  letter-spacing:var(--t-track-heading);
  text-align:center;
  text-wrap:balance;
  color:var(--t-b950);
}

/* ── Tekst ────────────────────────────────────────────────── */
.tim__telo{
  padding-top:var(--t-4);
}

.tim__ime{
  margin:0 0 var(--t-1);
  font-family:var(--t-font-display);
  font-size:var(--t-size-h3);
  font-weight:800;
  font-stretch:calc(var(--t-wdth-title) * 1%);
  line-height:1.2;
  letter-spacing:var(--t-track-heading);
  color:var(--t-text);
}

.tim__uloga{
  margin:0;
  font-size:var(--t-size-small);
  font-weight:700;
  color:var(--t-b700);          /* 6.75 preko surface-alt */
}

.tim__zvanje{
  margin:0;
  font-size:var(--t-size-small);
  color:var(--t-text-2);
}

/* Prva rečenica biografije. Nosi je sama, pa je navy a ne siva. */
.tim__uvodna{
  margin:var(--t-3) 0 0;
  font-size:var(--t-size-small);
  line-height:var(--t-lh-body);
  font-weight:700;
  color:var(--t-text);
}

/* Spisak umjesto pasusa: četiri činjenice koje se čitaju odvojeno.
   `text-wrap:pretty` sprječava usamljenu riječ u posljednjem redu.

   Poravnanje NIJE obostrano i ne treba da bude: u koloni od 320px, sa
   dugim crnogorskim riječima, `justify` pravi rijeke bijelog i
   razmake između riječi koji skaču iz reda u red. `pretty` daje isti
   utisak sređenosti bez te štete. */
.tim__stavke{
  margin:var(--t-3) 0 0;
  padding:0 0 0 var(--t-4);
  list-style:disc;
  font-size:var(--t-size-small);
  line-height:var(--t-lh-body);
  color:var(--t-text-2);
  text-wrap:pretty;
}

.tim__stavke li{
  margin:0 0 var(--t-2);
}
.tim__stavke li:last-child{ margin-bottom:0; }
.tim__stavke li::marker{ color:var(--t-b700); }


/* Njegova rečenica, u prvom licu. Odvojena od biografije uvlakom i
   navodnicima, ne okvirom — okvir bi je pretvorio u citat sa strane,
   a ona je dio kartice. Navy umjesto sekundarne sive jer je to jedini
   dio kartice koji ne dokazuje stručnost i baš zato radi.

   BEZ kurziva: dijakritika u kurzivu se na 15px teže čita, a Š Ž Č Ć Đ
   su ovdje u svakoj drugoj riječi. */
.tim__rijec{
  margin:var(--t-4) 0 0;
  padding-left:var(--t-3);
  border:0;
}

.tim__rijec p{
  margin:0;
  font-size:var(--t-size-small);
  line-height:var(--t-lh-body);
  color:var(--t-text);
  text-wrap:pretty;
}

.tim__napomena{
  margin:0;
  font-size:var(--t-size-small);
  color:var(--t-text-2);
}

/* Kartica bez portreta stoji u istom redu i zato je iste visine kao ona
   sa portretom — ne skraćuje se i ne izuzima iz poravnanja. Ali višak
   visine ne smije sav da padne ispod napomene: tijelo se rasteže na
   ostatak i centrira napomenu u njemu, pa je praznina jednaka iznad i
   ispod nje. Isti princip kao kod praznih kolona u mreži — simetrična
   praznina je odluka, sva praznina na jednoj strani je greška.

   Pločica ostaje na vrhu, poravnata sa monogramom: dvije slike u istom
   redu moraju da počinju na istoj liniji, pa se centrira sadržaj ISPOD
   nje, a ne cijela kartica.

   `padding-block` umjesto zatečenog `padding-top` — sa razmakom samo
   odozgo centriranje bi ispalo 16px niže nego što treba. */
.tim__kartica--uskoro .tim__telo{
  flex:1;
  display:flex;
  align-items:center;
  padding-block:var(--t-4);
}

/* ── Tablet: dvije kolone ─────────────────────────────────── */
@media (min-width:600px){
  .tim__mreza{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* ── Desktop: centrirana traka kartica ────────────────────
   Grid ovdje ne radi posao. Četiri eksplicitne kolone drže svoju
   širinu i kad su prazne, pa se popunjene kartice skupe uz lijevu
   ivicu a sav višak ostane desno — to izgleda kao greška, ne kao
   odluka. Flex sa `wrap` broji samo ono što postoji, a
   `justify-content:center` dijeli višak na obje strane.

   OSNOVA JE 260px, NE 320px, i to je bitno. Ovdje je ranije stajalo
   `flex:0 1 320px` uz komentar da će se četiri kartice „same svesti na
   oko 266px i stati u jedan red". Ne svedu se. Flex sa `wrap` prvo
   provjerava da li stavke stanu u red PO SVOJOJ OSNOVI, pa tek onda
   skuplja ono što je u redu ostalo. Sa osnovom od 320px tri kartice
   stanu (3 × 320 + 2 × 24 = 1008 ≤ 1136), četvrta se prelomi u novi
   red, i tada u prvom redu nema šta da se skuplja. Izmjereno: 3+1.

   Sa osnovom od 260px sve četiri stanu (4 × 260 + 3 × 24 = 1112 ≤
   1136) i onda `flex-grow` raširi svaku na 266px. `max-width` drži
   gornju granicu, pa kad kartica bude manje — dvije ili tri — ne
   razvuku se preko 320px, nego ostanu centrirane kao i do sada.     */
@media (min-width:768px){
  .tim__mreza{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:var(--t-5);
  }
  .tim__kartica{
    flex:1 1 260px;
    max-width:320px;
  }
}