/* ==========================================================================
   Psihoterapija Priča — global.css
   Boje, fontovi, radiusi i komponente: context/design-tokens.md (usklađen).
   Layout, razmaci i širine kontejnera žive isključivo ovdje — tokeni ih
   namjerno ne propisuju (dogovoreno u dizajnerskoj sesiji na naslovnoj).
   Mobile-first: baza 375 px, media queryji isključivo min-width; ostatak
   skalira fluidno preko clamp() umjesto skokovitih breakpointa.
   Ovo je referentna implementacija — ostale stranice grade se po ovom
   obrascu (komponente, nazivi klasa, ritam).
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. Fontovi — self-hosted, samo Latin Extended, font-display: swap.
   Datoteke ubacuje Marta u fonts/ (context/struktura-mape.md).
   ------------------------------------------------------------------------- */

/* Svaka obitelj/težina dolazi kao DVA @font-face zapisa (latin + latin-ext),
   isti obrazac koji koristi i Google Fonts — preglednik dohvaća samo onu
   datoteku čiji unicode-range stvarno treba. latin-ext (U+0100–02BA) nosi
   hrvatsku dijakritiku (č/ć/š/ž/đ); latin (U+0000–00FF) nosi ASCII. Bez ovoga
   jedna zajednička datoteka ne bi pokrila oboje. Datoteke samohostane u
   fonts/, izvor Google Fonts (OFL licenca) — bez vanjskih zahtjeva u runtimeu. */

@font-face {
  font-family: 'Jost';
  src: url('../fonts/Jost-400-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Jost';
  src: url('../fonts/Jost-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/SourceSerif4-400-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/SourceSerif4-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/SourceSerif4-600-latin-ext.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Serif 4';
  src: url('../fonts/SourceSerif4-600-latin.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Treći font, samo za H1/H2/H3 — 4.9.2026 Fraunces (display serif,
   "editorial" dojam koji Marta više nije htjela) zamijenjen s Public Sans:
   čist, geometrijski sans, najbliži po duhu stvarnom logotipu (uski, tanki,
   jako razmaknuti geometrijski sans-serif — logo sam ostaje jedina iznimka
   s tim karakterom tankih/razmaknutih slova, design-tokens.md §0). Jost
   ostaje na UI-ju (nav, gumbi, eyebrow), Source Serif 4 na tijelu teksta. */
@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/PublicSans-400-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/PublicSans-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -------------------------------------------------------------------------
   2. Tokeni — boje/fontovi/radiusi doslovno iz design-tokens.md §7;
   layout i ritam sad fluidni (clamp) umjesto tri fiksna breakpointa.
   ------------------------------------------------------------------------- */

:root {
  /* pozadine */
  --boja-lan: #F6F2EC;
  --boja-pijesak: #ECE4D8;
  --boja-bijela: #FFFFFF;
  --boja-zob: #E3D6C4;

  /* tekst — jedna boja za body i sve naslove (H1–H3) */
  --boja-sepija-tamna: #3E362F;
  --boja-sepija: #6A5B4E;

  /* interakcija — orah nosi sve interaktivno (linkovi, secondary CTA, focus, eyebrow).
     REVIDIRANO 8.9.2026 na Martin izričit zahtjev (vizualni refinement): #7A5A41 →
     #644B3A — dublji, manje zasićen ("karamelast") ton, uz poboljšan kontrast
     (orah/lan 5,6:1 → 7,2:1; orah/pijesak 5,0:1 → 6,4:1; orah/zob 4,4:1 → 5,6:1,
     čime prestaje biti "NE koristiti" kombinacija — vidi §1 kontrast tablicu). */
  --boja-orah: #644B3A;
  --boja-sepija-najtamnija: #2E2823;

  /* UI i stanja */
  --boja-devina-dlaka: #B08D6A;
  --boja-obrub-meki: #D8CCBD;
  --boja-obrub-input: #9C8873;
  --boja-opeka: #7E3B2A;
  --boja-opeka-podloga: #F2E3DE;

  /* tipografija */
  --font-naslovi: 'Jost', sans-serif;
  --font-tekst: 'Source Serif 4', serif;
  --font-display: 'Public Sans', 'Jost', sans-serif;

  /* radiusi */
  --radius-gumb: 6px;
  --radius-kartica: 10px;
  --radius-foto: 12px;

  /* layout — fluidno, raste s viewportom umjesto skokova na 768/1024.
     Isti --container-sirina posvuda (osim dvostupčanih sekcija) — margine
     i padding jednaki u svakoj sekciji, bez posebnih užih iznimki. */
  --container-sirina: 1120px;
  --container-padding: clamp(1.25rem, 0.7rem + 3vw, 3rem);
  --razmak-sekcije: clamp(3.5rem, 2.5rem + 5vw, 8rem);
  --razmak-blok: clamp(1.5rem, 1.15rem + 1.8vw, 2.75rem);
}

/* -------------------------------------------------------------------------
   3. Reset — minimalan.
   ------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
}

img,
picture {
  display: block;
  max-width: 100%;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

/* Firefox/Chromium native <details> marker uklonjen — koristimo vlastiti. */
summary {
  cursor: pointer;
  list-style: none;
}
summary::-webkit-details-marker {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* -------------------------------------------------------------------------
   4. Baza — tijelo, tipografska hijerarhija. Fluidna skala (clamp):
   H2/H3/Body/Lead ostaju unutar raspona iz design-tokens.md §2, samo bez
   skoka na breakpointu. H1 je namjerno veći (ODSTUPANJE, vidi napomenu).
   ------------------------------------------------------------------------- */

body {
  background: var(--boja-lan);
  color: var(--boja-sepija-tamna);
  font-family: var(--font-tekst);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  line-height: 1.65;
  font-weight: 400;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--boja-sepija-tamna);
  font-weight: 400;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.125rem, 1.8rem + 1.5vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

h2 {
  font-size: clamp(1.625rem, 1.45rem + 0.85vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h3 {
  font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.375rem);
  line-height: 1.3;
  letter-spacing: -0.008em;
}

/* h4 nije bio u design-tokens.md skali (samo H1–H3 + Lead/Body) niti u
   global.css prije 3.9.2026 — h4 (Logoterapija, Grupna psihoterapija)
   dosad je tiho padao na sistemski font/veličinu preglednika, bez ijedne
   deklaracije. Nastavlja isti obrazac silaznog stupnjevanja ispod h3. */
h4 {
  font-size: clamp(1.1875rem, 1.05rem + 0.35vw, 1.3125rem);
  line-height: 1.35;
  letter-spacing: -0.005em;
}

/* REVIDIRANO 3.9.2026: design-tokens.md je ovo spustio s 1.1em na 0.4em u
   dizajnerskoj sesiji na naslovnoj (kraći, punchier odlomci naslovne).
   Na sadržajno gušćim uslužnim stranicama (FAQ odgovori, dugi narativni
   odlomci) 0.4em je djelovao kao "hrpa teksta" — manje od pola linije
   razmaka. Layout/razmaci nisu fiksirani u design-tokens.md (ono izričito
   kaže da se smiju mijenjati iz sesije u sesiju), pa je ovo podignuto na
   0.85em — vidljiv razmak, i dalje manji od punog razmak-bloka između
   cjelina (Geštalt blizina: razmak MEĐU odlomcima < razmak IZMEĐU blokova). */
p + p {
  margin-top: 0.85em;
}

strong,
b {
  font-weight: 600;
}

/* Značka — diskretna oznaka marke, npr. u herou. Nije u design-tokens.md
   (koji izričito kaže "bez bedževa") — dodana na izričit zahtjev, van
   dogovora o layoutu koji tokeni i ne pokrivaju. Tekst je sam naziv marke,
   ništa izmišljeno. */
.znacka {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-naslovi);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--boja-sepija);
  background: var(--boja-bijela);
  border: 1px solid var(--boja-obrub-meki);
  border-radius: 100px;
  padding: 0.4rem 0.9rem;
}

.znacka::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--boja-orah);
  flex-shrink: 0;
}

/* Eyebrow — mala oznaka iznad naslova, Jost 400 13px, uppercase. */
.eyebrow {
  display: block;
  font-family: var(--font-naslovi);
  font-weight: 400;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--boja-orah);
}

