/* jasnarilovic.com — V6 dopuna.
   Učitava se ODMAH IZA stil.css pa ga nadjačava tamo gdje se preklapaju. Ne
   diramo stil.css: ovo su isključivo NOVE komponente (video player, 3D mockup
   knjige, kartice ponude, obrasci) po istoj vizualnoj gramatici — iste CSS
   varijable, ista ljestvica razmaka (rem/clamp), isti radijus (--radius,
   --radius-mali), ista pravila fokusa i dodirne mete (44px+).

   Sve nove boje su nijanse izvedene iz postojećih varijabli (color-mix), ne
   nove vrijednosti — paleta ostaje navy/slate/teal iz stil.css. */

/* ============================================================
   1) VIDEO PLAYER
   <div class="video-player"><video class="video-player__video" …></video></div>
   Isti tretman kao .foto (radijus, pozadina dok se ne učita), ali s omjerom
   16:9 fiksiranim preko aspect-ratio da nema skoka rasporeda, i blagom sjenom
   (dopuštena iznimka, kao .knjiga__foto — video je "predmet" na plohi). */
.video-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--mist-deep);
  box-shadow: 0 16px 34px -20px rgba(11, 18, 32, 0.5);
}
.video-player__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--navy-deep);
}
/* Fokus na sam <video> element (tipkovnička navigacija do kontrola).
   Ide na :focus, ne samo :focus-visible — Chrome kod <video controls> ne
   proglašava fokus „vidljivim", pa bi ga globalno pravilo
   `:focus:not(:focus-visible) { outline: none }` iz stil.css ugasilo i Tab bi
   prošao kroz player bez ijednog traga. Odmak je negativan jer .video-player
   reže sadržaj (overflow: hidden) i vanjski bi obrub nestao. */
.video-player__video:focus {
  outline: 3px solid var(--focus);
  outline-offset: -3px;
  border-radius: var(--radius);
}

@media (max-width: 700px) {
  .video-player { width: 100%; border-radius: var(--radius-mali); }
}

/* ============================================================
   2) 3D MOCKUP KNJIGE
   <div class="knjiga3d"><div class="knjiga3d__blok">
     <img class="knjiga3d__korice" …><span class="knjiga3d__hrbat" aria-hidden="true"></span>
   </div></div>
   Isti dojam kao .knjiga__foto (jedina druga sjena na stranici) ali s
   perspektivom: korice su nagnute kao da knjiga stoji na polici, hrbat je
   uži element uz lijevi rub koji glumi dubinu. */
.knjiga3d {
  perspective: 1400px;
  width: 100%;
  max-width: 100%;
  padding: 1rem clamp(1.5rem, 4vw, 3rem) 2.2rem;
}
.knjiga3d__blok {
  position: relative;
  max-width: 100%;
  transform-style: preserve-3d;
  transform: rotateY(-18deg) rotateX(1deg);
  transition: transform 0.4s ease;
  filter: drop-shadow(0 26px 30px rgba(11, 18, 32, 0.38));
}
.knjiga3d:hover .knjiga3d__blok,
.knjiga3d:focus-within .knjiga3d__blok {
  transform: rotateY(-8deg) rotateX(0deg);
}
.knjiga3d__korice {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 0 2px 2px 0;
  background: var(--mist-deep);
}
/* Hrbat: uski trak uz lijevi rub korica, tamniji ton iste navy palete,
   rotiran u dubinu (translateZ + rotateY) da izgleda kao rub stranica. */
.knjiga3d__hrbat {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(14px, 4%, 26px);
  height: 100%;
  background: linear-gradient(90deg, var(--navy-deep), var(--navy-soft));
  transform-origin: left center;
  transform: rotateY(90deg) translateZ(calc(clamp(14px, 4%, 26px) / -2));
  border-radius: 2px 0 0 2px;
}
.knjiga3d__blok:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .knjiga3d__blok {
    transition: none;
    transform: rotateY(-10deg);
  }
  .knjiga3d:hover .knjiga3d__blok,
  .knjiga3d:focus-within .knjiga3d__blok {
    transform: rotateY(-10deg);
  }
}

@media (max-width: 700px) {
  /* Manji nagib na uskim ekranima — inače korice izlaze iz spremnika. */
  .knjiga3d { padding: 0.5rem 2.2rem 1.6rem; }
  .knjiga3d__blok { transform: rotateY(-10deg); }
  .knjiga3d:hover .knjiga3d__blok,
  .knjiga3d:focus-within .knjiga3d__blok { transform: rotateY(-6deg); }
}

/* ============================================================
   3) KARTICE PONUDE
   <ul class="ponuda-kartice"><li class="ponuda-kartica"><h3>…</h3>
     <a class="btn btn-primary">…</a></li>…</ul>
   Za razliku od .kartice (tipografski popis bez obruba), ovo su prave kartice
   — usporedba tri jednakovrijedne opcije treba vidljivu plohu. Tri u redu na
   širokom ekranu, jedna ispod druge na uskom; gumb uvijek na dnu preko
   margin-top: auto na omotu, bez obzira na duljinu naslova iznad. */
.ponuda-kartice {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
  align-items: stretch;
}
.ponuda-kartica {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: none;
  height: 100%;
  padding: 1.8rem 1.6rem 1.7rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.block.on-dark .ponuda-kartica {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
}
.ponuda-kartica h3 {
  font-size: 1.14rem;
  font-weight: 600;
  color: var(--navy);
}
.block.on-dark .ponuda-kartica h3 { color: #fff; }
.ponuda-kartica p { color: var(--muted); font-size: 0.95rem; margin: 0; }
.block.on-dark .ponuda-kartica p { color: var(--on-navy); }
/* Gumb uvijek prilijepljen za dno kartice, neovisno o duljini sadržaja iznad. */
.ponuda-kartica .btn { margin-top: auto; align-self: flex-start; }

@media (max-width: 980px) {
  .ponuda-kartice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .ponuda-kartice { grid-template-columns: 1fr; }
}

/* ============================================================
   4) OBRASCI
   <form class="obrazac" data-obrazac="…" data-webhook="" novalidate>
     <div class="obrazac__polje">…</div>
     <div class="obrazac__uvjetno" data-uvjet-polje="…" data-uvjet-vrijednost="…">…</div>
     <p class="obrazac__poruka" data-poruka role="status" aria-live="polite"></p>
     <button class="btn btn-primary" type="submit">…</button>
   </form>
   Jednostupčano na mobitelu; kratka polja (ime/e-mail/telefon) idu dva u
   redu na širokom ekranu preko modifikatora na .obrazac__polje. */
.obrazac {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  max-width: 34rem;
}
.obrazac__red {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem 1.2rem;
}
.obrazac__polje {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-width: none;
}
.obrazac__polje label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
}
.block.on-dark .obrazac__polje label { color: #fff; }
.obrazac__polje .napomena {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 400;
}
.block.on-dark .obrazac__polje .napomena { color: var(--on-navy); }

.obrazac input,
.obrazac select,
.obrazac textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.75rem 0.95rem;
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-mali);
  transition: border-color 0.18s ease;
}
.obrazac textarea {
  min-height: 9.5rem;
  resize: vertical;
  line-height: 1.5;
}
.obrazac input::placeholder,
.obrazac textarea::placeholder { color: var(--muted); opacity: 0.85; }
.obrazac input:hover,
.obrazac select:hover,
.obrazac textarea:hover { border-color: var(--muted); }
.obrazac input:focus-visible,
.obrazac select:focus-visible,
.obrazac textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--focus);
}
/* Crveni obrub tek kad je posjetitelj stvarno nešto krivo upisao ili preskočio
   obavezno polje pri slanju. `:invalid` bi ga upalio odmah pri učitavanju: naša
   polja nemaju placeholder, pa je `:placeholder-shown` uvijek netočno i uvjet
   `:not(:placeholder-shown)` ne filtrira ništa — prazan obrazac je izgledao kao
   da je posjetitelj već pogriješio. */
.obrazac input:user-invalid,
.obrazac textarea:user-invalid { border-color: #b3413b; }
.obrazac input:disabled,
.obrazac select:disabled,
.obrazac textarea:disabled {
  background: var(--mist);
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Unutar tamne sekcije (.on-dark .obrazac): polja ostaju svijetla (čitljivost
   teksta koji se upisuje), samo obrub i podloga forme pripadaju tami. */
.block.on-dark .obrazac input,
.block.on-dark .obrazac select,
.block.on-dark .obrazac textarea {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.3);
}
.block.on-dark .obrazac input:focus-visible,
.block.on-dark .obrazac select:focus-visible,
.block.on-dark .obrazac textarea:focus-visible {
  outline-color: var(--teal);
  border-color: var(--teal);
}

/* Uvjetni blok: prisutan u DOM-u uvijek, forme.js skriva preko [hidden].
   Od V7 nosi SVA polja koja dijele isti uvjet (OIB, naziv i adresa organizacije
   idu zajedno), pa razmak mora biti razmak između polja, ne između oznake i
   kontrole. */
.obrazac__uvjetno {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  max-width: none;
}
.obrazac__uvjetno[hidden] { display: none; }

.obrazac__poruka {
  min-height: 1.4em;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--muted);
  max-width: none;
}
.obrazac__poruka:empty { display: none; }
.obrazac__poruka--ok {
  color: #1f6b4d;
  padding-left: 1.5rem;
  position: relative;
}
.obrazac__poruka--ok::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.28em;
  width: 0.7rem;
  height: 0.7rem;
  border-left: 2px solid #1f6b4d;
  border-bottom: 2px solid #1f6b4d;
  transform: rotate(-45deg);
}
.obrazac__poruka--greska { color: #b3413b; }
.block.on-dark .obrazac__poruka--ok { color: var(--teal); }
.block.on-dark .obrazac__poruka--ok::before { border-color: var(--teal); }
.block.on-dark .obrazac__poruka--greska { color: #ff9a90; }

.obrazac .btn {
  align-self: flex-start;
}
.obrazac .btn:disabled,
.obrazac .btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--muted);
  border-color: var(--muted);
}
.block.on-dark .obrazac .btn:disabled,
.block.on-dark .obrazac .btn[disabled] {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--on-navy);
}

@media (max-width: 700px) {
  .obrazac__red { grid-template-columns: 1fr; gap: 1.3rem; }
  .obrazac .btn { width: 100%; }
}

/* ============================================================
   5) HERO — nadjačaj iz stil.css (samo desktop, samo ovaj blok)
   Povod: na 1440px je .hero h1 (do 5.5rem) padao u četiri retka i gurnuo
   .video-player u donji desni kut, dok je video stupac (0.65fr) bio
   previzualno malen. Nadjačavamo TOČNO ono što je trebalo:
   - .hero-inner: stupci na sredini (bio je "end") i omjer ≈1,15:1 (bio
     1,35:0,65 — video je dobivao samo 32,5 % širine, sad ~46,5 %).
   - .hero h1: manji i uži-neograničen font (bio fiksni 15ch, koji je
     rezao retke na ~15 "ch" bez obzira na širinu stupca) tako da tri
     retka stanu u širi stupac na 1440px, a naslov ostaje najveći tekst
     na stranici — donja granica 3.5rem (56px) je iznad h2-ovog maksimuma
     od 3.4rem (54,4px) iz stil.css, po cijelom ovom rasponu širina.
   Ograničeno na min-width: 981px — to je TOČNO isti prijelom na kojem
   stil.css inače (@media max-width: 980px) slaže .hero-inner u jedan
   stupac, pa se mobilni/tablet raspored (≤980px) ovime uopće ne dotiče. */
@media (min-width: 981px) {
  .hero-inner {
    align-items: center;
    grid-template-columns: 1.15fr 1fr;
  }
  .hero h1 {
    font-size: clamp(3.5rem, 2.2rem + 1.8vw, 3.75rem);
    /* 100%, ne fiksni ch: naslov smije iskoristiti cijeli širi stupac —
       stupac sam po sebi ostaje ograničen preko .wrap (max 1180px) i
       omjera gore, pa ne postoji opasnost od predugih redaka na vrlo
       širokim ekranima. */
    max-width: 100%;
  }
  /* stil.css postavlja align-self: end izravno na .hero-foto (namjerno, za
     stari raspored gdje je fotografija "naslonjena na donji rub heroa") —
     align-self na djetetu pobjeđuje align-items na roditelju, pa centriranje
     gore ne bi imalo učinka na video bez ovog nadjačaja. */
  .hero-foto { align-self: center; }
}

/* Obrana od CSS grid "blowout": grid stavka bez min-width:0 zna se ne
   stisnuti ispod prirodne (max-content) širine svog sadržaja, što kod
   <video>/<img> zna izazvati vodoravni skrol cijele stranice. Video sad
   ima puno veći stupac (gore), pa je ova obrana važnija nego prije. */
.hero-foto { min-width: 0; }

/* ============================================================
   6) RITAM PODSTRANICA (V7, 12.8.2026.)

   Povod: podstranice su bile jedna svijetla ploha od vrha do dna, s
   razmakom sekcije od 8,5rem (272px gore+dolje na 1440px). Uz četiri do
   šest sekcija to je preko 1200px praznine po stranici, a savjetovanje je
   naraslo na 10.026px.

   Razmak se spušta, ali ostaje velikodušan (5,5rem = 176px gore+dolje).
   Selektor je namjerno vezan uz `.page-hero`: NASLOVNICA nema page-hero
   (ondje je `.hero`), pa je ovim pravilom uopće ne dotičemo — naslovnica je
   odobrena i ne dira se. */
main > .page-hero ~ section.block {
  padding-block: clamp(3.25rem, 2.6rem + 2.4vw, 5.5rem);
}