/* Rule — tanka dekorativna crta, kicker ispod eyebrowa / iznad naslova.
   Čisto dekorativna (devina dlaka = odobrena upotreba za "divideri"),
   ne nosi tekst pa ne ovisi o sadržaju iz md-a. */
.rule {
  display: block;
  width: 2.25rem;
  height: 1px;
  background: var(--boja-devina-dlaka);
  margin-bottom: 1.15rem;
}

.eyebrow + .rule {
  margin-top: 0.85rem;
}

.znacka + * {
  margin-top: 1.1rem;
}

/* NAĐENO 4.9.2026 (Martina zamolba za detaljnu analizu razmaka): ova pravila
   su gubila specifičnost protiv ".sekcija > .container > * + *" (0,2,0 > 0,1,1)
   na svakoj jednostupčanoj sekciji (Cjenik u cijelosti, većina Kontakta, sve
   H2/H3 sekcije bez slike) — .rule crta i naslov iznad su tiho dobivali PUN
   var(--razmak-blok) razmak (24–44px) umjesto namjeravanog tijesnog 1.15rem.
   U dvostupčanim (.sekcija__tekst) sekcijama slučajno je već radilo ispravno
   jer je ".rule + h1" ondje bio specifičniji od ".sekcija__tekst > * + *".
   Dolje eksplicitno pokriva oba konteksta s dovoljno visokom specifičnošću
   da uvijek pobijedi, umjesto da se oslanja na slučajnost. */
.rule + h1,
.rule + h2,
.rule + h3,
.sekcija > .container > .rule + h1,
.sekcija > .container > .rule + h2,
.sekcija > .container > .rule + h3,
.sekcija__tekst > .rule + h1,
.sekcija__tekst > .rule + h2,
.sekcija__tekst > .rule + h3 {
  margin-top: 0;
}

/* REVIDIRANO 8.9.2026 na Martin izričit zahtjev (vizualni refinement): .rule
   se ponavljala ispred gotovo svakog H2/H3 na sajtu (12-14× po uslužnoj
   stranici) i postala mehanički tik umjesto akcenta. Zadržava se puna verzija
   u herou i "bio" dvostupčanim sekcijama (.rule je ondje unutar .sekcija__tekst,
   pa selektor ispod ne pogađa), u citatu (.rule je unutar .citat, isto izvan
   dosega), u tamnoj završnoj CTA sekciji (izričito isključena ispod) te
   svugdje gdje crtu najavljuje .eyebrow (npr. "Usluge", "Tematski ciklus") —
   to su stvarni prijelazi/kickeri vrijedni akcenta. Obična samostalna crta
   ispred H1/H2/H3 u jednostupčanoj sekciji bez eyebrowa nestaje potpuno;
   razmak prema naslovu ostaje isti (pravilo iznad i dalje vrijedi jer se
   sibling-selektori oslanjaju na DOM, ne na renderiranje) — naslov + whitespace
   sami nose hijerarhiju. `.rule` je već aria-hidden, pa `display: none` nema
   nikakav utjecaj na čitače ekrana. */
.sekcija:not(.sekcija--tamna) > .container > .rule:not(.eyebrow + .rule) {
  display: none;
}

.rule--centar {
  margin-inline: auto;
}

/* Istaknuta rečenica — diskretan "pull quote" unutar teksta, ali ostaje
   običan odlomak (semantički nije citat/blockquote, nema navodnika).
   "Zlatna" nijansa iz zahtjeva = orah, ne devina dlaka — potonja nikad
   ne smije nositi tekst (kontrast 2,7:1, design-tokens.md §1). */
.istaknuto {
  font-style: italic;
  color: var(--boja-orah);
}

/* Lead — prvi odlomak uvoda, Source Serif 4 400, 20/18 px */
.lead {
  font-family: var(--font-tekst);
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
  line-height: 1.55;
  color: var(--boja-sepija);
}

/* Linkovi u tekstu — boja + podcrta, uvijek; boja nikad jedini signal.
   text-decoration-skip-ink: none = puna, neisprekidana linija (bez zadanog
   preskakanja ispod repova slova poput g/j/p). */
.sekcija p a,
.kartica p a {
  color: var(--boja-orah);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-offset: 0.15em;
  /* BUG NAĐEN 8.9.2026 (tehnički QA): sirovi URL kao tekst linka (o-meni.html,
     UNICEF poveznica, doslovno iz md-a) nema razmaka pa se nije prelamao —
     na 320-375px uzrokovao je overflow od 450-500px. overflow-wrap ovo
     rješava bez ikakve izmjene vidljivog teksta. */
  overflow-wrap: break-word;
}

.sekcija p a:hover,
.kartica p a:hover {
  color: var(--boja-sepija-najtamnija);
}

/* -------------------------------------------------------------------------
   5. Pristupačnost — focus, skip-link, dodirne mete.
   ------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--boja-orah);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.preskoci-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 100;
  background: var(--boja-sepija-tamna);
  color: var(--boja-lan);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-gumb);
  font-family: var(--font-naslovi);
  font-weight: 400;
  transition: top 0.15s ease;
}

.preskoci-link:focus {
  top: 1rem;
}

/* -------------------------------------------------------------------------
   6. Layout — container, sekcije, ritam.
   ------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-sirina);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.sekcija {
  padding-block: var(--razmak-sekcije);
}

.sekcija--lan {
  background: var(--boja-lan);
}

.sekcija--pijesak {
  background: var(--boja-pijesak);
}

.sekcija--zob {
  background: var(--boja-zob);
}

.sekcija--tamna {
  background: var(--boja-sepija-tamna);
  color: var(--boja-lan);
}

.sekcija--tamna h2 {
  color: var(--boja-lan);
}

.sekcija--tamna p {
  color: var(--boja-lan);
}

.sekcija--tamna .eyebrow {
  color: var(--boja-lan);
  opacity: 0.85;
}

/* DODANO na Martin izričit zahtjev: odlomci u završnoj tamnoj CTA sekciji
   (svaka stranica) čitaju se kao jedna cjelina, ne kao niz vizualno odvojenih
   rečenica — pun razmak iz .tekst-blok (0.85em) ovdje se poništava. Vrijedi
   posvuda gdje je .sekcija--tamna korištena (uvijek završna CTA, provjereno). */
.sekcija--tamna .tekst-blok > * + * {
  margin-top: 0;
}

.sekcija > .container > * + * {
  margin-top: var(--razmak-blok);
}

.sekcija__tekst > * + * {
  margin-top: var(--razmak-blok);
}

/* Naslov se čvršće veže uz tekst koji ga izravno objašnjava; akcija
   (gumb) ostaje vizualno odvojena — razmak nije mehanički jednak posvuda. */
.sekcija__tekst > .eyebrow + *,
.sekcija > .container > h2 + *,
.sekcija > .container > h3 + *,
.sekcija__tekst > h2 + *,
.sekcija__tekst > h3 + * {
  margin-top: calc(var(--razmak-blok) * 0.45);
}

/* H1 dobiva malo više zraka prema tekstu ispod — stranica diše. */
.sekcija__tekst > h1 + * {
  margin-top: calc(var(--razmak-blok) * 0.75);
}

/* Naslov prije mreže kartica (npr. "Kako Vam mogu pomoći?") dobiva puni
   razmak, ne skraćeni — prva kartica ne smije sjediti prilijepljena uz H2. */
.sekcija > .container > h2 + .kartice {
  margin-top: var(--razmak-blok);
}

/* DODANO 8.9.2026 na Martin izričit zahtjev (vizualni refinement): čista proza
   ograničena na ~62-68 znakova po retku umjesto pune širine containera (koja je
   na širem desktopu lako prelazila 100+ znakova). Kartice, teme, FAQ, koraci,
   forme i gridovi ne koriste .tekst-blok kao omot pa ostaju na punoj širini
   grida bez ikakve iznimke — provjereno, nijedna od tih komponenti ne ovisi o
   ovoj klasi. */
.tekst-blok {
  max-width: 52rem;
}

.tekst-blok > * + * {
  margin-top: 0.85em;
}

/* H3/H4 UNUTAR tekst-bloka (podnaslovi usred naracije, npr. "Grupna
   psihoterapija nije univerzalno rješenje") su prije dobivali isti 0.4em
   razmak kao bilo koja dva odlomka — naslov se nije osjećao povezan sa
   svojim tekstom niti odvojen od prethodnog. Geštalt blizina: naslov mora
   biti BLIŽE svom tekstu nego prethodnom (isti princip kao h2/h3 na razini
   sekcije, ovdje primijenjen unutar tekst-bloka). */
.tekst-blok h3,
.tekst-blok h4 {
  margin-top: var(--razmak-blok);
}

.tekst-blok h3 + *,
.tekst-blok h4 + * {
  margin-top: 0.6rem;
}

/* .rule kicker ispred h3 (npr. "Autobiografija") već čvrsto sjedi uz njega
   (§4 pravilo niže) — reafirmirano ovdje da kasnija deklaracija ne probije
   tu vezu kroz cascade (ista specifičnost, redoslijed bi inače pobijedio). */
.tekst-blok .rule + h3,
.tekst-blok .rule + h4 {
  margin-top: 0;
}

/* Dva stupca — hero i biografska sekcija (mobile: naslagano). */
.sekcija--dvostupacna .container {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

/* Razmak između stupaca ide preko grid-gapa, ne preko opće * + * pravila
   (inače se na desktopu drugi stupac pomakne prema dolje). */
.sekcija--dvostupacna .container > * + * {
  margin-top: 0;
}

@media (min-width: 1024px) {
  .sekcija--dvostupacna .container {
    grid-template-columns: 1fr 1.15fr;
    gap: 4rem;
  }
  .sekcija--dvostupacna.sekcija--slika-lijevo .container {
    grid-template-columns: 1fr 1.15fr;
  }
  .sekcija--dvostupacna.sekcija--slika-lijevo .sekcija__slika {
    order: -1;
  }
}

/* -------------------------------------------------------------------------
   7. Gumbi — radius 6 px, visina 48 px, jedan primary po sekciji.
   ------------------------------------------------------------------------- */

.gumbovi {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

/* BUG NAĐEN 8.9.2026 (tehnički QA): white-space: nowrap na dužim CTA
   tekstovima ("Saznajte više o suradnji s organizacijama →", 43 znaka i sl.)
   uzrokovao je horizontalni overflow na 320-375px — gumb se nije smio
   prelomiti pa je jednostavno "izašao" iz viewporta. Uklonjeno; gumb sad
   smije prijeći u 2 retka na uskom ekranu (min-height i dalje 48px, raste
   ako treba). text-align: center dodan da prelomljeni redci ostanu
   centrirani kao i jednoredni tekst. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 48px;
  padding-inline: 1.75rem;
  border-radius: var(--radius-gumb);
  font-family: var(--font-naslovi);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.03em;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--primary {
  background: var(--boja-sepija-tamna);
  color: var(--boja-lan);
  border: 1px solid var(--boja-sepija-tamna);
}

/* REVIDIRANO 8.9.2026 na Martin izričit zahtjev (vizualni refinement): translateY
   lift + rast sjene na hoveru uklonjeni sa svih gumba/kartica/koraka — isti
   obrazac ponovljen na tri komponente djelovao je kao prepoznatljiv "SaaS card"
   potpis. Promjena boje pozadine/obruba je sama po sebi dovoljan signal. */
.btn--primary:hover {
  background: var(--boja-sepija-najtamnija);
  border-color: var(--boja-sepija-najtamnija);
}

.btn--secondary {
  background: transparent;
  color: var(--boja-sepija-tamna);
  border: 1px solid var(--boja-orah);
}

.btn--secondary:hover {
  background: var(--boja-pijesak);
}

/* Na tamnoj sekciji gumb je u lanu. */
.btn--na-tamnom {
  background: var(--boja-lan);
  color: var(--boja-sepija-tamna);
  border: 1px solid var(--boja-lan);
}

.btn--na-tamnom:hover {
  background: var(--boja-bijela);
}

/* Strelica u gumbu/linku — jednostavan pomak udesno pri hoveru,
   naglašava da je element klikabilan (CTA jasno vidljiv i u pokretu). */
.strelica {
  display: inline-block;
  transition: transform 0.2s ease;
}

.btn:hover .strelica,
.link-kartice:hover .strelica,
.linkovi-tamno a:hover .strelica {
  transform: translateX(4px);
}

/* Link-stil unutar kartice — "pročitajte više", ne gumb. */
.link-kartice {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--boja-orah);
  font-family: var(--font-naslovi);
  font-weight: 400;
  font-size: 16px;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-offset: 0.15em;
}

.link-kartice:hover {
  color: var(--boja-sepija-najtamnija);
}

/* -------------------------------------------------------------------------
   8. Kartice — samo za usporedive stavke (usluge, grupe, cijene).
   ------------------------------------------------------------------------- */

.kartice {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .kartice {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
}

/* Modifikator za tri usporedive stavke (za-organizacije.html; od 21.9.2026 i
   naslovna, otkad usluga "Psihološko savjetovanje" svela karticu usluga na
   tri) — 2-stupčana mreža ostavlja treću karticu samu u retku na
   tabletu/desktopu; ovo drži sve tri u jednom retku od 1024px. Ne mijenja
   zadano ponašanje .kartice (bez modifikatora ostaje na 2 stupca). */
@media (min-width: 1024px) {
  .kartice--tri {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* REVIDIRANO 4.9.2026 na Martin izričit zahtjev ("ne sviđa mi se ta bijela
   pozadina, treba nešto transparentnije/luksuznije"): puna neprozirna bijela
   zamijenjena poluprozirnom — pozadina sekcije (lan/pijesak) tiho prosijava
   kroz karticu umjesto stvaranja tvrdog kontrasta "bijela kutija na toploj
   podlozi". Vrijedi svugdje gdje se .kartica koristi (naslovna, Za
   organizacije hub). */
.kartica {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--boja-obrub-meki);
  border-radius: var(--radius-kartica);
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: border-color 0.2s ease;
}

/* Hover bez lifta/sjene (8.9.2026, vizualni refinement) — vidi napomenu uz
   .btn--primary:hover. Obrub koji prelazi u orah je sam po sebi dovoljan. */
.kartica:hover {
  border-color: var(--boja-orah);
}

.kartica h3 {
  margin: 0;
}

.kartica p {
  max-width: none;
}

.kartica p + p {
  margin-top: 0.85em;
}

.kartica .link-kartice {
  margin-top: 0.35rem;
}

/* -------------------------------------------------------------------------
   9. Quote / callout — zob podloga, navodnik u devinoj dlaci.
   Jedini dekorativni motiv na webu (uz .rule).
   ------------------------------------------------------------------------- */

/* REVIDIRANO 4.9.2026 na Martin izričit zahtjev: citat je bio "prevelik" i
   centriran (design-tokens.md §3 ga je opisivao kao "jedinu centriranu
   prozu na stranici" — ta iznimka je ovime svjesno ukinuta). Sad manji i
   lijevo poravnat kao ostatak stranice; design-tokens.md ažuriran da prati. */
.citat {
  max-width: 32rem;
}

.citat .navodnik {
  display: block;
  font-family: var(--font-tekst);
  font-style: normal;
  font-size: clamp(2.25rem, 1.9rem + 1.5vw, 3.25rem);
  line-height: 1;
  margin-bottom: 0.25rem;
  color: var(--boja-devina-dlaka);
}

.citat blockquote {
  font-family: var(--font-tekst);
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  font-style: italic;
  line-height: 1.4;
  color: var(--boja-sepija-tamna);
}

.citat .rule {
  margin-top: 1.5rem;
}

/* DODANO 4.9.2026 na Martin izričit zahtjev — Irenine odobrene rečenice,
   istaknute kao zaseban citat na (skoro) svakoj stranici. Ista .citat baza
   (navodnik + kurziv + rule), samo s potpisom ispod da se jasno razlikuje
   od postojećeg citata na naslovnoj (koji je glas klijenta, bez potpisa). */
.citat__potpis {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-naslovi);
  font-size: 14px;
  font-style: normal;
  color: var(--boja-orah);
}

/* -------------------------------------------------------------------------
   10. Fotografije — radius 12 px.
   ODSTUPANJE od design-tokens.md ("bez okvira"): na Martin zahtjev dodan
   tanak editorial "mat" okvir (.slika-okvir) — vidi napomenu na kraju.
   ------------------------------------------------------------------------- */

/* Tanak editorial razmak oko fotografije — kao paspartu na otisku.
   Radius okvira = radius fotografije + padding, da rubovi ostanu koncentrični. */
.slika-okvir {
  padding: 0.75rem;
  border: 1px solid var(--boja-obrub-meki);
  border-radius: calc(var(--radius-foto) + 0.75rem);
}

@media (min-width: 768px) {
  .slika-okvir {
    padding: 1.125rem;
    border-radius: calc(var(--radius-foto) + 1.125rem);
  }
}

.slika {
  border-radius: var(--radius-foto);
  overflow: hidden;
}

.slika img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-foto);
}