/* ============================================================
   7) AKORDEON PODRUČJA RADA
   <ol class="podrucja">
     <li><details class="podrucje" id="…">
       <summary><h3 class="podrucje__naslov"><span class="podrucje__broj">01</span>…</h3></summary>
       <div class="podrucje__tijelo">…</div>
     </details></li>
     <li class="podrucja__veza"><a href="edukacije.html">…</a></li>
   </ol>

   Zamjenjuje dvostruki prikaz na savjetovanju: taksativni popis PLUS
   trinaest punih opisa jedan ispod drugoga (5.329px zida teksta). Popis
   ostaje glavni sadržaj — kako je klijentica tražila — a puni opis, koji je
   nepromijenjen, stoji iza otvaranja. Nijedna rečenica nije uklonjena.

   Ista tipografska gramatika kao .popis-podrucja u stil.css (broj u
   Frauncesu, naslov 1,12rem/600, tanka linija između redaka), samo na
   svijetloj plohi i u jednom stupcu — otvoreni redak inače pomiče susjedni. */
/* Dva stupca na širokom ekranu, kao i taksativni popis na naslovnici
   (.popis-podrucja u stil.css), pa je popis pregledan bez skrolanja.
   `align-items: start` je bitan: kad se jedan redak otvori, susjedni u istom
   redu OSTAJE na mjestu — pomiče se samo ono što dolazi ispod.
   Zato je i razdjelnica `border-top` na svakoj stavci (vrhovi se uvijek
   poklapaju), a donja linija pripada cijelom popisu.
   Gornja granica širine drži redak u mjeri za čitanje: stupac od 68rem/2 je
   ~65 znakova, unutar granice od 78 koju mjeri qa/qa-browser.mjs. */
.podrucja {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 5vw, 5rem);
  align-items: start;
  max-width: 68rem;
  border-bottom: 1px solid var(--line);
}
.podrucja > li {
  max-width: none;
  border-top: 1px solid var(--line);
}
.podrucje > summary,
.podrucja__veza > a {
  display: flex;
  align-items: center;
  gap: 0 0.4rem;
  min-height: 44px;      /* dodirna meta, ne kozmetika (zamka iz CLAUDE.md) */
  padding: 0.8rem 2.4rem 0.8rem 0;
  position: relative;
  cursor: pointer;
  text-decoration: none;
}
/* Zadana trokutasta strelica preglednika ide van — znak crtamo sami, da na
   svim preglednicima izgleda isto i da se poklapa s ostatkom stranice. */
.podrucje > summary { list-style: none; }
.podrucje > summary::-webkit-details-marker { display: none; }

/* Jedan selektor, bez suvišnog `.podrucja__veza a > …`: taj je bio specifičniji
   od pravila u @media, pa se 14. redak na mobitelu nije poravnao s ostalima. */
.podrucje__naslov {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  align-items: baseline;
  gap: 0 0.4rem;
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.35;
}
.podrucje__broj {
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--blue-ink);
}
.podrucje > summary:hover .podrucje__naslov,
.podrucja__veza > a:hover .podrucje__naslov { text-decoration: underline; }

/* Znak stanja: plus koji se otvaranjem pretvara u minus. Dvije crte, bez
   ikone i bez teksta — pa nema ni što pročitati čitaču ekrana (on stanje
   čita iz samog <details>). */
.podrucje > summary::before,
.podrucje > summary::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 50%;
  width: 13px;
  height: 2px;
  background: var(--blue-ink);
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.podrucje > summary::before { transform: translateY(-50%); }
.podrucje > summary::after { transform: translateY(-50%) rotate(90deg); }
.podrucje[open] > summary::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }

/* Poveznica na internu ponudu (14. stavka popisa) nije opis nego odlazak sa
   stranice, pa nosi strelicu umjesto plusa. */
.podrucja__veza > a::after {
  content: "";
  position: absolute;
  right: 0.6rem;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--blue-ink);
  border-top: 2px solid var(--blue-ink);
  transform: translateY(-50%) rotate(45deg);
}

/* Dolazak izvana (savjetovanje.html#coaching): sidro stoji na TIJELU opisa, jer
   preglednik zatvoreni <details> otvara samo kad je cilj fragmenta u sadržaju
   koji je time skriven (izmjereno, vidi komentar u generatoru). `:target` zato
   pogađa tijelo, a redak iznad njega se ističe kroz `:has()` — da posjetitelj
   vidi NA KOJI je redak stigao, inače se otvoreni opis stopi s ostalima.
   Isticanje je linija i tanka podloga, bez nove boje: obje su iz palete.
   Odmak pri skoku (scroll-margin) drži naslov retka u kadru iznad opisa. */
.podrucje__tijelo,
.katalog-grupa__tijelo { scroll-margin-top: 4rem; }
.podrucje:has(> .podrucje__tijelo:target) > summary,
.katalog-grupa:has(> .katalog-grupa__tijelo:target) > summary {
  background: var(--mist-deep);
  box-shadow: inset 3px 0 0 var(--blue-ink);
  padding-left: 0.7rem;
}

.podrucje__tijelo {
  padding: 0 0 1.6rem 3rem;
  max-width: var(--mjera);
}
.podrucje__tijelo p { margin-bottom: 0.9rem; }
.podrucje__tijelo p:last-child { margin-bottom: 0; }
.podrucje__tijelo ul { list-style: none; margin: 0 0 0.9rem; }
.podrucje__tijelo li { position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; }
.podrucje__tijelo li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.72rem;
  width: 6px;
  height: 6px;
  background: var(--blue);
}

/* Isti prijelom kao .popis-podrucja u stil.css. Širina ostaje ograničena i u
   jednom stupcu — bez toga bi redak na 1080px narastao na ~130 znakova. */
@media (max-width: 1080px) {
  .podrucja { grid-template-columns: 1fr; max-width: 34rem; }
}

@media (max-width: 700px) {
  .podrucje__tijelo { padding-left: 0; }
  .podrucje__naslov { grid-template-columns: 2.2rem 1fr; }
}

/* ============================================================
   8) IZDVOJEN CITAT
   Klijentičina vlastita rečenica kao težište bloka, ne kao još jedan pasus.
   Nadogradnja .citat iz stil.css: veći stupac, bez lijeve crte, s tankom
   linijom iznad — da se u ritmu stranice vidi kao zaseban potez. */
.citat--istaknut {
  border-left: none;
  border-top: 2px solid var(--blue);
  padding: 1.6rem 0 0;
  margin: 0 0 1.8rem;
  /* Jasnin feedback 19.8.2026.: naslov i citat na "Suradnja i povjerenje"
     (savjetovanje.html) trebaju biti iste veličine kao naslov i uvodni
     odlomak u "Tijek suradnje" niže na istoj stranici. Naslov (<h2>) je već
     bio isti (obje sekcije dijele generičko pravilo .section-head h2); citat
     je bio veći od .lead teksta (var(--fs-lead)) — sada je izjednačen. */
  font-size: var(--fs-lead);
  line-height: 1.4;
  max-width: 24em;
}
.citat--istaknut p { max-width: none; }