/* Hero slika — organski asimetričan oblik, drukčije od tanke fotografske "mat"
   grafike u ostatku stranice.
   REVIDIRANO 8.9.2026 na Martin izričit zahtjev (vizualni refinement, "editorial,
   ne UI komponenta"): asimetrija ublažena (10px/64px → 8px/40px), sjena lakša,
   i hover lift + rast sjene uklonjeni — fotografija nije klikabilna pa ne treba
   reagirati na miš kao gumb. Isto vrijedi za suptilni zoom koji je prije stajao
   na SVIM fotografijama (`.slika:hover img`) — uklonjen posvuda, nijedna `.slika`
   na sajtu nije link ni interaktivni element. */
.slika--hero {
  height: clamp(280px, 42vw, 460px);
  border-radius: 8px 40px 8px 40px;
  box-shadow: 0 14px 32px -20px rgba(46, 40, 35, 0.22);
}

.slika--hero img {
  border-radius: 8px 40px 8px 40px;
}

/* Omjeri — izvorna fotografija se kadrira na omjer (§8e), ne obrnuto. */
.slika--16-9 {
  aspect-ratio: 16 / 9;
}

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

.slika--3-2 {
  aspect-ratio: 3 / 2;
}

/* Dok datoteka ne postoji: rezervira prostor, sakriva slomljenu ikonu. */
.slika--ceka {
  background: var(--boja-pijesak);
}

.slika--ceka img {
  opacity: 0;
}

.slika--portret {
  max-width: 22rem;
  margin-inline: auto;
}

/* Kadar drži lice u gornjoj trećini umjesto strogog centra. */
.slika--portret img {
  object-position: 50% 18%;
}

@media (min-width: 1024px) {
  .slika--portret {
    max-width: none;
    margin-inline: 0;
  }
}

/* -------------------------------------------------------------------------
   11. Header i navigacija. Padajući izbornici (Usluge, Za organizacije)
   su <details>/<summary>, bez JS-a. Mobilni izbornik-panel koristi mali
   JS toggle (dopušteno u CLAUDE.md upravo za mobilni izbornik) jer se
   pokazalo da se <details> ne može pouzdano prisiliti da ostane otvoren
   na desktopu preko CSS-a. Sjena inače samo na dropdownu.
   ------------------------------------------------------------------------- */

.header {
  background: var(--boja-lan);
  border-bottom: 1px solid var(--boja-obrub-meki);
  position: relative;
  z-index: 20;
}

.header__red {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.5rem;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .header__red {
    min-height: 5.75rem;
  }
}

.logo {
  font-family: var(--font-naslovi);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.01em;
  color: var(--boja-sepija-tamna);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.logo:hover {
  color: var(--boja-orah);
}

.footer .logo:hover {
  color: var(--boja-lan);
  opacity: 0.8;
}

.mobilni-izbornik__gumb {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  min-width: 44px;
  padding-inline: 0.5rem;
  font-family: var(--font-naslovi);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--boja-sepija-tamna);
  cursor: pointer;
}

.mobilni-izbornik__ikona {
  position: relative;
  width: 22px;
  height: 14px;
}

.mobilni-izbornik__ikona::before,
.mobilni-izbornik__ikona::after,
.mobilni-izbornik__ikona span {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--boja-sepija-tamna);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.mobilni-izbornik__ikona::before {
  top: 0;
}

.mobilni-izbornik__ikona span {
  top: 6px;
}

.mobilni-izbornik__ikona::after {
  top: 12px;
}

/* Otvoreno stanje — ikona se pretvara u "X", jasan vizualni signal
   da isti gumb sad zatvara izbornik. */
.mobilni-izbornik.otvoreno .mobilni-izbornik__ikona::before {
  top: 6px;
  transform: rotate(45deg);
}

.mobilni-izbornik.otvoreno .mobilni-izbornik__ikona span {
  opacity: 0;
}

.mobilni-izbornik.otvoreno .mobilni-izbornik__ikona::after {
  top: 6px;
  transform: rotate(-45deg);
}

/* Mobitel: izbornik skriven dok se ne otvori gumbom (JS dodaje/miče
   .otvoreno — dopušteno u CLAUDE.md upravo za mobilni izbornik).
   position: absolute + top: 100% relativno na .header (position: relative)
   — panel uvijek sjedi točno ispod headera, bez obzira na njegovu stvarnu
   visinu (fiksna vrijednost je prije uzrokovala loše pozicioniranje i
   onemogućen scroll). 100dvh fallback rješava mobilne preglednike gdje
   adresna traka mijenja stvarnu visinu ekrana. */
.nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 25;
  max-height: calc(100vh - 4.5rem);
  max-height: calc(100dvh - 4.5rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--boja-lan);
  border-bottom: 1px solid var(--boja-obrub-meki);
  box-shadow: 0 20px 40px -20px rgba(46, 40, 35, 0.3);
  padding-block: 0.25rem 1rem;
}

.mobilni-izbornik.otvoreno .nav {
  display: block;
}

.nav__popis {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nav__stavka {
  border-bottom: 1px solid var(--boja-obrub-meki);
}

.nav__stavka > a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 52px;
  padding-inline: var(--container-padding);
  font-family: var(--font-naslovi);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--boja-sepija-tamna);
}

/* Suptilna linija ispod glavnih stavki na desktopu — tiho, bez pomicanja layouta. */
@media (min-width: 1024px) {
  .nav__stavka > a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.35rem;
    height: 1px;
    background: var(--boja-orah);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease;
  }

  .nav__stavka > a:hover::after,
  .nav__stavka > a:focus-visible::after {
    transform: scaleX(1);
  }
}

.nav__stavka--sporedna > a,
.nav__padajuci--sporedna summary {
  color: var(--boja-sepija);
  font-size: 14px;
}

.nav__padajuci summary {
  display: flex;
  align-items: center;
  gap: 0.4em;
  min-height: 52px;
  padding-inline: var(--container-padding);
  font-family: var(--font-naslovi);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--boja-sepija-tamna);
  transition: color 0.2s ease;
}

.nav__padajuci summary:hover,
.nav__padajuci summary:focus-visible {
  color: var(--boja-orah);
}

.nav__padajuci summary::after {
  content: '▾';
  font-size: 0.7em;
  color: var(--boja-orah);
  transition: transform 0.2s ease;
}

.nav__padajuci[open] summary::after {
  transform: rotate(180deg);
}

.nav__podpopis {
  background: var(--boja-pijesak);
  padding-block: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nav__podpopis li + li {
  border-top: 1px solid var(--boja-obrub-meki);
}

.nav__podpopis a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding-inline: calc(var(--container-padding) + 0.75rem) var(--container-padding);
  font-family: var(--font-naslovi);
  font-size: 15px;
  color: var(--boja-sepija-tamna);
}

@media (min-width: 1024px) {
  .mobilni-izbornik__gumb {
    display: none;
  }

  /* Na desktopu izbornik je uvijek vidljiv, u normalnom toku (ne fiksni
     panel preko sadržaja — to je samo mobilni obrazac). */
  .nav {
    display: block;
    position: static;
    max-height: none;
    overflow: visible;
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    padding-block: 0;
  }

  .nav__popis {
    flex-direction: row;
    align-items: center;
    gap: 1.75rem;
  }

  .nav__stavka {
    border-bottom: none;
  }

  .nav__stavka > a,
  .nav__padajuci summary {
    min-height: auto;
    padding-inline: 0;
  }

  .nav__padajuci {
    position: relative;
  }

  .nav__podpopis {
    position: absolute;
    top: calc(100% + 0.85rem);
    left: 0;
    min-width: 15rem;
    background: var(--boja-bijela);
    border: 1px solid var(--boja-obrub-meki);
    border-radius: var(--radius-kartica);
    box-shadow: 0 18px 44px -20px rgba(46, 40, 35, 0.18);
    padding: 0.4rem 0.6rem;
    gap: 0;
  }

  .nav__podpopis li + li {
    border-top: 1px solid var(--boja-obrub-meki);
  }

  .nav__podpopis a {
    padding-inline: 0.6rem;
    border-radius: calc(var(--radius-kartica) - 4px);
  }

  .nav__podpopis a:hover {
    background: var(--boja-lan);
  }
}

/* -------------------------------------------------------------------------
   12. Footer — podloga sepija najtamnija, tekst u lanu, logo u svijetloj verziji.
   Trostupčani raspored: marka+NAP | brzi linkovi | (rezervirano za treći stupac
   kad bude sadržaja — npr. društvene mreže — ne izmišljati prazan stupac).
   ------------------------------------------------------------------------- */

.footer {
  background: var(--boja-sepija-najtamnija);
  color: var(--boja-lan);
  padding-block: 4rem;
  border-top: 1px solid rgba(246, 242, 236, 0.1);
}

@media (min-width: 768px) {
  .footer {
    padding-block: 5.5rem;
  }
}

.footer__gornji {
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
}

@media (min-width: 768px) {
  .footer__gornji {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3rem;
  }
}

.footer .logo {
  color: var(--boja-lan);
  font-size: 22px;
  letter-spacing: 0.02em;
}

.footer__nap {
  margin-top: 1.25rem;
  color: var(--boja-lan);
  opacity: 0.7;
  font-size: 16px;
  line-height: 1.6;
  max-width: 26rem;
}

.footer__nap p + p {
  margin-top: 0.3em;
}

.footer__stupac-naslov {
  font-family: var(--font-naslovi);
  font-weight: 400;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--boja-devina-dlaka);
  margin-bottom: 1.1rem;
}

.footer__linkovi {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer__linkovi a {
  position: relative;
  min-height: 44px;
  width: fit-content;
  display: flex;
  align-items: center;
  font-family: var(--font-naslovi);
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--boja-lan);
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.footer__linkovi a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.7rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.footer__linkovi a:hover,
.footer__linkovi a:focus-visible {
  opacity: 1;
}

.footer__linkovi a:hover::after,
.footer__linkovi a:focus-visible::after {
  transform: scaleX(1);
}

/* -------------------------------------------------------------------------
   13. Breadcrumb — sve stranice osim naslovne (seo-guidelines.md §4).
   Nije u index.html (naslovna nema breadcrumb) — DODANO na uslužnoj stranici.
   ------------------------------------------------------------------------- */

.breadcrumb {
  background: var(--boja-lan);
  border-bottom: 1px solid var(--boja-obrub-meki);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-block: 0.85rem;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  font-family: var(--font-naslovi);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--boja-sepija);
}

.breadcrumb li + li::before {
  content: '›';
  margin-inline: 0.55em;
  color: var(--boja-devina-dlaka);
}

.breadcrumb a {
  color: var(--boja-sepija);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-offset: 0.15em;
}

.breadcrumb a:hover {
  color: var(--boja-orah);
}

.breadcrumb li[aria-current="page"] {
  color: var(--boja-sepija-tamna);
}