/* ============================================================
   9) OBRAZAC — GRUPE POLJA
   <fieldset class="obrazac__grupa"><legend class="obrazac__legenda">…</legend>
     <div class="obrazac__red">…</div></fieldset>

   Povod: devet polja pune širine jedno ispod drugoga izgledalo je kao
   formular iz 2010. i na svih šest mjesta. Polja su ista, redoslijed je isti
   — mijenja se samo raspored: smislene cjeline i kratka polja dva u redu. */
/* Širina se NE veže uz modifikator na samom <form>: klasa obrasca mora ostati
   točno „obrazac” (na tome stoji šest provjera u qa/qa-content.mjs). Veže se uz
   sekciju, pa prijava na novosti na naslovnici ostaje uska kakva jest. */
.obrazac-sekcija .obrazac { max-width: 46rem; gap: 1.8rem; }
.obrazac__grupa {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;   /* fieldset se inače ne stisne ispod max-content sadržaja */
}
.obrazac__legenda {
  padding: 0 0 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-ink);
  border-bottom: 1px solid var(--line);
  width: 100%;
}
/* Neobavezno se imenuje, obavezno se ne označava zvjezdicom koju nitko ne
   objasni — ostane li polje bez ove oznake, obavezno je. */
.obrazac__neobavezno {
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--muted);
  margin-left: 0.4rem;
}
.obrazac__uvjetno .obrazac__red { width: 100%; }
/* Kad se u paru jedna oznaka prelomi u dva retka (npr. „Imate li odjel za
   upravljanje ljudskim potencijalima?”), polja se inače razidu po visini.
   Kontrola se zato lijepi za dno svoje ćelije, pa su oba polja u istom redu
   poravnata bez obzira na duljinu oznake. */
.obrazac__red > .obrazac__polje > input,
.obrazac__red > .obrazac__polje > select,
.obrazac__red > .obrazac__polje > textarea { margin-top: auto; }

/* ⚠️ POPRAVAK 20.8.2026. — gornje pravilo rješava dugu OZNAKU, ali razbija
   raspored čim jedno polje u paru ima napomenu ISPOD kontrole, a drugo nema
   (npr. „Ulica i kućni broj” s primjerom uz „Poštanski broj” bez ičega):
   polje bez napomene je niže, pa se `margin-top: auto` odgurne prema dnu i
   dva polja u istom redu vise na različitim visinama. Vidljivo na obrascu
   predbilježbe udžbenika.

   Subgrid poravnava oba slučaja odjednom: oznaka, kontrola i napomena svaki
   dobivaju SVOJ redak zajedničke rešetke, pa su poravnati po cijelom redu bez
   obzira na to koje polje ima napomenu ili dužu oznaku. Tada `margin-top` više
   ne treba i izričito se poništava.

   Pod `@supports` jer preglednik bez subgrida mora ostati na starom pravilu
   (poravnanje po dnu) — lošije, ali ne razbijeno. */
@supports (grid-template-rows: subgrid) {
  /* NE u podnožju: ondje su u istom redu ime, e-mail I gumb, a gumb nije
     `.obrazac__polje` pa ne bi sudjelovao u rešetki — dna bi se razišla i
     traka bi se raspala (uhvatila qa/qa-browser.mjs). Ondje stara pravila
     rade ispravno jer ondje nema napomena ispod polja. */
  footer .obrazac__red { grid-template-rows: none; }
  .obrazac-sekcija .obrazac__red { grid-template-rows: auto auto auto; }
  .obrazac-sekcija .obrazac__red > .obrazac__polje {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: 0.45rem;
  }
  .obrazac-sekcija .obrazac__red > .obrazac__polje > input,
  .obrazac-sekcija .obrazac__red > .obrazac__polje > select,
  .obrazac-sekcija .obrazac__red > .obrazac__polje > textarea { margin-top: 0; }
}

/* ============================================================
   10) SEKCIJA S OBRASCEM
   Obrazac je uzak po prirodi (redak polja preko 46rem se teško čita). Do
   12.8.2026. je desnu polovicu sekcije držao blok „Radije nazovite?” s
   telefonom; on je uklonjen (vlasnik projekta: istaknuti poziv na telefon ide
   van s podstranica), pa obrazac stoji sam, u svojoj mjeri. */
.obrazac-sekcija .obrazac { margin-inline: 0; }

/* ============================================================
   11) NASLOVI SKUPINA U KATALOGU
   Naslov skupine i naslov kartice bili su oba <h3> — ista razina za nadređeno
   i podređeno. Skupina je od V7 <h2>, pa treba svoju veličinu: veća od kartice
   (1,14rem), manja od naslova sekcije (do 3,4rem). Pravila prate ona za h3 u
   stil.css, samo s novim selektorom.
   Od 12.8.2026. taj h2 živi unutar <summary> sklopive skupine, pa veličinu
   zadaje .katalog-grupa__naslov u odjeljku 17. */
.po-zahtjevu h2 { font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem); }

/* ============================================================
   12) SITNI RASPOREDNI MODIFIKATORI
   .uz-tekst po defaultu centrira stupce po visini (dizajnirano za tekst i
   fotografiju sličnih visina). Kad je tekst osjetno kraći od fotografije,
   centriranje ostavi veliku prazninu iznad naslova — tada stupci kreću od vrha.
   .kartice--stupac: tri paketa mentoriranja nisu tri jednakovrijedne opcije u
   mreži nego ljestvica cijena, pa se čitaju odozgo prema dolje. */
.uz-tekst--vrh { align-items: start; }
/* Širina je ograničena namjerno: ljestvica od tri retka preko cijelog stupca
   razvuče naziv i cijenu na suprotne krajeve praznog reda. */
.kartice--stupac { grid-template-columns: 1fr; max-width: 30rem; }
/* Uvodni stupac stranice mentoriranja: odlomci se ne smiju slijepiti u jedan
   blok (osnovni <p> u ovom sustavu nema donju marginu), a popis tema treba zrak
   iznad sebe. */
.mentor-uvod > p { margin-bottom: 1rem; }
.mentor-uvod > h3 { font-size: 1.15rem; margin: 1.8rem 0 0.9rem; }
.mentor-uvod > .meta-red { margin-top: 1rem; font-size: 0.9rem; color: var(--muted); }
/* Stupac za čitanje UNUTAR sekcije pune širine. `.wrap-narrow` je centriran
   (ispravno kad je cijela stranica taj stupac — članak, program radionice), ali
   između sekcija poravnatih na lijevi rub izgledao je kao da je odlutao na
   sredinu. Ovdje stupac ostaje iste širine, samo kreće s istog ruba kao naslovi
   iznad i ispod njega. */
.stupac-teksta { max-width: min(570px, 100%); }

/* ============================================================
   13) CIJENA NA TAMNOJ PLOHI (snimljene edukacije)
   .knjiga__cijena je flex u jednom retku; na uskom stupcu udžbenika uvjet i
   rok se prelome pod iznos, ali preko pune širine sekcije ostaju u istom retku
   i iznos se izgubi u njima. Ovdje iznos dobiva svoj redak, a uvjeti svoj. */