/* -------------------------------------------------------------------------
   14. Liste u tijelu teksta — nije u index.html (naslovna nema <ul> u
   sadržaju). DODANO za nabrajanja poput "Individualna psihoterapija na
   Trešnjevci i online". Oznaka je crtica u orahu, ne native bullet.
   ------------------------------------------------------------------------- */

.tekst-blok ul {
  display: flex;
  flex-direction: column;
  gap: 0.7em;
}

.tekst-blok li {
  position: relative;
  padding-left: 1.4em;
}

.tekst-blok li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--boja-orah);
}

/* -------------------------------------------------------------------------
   15. Navigacijski redak — "Tekst → [Naziv stranice]" (seo-guidelines.md,
   konvencije tijela). Nije u index.html. DODANO: zaseban redak s razmakom,
   strelica je dio teksta iz md-a.
   ------------------------------------------------------------------------- */

.navigacijski-redak {
  font-family: var(--font-naslovi);
  font-weight: 400;
  font-size: 16px;
}

.navigacijski-redak a {
  color: var(--boja-orah);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-offset: 0.15em;
}

.navigacijski-redak a:hover {
  color: var(--boja-sepija-najtamnija);
}

/* -------------------------------------------------------------------------
   16. FAQ harmonika — <details>/<summary>, odgovor u DOM-u i zatvoren
   (§5 GEO). Nije u index.html. DODANO. Ikona u orahu (design-tokens.md §1,
   "Interakcija" tablica već predviđa "FAQ ikona").
   REVIDIRANO prema context/psiholoski-principi.md ("zabranjuje nepotrebne
   kartice i dekorativne okvire") — bijela podloga + obrub sa sve četiri
   strane po stavci uklonjeni; grupiranje sad ide preko gornje/donje crte
   (isti obrazac razdjelnika kao .nav__podpopis li + li), ne zatvorene
   kartice. Puna širina retka i dalje jasno nosi klik/dodirnu metu.
   ------------------------------------------------------------------------- */

.faq {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--boja-obrub-meki);
}

.faq__stavka {
  border-bottom: 1px solid var(--boja-obrub-meki);
}

.faq__pitanje {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.25rem;
  padding-block: 1.25rem;
}

.faq__pitanje h3 {
  margin: 0;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
}

.faq__pitanje::after {
  content: '+';
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-naslovi);
  font-size: 1.25rem;
  color: var(--boja-orah);
  transition: transform 0.2s ease;
}

.faq__stavka[open] .faq__pitanje::after {
  transform: rotate(45deg);
}

/* REVIDIRANO 4.9.2026 na Martin izričit zahtjev — odgovor je sjedio
   prilijepljen uz pitanje (nikakav razmak prije prvog <p>); dodan
   padding-top da odgovor vizualno "sjedne niže", odvojen od pitanja. */
.faq__odgovor {
  padding-top: 0.5rem;
  padding-bottom: 1.5rem;
}

/* DODANO na Martin izričit zahtjev: odgovor se čita kao jedna cjelina,
   ne kao niz vizualno odvojenih rečenica — isti razlog i vrijednost kao
   .sekcija--tamna .tekst-blok (vidi §6). */
.faq__odgovor > * + * {
  margin-top: 0;
}

/* -------------------------------------------------------------------------
   17. Teme — popis srodnih podtema unutar jedne sekcije (npr. "S čime
   možete doći..."). Nije u index.html. DODANO na Martin zahtjev (bolji
   razmak i hijerarhija).
   REVIDIRANO prema context/psiholoski-principi.md, Geštalt "Blizina":
   "primarni alat za grupiranje u ovom projektu" — prvotna verzija imala
   je lijevi obrub kao okvir; uklonjen. Grupiranje sad nosi isključivo
   razmak (2.25rem između tema) + tijesna veza naslova s vlastitim
   odlomkom (0.5rem) — veći razmak IZMEĐU tema nego UNUTAR teme je dovoljan
   signal bez ijedne linije.
   ------------------------------------------------------------------------- */

.teme {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

.tema h3 {
  margin-bottom: 0.5rem;
}

.tema p {
  max-width: none;
}

/* -------------------------------------------------------------------------
   17b. Izjava — citirana rečenica ("ono što ljudi kažu") unutar tekst-bloka,
   pomiješana s naracijom (npr. "Terapija nije sudnica", "Možda vam neke
   od ovih rečenica..."). Nije u index.html. DODANO na Martin zahtjev —
   crtica ispred izdvaja izjave od okolnog teksta, isti vizualni jezik kao
   crtica ispred stavki liste (.tekst-blok li::before), samo primijenjen na
   pojedine odlomke, ne cijelu listu. Sadržaj/tekst se ne mijenja.
   ------------------------------------------------------------------------- */

.izjava {
  position: relative;
  padding-left: 1.4em;
}

.izjava::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--boja-orah);
}

/* -------------------------------------------------------------------------
   18. Koraci — numerirani proces (npr. "Kako izgleda individualna
   psihoterapija?"). Nije u index.html. DODANO na Martin izričit zahtjev
   (jasniji kontejneri + brojevi 01/02/03/04). Broj je dekorativan
   (aria-hidden).
   NAPOMENA o naslovu koraka: izvorni md ima redni broj u tekstu naslova
   ("1. Javljate se...", "1. Prvi susret — dolazite zajedno" itd.). Marta je
   izričito tražila da se taj broj UKLONI iz vidljivog H3 teksta jer je
   suvišan uz dekorativni broj — ovo je jedino mjesto na sajtu gdje vidljivi
   tekst odstupa od doslovnog md-a, i to na Martinu izričitu uputu, ne
   Claudeovu inicijativu. Isti obrazac dosljedno primijenjen na svim
   stranicama koje koriste .koraci (individualna, bračno savjetovanje, obje
   B2B stranice s koracima suradnje). Sidra (id) ostala nepromijenjena.
   SVJESNO ZADRŽANO uz obrub nakon čitanja context/psiholoski-principi.md
   (koji traži da se okvir koristi "samo kad blizina objektivno nije
   dovoljna"): 4 koraka imaju vrlo neravnomjernu dužinu teksta (korak 2 ima
   5 odlomaka, koraci 1 i 3 tek 2-3) — čist razmak bez granice ne bi dao
   pouzdan signal gdje jedan korak završava, a drugi počinje.
   REVIDIRANO 4.9.2026 na Martin izričit zahtjev ("luksuznije"): dobiva istu
   poluprozirnu podlogu kao .kartica (§8) + tihu stalnu sjenu (ne samo na
   hover, jer .korak nije klikabilan kao kartica — "lift" mora biti vidljiv
   i u mirovanju da se osjeti). I dalje bez hover-lift pomaka i bez potpune
   vizualne istovjetnosti s .kartica — ostaje mirniji, "sadržajni" entitet.
   ------------------------------------------------------------------------- */

.koraci {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* REVIDIRANO 4.9.2026, drugi put — Marta tražila još prozirnije + hover
   efekt (isti jezik kao .kartica: obrub u orah, lagan podignut, jača sjena).
   REVIDIRANO PONOVNO 8.9.2026 (vizualni refinement, Martin izričit zahtjev):
   "lagan podignut" + jača sjena na hoveru uklonjeni — isti razlog kao kod
   .kartica/.btn (vidi napomenu uz .btn--primary:hover). Stalna sjena u
   mirovanju iz prošle revizije ostaje; hover sad mijenja samo obrub. */
.korak {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--boja-obrub-meki);
  border-radius: var(--radius-kartica);
  box-shadow: 0 14px 30px -24px rgba(46, 40, 35, 0.28);
  transition: border-color 0.2s ease;
}

/* Hover bez lifta/rasta sjene (8.9.2026, vizualni refinement) — statična sjena
   u mirovanju ostaje (namjerna, vidi napomenu gore); hover mijenja samo obrub. */
.korak:hover {
  border-color: var(--boja-orah);
}

@media (min-width: 640px) {
  .korak {
    flex-direction: row;
    gap: 1.5rem;
    padding: 1.75rem;
  }
}

.korak__broj {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  line-height: 1;
  color: var(--boja-devina-dlaka);
}

.korak__sadrzaj {
  min-width: 0;
}

.korak__sadrzaj h3 {
  margin: 0 0 0.6rem;
}

.korak__sadrzaj .tekst-blok {
  margin-top: 0;
}

/* -------------------------------------------------------------------------
   19. Oznake — kratke činjenične stavke uz ponudu (broj susreta, lokacija,
   voditeljice ispod opisa grupe), kao pill-oznake. Nije u index.html.
   DODANO na Martin zahtjev ("luksuznije i ljepše" od običnih redaka teksta)
   — ponovno koristi isti vizualni jezik kao .znacka (bijela podloga,
   obrub-meki, radius 100px), samo bez točke i bez uppercasea (sadrže imena
   osoba, velika slova bi ondje smetala čitljivosti).
   ------------------------------------------------------------------------- */

.oznake {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.oznaka {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-naslovi);
  font-weight: 400;
  font-size: 14px;
  color: var(--boja-sepija-tamna);
  background: var(--boja-bijela);
  border: 1px solid var(--boja-obrub-meki);
  border-radius: 100px;
  padding: 0.55rem 1.1rem;
}

/* -------------------------------------------------------------------------
   20. Naziv grupe — vizualno istaknut H3 (npr. "Autobiografija"), na
   Martin zahtjev veći od standardnog H3 jer su ovo stvarne "ponude" na
   stranici, ne obična podtema. Ostaje semantički H3 (hijerarhija H2 →
   ovo → H4 i dalje ispravna) — samo font-size skaliran na H2 razmjer preko
   klase, doslovno preuzeto iz h2 pravila (§4). Nije u index.html. DODANO.
   ------------------------------------------------------------------------- */

.grupa-naziv {
  font-size: clamp(1.625rem, 1.45rem + 0.85vw, 2rem);
}

/* -------------------------------------------------------------------------
   21. Cijena — istaknuta cijena/napomena uz uslugu (Cjenik). Nije u
   index.html. DODANO — koristi --font-display (naslovni font, sad Public
   Sans) da cijena vizualno nosi istu težinu kao podnaslov, umjesto da se
   izgubi kao običan odlomak.
   ------------------------------------------------------------------------- */

.cijena {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.375rem); /* = h3, ne nova veličina */
  color: var(--boja-sepija-tamna);
}

/* -------------------------------------------------------------------------
   22. (prazno — "centrirano-sve" i "sekcija--centrirano" uklonjeni 4.9.2026:
   Marta je odlučila da i Kontakt i Cjenik ostaju posve lijevo poravnati,
   samo bez fotografija, ne centrirani. Ako centriranje ikad zatreba,
   design-tokens.md §3 i dalje kaže "Citat je jedina centrirana proza na
   stranici" — svaka nova iznimka treba isti izričit dogovor kao ova.)
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   23. Obrazac — B2B kontaktni obrazac (content/_obrazac-b2b.md,
   context/obrasci.md). Prvi put korišten na za-organizacije.html; isti
   modul ide i na stranice 12–14. Boje polja i greške (obrub-input, opeka,
   opeka-podloga) već su postojale u design-tokens.md §1 prije ijedne forme
   — ta su dva tokena provjerena samo na svijetloj podlozi (Opeka/Lan
   7,2:1), zato forma svjesno ostaje u .sekcija--pijesak, ne u
   .sekcija--tamna (nema provjerenog kontrasta za grešku na tamnoj bazi).
   ------------------------------------------------------------------------- */

.obrazac-omot {
  max-width: 38rem;
}

.obrazac {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: var(--razmak-blok);
}