.block.on-dark .knjiga__cijena {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
  border-top-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.block.on-dark .knjiga__cijena span { color: var(--blue-light); max-width: 46ch; }

/* ============================================================
   14) NAPOMENA O PRIVATNOSTI ISPOD OBRASCA (12.8.2026.)
   Do tada je stajala u veličini tijela teksta (klasa .meta-red nema vlastito
   pravilo u stil.css, pa je nasljeđivala --fs-body i boju --ink) i vizualno se
   natjecala sa sadržajem. To je sitna napomena, ne poruka stranice.
   Prigušena je, ali ne ispod AA: --muted je 6,61:1 na paper i 6,17:1 na mist,
   a na tamnoj plohi ide --blue-light (9,55:1 na navy). Oba omjera ponovno mjeri
   qa/qa-browser.mjs na stvarno renderiranim bojama. */
.obrazac__privatnost {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 0.9rem;
}
.block.on-dark .obrazac__privatnost { color: var(--blue-light); }

/* ============================================================
   15) PRIJAVA NA NOVOSTI U PODNOŽJU (12.8.2026.)
   Prije je to bila zasebna sekcija na dnu naslovnice. Sada stoji u podnožju
   svake stranice, u jednom redu na širokom ekranu: ime · e-mail · gumb.
   Podnožje je tamno, pa sve što obrazac nasljeđuje iz svijetle sheme (oznaka
   polja u --navy, poruka u --muted) ovdje dobiva svjetliju vrijednost. */
.foot-novosti {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.4rem, 3vw, 3rem);
  align-items: start;
  padding-bottom: 2.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  margin-bottom: 2.2rem;
}
.foot-novosti__uvod h2 {
  font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 1.45rem;
  font-weight: 600;
  color: #fff;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 0.4rem;
}
.foot-novosti__uvod p { color: rgba(255, 255, 255, 0.78); font-size: 0.95rem; }

/* Jedan red: dva polja i gumb dijele istu mrežu. `display: contents` na
   .obrazac__red je namjerno — par polja koji drugdje čini svoj redak ovdje
   postaje dva stupca zajedničkog reda, bez ijedne izmjene u markupu. */