.polje {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.polje label {
  font-family: var(--font-naslovi);
  font-weight: 400;
  font-size: 15px;
  color: var(--boja-sepija-tamna);
}

.polje__napomena {
  font-weight: 400;
  color: var(--boja-sepija);
}

.polje__pomoc {
  font-family: var(--font-tekst);
  font-size: 15px;
  line-height: 1.5;
  color: var(--boja-sepija);
  margin: 0;
}

/* Tekst ≥ 16px na svim poljima (CLAUDE.md, mobile-first) — font-size fiksno
   16px, ne clamp, da input nikad ne padne ispod praga na malom ekranu. */
.polje input,
.polje select,
.polje textarea {
  font: inherit;
  font-size: 16px;
  font-family: var(--font-tekst);
  color: var(--boja-sepija-tamna);
  background: var(--boja-bijela);
  border: 1px solid var(--boja-obrub-input);
  border-radius: var(--radius-gumb);
  padding: 0.75rem 1rem;
  min-height: 48px;
}

.polje textarea {
  min-height: 140px;
  resize: vertical;
}

.polje input:focus-visible,
.polje select:focus-visible,
.polje textarea:focus-visible {
  outline: 2px solid var(--boja-orah);
  outline-offset: 2px;
}

/* Honeypot (context/obrasci.md) — u DOM-u i u tab-redoslijedu izbjegnut
   (tabindex="-1"), ali NE display:none: neki botovi ignoriraju polja koja
   su display:none, dok se ovo i dalje može popuniti automatskim skriptama
   koje ne renderiraju CSS. Sakriveno pozicioniranjem izvan vidljivog
   prostora (uobičajen "vizualno sakriveno" obrazac, isti princip kao
   .sr-only, samo bez teksta koji čitač ekrana mora izgovoriti — zato i
   aria-hidden na omotu u HTML-u). */
.polje--zamka {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.obrazac button[disabled] {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Status poruke — isto područje za uspjeh i grešku (obrasci.md), uvijek
   rezervira visinu retka da gumb ne "skoči" kad se tekst pojavi. */
.obrazac__poruka {
  font-family: var(--font-naslovi);
  font-size: 15px;
  color: var(--boja-sepija-tamna);
  min-height: 1.2em;
}

/* Greška nikad samo bojom (design-tokens.md §5) — uz opeku dolazi i tekstni
   prefiks "Greška:" u HTML-u, ne samo promjena boje. */
.obrazac__poruka--greska {
  color: var(--boja-opeka);
  background: var(--boja-opeka-podloga);
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-gumb);
}

/* -------------------------------------------------------------------------
   24. Scroll-reveal — DODANO 4.9.2026 na Martin izričit zahtjev ("tekst
   dolazi po skrolanju"), svugdje OSIM heroja (učitava se odmah, animacija
   bi kasnila LCP — CLAUDE.md cilj < 2,5 s). Klase dodaje ISKLJUČIVO
   js/animacije.js, nikad statički u HTML-u/CSS-u: ako se skripta ne
   izvrši (spor CDN, isključen JS), sadržaj ostaje potpuno vidljiv od
   početka — nema "zaglavljenog" nevidljivog sadržaja. Dodatna zaštita:
   prefers-reduced-motion gasi tranzicije globalno (§ na vrhu datoteke)
   PLUS sama skripta ne dodaje klase uopće ako korisnik to preferira.
   ------------------------------------------------------------------------- */

.scroll-najava {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-vidljivo {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------------------------------------
   25. Popis pitanja — grupirani indeks pitanja na "Kako izgleda terapija"
   (seo-guidelines.md §3e): svaka stavka vodi na sidro niže na stranici.
   DODANO 8.9.2026, VRAĆENO na ovu verziju isti dan nakon kratkog pokušaja
   pune Balans-stilizacije (bočni sticky indeks, spojena FAQ sekcija,
   centrirani CTA) — Marta je tražila da stranica ostane iste strukture i
   pravila kao ostale Irenine stranice, uz JEDNU razliku: popis pitanja u
   dva stupca ("lijevo i desno"), što ova komponenta već radi. Grupiranje
   isključivo razmakom + malim uppercase naslovom skupine (isti vizualni
   jezik kao .footer__stupac-naslov), bez okvira/kartica —
   psiholoski-principi.md, "Zajedničko područje": okvir samo kad blizina
   nije dovoljna, ovdje jest. Linkovi podcrtani samo na hover, kao
   .footer__linkovi/.nav__podpopis — ovo je navigacijski popis, ne proza,
   pa se ne primjenjuje "linkovi u tekstu uvijek podcrtani" pravilo.
   ------------------------------------------------------------------------- */

.popis-pitanja {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .popis-pitanja {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 3rem;
  }
}

.popis-pitanja__naslov {
  font-family: var(--font-naslovi);
  font-weight: 400;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--boja-devina-dlaka);
  margin-bottom: 1rem;
}

.popis-pitanja__popis {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.popis-pitanja__popis a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--boja-sepija-tamna);
  font-family: var(--font-tekst);
  font-size: 16px;
  line-height: 1.4;
}

.popis-pitanja__popis a::before {
  content: '—';
  color: var(--boja-orah);
  margin-right: 0.6em;
  flex-shrink: 0;
}

.popis-pitanja__popis a:hover,
.popis-pitanja__popis a:focus-visible {
  color: var(--boja-orah);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-offset: 0.15em;
}

/* -------------------------------------------------------------------------
   26. Poveznice na tamnoj podlozi — završni red srodnih usluga na tamnoj
   CTA sekciji ("Kako izgleda terapija"), ispod primarnog gumba. DODANO
   8.9.2026. Isti vizualni jezik kao .footer__linkovi (podcrta samo na
   hover, lan boja, opacity u mirovanju) — jedini dosadašnji obrazac za
   linkove na tamnoj podlozi na sajtu. Nije .btn: manja vizualna težina od
   primarnog CTA (hijerarhija — jedan gumb, sitniji linkovi ispod).
   ------------------------------------------------------------------------- */

.linkovi-tamno {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.linkovi-tamno a {
  color: var(--boja-lan);
  opacity: 0.85;
  font-family: var(--font-naslovi);
  font-size: 15px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.linkovi-tamno a:hover,
.linkovi-tamno a:focus-visible {
  opacity: 1;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-offset: 0.15em;
}

/* -------------------------------------------------------------------------
   27. Pitanja — bogatija, animirana harmonika samo za "Kako izgleda
   terapija". DODANO 8.9.2026 na Martin izričit zahtjev ("ne djeluje na
   luksuznoj razini, slobodno izlazi iz okvira design-tokens/CSS-a za ovu
   stranicu"). Namjerno POSVE odvojeno od baznog .faq (§16, ostale
   stranice se ne diraju) — nove klase, drukčija ikona (kružni chevron s
   glatkom rotacijom umjesto teksta "+"), veći razmak, glatka animacija
   visine preko js/harmonika.js (Web Animations API; bez JS-a <details>
   svejedno radi native, samo bez tranzicije — progresivno poboljšanje,
   isti princip kao js/animacije.js).
   Modifikator --srodno: za bivše statične "bilješke" (npr. "Dolazite na
   terapiju za parove?") koje su sada isto otvorive stavke — Martin
   zahtjev "i ove sve stvari trebale bi se moći naknadno otvoriti". Ikona
   im je strelica (vode na drugu stranicu), ne chevron (ne "odgovaraju"
   nego upućuju dalje) — razlika je namjerna, ne greška.
   ------------------------------------------------------------------------- */

.pitanja-grupa + .pitanja-grupa {
  margin-top: calc(var(--razmak-blok) * 1.7);
}

.pitanja-grupa__zaglavlje {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  margin-bottom: 0.5rem;
}

.pitanja-grupa__broj {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.7rem + 1.1vw, 2.75rem);
  line-height: 1;
  color: var(--boja-devina-dlaka);
}

.pitanja-grupa__zaglavlje h2 {
  margin: 0;
}

.pitanja-lista {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--boja-obrub-meki);
}

.pitanje-blok {
  border-bottom: 1px solid var(--boja-obrub-meki);
}

.pitanje-blok__glava {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: 1.5rem;
  transition: padding-inline-start 0.25s ease;
}

.pitanje-blok__glava:hover {
  padding-inline-start: 0.5rem;
}

.pitanje-blok__glava h3 {
  margin: 0;
  font-size: clamp(1.1rem, 1.02rem + 0.35vw, 1.3rem);
  transition: color 0.2s ease;
}

.pitanje-blok__glava:hover h3 {
  color: var(--boja-orah);
}

.pitanje-blok__ikona {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--boja-obrub-meki);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.pitanje-blok__ikona::before {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--boja-orah);
  border-bottom: 1.5px solid var(--boja-orah);
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 0.3s ease, border-color 0.2s ease;
}

.pitanje-blok[open] .pitanje-blok__ikona {
  background: var(--boja-orah);
  border-color: var(--boja-orah);
}

.pitanje-blok[open] .pitanje-blok__ikona::before {
  border-color: var(--boja-lan);
  transform: rotate(225deg) translate(-1px, -1px);
}

.pitanje-blok--srodno .pitanje-blok__ikona::before {
  content: '→';
  width: auto;
  height: auto;
  border: 0;
  font-family: var(--font-naslovi);
  font-size: 13px;
  color: var(--boja-orah);
  transform: none;
  transition: color 0.2s ease;
}

.pitanje-blok--srodno[open] .pitanje-blok__ikona::before {
  color: var(--boja-lan);
  transform: none;
}

.pitanje-blok__tijelo {
  padding: 0 0 1.85rem;
}

/* Isti razlog kao .faq__odgovor (§16) i .sekcija--tamna .tekst-blok (§6):
   odgovor kao jedna cjelina, ne niz odvojenih rečenica. */
.pitanje-blok__tijelo > * + * {
  margin-top: 0;
}

/* Hero — nešto veći H1 i teže vodeći prvi odlomak, samo na ovoj stranici
   (nema podnaslov polje u frontmatteru pa ne dobiva .lead, ali smije
   dobiti vizualnu težinu — čisto CSS, tekst se ne mijenja). */
.hero-veliki h1 {
  font-size: clamp(2.5rem, 2.05rem + 2vw, 3.75rem);
}

.hero-veliki .tekst-blok > p:first-child {
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
  line-height: 1.6;
  color: var(--boja-sepija);
}