.foot-novosti__forma .obrazac {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 0.6rem 1rem;
  max-width: none;
}
.foot-novosti__forma .obrazac__red { display: contents; }
.foot-novosti__forma .obrazac__polje label { color: #fff; }
/* Gumb izričito u treći stupac prvog reda: automatsko raspoređivanje ovdje
   daje isti rezultat, ali eksplicitan položaj drži red netaknutim ako se
   poruci o stanju ili napomeni kasnije promijeni raspon stupaca. */
.foot-novosti__forma .obrazac .btn { grid-column: 3; grid-row: 1; }
.foot-novosti__forma .obrazac__poruka { grid-column: 1 / -1; grid-row: 2; }
.foot-novosti__forma .obrazac__privatnost { grid-column: 1 / -1; }
.foot-novosti__forma .obrazac__poruka { color: var(--blue-light); margin: 0; }
.foot-novosti__forma .obrazac__poruka--ok { color: var(--teal); }
.foot-novosti__forma .obrazac__poruka--ok::before { border-color: var(--teal); }
.foot-novosti__forma .obrazac__poruka--greska { color: #ff9a90; }
.foot-novosti__forma .obrazac__privatnost { color: rgba(255, 255, 255, 0.72); margin-top: 0; }
.foot-novosti__forma .obrazac input {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(255, 255, 255, 0.3);
}
.foot-novosti__forma .obrazac input:focus-visible {
  outline-color: var(--teal);
  border-color: var(--teal);
}
.foot-novosti__forma .obrazac .btn { align-self: end; }
/* Onemogućen gumb (dok GHL webhook nije upisan) ne ide kroz opacity: na tamnoj
   plohi bi 55 % prozirnosti pojelo i tekst i obrub. Umjesto toga stoji tiša
   ploha s punim tekstom — vidi se da je gumb ugašen, a i dalje se čita. */
.foot-novosti__forma .obrazac .btn:disabled,
.foot-novosti__forma .obrazac .btn[disabled] {
  opacity: 1;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.26);
  color: var(--on-navy);
}

/* Popis stranica u podnožju: devet poveznica × 44px dodirne mete bilo je
   podnožje visoko kao sekcija. Dva stupca, isti razmaci. */
.foot-nav--dvostupac {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.4rem;
}

@media (max-width: 980px) {
  .foot-novosti { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .foot-novosti__forma .obrazac { grid-template-columns: 1fr; }
  .foot-novosti__forma .obrazac .btn { width: 100%; grid-column: auto; grid-row: auto; }
  .foot-novosti__forma .obrazac__poruka { grid-row: auto; }
  .foot-nav--dvostupac { grid-template-columns: 1fr; }
}

/* ============================================================
   16) KVAČICE ZA ODABIR TEMA (12.8.2026.)
   Zamjena za <select multiple size="8">, koji je za drugu temu tražio
   Cmd/Ctrl+klik. Skupine su sklopive da polje ne naraste u zid od 24 kvačice;
   unutar skupine idu dva stupca na širokom ekranu, jedan na mobitelu. */
.obrazac__kucice {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  max-width: none;
}
.obrazac__kucice-oznaka {
  padding: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
}
.block.on-dark .obrazac__kucice-oznaka { color: #fff; }
.obrazac__kucice > .meta-red {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 0.35rem;
}
.block.on-dark .obrazac__kucice > .meta-red { color: var(--blue-light); }

/* ============================================================
   17) SITNA NAPOMENA UNUTAR OBRASCA (18.8.2026.)
   Klasa .meta-red nema vlastito pravilo — u stil.css postoje samo potomačka
   (.kartica .meta-red, .knjiga .meta-red, .tema-mreza .meta-red…). Unutar
   obrasca nijedno od njih ne hvata ništa, pa su uputa ispod polja i napomena na
   vrhu obrasca (npr. „za 10 i više primjeraka…” na predbilježbi udžbenika)
   izgledale kao obični tekst stranice, dok ista klasa drugdje izgleda sitno i
   prigušeno. Nalaz recenzije 18.8.2026.
   Namjerno se NE uvodi osnovno pravilo za samu .meta-red: ono bi bilo jednake
   specifičnosti kao .obrazac__privatnost, stajalo bi niže u datoteci i tiho joj
   pregazilo veličinu (0,8rem), koju qa/qa-browser.mjs mjeri.
   Vrijednosti su iste kao kod .obrazac__kucice > .meta-red, da sve sitne
   napomene u obrascu izgledaju jednako. --muted je 6,61:1 na paper i 6,17:1 na
   mist; na tamnoj plohi ide --blue-light (9,55:1 na navy). */
.obrazac > .meta-red,
.obrazac__polje > .meta-red {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0;
}
.block.on-dark .obrazac > .meta-red,
.block.on-dark .obrazac__polje > .meta-red { color: var(--blue-light); }

/* ============================================================
   18) NAPOMENA ISPOD GUMBA (18.8.2026.)
   Cijena mentoriranja više ne stoji kao podnaslov bloka nego kao sitan redak
   ispod gumba (V7, popravak prodajnog tona). Vlastita klasa, ne .meta-red:
   .meta-red izvan kartice nema pravilo, pa bi redak bio jednak veličini
   tijela teksta — a onda cijena opet vuče pogled na sebe. */
.uz-gumb {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.block.on-dark .uz-gumb { color: var(--blue-light); }

.kucice-grupa { border-top: 1px solid var(--line); }
.kucice-grupa:last-of-type { border-bottom: 1px solid var(--line); }
.kucice-grupa > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-height: 44px;      /* dodirna meta, ne kozmetika (zamka iz CLAUDE.md) */
  padding: 0.55rem 2rem 0.55rem 0;
  position: relative;
  cursor: pointer;
  list-style: none;
}
.kucice-grupa > summary::-webkit-details-marker { display: none; }
.kucice-grupa__naslov { font-weight: 600; font-size: 0.98rem; color: var(--navy); }
.kucice-grupa__broj { font-size: 0.85rem; color: var(--muted); }
.block.on-dark .kucice-grupa__naslov { color: #fff; }
.block.on-dark .kucice-grupa__broj { color: var(--blue-light); }
/* Isti znak stanja kao na akordeonu područja rada: plus koji postaje minus. */
.kucice-grupa > summary::before,
.kucice-grupa > summary::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 50%;
  width: 12px;
  height: 2px;
  background: var(--blue-ink);
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.kucice-grupa > summary::before { transform: translateY(-50%); }
.kucice-grupa > summary::after { transform: translateY(-50%) rotate(90deg); }
.kucice-grupa[open] > summary::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.block.on-dark .kucice-grupa > summary::before,
.block.on-dark .kucice-grupa > summary::after { background: var(--teal); }

.kucice-popis {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.2rem;
  padding: 0 0 0.8rem;
}
.kucice-popis li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: none;
  margin: 0;
}
/* Kvačica se izuzima iz pravila za tekstualna polja (100 % širine, 48px visine,
   padding) — inače bi svaka bila ploha preko cijelog stupca. */
.obrazac .kucice-popis input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  min-height: 0;
  padding: 0;
  flex: none;
  accent-color: var(--blue-deep);
  border-radius: 0;
}
.kucice-popis label {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.94rem;
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
}
.block.on-dark .kucice-popis label { color: #fff; }

@media (max-width: 700px) {
  .kucice-popis { grid-template-columns: 1fr; }
}

/* ============================================================
   17) SKLOPIVE SKUPINE KATALOGA (12.8.2026.)
   Katalog je bio 24 kartice u nizu i stranica od 7.100px. Skupine su sada
   sklopive, pa posjetitelj vidi sve tri odjednom i bira što otvara.
   Naslov skupine ostaje h2 (kartica je h3), samo sada živi unutar <summary>. */
/* Uvod kataloga: tekst i fotografija u istoj plohi kao skupine. Stupac s
   fotografijom je uži nego kod .uz-tekst (0,45fr umjesto 0,8fr) i fotografija
   se izrezuje na kvadrat — uspravna snimka je inače sama diktirala visinu
   cijelog bloka (604px prije prve skupine). Isti postupak koji
   .dvoje__pola .foto već koristi u stil.css. */
.katalog-uvod {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center;
  margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}
.katalog-uvod .section-head { margin-bottom: 1.4rem; }
.katalog-uvod .foto { aspect-ratio: 1 / 1; object-fit: cover; }

@media (max-width: 980px) {
  .katalog-uvod { grid-template-columns: 1fr; }
}

.katalog-grupa { border-top: 1px solid var(--line); }
.katalog-grupa:last-of-type { border-bottom: 1px solid var(--line); }
.katalog-grupa > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 1rem;
  min-height: 44px;
  padding: clamp(0.9rem, 1.8vw, 1.3rem) 2.6rem clamp(0.9rem, 1.8vw, 1.3rem) 0;
  position: relative;
  cursor: pointer;
  list-style: none;
}
.katalog-grupa > summary::-webkit-details-marker { display: none; }
.katalog-grupa__naslov {
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2.05rem);
  margin: 0;
}
.katalog-grupa__broj { font-size: 0.9rem; color: var(--muted); }
.katalog-grupa > summary::before,
.katalog-grupa > summary::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 15px;
  height: 2px;
  background: var(--blue-ink);
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.katalog-grupa > summary::before { transform: translateY(-50%); }
.katalog-grupa > summary::after { transform: translateY(-50%) rotate(90deg); }
.katalog-grupa[open] > summary::after { transform: translateY(-50%) rotate(0deg); opacity: 0; }
.katalog-grupa__tijelo { padding-bottom: clamp(1.4rem, 2.5vw, 2.4rem); }
.katalog-grupa__tijelo > p { margin-bottom: 1.4rem; }

/* ============================================================
   18) SNIMLJENA EDUKACIJA — prodajni tok (12.8.2026.)
   Stranica je bila niz nepovezanih blokova (hero, video, dugačak stupac
   teksta, fotografije različitih omjera, popis poveznica, cijena, obrazac).
   Sada ima jedan tok: što je (video) → što se mijenja i što dobivaš → za koga
   je → cijena → prijava. Tekst je nepromijenjen; mijenja se samo raspored. */
.edukacija-vrh {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 3.5vw, 3rem);
  align-items: start;
}
.edukacija-vrh__uz > p { margin-bottom: 1rem; }
.edukacija-vrh__uz h3 { font-size: 1.1rem; margin-bottom: 0.7rem; }
.edukacija-vrh__uz .meta-red { font-size: 0.85rem; color: var(--muted); margin-top: 0.8rem; }

.prodaja-mreza {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 3.5vw, 3rem);
  align-items: start;
}
.prodaja-mreza h2 {
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2.05rem);
  margin-bottom: 1rem;
}
/* „Što dobivaš” je jedina ploha na stranici: to je ono što kupac kupuje. */
.prodaja-mreza__dobivate {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 2.5vw, 2.2rem);
}
.prodaja-mreza ul { list-style: none; }
.prodaja-mreza li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.7rem;
  max-width: none;
}
.prodaja-mreza li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.72rem;
  width: 6px;
  height: 6px;
  background: var(--blue);
}
.prodaja-mreza li:last-child { margin-bottom: 0; }

.prodaja-podnozje {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(1.6rem, 3.5vw, 3rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3.2rem);
}
.prodaja-podnozje h2 { font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2.05rem); margin-bottom: 1rem; }
.prodaja-podnozje h3 { font-size: 1.1rem; margin: 1.6rem 0 0.4rem; }
/* Dvije fotografije s edukacije nisu istog omjera (jedna uspravna, jedna
   položena), pa se izrezuju na isti — isti postupak koji .dvoje__pola .foto
   već koristi u stil.css. Atributi width/height ostaju stvarni, pa mjerenje
   rezerviranog prostora u qa/qa-browser.mjs i dalje prolazi. */
.galerija--ujednacena { max-width: none; gap: 1rem; }
.galerija--ujednacena .foto { aspect-ratio: 4 / 3; object-fit: cover; }
.galerija--ujednacena figcaption { font-size: 0.84rem; }

@media (max-width: 980px) {
  .edukacija-vrh, .prodaja-mreza, .prodaja-podnozje { grid-template-columns: 1fr; }
}


/* ============================================================
   19) KATALOG SNIMLJENIH EDUKACIJA (18.8.2026.)
   Ruta snimljene-edukacije.html je od 18.8. katalog, ne prodajna stranica
   jedne edukacije. Kartica je RED PUNE ŠIRINE, ne pločica u mreži od tri
   stupca: s jednom edukacijom mreža izgleda kao prazna polica, a red izgleda
   namjerno — i ostaje čitljiv kad ih bude više.
   ============================================================ */
.katalog-snimljene { grid-template-columns: 1fr; gap: 0; }
.snimljena {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 16rem);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  padding-bottom: clamp(1.6rem, 3vw, 2.2rem);
}
/* Popis je zatvoren i s donje strane. S jednom edukacijom bi kartica bez donje
   linije izgledala kao odrezan popis, a ne kao cijela ponuda. */
.katalog-snimljene .snimljena:last-child { border-bottom: 1px solid var(--line); }
.snimljena h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); }
/* Mjera se veže na SAM STUPAC, ne na pojedini odlomak u njemu. Razlog je
   mjerenje: qa/qa-browser.mjs mjeri širinu linijskog okvira preko
   Range.getClientRects nad cijelom karticom, a taj raspon obuhvaća blokove u
   njoj — pa širina stupca (~880px, oko 110 znakova) pada na provjeri i kad je
   svaki <p> u njemu uredno ograničen. Zamka je zapisana u CLAUDE.md
   („Duljina retka ≠ širina kontejnera”). */
.snimljena__tekst { max-width: var(--mjera); }
.snimljena__podnaslov { font-size: 1rem; color: var(--ink); margin-bottom: 0.6rem; }
.kartica .snimljena__podnaslov { color: var(--ink); }
.snimljena__uz { display: flex; flex-direction: column; }
/* Cijena u katalogu je podatak u retku, ne velika brojka kao na stranici
   ponude — ondje je poanta, ovdje je usporedba. */
.cijena-red {
  font-weight: 600;
  color: var(--navy);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.kartica .cijena-red { font-size: 1.05rem; color: var(--navy); }
.cijena-red span { font-weight: 400; font-size: 0.85rem; color: var(--muted); }

@media (max-width: 860px) {
  .snimljena { grid-template-columns: 1fr; }
}

/* ============================================================
   20) IZBOR NAČINA PLAĆANJA (18.8.2026.)
   Dvije mogućnosti, obje kao velika ploha koju se pogodi prstom. Kontrola je
   <input type="radio"> unutar <fieldset>-a — dakle stvarna grupa za tipkovnicu
   i čitač ekrana — a vidljivi oblik crta <label>. Radio se ne skriva
   display:none-om (tada ispada iz reda fokusa) nego se odmiče iz vidokruga, a
   njegovo stanje crta ::before na oznaci.
   Obje plohe su u HTML-u otvorene; assets/forme.js zatvara neodabranu. Bez
   skripte se vide oba puta plaćanja — nikad nijedan.
   ============================================================ */
.placanje { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); }
.placanje__izbor { border: 0; padding: 0; margin: 0; min-width: 0; }
.placanje__legenda {
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.9rem;
  padding: 0;
}
.block.on-dark .placanje__legenda { color: #fff; }
.placanje__opcije {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
  max-width: 46rem;
}
.placanje__opcija { position: relative; }
/* Iz vidokruga, ali i dalje u redu fokusa i u stablu pristupačnosti. */
.placanje__opcija input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}
.placanje__opcija label {
  /* Obje plohe iste visine i kad jedna nosi dulju napomenu — inače izgledaju
     kao da je jedna važnija od druge. */
  height: 100%;
  display: grid;
  grid-template-columns: 1.35rem 1fr;
  gap: 0.2rem 0.75rem;
  align-items: start;
  min-height: 44px;
  padding: clamp(0.9rem, 2vw, 1.15rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
}
.placanje__opcija label::before {
  content: "";
  grid-row: 1 / span 2;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  border: 1px solid var(--muted);
  border-radius: 50%;
  background: #fff;
  flex: none;
}
.placanje__opcija input:checked + label { border-color: var(--blue-deep); }
.placanje__opcija input:checked + label::before {
  border-color: var(--blue-deep);
  border-width: 5px;
}
.placanje__opcija input:focus-visible + label {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.placanje__opcija label:hover { border-color: var(--muted); }
.placanje__ime { font-weight: 600; color: var(--navy); }
.placanje__uz { font-size: 0.88rem; color: var(--muted); }

.placanje__ploha { min-width: 0; }
.placanje__ploha[hidden] { display: none; }
.placanje__ploha h3 { font-size: 1.15rem; margin-bottom: 0.8rem; }
.placanje__ploha > p { margin-bottom: 0.8rem; }
.placanje__ploha .obrazac-sekcija { margin-top: 1.2rem; }
/* Poruka „ovo se tek uključuje” nije greška ni upozorenje: nosi istu prigušenu
   tipografiju kao ostale napomene, ali dobiva rub da se vidi da je odgovor na
   klik, a ne sitni tekst uz nešto drugo. */
.placanje__ceka {
  border-left: 2px solid var(--blue);
  padding: 0.6rem 0 0.6rem 0.9rem;
  margin-top: 1.2rem;
}
.placanje__paketi { list-style: none; display: grid; gap: 0.75rem; margin-top: 1.2rem; max-width: 34rem; }
.placanje__paketi li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  max-width: none;
}
.placanje__paket-ime { font-weight: 600; color: var(--navy); }
.placanje__paket-cijena { color: var(--muted); margin-right: auto; }
.placanje__paketi .kraj { margin: 0; }
.placanje__paketi .placanje__ceka { margin: 0; border-left: 0; padding: 0; }

/* Ugrađena Stripeova forma (19.8.2026.). Prazan okvir se NE prikazuje: dok
   forma nije montirana — a to je i stanje bez JavaScripta, s blokiranim
   js.stripe.com i nakon pada endpointa — <div> je prazan i zauzima nula
   prostora, pa ispod njega ostaje samo rezervni put. Bez ovog pravila bi pad
   ostavio rupu koja izgleda kao slomljena stranica. */
.stripe-forma:empty { display: none; }
.stripe-forma { margin-top: 1.2rem; min-width: 0; }
.placanje__paketi .stripe-forma { flex-basis: 100%; margin-top: 0.75rem; }
[data-stripe-rezerva][hidden] { display: none; }

@media (max-width: 700px) {
  .placanje__opcije { grid-template-columns: 1fr; }
}

/* ============================================================
   9) HERO PODSTRANICE S FILMOM (19.8.2026.)
   <div class="wrap page-hero-inner page-hero-inner--video">
     <div class="page-hero__tekst">…</div><div class="page-hero__video">…</div>
   Isti player kao u herou naslovnice, samo na tamnoj plohi podstranice.
   Na mobitelu film ide ISPOD teksta (redoslijed u HTML-u), pa naslov i uvodna
   rečenica ostaju vidljivi bez skrolanja — to qa/qa-browser.mjs mjeri na 390px.
   ============================================================ */
.page-hero-inner--video {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: center;
}
.page-hero-inner--video .page-hero__tekst { min-width: 0; }
.page-hero__video { min-width: 0; }
/* Na tamnoj plohi player nema sjenu (ne bi se vidjela) nego tanak svijetli rub,
   da se ploha videa odvoji od pozadine heroja. */
.page-hero__video .video-player {
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: var(--navy-deep);
}

@media (max-width: 900px) {
  .page-hero-inner--video { grid-template-columns: 1fr; }
}

/* ============================================================
   10) KATALOG SNIMAKA (19.8.2026.)
   <ul class="video-mreza"><li class="kartica kartica--klik video-kartica">…
   Pločica je sličica s YouTubea pod zastorom u bojama stranice, oznakom
   reprodukcije i potpisom; naslov stoji ispod pločice i on je poveznica.
   Klik radi po cijeloj plohi kartice (a.rastegni::after, z-index 1), pa ništa
   unutar pločice ne smije dobiti vlastiti z-index — inače klik u pločicu
   promaši poveznicu (zamka zapisana uz .kartica--klik u assets/stil.css).
   ============================================================ */
.video-mreza {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: clamp(1.6rem, 3vw, 2.4rem);
  list-style: none;
}
.video-kartica {
  border-top: 0;
  padding: 0;
  gap: 0.75rem;
}
.video-kartica__ploha {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy-deep);
  aspect-ratio: 16 / 9;
}
.video-kartica__slika {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Blagi pomak boje prema paleti stranice: sličice dolaze s raznih snimaka i
     bez ovoga se katalog raspada u trideset i četiri različita tona. */
  filter: saturate(0.92) contrast(1.02);
  transition: transform 0.35s ease;
}
/* Zastor: navy prema dnu. Nosi kontrast potpisu i drži pločice ujednačenima. */
.video-kartica__zastor {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 18, 32, 0) 34%, rgba(11, 18, 32, 0.88) 100%);
}
/* Potpis je vodeni žig, ne naslov: sličice s YouTubea nose vlastiti utisnuti
   tekst, pa potpis mora biti sitan i ležati na najtamnijem dijelu zastora. */
.video-kartica__marka {
  position: absolute;
  left: 0.8rem;
  bottom: 0.6rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-light);
}
.video-kartica__play {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(11, 18, 32, 0.72);
  color: #fff;
  transition: background 0.2s ease, transform 0.2s ease;
}
.video-kartica h3 { font-size: 1.02rem; line-height: 1.35; }
.video-kartica h3 a { align-items: flex-start; }
.video-kartica:hover .video-kartica__slika { transform: scale(1.045); }
.video-kartica:hover .video-kartica__play { background: var(--blue-deep); }
.video-kartica:hover h3 a { text-decoration: underline; }
/* Klasa je `kartica--klik`, ne `video-kartica--klik` — pravilo s krivim imenom
   nikad se ne iscrtava, a izgleda kao da postoji. */
.video-kartica:focus-within .video-kartica__play { background: var(--blue-deep); }

/* Tko je isključio animacije, ne dobiva ni pomak sličice. */
@media (prefers-reduced-motion: reduce) {
  .video-kartica__slika, .video-kartica__play { transition: none; }
  .video-kartica:hover .video-kartica__slika { transform: none; }
}

/* ============================================================
   11) TIJEK SURADNJE (19.8.2026.)
   <ol class="tijek"><li class="tijek__korak">
     <span class="tijek__broj">01</span><div class="tijek__tijelo">…
   Deset koraka u dva stupca, s brojem kao oznakom koraka. `list-style: none` je
   obavezan: broj je već u <span>-u, pa bi zadana numeracija <ol>-a dala „1. 01”.
   Redoslijed je sadržaj, ne ukras — zato <ol>, a ne <ul>.
   ============================================================ */
.tijek {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.4rem) clamp(2rem, 4vw, 3.5rem);
}
.tijek__korak {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 1.1rem;
  align-items: start;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  max-width: none;
}
.block.on-dark .tijek__korak { border-top-color: rgba(255, 255, 255, 0.16); }
.tijek__broj {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--blue-ink);
  font-variant-numeric: tabular-nums;
  padding-top: 0.15rem;
}
.tijek__tijelo { min-width: 0; }
.tijek__tijelo h3 { font-size: 1.12rem; font-weight: 600; margin-bottom: 0.45rem; }
.tijek__tijelo p { color: var(--muted); font-size: 0.97rem; margin: 0; }

/* ============================================================
   PODACI O IZDANJU — sitna napomena, ne sekcija
   Do 20.8.2026. su ovi tehnički podaci (format, opseg, uvez…) imali vlastiti
   naslov i punu listu pojam/vrijednost, pa su zauzimali cijeli zaslon prije
   nego što posjetitelj dođe do prijave. Sada su jedan red ispod poziva na
   kupnju: dostupni onome tko ih traži, nevidljivi onome tko ne. */
.izdanje-red {
  margin-top: 1.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--muted);
  /* Bez ograničenja širine redak na širokom ekranu naraste na ~170 znakova i
     postane nečitljiv (uhvatila qa/qa-browser.mjs, granica je 78). Lomi se u
     dva-tri retka, što je i dalje sitna napomena, ne sekcija. */
  max-width: 52ch;
}

/* ============================================================
   PRAVNE STRANICE I POVEZNICE U PODNOŽJU (20.8.2026.)
   Uvjeti i privatnost moraju biti dostupni sa svake stranice — kupac im treba
   moći doći s mjesta gdje kupuje, ne samo s naslovnice. U podnožju stoje uz
   copyright, tiho ali vidljivo. */
.foot-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 1.4rem; }
.foot-bottom__pravno { display: inline-flex; flex-wrap: wrap; gap: 0 1.2rem; }
/* Dodirna meta mora biti ≥44px (qa/qa-browser.mjs to mjeri na svakoj ruti).
   Sam tekst je visok 22px, pa visinu daje okomiti razmak — bez njega su ove
   dvije poveznice obarale provjeru na svih 33 stranice. */
.foot-bottom__pravno a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Tijelo pravnog teksta: uska mjera i mirna tipografija — ovo se čita, ne
   skenira. Naslovi su manji nego na prodajnim stranicama jer ovdje nose
   strukturu, ne pažnju. */
.pravno { max-width: 46rem; }
.pravno h2 {
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  margin: 2.4rem 0 0.8rem;
}
.pravno h2:first-child { margin-top: 0; }
.pravno h3 { font-size: 1.02rem; margin: 1.6rem 0 0.5rem; }
.pravno p, .pravno li { color: var(--ink); }
.pravno__azurirano { margin-top: 2.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }