/* ============================================================
   Psihoresurs: DIZAJN SISTEM (S12a). Učitava se POSLEDNJI (inc/enqueue.php), posle main.css, opste.css i
   psihoresurs.css.

   Jedan izvor istine: svi tokeni (boje, razmaci, tipografija, radijusi, fokus) su na :root ovde; stari tokeni iz
   main.css / psihoresurs.css (--color-*, --pr-*, --kat-*) se preslikavaju na nove, pa i stara pravila crtaju istim
   bojama. Hex vrednosti postoje SAMO u :root bloku ispod. Komponente su definisane jednom, ovde:
     dugmad · tekst-link sa strelicom · kartica · mreža kartica · oznaka broja · prazno stanje · segmentni prekidač ·
     harmonika · zaglavlje sekcije · CTA traka · „na vrh" · hero podstranice · meni i breadcrumb · red događaja ·
     tabela zvanja · kontakt podaci.
   Stara pravila za iste komponente u ranijim fajlovima ostaju (kaskada ih gazi); čišćenje ide postepeno.

   S12g (rebrend boja): čista papirna pozadina i puni, jaki blokovi boja, bez blagih nijansi, prelaza i senki. Paleta
   (deo 1) je jedini izvor boja: --papir, --limun, --tamna, --zuta, --nebo, --roze, uz izvedene samo za funkciju
   (--tekst-blag, --linija, --prosli, --bela, --roze-blaga). Pozadine sekcija su samo --papir i --limun, naizmenično;
   puni blokovi su zaobljeni --r-lg, bez senke. Žuta nikad kao boja teksta na svetloj pozadini; narandžasta samo u
   logu (ovde je nema).
   S12j (smirenija paleta, po uzoru na štampani materijal): --zuta dominira (primarna dugmad, veliki blokovi), --roze je
   JEDINI drugi akcenat (sekundarni blokovi, hover --roze-blaga, linije), --tamna je tekst, footer, CTA kartica i mali
   puni oblici; --nebo je SAMO kategorija „onlajn" u kalendaru (--kat-onlajn: tačkice, čip, blok datuma).
   S12k: svetle izvedene --roze-svetla i --nebo-svetla su samo pozadine sekcija grupa na Čestim pitanjima (.bg-roze-svetla,
   .bg-nebo-svetla); --tamna na njima 8.7:1 i 8.8:1, --tekst-blag ≥ 5.6:1.
   S13: --papir je #FAF4E8 (topla „kartonska" nijansa, ista kao pozadina hero kolaža početne, pa slika i strana prelaze
   bez ivice); kartice, polja formi i padajući meni ostaju --bela, pa se odvajaju od strane.
   Ranije sesije: S12b ukrasi, generisane naslovne, Napredna, kalendar u dve kolone, česta pitanja; S12d
   mikro-interakcije (delovi 4–6, 11, 16, 23, 27, 30) i pokret (deo 31: reči naslova, fotografije, kartice, Napredna,
   kalendar, prelazi stranica; assets/js/pokret.js); S12e hero početne sa velikom fotografijom (deo 15), „Ko smo"
   (deo 22), kompaktan hero bez slike, pokret se odigra jednom; S12f eyebrow kao običan tekst (deo 2), hero podstranice
   po sadržaju (deo 15), pločice, sertifikat, kvačice, tipovi supervizije i izdvojeni citat (deo 32); S12h manje slike
   na podstranicama kao „zalepljene" fotografije sa jednim ukrasom (delovi 15 i 33), „Ko smo" cela slika (deo 22).
   ============================================================ */

/* -- 1. Tokeni ------------------------------------------------------------------------------------------------- */
/* S12g: paleta. Kontrast (WCAG, odnos; proveren za svaku kombinaciju, izveštaj S12g; --papir S13):
     --tamna na --papir 9.28 · --limun 9.06 · --zuta 7.26 · --nebo 6.67 · --roze 7.26 · --roze-blaga 8.6 · beloj 10.16
     --tekst-blag (--tamna 82%) na --papir 5.79 · --limun 5.78 · --zuta 5.09 · --nebo 4.54 · --roze 4.91 · beloj 6.15
       (75% bi na --nebo imalo 3.88 i na --roze 4.19, pa je 82%)
     --prosli na --papir 5.07 · --limun 4.95 · beloj 5.55 (prošli događaji su samo na tim pozadinama)
     bela na --tamna 10.16 · --zuta na --tamna 7.26 (footer, CTA kartica: akcenti) */
:root {
  /* Paleta */
  --papir: #FAF4E8;                      /* osnovna pozadina (S13; do S13 #FFFDF6) */
  --limun: #FFF4A2;                      /* jedina druga pozadina sekcija */
  --tamna: #183E85;                      /* tekst, naslovi, footer, CTA kartica */
  --zuta: #FFD725;                       /* primarna dugmad, akcenti, blok */
  --nebo: #ABD6FF;                       /* S12j: SAMO kategorija „onlajn" u kalendaru (--kat-onlajn) */
  --roze: #FFCAF3;                       /* jedini drugi akcenat: blok, linije */

  /* Izvedene, samo za funkciju */
  --bela: #FFFFFF;
  --tamna-rgb: 24, 62, 133;              /* = --tamna, samo za rgba() u ovom bloku */
  --tekst: var(--tamna);
  --tekst-blag: rgba(var(--tamna-rgb), .82); /* sitan i prateći tekst: ≥ 4.54:1 na svim pozadinama i blokovima */
  --linija: rgba(var(--tamna-rgb), .12); /* ivice, razdelnici */
  --prosli: #6B6862;                     /* prošli dani i događaji (siva) */
  --roze-blaga: #FFE5F9;                 /* S12j: blaga --roze ispuna za hover (--roze 50% sa belom) */
  --roze-svetla: #FFE6F7;                /* S12k: svetla --roze, samo pozadina sekcije (Česta pitanja) */
  --nebo-svetla: #E3F0FF;                /* S12k: svetla --nebo, samo pozadina sekcije (Česta pitanja) */

  /* Uloge (samo nazivi za palete iznad) */
  --zatamnjenje: rgba(var(--tamna-rgb), .8); /* pozadina modala (podkast, biografija) */
  --fokus: var(--tamna);                 /* fokus prsten; na --tamna podlozi --zuta */

  /* Kalendar: ćelije dana (mreža meseca). Dan sa događajem je bela kućica sa linijom; dan bez događaja samo broj;
     prošao dan siv, bez kućice; danas tamni okvir; izabran pun --tamna. */
  --kal-dan: var(--bela);
  --kal-dan-ivica: var(--linija);
  --kal-dan-hover: var(--roze-blaga);
  --kal-dan-izabran: var(--tamna);

  /* Kategorije događaja (tačkice, čipovi, blok datuma); tekst preko bloka: --tamna, na superviziji bela */
  --kat-uzivo: var(--zuta);
  --kat-onlajn: var(--nebo);
  --kat-super: var(--tamna);
  --kat-poseban: var(--roze);

  /* Razmaci 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --sekcija-y: clamp(56px, 8vw, 104px);
  --sekcija-glava: 40px;                 /* zaglavlje sekcije → sadržaj (telefon 28px) */
  --hero-dno: 64px;                      /* telefon 40px */

  /* Kontejner: jedna širina za sve sekcije (ista kao zaglavlje sajta) */
  --kontejner: 1440px;
  --gutter: 20px;                        /* telefon 20px, od 640px 32px */
  --proza: 68ch;                         /* samo blokovi proze, nikad mreže, kartice i tabele */

  /* Tipografija (fluidno) */
  --fs-hero: clamp(36px, 4.6vw, 60px);
  --fs-h2-s: clamp(28px, 3.2vw, 42px);
  --fs-h3-s: clamp(19px, 1.5vw, 23px);
  --fs-telo: 17px;                       /* telefon 16px */
  --fs-sitno: 14px;
  --fs-nadnaslov: 12.5px;
  --fs-pitanje: 18px;                    /* desktop 20px */

  /* Zaobljenja */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Stari tokeni → paleta (main.css, psihoresurs.css, opste.css, inline stilovi u šablonima). S12g: senke su
     uklonjene (ravni blokovi), pa su --shadow-* i --senka „none". */
  --senka: none;
  --pr-krem: var(--papir);
  --pr-zuta: var(--zuta);
  --pr-zuta-tamna: var(--zuta);
  --pr-teget: var(--tamna);
  --pr-teget-tamni: var(--tamna);
  --pr-svetloplava: var(--roze);
  --color-blue-900: var(--tamna);
  --color-blue-800: var(--tamna);
  --color-blue-700: var(--tamna);
  --color-blue-500: var(--fokus);        /* fokus prsten svuda isti */
  --color-blue-300: var(--roze);         /* S12j: stari „svetloplavi" tokeni → --roze (na --tamna: 7.26:1) */
  --color-blue-200: var(--roze);
  --color-blue-100: var(--roze);
  --color-blue-50: var(--roze-blaga);    /* hover (strelice kalendara, paginacija) */
  --color-clay-700: var(--tamna);
  --color-clay-600: var(--zuta);
  --color-clay-500: var(--zuta);
  --color-clay-200: var(--zuta);
  --color-clay-100: var(--roze);         /* .tag--accent („Još N mesta"): --tamna na --roze 7.26 */
  --color-clay-50: var(--limun);
  --color-ink: var(--tamna);
  --color-ink-soft: var(--tekst-blag);
  --color-body: var(--tekst);
  --color-muted: var(--tekst-blag);
  --color-rule: var(--linija);
  --color-rule-soft: var(--linija);
  --color-bg: var(--papir);
  --color-surface: var(--bela);
  --color-white: var(--bela);
  --color-dark: var(--tamna);
  --color-footer: var(--tamna);
  --brand: var(--tamna);
  --brand-strong: var(--tamna);
  --accent: var(--zuta);
  --accent-soft: var(--roze);
  --surface-cool: var(--roze);
  --surface-warm: var(--roze);
  --kat-uzivo-trening: var(--kat-uzivo);
  --kat-online-trening: var(--kat-onlajn);
  --kat-supervizija: var(--kat-super);
  --kat-poseban-dogadjaj: var(--kat-poseban);
  --kat-poseban-dogadjaj-podloga: var(--kat-poseban);
  --kat-bez: var(--bela);                /* događaj bez kategorije: bela kućica / prazan kružić sa obodom */
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-pill: var(--r-pill);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --fs-body: var(--fs-telo);
  --fs-small: var(--fs-sitno);
  --fs-eyebrow: var(--fs-nadnaslov);
  --fs-h1: var(--fs-hero);
  --fs-h2: var(--fs-h2-s);
  --fs-h3: var(--fs-h3-s);
  --section-y: var(--sekcija-y);
}
@media (min-width: 640px) {
  :root { --gutter: 32px; }
}
@media (max-width: 639px) {
  :root {
    --fs-telo: 16px;
    --sekcija-glava: 28px;
    --hero-dno: 40px;
  }
}
@media (min-width: 960px) {
  :root { --fs-pitanje: 20px; }
}

/* -- 2. Osnova: tekst, naslovi, fokus ----------------------------------------------------------------------------- */
/* S12d: main.css daje html i body overflow-x: hidden; tada je body sopstveni kontejner skrola koji se nikad ne skroluje,
   pa zaglavlje (position: sticky) nije ostajalo na vrhu, a animation-timeline: view() nije radio. clip seče isto (bez
   bočnog skrola), a ne pravi kontejner skrola. Stariji Safari (bez clip) zadržava hidden, kao do sada. */
html,
body { overflow-x: hidden; overflow-x: clip; }
body {
  font-size: var(--fs-telo);
  line-height: 1.65;
  letter-spacing: normal;
  color: var(--tekst);
  background: var(--papir);
}
p, li, td, th, dd, blockquote { letter-spacing: normal; }
h1, .hero__title { font-size: var(--fs-hero); line-height: 1.08; }
h2 { font-size: var(--fs-h2-s); line-height: 1.15; margin: 0 0 var(--s-4); }
h3 { font-size: var(--fs-h3-s); line-height: 1.3; }
small, .sitno { font-size: var(--fs-sitno); }
.lead { font-size: clamp(18px, 1.4vw, 20px); line-height: 1.55; color: var(--tekst); }
/* S12f: eyebrow je običan tekst, bez ikakvog znaka ispred: 12.5px (telefon 12px), velika slova, razmak .14em,
   --tekst-blag (S12g). Na tamnoj podlozi (CTA traka) žut. */
.eyebrow {
  display: block;
  font-size: var(--fs-nadnaslov);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tekst-blag);
}
@media (max-width: 639px) {
  .eyebrow { font-size: 12px; letter-spacing: .14em; line-height: 1.5; }
}
.muted { color: var(--tekst-blag); }

/* Fokus: svuda isti prsten, 2px --tamna + 2px razmak. Na tamnoj podlozi žut (CTA traka, footer). */
:focus-visible,
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.card:focus-visible,
.event__link:focus-visible,
.site-nav__link:focus-visible,
.site-nav__menu a:focus-visible,
.breadcrumb a:focus-visible,
.accordion__trigger:focus-visible,
.filter-bar a:focus-visible,
.filter-bar button:focus-visible,
.segment a:focus-visible,
.pagination__veza:focus-visible,
.pagination__broj:focus-visible,
.cal__strelica:focus-visible,
a.cal__dan:focus-visible {
  outline: 2px solid var(--fokus);
  outline-offset: 2px;
}
.cta-traka :focus-visible,
.site-footer :focus-visible,
.bg-dark :focus-visible { outline-color: var(--zuta); }

/* Proza: ograničena širina samo na blokovima teksta. Mreže, kartice i tabele idu preko cele širine kontejnera. */
.taus-prose,
.taus-prose-less,
.home-tekst,
.sav-uvod,
.proza { max-width: var(--proza); }
.mreza,
.event-lista,
.table-zvanja,
.zvanja-kartice { max-width: none; }
.sekcija__uvod { margin-bottom: var(--s-6); }

/* -- 3. Kontejner i sekcije ---------------------------------------------------------------------------------------- */
.container,
.container--wide,
.container--narrow,
.container--prose {
  max-width: var(--kontejner);
  padding-inline: var(--gutter);
}
section { padding-block: var(--sekcija-y); }
section.tight { padding-block: calc(var(--sekcija-y) * .6); }

/* Pozadine (S12g): samo --papir (osnovna) i --limun (traka), naizmenično, nikad dve iste jedna do druge. Sve stare
   klase trake (.bg-alt, .bg-cream, .bg-warm, .bg-plava, .bg-info, .bg-cool) su --limun; šabloni biraju naizmenično
   (inc/sections.php, inc/napredna-godine.php, front-page.php…). .bg-dark (stari TAUS šabloni) je --tamna. */
.bg-alt,
.bg-cream,
.bg-warm,
.bg-plava,
.bg-info,
.bg-cool { --kal-podloga: var(--limun); background: var(--limun); }
.bg-dark { background: var(--tamna); color: var(--bela); }
/* S12k: svetle pozadine sekcija (samo grupe na Čestim pitanjima, tpl-faq.php); klasa nosi „bg-", pa pravila o susednim
   sekcijama (gornji padding, pozadina CTA sekcije) rade kao i za ostale trake. */
.bg-roze-svetla { --kal-podloga: var(--roze-svetla); background: var(--roze-svetla); }
.bg-nebo-svetla { --kal-podloga: var(--nebo-svetla); background: var(--nebo-svetla); }

/* Dve susedne sekcije iste (osnovne) pozadine, uključujući hero i prvu sekciju: druga nema gornji padding. To je uzrok
   praznine od 150–200px ispod hero-a (donji padding hero-a + gornji padding sekcije), bez negativnih margina. */
section:not([class*="bg-"]) + section:not([class*="bg-"]),
:is(.bg-alt, .bg-cream, .bg-warm, .bg-plava, .bg-info, .bg-cool) + :is(.bg-alt, .bg-cream, .bg-warm, .bg-plava, .bg-info, .bg-cool) { padding-top: 0; }

/* Mreža 12 kolona (stari .row / .col-*): ispod 640px uvek jedna kolona (main.css daje .col-3 pola širine na telefonu,
   pa su kartice „Kurs za radoznale" bile u dve kolone sa po jednom rečju u redu). */
@media (max-width: 639px) {
  .row > [class*="col-"] { grid-column: 1 / -1; }
}

/* -- 4. Dugmad ------------------------------------------------------------------------------------------------------ */
/* .dugme--primarno (puna --zuta, --tamna tekst 7.26:1, bez ivice; na --limun 1.5px --tamna ivica, jer se žuta tamo
   utapa) i .dugme--sekundarno (--tamna ivica, hover ispuna --roze-blaga); stare klase (.btn--accent, .btn--primary,
   .btn--ghost) su isto dugme. Visina 48px, malo 40px. Pravilo: najviše jedno primarno po sekciji. */
.btn {
  min-height: 48px;
  padding: 0 var(--s-5);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.2;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
}
/* S12d: hover podigne 1px, pritisak .98 (deo 31 gasi uz prefers-reduced-motion); fokus prsten ostaje (deo 2). */
.btn { transition: transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.98); }
.btn--lg { min-height: 48px; padding: 0 var(--s-6); font-size: 16px; }
.btn--sm { min-height: 40px; padding: 0 var(--s-4); font-size: var(--fs-sitno); }
.dugme--primarno,
.btn--accent,
.btn--primary,
.site-header__cta {
  background: var(--zuta);
  border-color: transparent;
  color: var(--tamna);
}
/* Hover: pun --tamna, beli tekst (10.16:1); na --tamna podlozi (CTA kartica) bela, --tamna tekst. */
.dugme--primarno:hover,
.btn--accent:hover,
.btn--primary:hover,
.site-header__cta:hover {
  background: var(--tamna);
  border-color: var(--tamna);
  color: var(--bela);
}
:is(.bg-alt, .bg-cream, .bg-warm, .bg-plava, .bg-info, .bg-cool) :is(.dugme--primarno, .btn--accent, .btn--primary) {
  border-width: 1.5px;
  border-color: var(--tamna);
}
.cta-traka .dugme--primarno,
.bg-dark .btn--accent { border-color: var(--zuta); }
.cta-traka .dugme--primarno:hover,
.bg-dark .btn--accent:hover { background: var(--bela); border-color: var(--bela); color: var(--tamna); }
.dugme--sekundarno,
.btn--ghost {
  background: transparent;
  border-color: var(--tamna);
  color: var(--tamna);
}
/* Hover sekundarnog dugmeta: S12j blaga --roze ispuna (--tamna tekst 8.6:1). */
.dugme--sekundarno:hover,
.btn--ghost:hover {
  background: var(--roze-blaga);
  border-color: var(--tamna);
  color: var(--tamna);
}
.dugme--na-tamnom,
.bg-dark .btn--ghost { border-color: var(--bela); color: var(--bela); }
.dugme--na-tamnom:hover,
.bg-dark .btn--ghost:hover { background: var(--bela); border-color: var(--bela); color: var(--tamna); }
.dugme--neaktivno,
.dugme--neaktivno:hover {
  background: transparent;
  border-color: var(--linija);
  color: var(--tekst-blag);
  cursor: default;
}

/* Grupa dugmadi: na telefonu puna širina SAMO u heroju i CTA traci; inače dugmad zadržavaju svoju širinu. */
.btn-group { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 639px) {
  .btn-group { flex-direction: row; align-items: center; width: auto; }
  .btn-group > .btn { width: auto; }
  .page-hero__dugmad,
  .cta-traka__dugmad { flex-direction: column; align-items: stretch; width: 100%; }
  .page-hero__dugmad > .btn,
  .cta-traka__dugmad > .btn { width: 100%; }
}

/* -- 5. Tekst-link sa strelicom (.link-strelica; stari .btn--link je isti) ------------------------------------------- */
/* Levo poravnat, --tamna; tanka linija ispod teksta, a na hover se preko nje s leva na desno iscrta žuta 2px
   (::before, scaleX; samo ispod teksta, ne ispod strelice ni preko kartice); strelica (širine 1em) se pomeri 4px.
   Tekst: „Pročitaj" za vesti i gostovanja, „Saznaj više" za ostalo. */
.link-strelica,
.btn--link {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--tamna);
  background: none;
  border: 0;
  border-radius: 0;
  text-decoration-line: underline;
  text-decoration-color: var(--linija);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.link-strelica::after,
.btn--link::after {
  content: "\2192";
  display: inline-block;
  width: 1em;
  text-align: center;
  text-decoration: none;
  transition: transform .2s var(--ease);
}
.link-strelica::before,
.btn--link::before {
  content: "";
  position: absolute;
  left: 0;
  right: calc(1em + var(--s-2));
  top: calc(50% + .64em);
  height: 2px;
  border-radius: 2px;
  background: var(--zuta);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s var(--ease);
  pointer-events: none;
}
.link-strelica:hover,
.btn--link:hover { color: var(--tamna); transform: none; }
/* Na --limun i na punim blokovima žuta linija se ne vidi: tamo je --tamna. */
:is(.bg-alt, .bg-cream, .bg-warm, .bg-plava, .bg-info, .bg-cool, .blok) :is(.link-strelica, .btn--link)::before { background: var(--tamna); }
.link-strelica:hover::before,
.btn--link:hover::before,
a:hover .link-strelica::before,
.kartica:hover .link-strelica::before { transform: scaleX(1); }
.link-strelica:hover::after,
.btn--link:hover::after,
a:hover .link-strelica::after,
.kartica:hover .link-strelica::after { transform: translateX(4px); }

/* -- 6. Kartica (.kartica; stara .card ista osnova) ------------------------------------------------------------------ */
/* Osnovna bela sa 1px linijom, bez senke; istaknuta (puna --roze) i info (S12j: puna --zuta) su blokovi (bez ivice).
   Flex kolona, link na dnu. */
.kartica,
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bela);
  border: 1px solid var(--linija);
  border-radius: var(--r-md);
  box-shadow: none;
}
.kartica {
  gap: var(--s-3);
  padding: 28px;
}
.card:hover { transform: none; box-shadow: none; }
.card__body { padding: 28px; gap: var(--s-3); }
@media (max-width: 639px) {
  .kartica,
  .card__body,
  .card--pad { padding: 22px; }
}
.kartica--istaknuta,
.card--warm,
.card--peach { background: var(--roze); border-color: transparent; }
.kartica--info,
.card--accent { background: var(--zuta); border-color: transparent; }
/* Pun blok (tri kartice početne, S12j): Edukacija --zuta, Supervizija --roze (tekst --tamna 7.26:1), Savetovalište
   --tamna sa belim tekstom (10.16:1) i žutim linkom i strelicom (7.26:1); --r-lg, bez ivice i senke. Sitan tekst na
   bloku je pun boje teksta. */
.blok {
  --tekst-blag: var(--tamna);
  color: var(--tamna);
  border: 0;
  border-radius: var(--r-lg);
}
.blok--zuta { background: var(--zuta); }
.blok--roze { background: var(--roze); }
.blok--tamna { --tekst-blag: var(--bela); color: var(--bela); background: var(--tamna); }
.blok--tamna :is(h2, h3, .kartica__naslov, .kartica__tekst) { color: var(--bela); }
.blok--tamna :is(.link-strelica, .btn--link),
.blok--tamna :is(.link-strelica, .btn--link):hover { color: var(--zuta); }
.blok.blok--tamna :is(.link-strelica, .btn--link)::before { background: var(--zuta); }
.blok--tamna :focus-visible { outline-color: var(--zuta); }
.kartica > :last-child,
.card__body > :last-child { margin-bottom: 0; }
.kartica__naslov,
.card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3-s);
  font-weight: 600;
  line-height: 1.3;
  color: var(--tamna);
}
.kartica__tekst,
.card__excerpt { margin: 0; font-size: 16px; color: var(--tekst); }
.kartica__link,
.kartica > .link-strelica,
.card__body > .link-strelica,
.card__body > .btn--link { margin-top: auto; padding-top: var(--s-2); }
.kartica ul,
.card__body ul { margin: 0; padding-left: 1.2em; }
.kartica ul li + li { margin-top: var(--s-1); }
.kartica > .tag,
.card__body > .tag { align-self: flex-start; }

/* Podignuta kartica (cela je link ili ima link na dnu): S12d hover podigne 4px (S12g: bez senke, ivica pređe u
   --tamna); mali krug u donjem desnom uglu (::after, S12j --roze) se uveća, a žuti krug preko njega (::before) se
   pojavi, pa krug pređe iz roze u žutu. Puni blokovi (.blok) se samo podignu, bez kruga. */
a.card,
a.kartica,
.kartica-vest,
.kartica:has(> .kartica__link),
.event-kartica {
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
a.card:hover,
a.kartica:hover,
.kartica-vest:hover,
.kartica:has(> .kartica__link):hover {
  transform: translateY(-4px);
  border-color: var(--tamna);
}
a.card::after,
a.kartica::after,
.kartica-vest::after,
.kartica:has(> .kartica__link)::after,
a.card::before,
a.kartica::before,
.kartica-vest::before,
.kartica:has(> .kartica__link)::before {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--roze);
  pointer-events: none;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.kartica.blok::before,
.kartica.blok::after { content: none; }
a.card::before,
a.kartica::before,
.kartica-vest::before,
.kartica:has(> .kartica__link)::before { z-index: 1; background: var(--zuta); opacity: 0; }
a.card:hover::after,
a.kartica:hover::after,
.kartica-vest:hover::after,
.kartica:has(> .kartica__link):hover::after,
a.card:hover::before,
a.kartica:hover::before,
.kartica-vest:hover::before,
.kartica:has(> .kartica__link):hover::before { transform: scale(1.8); }
a.card:hover::before,
a.kartica:hover::before,
.kartica-vest:hover::before,
.kartica:has(> .kartica__link):hover::before { opacity: 1; }
a.card { color: inherit; text-decoration: none; }
/* Kartica vesti na početnoj: link u naslovu pokriva celu karticu. */
.card__veza { color: inherit; text-decoration: none; }
.card__veza::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card__veza:focus-visible { outline: 0; }
.kartica-vest:focus-within { outline: 2px solid var(--tamna); outline-offset: 2px; }
.kartica-vest .card__media { border-radius: var(--r-md) var(--r-md) 0 0; }
.kartica-vest .card__body { flex: 1 1 auto; }

/* -- 7. Mreža kartica -------------------------------------------------------------------------------------------------- */
.mreza {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-5);
  align-items: stretch;
}
@media (max-width: 639px) {
  .mreza { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
}

/* Raspored strane (tekst + bočne kartice, npr. program na TA 101): bočne kartice se ne razvlače do dna kolone. */
.raspored-strana { display: grid; gap: var(--s-6); align-items: start; }
.raspored-strana__glavno,
.raspored-strana__strana { min-width: 0; }
.raspored-strana__strana { display: grid; gap: var(--s-4); align-content: start; }
@media (min-width: 960px) {
  .raspored-strana { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); }
}
.row > * > .card,
.row > * > .kartica { height: auto; }
.mreza > .card,
.mreza > .kartica,
.osobe > .card { height: 100%; }

/* -- 8. Oznaka broja (01, 02 …) i tag ------------------------------------------------------------------------------------ */
/* Mali krug ili pilula auto širine, nikad razvučena preko kartice; prazna se ne prikazuje. */
.oznaka-broja {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--s-3);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--tamna);
  background: var(--roze);
  border-radius: var(--r-pill);
}
.oznaka-broja:empty,
.tag:empty { display: none; }
.tag { width: auto; max-width: 100%; }
.lista-brojeva { display: grid; gap: var(--s-4); margin: var(--s-5) 0 0; padding: 0; list-style: none; }
.lista-brojeva li { display: flex; align-items: flex-start; gap: var(--s-4); }
.lista-brojeva li > div { padding-top: var(--s-2); }

/* -- 9. Prazno stanje ------------------------------------------------------------------------------------------------- */
/* Uvek cela širina (i u mreži), tekst + opciono dugme, centrirano (S12f: bez ukrasa). */
.prazno {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--s-4) var(--s-5);
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--s-6);
  color: var(--tekst);
  background: var(--bela);
  border: 1px dashed var(--linija);
  border-radius: var(--r-md);
}
.prazno[hidden] { display: none !important; }
.prazno__tekst { flex: 0 1 auto; min-width: 0; max-width: 60ch; margin: 0; }
@media (max-width: 639px) {
  .prazno { padding: 22px; }
}

/* -- 10. Segmentni prekidač (Vesti / Gostovanja na početnoj) -------------------------------------------------------- */
.segment {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: var(--s-1);
  max-width: 100%;
  padding: var(--s-1);
  background: var(--bela);
  border: 1px solid var(--linija);
  border-radius: var(--r-pill);
  box-shadow: none;
}
.segment a,
.segment .segment__stavka {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--s-4);
  font-size: var(--fs-sitno);
  font-weight: 600;
  white-space: nowrap;
  color: var(--tekst);
  text-decoration: none;
  border-radius: var(--r-pill);
}
.segment a:not(.is-active):hover { background: var(--roze-blaga); color: var(--tamna); }
.segment a.is-active,
.segment a[aria-current="page"] { background: var(--tamna); color: var(--bela); }
.section-head > .segment { justify-self: start; align-self: end; }

/* Čipovi filtera (kategorije kalendara i vesti): mali, u jednom redu; na telefonu red se skroluje vodoravno. */
.filter-bar,
.cipovi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0 0 var(--s-5);
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.filter-bar button,
.filter-bar a {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 var(--s-4);
  font-size: var(--fs-sitno);
  font-weight: 600;
  white-space: nowrap;
  color: var(--tekst);
  background: var(--bela);
  border: 1px solid var(--linija);
  border-radius: var(--r-pill);
}
/* Aktivni čip: pun --tamna, beli tekst (10.16:1); hover --roze-blaga. */
.filter-bar button.is-active,
.filter-bar a.is-active { background: var(--tamna); border-color: var(--tamna); color: var(--bela); }
.filter-bar button:not(.is-active):hover,
.filter-bar a:not(.is-active):hover { background: var(--roze-blaga); color: var(--tamna); }
@media (max-width: 639px) {
  .filter-bar,
  .cipovi,
  .kalendar .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--s-2);
    margin-inline: calc(var(--gutter) * -1);
    padding: 2px var(--gutter);
    border-radius: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .kalendar .filter-bar button { flex: 0 0 auto; padding: 0 var(--s-3); font-size: 13px; }
}

/* -- 11. Harmonika (česta pitanja) ---------------------------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--linija); }
.accordion__item { border-bottom: 1px solid var(--linija); }
.accordion__naslov { margin: 0; font-size: inherit; line-height: inherit; letter-spacing: normal; }
.accordion__trigger {
  min-height: 44px;
  padding: var(--s-5) 0;
  gap: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--fs-pitanje);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: normal;
  color: var(--tamna);
}
.accordion__icon {
  width: 40px;
  height: 40px;
  font-size: 22px;
  border-color: var(--tamna);
  color: var(--tamna);
}
.accordion__item.is-open .accordion__trigger { color: var(--tamna); }
.accordion__item.is-open .accordion__icon { background: var(--tamna); border-color: var(--tamna); color: var(--bela); }
/* S12d: glatko otvaranje (grid-template-rows 0fr → 1fr, umesto max-height), + se okrene u × (main.css rotate 45deg).
   Zatvoren panel je visibility: hidden (van redosleda tabulatora), posle prelaza. Bez JS-a odgovori su otvoreni. */
.accordion__panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  max-height: none;
  overflow: hidden;
}
.js .accordion__panel {
  grid-template-rows: minmax(0, 0fr);
  visibility: hidden;
  transition: grid-template-rows .35s var(--ease), visibility 0s linear .35s;
}
.js .accordion__item.is-open .accordion__panel {
  grid-template-rows: minmax(0, 1fr);
  max-height: none;
  visibility: visible;
  transition: grid-template-rows .35s var(--ease), visibility 0s;
}
.accordion__panel-inner { min-height: 0; overflow: hidden; max-width: var(--proza); color: var(--tekst); }

/* -- 12. Zaglavlje sekcije: eyebrow → h2 → lead, fiksni razmaci ------------------------------------------------------- */
.section-head { gap: var(--s-4); margin-bottom: var(--sekcija-glava); }
.section-head .eyebrow { margin: 0 0 var(--s-3); }
.section-head h2 { margin: 0; max-width: 24ch; }
.section-head p:not(.eyebrow) { margin: var(--s-3) 0 0; max-width: 56ch; color: var(--tekst); }
.section-head > .btn { justify-self: start; }
@media (min-width: 960px) {
  .section-head > .btn { justify-self: end; margin-bottom: 0; }
}

/* -- 13. CTA traka (taus_cta_traka()): zaobljena --tamna kartica, beli tekst, akcenti --zuta ---------------------------- */
/* Sekcija je --papir; posle sekcije osnovne pozadine je --limun (S12g: nikad dve iste pozadine jedna do druge). */
.cta-sekcija { background: var(--papir); }
section:not([class*="bg-"]) + section.cta-sekcija { padding-top: var(--sekcija-y); background: var(--limun); }
.cta-traka {
  padding: clamp(32px, 5vw, 64px);
  text-align: center;
  color: var(--bela);
  background: var(--tamna);
  border-radius: 32px;
}
.cta-traka .eyebrow { color: var(--zuta); }
.cta-traka__naslov,
.cta-traka h2 { margin: 0 0 var(--s-3); color: var(--bela); }
.cta-traka__tekst { max-width: 56ch; margin: 0 auto var(--s-5); color: var(--bela); }
.cta-traka__tekst a { color: var(--bela); text-decoration: underline; text-decoration-color: currentColor; }
.cta-traka__tekst a:hover { color: var(--bela); text-decoration-thickness: 2px; }
.cta-traka__dugmad { justify-content: center; }
@media (max-width: 639px) {
  .cta-traka { padding: var(--s-6) 22px; border-radius: var(--r-lg); }
}

/* -- 14. „Nazad na vrh": 44px (telefon 40px), posle 600px skrola (site.js), 16px od ivice + safe-area ---------------- */
.to-top {
  width: 44px;
  height: 44px;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--tamna);
  color: var(--bela);
}
.to-top:hover { background: var(--tamna); }
@media (max-width: 639px) {
  .to-top { width: 40px; height: 40px; }
}

/* -- 15. Hero podstranice (taus_page_hero_out()) i hero početne ------------------------------------------------------ */
/* Redosled: breadcrumb → h1 → lead → (kratka proza, S12b) → čip → dugmad. S12f: bez eyebrow-a (breadcrumb već kaže
   grupu), bez mreže tačkica i razdelnika. Raspored po sadržaju (taus_page_hero_out()):
   - .page-hero--slika (S12h; i kad je u heroju samo naslov): od 960px tekst levo ~7/12, slika desno ~5/12, vertikalno
     centrirane; slika je „zalepljena" fotografija (deo 33: cela, u svom odnosu, najviše ~460 × 380px, okvir, nagib, blok
     boje, jedan ukras); ispod 960px slika ispod teksta (telefon bez nagiba, najviše 280px). Visina heroja = sadržaj.
     S12h: baner (slika preko cele širine kontejnera, 21:9) i raspored 6/6 sa sečenom slikom su uklonjeni;
   - .page-hero--kompakt (bez slike): jedna kolona, naslov najviše 22ch, donji razmak 40px (telefon 28px). */
.page-hero {
  min-height: 0;
  padding-block: var(--s-6) var(--hero-dno);
  background: var(--papir);
}
.page-hero .breadcrumb { margin-bottom: 40px; }
.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  align-items: center;
}
.page-hero__tekst { min-width: 0; }
.page-hero h1 { max-width: none; margin: 0; }
.page-hero .lead,
.page-hero p.lead { max-width: 60ch; margin: var(--s-4) 0 0; font-size: clamp(18px, 1.4vw, 20px); color: var(--tekst); }
.page-hero__dugmad { margin-top: 28px; }
/* S12b: kratak blok proze iz prve sekcije (taus_hero_proza()): 16px ispod uvoda, veličina tela teksta (ne lead). */
.page-hero__proza { max-width: 60ch; margin-top: var(--s-4); font-size: var(--fs-telo); color: var(--tekst); }
.page-hero__proza p { margin: 0 0 var(--s-3); }
.page-hero__proza > :last-child { margin-bottom: 0; }
@media (min-width: 960px) {
  .page-hero--slika .page-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-8); }
}
.page-hero--kompakt { --hero-dno: 40px; }
.page-hero--kompakt h1 { max-width: 22ch; }
@media (max-width: 639px) {
  .page-hero--kompakt { --hero-dno: 28px; }
}
/* S12h: slika heroja je .foto-lep (deo 33); u svojoj koloni je centrirana, ispod 960px na početku reda (ispod teksta). */
.page-hero__slika { justify-self: start; }
@media (min-width: 960px) {
  .page-hero__slika { justify-self: center; }
}

/* Čip ispod uvoda (TA 101: „Naredni termin: uskoro" ili datum). */
.page-hero p.cip,
.cip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  max-width: 100%;
  margin: 20px 0 0;
  padding: 6px 14px;
  font-size: var(--fs-sitno);
  font-weight: 600;
  line-height: 1.35;
  color: var(--tekst);
  background: var(--bela);
  border: 1px solid var(--linija);
  border-radius: var(--r-pill);
}
.cip::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--zuta);
  box-shadow: 0 0 0 1px var(--linija);
}

/* Statistika u heroju TA 101 i pretraga u heroju Vesti. */
.page-hero .stat-row { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6); margin: var(--s-6) 0 0; padding: 0; list-style: none; }
.page-hero .stat { padding-top: 0; border-top: 0; }
.page-hero .stat__num { display: block; font-family: var(--font-display); font-size: 24px; color: var(--tamna); }
.page-hero .stat__label { display: block; margin-top: 2px; font-size: var(--fs-sitno); color: var(--tekst-blag); }
.page-hero__pretraga { max-width: 420px; margin-top: var(--s-5); }
.page-hero__pretraga input { width: 100%; min-width: 0; min-height: 48px; }

/* Hero početne: isti tokeni i razmaci. */
.hero,
.hero.hero--cream { padding-block: var(--sekcija-y); background: var(--papir); }
.hero__lead { max-width: 52ch; margin-bottom: 28px; font-size: clamp(18px, 1.4vw, 20px); color: var(--tekst); }
/* S12g: tekst heroja početne u dva pasusa (prazan red u polju); drugi je malo manji. Bez dugmadi ispod. */
.hero__lead > p { margin: 0 0 var(--s-4); }
.hero__lead > p:last-child { margin-bottom: 0; }
.hero__lead > p + p { font-size: var(--fs-telo); line-height: 1.6; }
.home-hero .hero__lead:last-child { margin-bottom: 0; }
.home-hero .eyebrow { margin-bottom: var(--s-4); }
.hero__media img { border-radius: var(--r-lg); }
/* S12e: velika slika. Od 1100px: tekst levo (~5/12, vertikalno centriran, naslov do 68px), slika desno do desne
   ivice prozora, zaobljena samo levo. Tablet: slika u kontejneru ispod teksta. Telefon: tekst pa slika pune širine (bez
   bočnog razmaka i zaobljenja).
   S12g (kolaž): slika ima svoju svetlu pozadinu i ukrase do ivica, pa se prikazuje CELA, u svom odnosu (3:2, iz
   width/height atributa, bez object-fit sečenja; CLS 0). Pozadina kolaža (#FAF4E8) je od S13 ista kao --papir, pa se
   slika stapa sa stranom; fotografija dodiruje ivice, pa uglovi ostaju zaobljeni (--r-lg), bez ivice i senke. Mreža tačkica uz sliku je uklonjena (kolaž
   ima svoje tačkice). */
.home-hero.hero--cream { padding-block: var(--s-7) var(--s-8); }
.home-hero .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.home-hero .hero__copy { max-width: 38rem; }
.home-hero .hero__title { font-size: clamp(38px, 4.7vw, 68px); line-height: 1.04; margin-bottom: var(--s-5); }
.home-hero .hero__media { min-width: 0; }
.hero__media .home-hero__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: var(--r-lg);
}
@media (max-width: 639px) {
  .home-hero.hero--cream { padding-bottom: 0; }
  .home-hero .hero__media { margin-inline: calc(var(--gutter) * -1); }
  .hero__media .home-hero__img { border-radius: 0; }
}
@media (min-width: 1100px) {
  .home-hero.hero--cream { padding-block: var(--s-6); }
  .home-hero .hero__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); align-items: center; }
  .home-hero .hero__media { margin-right: calc(-1 * (max(0px, (100vw - var(--kontejner)) / 2) + var(--gutter))); }
  .hero__media .home-hero__img { border-radius: var(--r-lg) 0 0 var(--r-lg); }
}

/* Breadcrumb (iz položaja u meniju, inc/meni.php). */
.breadcrumb { font-size: var(--fs-sitno); color: var(--tekst-blag); }
.breadcrumb a { color: var(--tekst-blag); text-decoration: underline; text-decoration-color: var(--linija); text-underline-offset: 3px; }
.breadcrumb a:hover { color: var(--tamna); text-decoration-color: currentColor; }
.breadcrumb span { color: var(--tekst-blag); }
.breadcrumb [aria-current="page"] { color: var(--tekst); font-weight: 600; }

/* Sidra ispod sticky headera (visina headera iz site.js + 16px). */
#zakazivanje,
#sati-rada,
#program,
#prijava,
.zvanja-blok,
.osobe-sekcija { scroll-margin-top: calc(var(--header-h, 86px) + 16px); }

/* -- 16. Meni: grupa = dugme (aria-expanded), podmeni na hover (pointer: fine) i klik (site.js) ---------------------- */
/* S12d: posle 40px skrola (pokret.js: klasa je-skrolovano) zaglavlje je niže, poluprovidno sa zamućenjem i blagom
   senkom. Visina u rasporedu ostaje ista (sadržaj se ne pomera, CLS 0): pozadina je ::before koji se skuplja
   (scaleY), a sadržaj se pomeri 6px naviše; donji pojas od ~12px je tada providan i propušta klik. */
.site-header {
  background: transparent;
  border-bottom: 0;
  pointer-events: none;
  view-transition-name: zaglavlje;
}
.site-header > * { pointer-events: auto; }
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--papir);
  border-bottom: 1px solid var(--linija);
  transform-origin: top center;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.site-header__inner,
.site-header__logo img { transition: transform .25s var(--ease); }
.site-header__logo img { transform-origin: left center; }
.site-header.je-skrolovano::before {
  transform: scaleY(.86);
  background: var(--papir);
  background: color-mix(in srgb, var(--papir) 92%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
}
.site-header.je-skrolovano .site-header__inner { transform: translateY(-6px); }
.site-header.je-skrolovano .site-header__logo img { transform: scale(.9); }
.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
}
.site-nav__caret { transition: transform .2s var(--ease); }
.site-nav__group.is-open .site-nav__caret { transform: rotate(180deg); }
/* Sa JS-om podmeni otvara samo stanje is-open (aria-expanded); bez JS-a ostaje hover/fokus iz main.css. */
/* S12d: padajući meni se otvara iz scale .96 + fade, 180ms (main.css: prelaz opacity/transform/visibility .18s). */
.site-nav__menu { transform: scale(.96); transform-origin: top left; }
.site-nav__group:last-of-type .site-nav__menu { transform-origin: top right; }
.js .site-nav__group:not(.is-open):hover .site-nav__menu,
.js .site-nav__group:not(.is-open):focus-within .site-nav__menu {
  opacity: 0;
  visibility: hidden;
  transform: scale(.96);
}
.site-nav__group:hover .site-nav__menu,
.site-nav__group:focus-within .site-nav__menu,
.site-nav__group.is-open .site-nav__menu { opacity: 1; visibility: visible; transform: none; }
.site-nav__menu a { display: flex; align-items: center; min-height: 44px; color: var(--tekst); }
/* Aktivna stavka menija: crta --tamna 3px; stavka podmenija na --limun sa crtom levo. */
.site-nav__menu a[aria-current="page"] { font-weight: 600; background: var(--limun); color: var(--tamna); box-shadow: inset 3px 0 0 var(--tamna); }
.site-nav__link.is-active::after { height: 3px; background: var(--tamna); }

/* Mobilni meni: grupe su harmonika (isto dugme), ista pravila. */
.mobile-drawer { background: var(--papir); }
.mobile-drawer__nav { display: flex; flex-direction: column; }
.mobile-drawer__nav > .mobile-drawer__link,
.mobile-drawer__group { border-bottom: 1px solid var(--linija); }
.mobile-drawer__grupa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  width: 100%;
  min-height: 44px;
  text-align: left;
  color: var(--tekst);
  background: none;
  border: 0;
  cursor: pointer;
}
.mobile-drawer__grupa svg { flex: 0 0 auto; width: 24px; height: 24px; transition: transform .25s var(--ease); }
.mobile-drawer__group.is-open .mobile-drawer__grupa svg { transform: rotate(180deg); }
.mobile-drawer__sub a { min-height: 44px; display: flex; align-items: center; color: var(--tekst); }
.mobile-drawer__sub a[aria-current="page"],
.mobile-drawer__link[aria-current="page"] { font-weight: 600; color: var(--tamna); }
.mobile-drawer__group.is-active > .mobile-drawer__grupa { text-decoration: underline; text-decoration-color: var(--tamna); text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* -- 17. Red događaja (taus_kalendar_kartica()): kalendar, početna, TA 101 --------------------------------------------- */
.event {
  gap: var(--s-3) var(--s-5);
  padding: 20px 0;
  border-bottom: 1px solid var(--linija);
}
@media (min-width: 640px) {
  .event { grid-template-columns: 96px minmax(0, 1fr) auto; }
}
/* S12c: kućica datuma: naziv meseca se nikad ne lomi („SEPTEMBAR", „SEP – OKT") u svim kontekstima (kalendar, desna
   kolona, početna, TA 101); kućica je 96px (desna kolona kalendara isto), mesec 11.5px sa razmakom slova .04em. */
.event__date { min-width: 0; padding-inline: var(--s-1); }
.event__mon { white-space: nowrap; letter-spacing: .04em; }
.event__telo { min-width: 0; }
.event__title { margin: 0 0 6px; font-size: clamp(18px, 1.4vw, 21px); line-height: 1.3; }
.event__meta { font-size: var(--fs-sitno); color: var(--tekst-blag); }
.event__kat { color: var(--tekst); }
.event__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); position: relative; z-index: 1; }
.event:hover { cursor: pointer; }
.event__status { font-size: var(--fs-sitno); color: var(--tekst-blag); }
.event-lista > .event:last-child { border-bottom: 0; }

/* -- 18. TA zvanja: blokovi, kartice, tabela (ispod 720px svaki red je kartica) ---------------------------------------- */
.zvanja-blok + .zvanja-blok { margin-top: var(--s-7); padding-top: var(--s-7); border-top: 1px solid var(--linija); }
.zvanja-blok > h2 { margin-bottom: var(--s-4); }
.zvanja-kartice { margin-top: 28px; }
/* S12f: hover podigne karticu (deo 6) i ivica pređe u --tamna; „Saznaj više" je na dnu, u istoj liniji (kartice u
   redu su iste visine, link margin-top: auto). */
.zvanja-kartice > .kartica { transition: transform .25s var(--ease), border-color .25s var(--ease); }
.zvanja-kartice > .kartica:hover { border-color: var(--tamna); }
/* S14: priznavanje sati za CTA (ispod tabele): uvod, lista sa kvačicama (deo TA 101, ovde uvek jedna kolona, jer su
   stavke duge) i napomena sitnije, --tekst-blag (.muted); sve u meri proze. */
.zvanja-priznavanje__uvod { max-width: var(--proza); margin: 0 0 var(--s-6); }
.zvanja-priznavanje .kvacice { max-width: var(--proza); grid-template-columns: minmax(0, 1fr); }
.zvanja-priznavanje__napomena { max-width: var(--proza); margin: var(--s-6) 0 0; font-size: var(--fs-sitno); }
/* S14: red sa linkom na Etički protokol na kraju sadržaja (TA zvanja: ispod poslednjeg bloka; Napredna: svoja sekcija
   na pozadini poslednje, pa nema gornji padding, deo 2). */
.eticki-red { max-width: var(--proza); margin: 0; }
.eticki-red a { text-decoration-color: currentColor; }
.zvanja-blok + .eticki-red { margin-top: var(--s-7); padding-top: var(--s-7); border-top: 1px solid var(--linija); }
/* S14: linkovi donje trake footera (Politika privatnosti, Etički protokol) se ne lome između reči. */
.site-footer__bottom a { white-space: nowrap; }
/* S12g: tabela sati, sati dominiraju. table-layout: fixed: oznaka reda 18%, Napomene 22%, kolone zvanja dele ostatak
   jednako. Ćelija koja počinje brojem (.sati, taus_sati_celija()): broj krupno (serif 28px, --tamna), ostatak ispod sitno
   (14px, --tekst-blag); ćelije bez broja su običan tekst; Napomene 14px, --tekst-blag. Zaglavlje --roze, parni redovi
   --papir na beloj tabeli. */
.table-zvanja { background: var(--bela); border-color: var(--linija); border-radius: var(--r-md); }
.table-zvanja table { table-layout: fixed; font-size: 16px; }
.table-zvanja th,
.table-zvanja td { padding: 18px 20px; border-bottom-color: var(--linija); }
.table-zvanja td { overflow-wrap: break-word; }
.table-zvanja thead th { background: var(--roze); color: var(--tamna); font-size: 17px; line-height: 1.3; vertical-align: bottom; }
.table-zvanja tbody tr:nth-child(even) { background: var(--papir); }
.table-zvanja .kol-oznaka { width: 18%; }
.table-zvanja .kol-napomene { width: 22%; }
.table-zvanja tbody th { font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.3; }
.table-zvanja td.kol-napomene { font-size: var(--fs-sitno); line-height: 1.5; color: var(--tekst-blag); }
.sati__broj {
  display: block;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  font-variant-numeric: lining-nums;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--tamna);
}
.sati__opis { display: block; margin-top: 6px; font-size: var(--fs-sitno); line-height: 1.45; color: var(--tekst-blag); }
@media (min-width: 720px) and (max-width: 1099px) {
  .table-zvanja th,
  .table-zvanja td { padding: 14px 12px; }
  .table-zvanja thead th { font-size: 15px; }
  .table-zvanja tbody th { font-size: 16px; }
  .sati__broj { font-size: 24px; }
}
@media (max-width: 719px) {
  .table-zvanja { overflow: visible; background: none; border: 0; border-radius: 0; }
  .table-zvanja table { display: block; min-width: 0; }
  .table-zvanja thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .table-zvanja table:not(:has(thead)) tr:first-child { display: none; }
  .table-zvanja tbody,
  .table-zvanja tr { display: block; }
  .table-zvanja tr,
  .table-zvanja tbody tr:nth-child(even) {
    margin-bottom: var(--s-3);
    padding: var(--s-4) 18px;
    background: var(--bela);
    border: 1px solid var(--linija);
    border-radius: var(--r-md);
  }
  .table-zvanja tbody th {
    display: block;
    width: auto;
    padding: 0 0 var(--s-2);
    border: 0;
    font-family: var(--font-display);
    font-size: 18px;
  }
  .table-zvanja td { display: block; width: auto; padding: 6px 0; border: 0; }
  .table-zvanja :is(.kol-oznaka, .kol-napomene) { width: auto; }
  .table-zvanja td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--tamna); }
  /* Kartica na telefonu: oznaka kolone sitno iznad, broj krupno, ostatak sitno ispod. */
  .table-zvanja td.sati { padding: 10px 0; }
  .table-zvanja td.sati + td.sati { border-top: 1px solid var(--linija); }
  .table-zvanja td.sati[data-label]::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: var(--fs-sitno); }
  .table-zvanja td:empty { display: none; }
}

/* -- 19. Vesti i gostovanja --------------------------------------------------------------------------------------------- */
.news-toolbar { margin-bottom: 28px; }
/* Naslov se nikad ne skraćuje; uvod najviše 3 reda. */
.card__title,
.card--feature .card__title,
[data-filter-list] .card__title,
.home-aktuelno .card__title {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}
.kartica-vest .card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Glavna vest: mreža slika | tekst (main.css), tekstualna kolona ima svoj unutrašnji razmak. */
.card--feature { display: grid; }
.card--feature:not(:has(.card__media)) { display: flex; }
.card--feature > .card__body { padding: clamp(24px, 3vw, 44px); }
.card--feature .card__media { border-radius: var(--r-md) var(--r-md) 0 0; }
@media (min-width: 960px) {
  .card--feature .card__media { border-radius: var(--r-md) 0 0 var(--r-md); }
}
/* Bez slike (stari omotač): pun --tamna, bez slova; vesti bez slike imaju generisanu naslovnu (deo 25). */
.card__media--ph,
.card__media--ph-clay { background: var(--tamna); }
.card__media-initial { display: none; }
.pagination__veza { gap: .4em; }

/* -- 20. Kontakt: podaci kao običan tekst sa ikonicama ------------------------------------------------------------------ */
.kontakt-podaci { display: grid; gap: var(--s-5); margin: 0; padding: 0; list-style: none; font-size: 17px; }
.kontakt-podaci li { display: flex; align-items: flex-start; gap: 14px; }
.kontakt-podaci li > svg { margin-top: 3px; color: var(--tamna); }
.kontakt-podaci p { margin: 0; }
.kontakt-podaci p + p { margin-top: var(--s-1); }
.kontakt-podaci__oznaka { font-size: var(--fs-sitno); font-weight: 600; color: var(--tekst-blag); }
.kontakt-podaci a:not(.link-strelica) { color: var(--tamna); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.kontakt-podaci__mreze { display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* S12c: mreže kao ikonice (iste kao u footeru), krug 44px. */
.kontakt-podaci a.kontakt-mreza {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--tamna);
  text-decoration: none;
  background: var(--bela);
  border: 1px solid var(--linija);
  border-radius: 50%;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.kontakt-podaci a.kontakt-mreza:hover { color: var(--bela); background: var(--tamna); border-color: var(--tamna); }

/* -- 21. Savetovalište: forma kratko zasvetli kad se dođe preko „Kako zakazati" ----------------------------------------- */
.sav-forma.je-istaknuta { box-shadow: 0 0 0 3px var(--zuta); }
@media (prefers-reduced-motion: no-preference) {
  .sav-forma.je-istaknuta { animation: pr-istakni 1.2s ease-out; }
}
@keyframes pr-istakni {
  0% { box-shadow: 0 0 0 0 var(--zuta); }
  25% { box-shadow: 0 0 0 6px var(--zuta); }
  100% { box-shadow: 0 0 0 3px var(--zuta); }
}

/* -- 22. Početna: „Ko smo" i tri kartice ------------------------------------------------------------------------- */
/* S12g: traka činjenica i traka termina TA 101 ispod heroja su uklonjene (front-page.php). Ritam pozadina početne:
   hero (--papir) → Ko smo (--limun) → tri kartice (--papir; blokovi --zuta / --roze / --tamna) → Aktuelno (--limun) →
   kalendar (--papir) → CTA (--limun, deo 13). */
.home-kartice .kartica.blok { padding: clamp(28px, 2.6vw, 36px); }

/* S12e: „Ko smo": fotografija ~7/12 levo, bela kartica sa tekstom ~5/12 desno. S12g: sekcija je na --limun, kartica bela,
   bez senke. S12h: fotografija ima svoj okvir od linija u boji, pa se prikazuje CELA, u svom odnosu (--r iz priloga),
   bez sečenja, bez zaobljenih uglova i bez preklopa kartice (kartica stoji pored, ne preko ivice). Ispod 960px prvo
   kartica (naslov i tekst), pa slika: hero slika početne i ova nikad nisu jedna odmah ispod druge; na telefonu slika
   najviše 260px visine. */
.koj { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.koj__foto { min-width: 0; }
.koj__img {
  --r-lg: 0px; /* i otvaranje pri skrolu (deo 31, clip-path … round var(--r-lg)) ostaje bez zaobljenja */
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--r, 1.55);
  object-fit: contain;
  border-radius: 0;
}
.koj__kartica {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: var(--s-5);
  background: var(--bela);
  border-radius: var(--r-lg);
}
.koj__kartica h2 { margin-top: 0; }
.koj--bez-slike .koj__kartica { padding: 0; background: none; }
@media (max-width: 959px) {
  .koj__kartica { order: -1; }
}
@media (max-width: 639px) {
  .koj__img { width: min(100%, 260px * var(--r, 1.55)); }
}
@media (min-width: 960px) {
  .koj:not(.koj--bez-slike) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-7); align-items: center; }
  .koj:not(.koj--bez-slike) .koj__kartica { padding: var(--s-7); }
}
/* S13: kolaž (front-page.php, .koj__foto--kolaz): glavna fotografija ostaje najveća (92% kolone, gore levo), manja
   „zalepljena" (.koj__dodatna: taus_foto_lep(), beli okvir 8px, +2°, blok --roze, opis ispod) je dole desno i preklapa
   donji desni ugao glavne; obe su u istoj ćeliji mreže, pa je visina kolaža poznata pre učitavanja (CLS 0): vrh manje =
   visina glavne (92% / --r-glavna) minus 15% širine kolone (~polovina visine manje), pa je kolona ~100px viša nego sa
   jednom fotografijom. Kolaž ostaje u svojoj koloni (ne prelazi na karticu sa
   tekstom). Telefon (S14b, do 767px): tekst, glavna (cela širina; do 639px najviše 260px), pa manja sa opisom ispod:
   88% širine, centrirana, +1.5°, odnos 4:3 sa fokusom gore (lica), preklapa donju ivicu glavne 32px (negativna margina u
   toku, ne absolute: CLS 0); blok --roze pomeren 8px dole i desno, a desna/donja margina 8px drži ga u koloni. */
.koj__foto > .foto-uvecaj { display: block; }
.koj__foto--kolaz { display: grid; }
.koj__foto--kolaz > * { grid-area: 1 / 1; min-width: 0; }
.koj__foto--kolaz > .foto-uvecaj { width: 92%; justify-self: start; align-self: start; }
.koj__foto--kolaz > .koj__dodatna {
  --okvir: 8px;
  z-index: 1;
  width: clamp(176px, 27%, 260px);
  justify-self: end;
  align-self: start;
  margin-top: calc(92% / var(--r-glavna, 1.55) - 15%);
}
@media (max-width: 767px) {
  .koj__foto--kolaz { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
  .koj__foto--kolaz > .foto-uvecaj { width: 100%; }
  .koj__foto--kolaz > .koj__dodatna {
    --r: 1.3333 !important;
    --pomak: 8px;
    width: 88%;
    margin: -32px auto var(--pomak);
    rotate: 1.5deg;
  }
  .koj__dodatna .foto-lep__img { object-position: 50% 0; }
}
/* S13b (od 1024px): manja fotografija ~35% veća (37.5% kolone, 240–300px; na 1440 ~290px), glavna 96% kolone (bila
   92%); manja i dalje preklapa donji desni ugao glavne (vrh = visina glavne minus 17% širine kolone) i ostaje u svojoj
   koloni, pa ne prelazi na karticu sa tekstom. Ispod 1024px sve kao gore. */
@media (min-width: 1024px) {
  .koj__foto--kolaz > .foto-uvecaj { width: 96%; }
  .koj__foto--kolaz > .koj__dodatna {
    width: clamp(240px, 37.5%, 300px);
    margin-top: calc(96% / var(--r-glavna, 1.55) - 17%);
  }
}

/* -- 23. Footer: bez praznog prostora ispod harmonika na telefonu ------------------------------------------------------ */
@media (max-width: 639px) {
  .site-footer { padding-bottom: var(--s-5); }
  .site-footer__bottom { margin-top: var(--s-5); }
  .footer-col > ul { padding-bottom: var(--s-4); }
  .footer-contact { margin-bottom: var(--s-4); }
}
/* S12d: kolone footera (<details>) se na telefonu otvaraju glatko gde postoji ::details-content (grid-template-rows
   0fr → 1fr); inače otvaranje bez prelaza, kao do sada. */
@supports selector(::details-content) {
  @media (max-width: 639px) {
    .footer-col::details-content {
      display: grid;
      grid-template-rows: minmax(0, 0fr);
      overflow: hidden;
      transition: grid-template-rows .3s var(--ease), content-visibility .3s allow-discrete;
    }
    .footer-col[open]::details-content { grid-template-rows: minmax(0, 1fr); }
    .footer-col > ul { min-height: 0; overflow: hidden; }
  }
}

/* ============================================================
   S12b
   ============================================================ */

/* -- 24. Ukrasi (inc/ukrasi.php, assets/svg/ukrasi.svg, template-parts/ukrasi/) --------------------------------------
   S12e: malo ukrasa, svaki sa razlogom. S12f: bez potpisa „linija sa tačkom". S12g: bez mreže tačkica uz heroj
   početne; ostaju polumeseci iza osoba (deo 30) i brojevi godina na Naprednoj (deo 27). Boja je uvek token
   (currentColor iz klase boje; S12j: tamna, zuta, roze, bela); ukras je aria-hidden, bez pointer-events,
   dimenzije su rezervisane (ne pomera sadržaj). */
.ukras {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  pointer-events: none;
}
.ukras--tamna { color: var(--tamna); }
.ukras--zuta { color: var(--zuta); }
.ukras--roze { color: var(--roze); }
.ukras--bela { color: var(--bela); }
.komp { position: relative; display: block; pointer-events: none; }
.komp > .ukras { position: absolute; }

/* S12g: mreža tačkica uz sliku heroja početne (kompozicija „slika") je uklonjena; kolaž ima svoje tačkice. */
.page-hero,
.home-hero { overflow-x: clip; }
.slika-okvir { position: relative; display: block; }

/* -- 25. Generisana naslovna (vest / gostovanje bez slike; taus_naslovna_generisana()) ------------------------------- */
/* S12j: pun blok jedne od tri boje (po ID-u objave: --zuta / --roze / --tamna), jedan organski oblik (blob) u drugoj od
   te tri boje uz gornji desni ugao (okret po ID-u) i oznaka „Vest" / „Gostovanje" u serifu dole levo, --tamna (7.26:1),
   na --tamna bela (10.16:1). Isti
   omotač i odnos kao prava slika (.card__media 4:3, glavna vest 16:11 / puna visina), pa kartica ne menja visinu. */
.naslovna-gen {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: clamp(20px, 2.2vw, 32px);
  overflow: hidden;
  background: var(--zuta);
}
.naslovna-gen--roze { background: var(--roze); }
.naslovna-gen--tamna { background: var(--tamna); }
.naslovna-gen--tamna .naslovna-gen__oznaka { color: var(--bela); }
.naslovna-gen__oblik {
  position: absolute;
  top: -16%;
  right: -10%;
  width: 66%;
  height: auto;
  aspect-ratio: 1;
  transform: rotate(var(--ugao, 0deg));
  pointer-events: none;
}
.naslovna-gen__oznaka {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 500;
  font-style: italic;
  line-height: 1;
  color: var(--tamna);
}

/* -- 26. Česta pitanja: grupa u dve kolone od 1000px (tpl-faq.php); S12c: bez reda čipova-sidara --------------------- */
.faq-grupa-sekcija { scroll-margin-top: calc(var(--header-h, 86px) + 16px); }
/* S12k: svaka grupa je sekcija pune širine sa svojom pozadinom (tpl-faq.php): neparne --papir, parne redom --limun,
   --roze-svetla, --limun, --nebo-svetla. Naziv grupe je običan serif naslov na pozadini sekcije (bez svog bloka), broj
   pitanja ispod (--tekst-blag ≥ 5.6:1 na sve četiri pozadine). Harmonika je ista kao ranije; otvoreno pitanje ima tanku
   levu liniju --roze (na --roze-svetla se ne bi videla, tu je --tamna); mesto za liniju je uvek rezervisano (padding),
   pa se tekst pri otvaranju ne pomera. */
.faq-grupa { --grupa: var(--roze); }
.bg-roze-svetla .faq-grupa { --grupa: var(--tamna); }
.faq-grupa__glava { margin-bottom: var(--s-6); color: var(--tamna); }
.faq-grupa__glava .eyebrow { margin: 0 0 var(--s-3); color: var(--tamna); }
.faq-grupa__glava h2 { margin: 0; max-width: 24ch; color: var(--tamna); }
.faq-grupa__broj { margin: var(--s-3) 0 0; font-size: var(--fs-sitno); font-weight: 600; color: var(--tekst-blag); }
.faq-grupa .accordion__item { position: relative; padding-left: var(--s-4); }
.faq-grupa .accordion__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--s-4);
  bottom: var(--s-4);
  width: 4px;
  border-radius: 2px;
  background: var(--grupa, var(--zuta));
  opacity: 0;
  transition: opacity .2s ease-out;
}
.faq-grupa .accordion__item.is-open::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .faq-grupa .accordion__item::before { transition: none; }
}
@media (min-width: 1000px) {
  .faq-grupa { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-8); align-items: start; }
  .faq-grupa__glava { position: sticky; top: calc(var(--header-h, 86px) + 24px); margin-bottom: 0; }
}

/* -- 27. Napredna edukacija: četiri godine (inc/napredna-godine.php) -------------------------------------------------- */
/* Broj godine: SVG oblici + broj kao HTML tekst (serif) preko njih. ~180px desktop, ~88px telefon, 56px u pregledu. */
.broj-godine {
  --v: 180px;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--v);
  height: var(--v);
}
.broj-godine > .ukras { position: absolute; }
.broj-godine__broj {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: calc(var(--v) * .46);
  font-weight: 500;
  line-height: 1;
  color: var(--tamna);
}
.broj-godine--malo { --v: 56px; }
.broj-godine--1 .broj-godine__a { inset: 4%; width: 92%; }
.broj-godine--2 .broj-godine__a { left: 0; top: 4%; width: 70%; }
.broj-godine--2 .broj-godine__b { right: 0; bottom: 4%; width: 70%; }
.broj-godine--3 .broj-godine__a { left: 0; top: 4%; width: 92%; }
.broj-godine--3 .broj-godine__b { left: 21%; top: 21%; width: 58%; }
.broj-godine--3 .broj-godine__c { right: 2%; top: 6%; width: 20%; }
.broj-godine--4 .broj-godine__a { inset: 0; width: 100%; }
.broj-godine--4 .broj-godine__b { left: 14%; top: 14%; width: 72%; }
.broj-godine--4 .broj-godine__c { right: -14%; bottom: -4%; width: 66%; }
.broj-godine--malo.broj-godine--4 .broj-godine__c { display: none; }

/* Pregled na vrhu: red od 4 male kartice (na telefonu 2 x 2), ujedno navigacija na godine (S12c: bez sticky pilule). */
.godine-pregled__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.godine-pregled__lista > li { display: flex; min-width: 0; }
.godine-pregled__kartica {
  flex: 1 1 auto;
  flex-direction: row;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  color: inherit;
  text-decoration: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.godine-pregled__kartica:hover { border-color: var(--tamna); }
.godine-pregled__tekst { min-width: 0; }
.godine-pregled__naslov { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--tamna); }
.godine-pregled__sati { display: block; margin-top: 2px; font-size: var(--fs-sitno); line-height: 1.4; color: var(--tekst-blag); }
@media (max-width: 959px) {
  .godine-pregled__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .godine-pregled__kartica { padding: var(--s-3) var(--s-4); gap: var(--s-3); }
  .godine-pregled__kartica .broj-godine { --v: 44px; }
  .godine-pregled__naslov { font-size: 16px; }
}
@media (max-width: 479px) {
  .godine-pregled__kartica { flex-direction: column; align-items: flex-start; }
}

/* Godina: desktop dve kolone (levo sticky broj, naslov, čip; desno blokovi i teme), telefon harmonika (site.js). */
.godina { scroll-margin-top: calc(var(--header-h, 86px) + 16px); }
.godina__mreza { display: grid; gap: var(--s-6); }
.godina__naslov { margin: 0; }
.godina__cip.cip { margin-top: var(--s-3); }
.godina__panel { min-width: 0; }
.godina__sadrzaj { display: grid; gap: var(--s-6); min-width: 0; }
.godina__oznaka.eyebrow { margin: 0 0 var(--s-2); }
.godina__tekst p { max-width: var(--proza); margin: 0 0 var(--s-3); }
.godina__tekst > :last-child { margin-bottom: 0; }
.godina__teme { padding: 28px; }
.godina__teme-uvod { margin: 0 0 var(--s-5); max-width: var(--proza); }
.godina__teme-uvod > strong:first-child {
  font-size: var(--fs-nadnaslov);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.godina__lista { counter-reset: tema; display: grid; gap: var(--s-3); margin: 0; padding: 0; list-style: none; }
.godina__lista > li {
  counter-increment: tema;
  position: relative;
  min-height: 32px;
  padding: 4px 0 0 44px;
  text-align: start !important; /* stari sadržaj ima inline text-align: justify */
  break-inside: avoid;
}
.godina__lista > li::before {
  content: counter(tema);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 14px;
  font-weight: 700;
  color: var(--tamna);
  background: var(--roze);
  border-radius: 50%;
}
@media (min-width: 960px) {
  .godina__mreza { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s-8); align-items: start; }
  .godina__strana { position: sticky; top: calc(var(--header-h, 86px) + 32px); }
  .godina__glava { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); }
  .godina__lista--duga { display: block; columns: 2; column-gap: var(--s-6); }
  .godina__lista--duga > li { margin-bottom: var(--s-3); }
}
@media (max-width: 959px) {
  .godina { padding-block: var(--s-6); }
  .godina__mreza { gap: 0; }
  .godina__glava { position: relative; display: flex; align-items: center; gap: var(--s-4); }
  .godina .broj-godine { --v: 88px; }
  .godina__naslovi { flex: 1 1 auto; min-width: 0; }
  .godina__dugme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    width: 100%;
    min-height: 44px;
    padding: 0;
    font: inherit;
    text-align: left;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .godina__dugme::after { content: ""; position: absolute; inset: 0; } /* cela glava godine je klikabilna */
  .godina__dugme:focus-visible { outline: 0; }
  .godina__glava:has(.godina__dugme:focus-visible) { outline: 2px solid var(--tamna); outline-offset: 4px; border-radius: var(--r-sm); }
  .godina__ikona {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 1.5px solid var(--tamna);
    border-radius: 50%;
  }
  .godina__ikona::before,
  .godina__ikona::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--tamna); }
  .godina__ikona::after { transform: rotate(90deg); }
  .godina__ikona { transition: transform .3s var(--ease), background-color .3s var(--ease); }
  .godina__ikona::before,
  .godina__ikona::after { transition: background-color .3s var(--ease); }
  .godina.is-open .godina__ikona { background: var(--tamna); transform: rotate(45deg); } /* S12d: + se okrene u × */
  .godina.is-open .godina__ikona::before,
  .godina.is-open .godina__ikona::after { background: var(--bela); }
  .godina__sadrzaj { padding-top: var(--s-5); }
  /* S12d: harmonika (site.js dodaje .godine--harmonika ispod 960px): glatko otvaranje, grid-template-rows 0fr → 1fr;
     zatvoren panel je visibility: hidden (van redosleda tabulatora). Bez JS-a sve je otvoreno. */
  .godine--harmonika .godina__panel {
    display: grid;
    grid-template-rows: minmax(0, 0fr);
    overflow: hidden;
    visibility: hidden;
    transition: grid-template-rows .35s var(--ease), visibility 0s linear .35s;
  }
  .godine--harmonika .godina.is-open .godina__panel {
    grid-template-rows: minmax(0, 1fr);
    visibility: visible;
    transition: grid-template-rows .35s var(--ease), visibility 0s;
  }
  .godine--harmonika .godina__panel > .godina__sadrzaj { min-height: 0; overflow: hidden; }
  .godina__teme { padding: 22px; }
}

/* -- 28. Kalendar: alatna traka u jednom redu, od 1100px dve kolone (taus_kal_komponenta(), kalendar.js) ------------- */
/* Ispod 1100px: čipovi, pa mesec sa strelicama iznad mreže, pa spisak. S12c: bez prekidača Mesec/Lista. */
.kal { scroll-margin-top: calc(var(--header-h, 86px) + 16px); }
.kal[aria-busy="true"] .cal { opacity: .55; transition: opacity .15s linear; }
.kal-alati { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); margin-bottom: var(--s-4); }
.kal-alati .filter-bar { margin-top: 0; margin-bottom: 0; } /* bočne margine ostaju (čipovi na telefonu idu do ivice) */
.kal-alati .filter-bar { align-self: stretch; }
.kal-alati .cal__nav { order: 3; align-self: stretch; margin-bottom: 0; }
.cal__levo { min-width: 0; }
@media (min-width: 1100px) {
  .kal-alati { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-bottom: var(--s-6); }
  .kal-alati .cal__nav { order: 0; align-self: auto; max-width: none; flex-wrap: nowrap; }
  .kal-alati .filter-bar { flex: 1 1 auto; align-self: auto; }
  .cal { display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); gap: var(--s-7); align-items: start; }
  .cal__mreza { max-width: none; margin-bottom: 0; }
  .cal__spisak {
    position: sticky;
    top: calc(var(--header-h, 86px) + 16px);
    max-height: min(var(--kal-visina, 640px), calc(100vh - var(--header-h, 86px) - 32px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: var(--s-2);
  }
  .cal__glava { position: sticky; top: 0; z-index: 2; padding-bottom: var(--s-2); margin-bottom: var(--s-2); background: var(--kal-podloga, var(--papir)); }
  /* Uža kolona: datum levo, dugme ispod naslova (ne treća kolona). */
  .cal__spisak .event { grid-template-columns: 96px minmax(0, 1fr); align-items: start; }
  .cal__spisak .event__date { grid-row: span 2; }
  .cal__spisak .event__actions { grid-column: 2; }
}

/* S12c: kalendar na početnoj (.kal--pocetna, S12g sekcija na --papir): ista komponenta, kompaktno. Legenda boja umesto čipova.
   Od 1100px kao /kalendar/ (mreža levo, spisak meseca desno sa skrolom). S12j: ispod 1100px spisak meseca ispod mreže,
   najviše 5 događaja (višak .event--visak, kalendar.js ga prati pri izboru dana i filteru); klik na dan filtrira spisak. */
.kal-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sitno);
  color: var(--tekst);
}
.kal-legenda li { display: inline-flex; align-items: center; gap: var(--s-2); }
.kal-legenda i[data-kat] { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--kat); box-shadow: 0 0 0 1px var(--linija); }
.kal--pocetna .cal__mreza { margin-bottom: 0; }
@media (max-width: 1099px) {
  .kal--pocetna .cal__spisak { margin-top: var(--s-6); }
  .kal--pocetna .event--visak { display: none; }
  .kal--pocetna .cal__nav,
  .kal--pocetna .cal__mreza,
  .kal--pocetna .kal-legenda { max-width: 44rem; }
}

/* S12c: TA 101, program bez bočnih kartica (.program-pun): tekst ostaje čitljive širine, numerisana lista tema (6+
   stavki) ide punom širinom, od 960px u dve kolone. */
.program-pun .taus-prose { max-width: none; }
.program-pun .taus-prose > :not(ol) { max-width: var(--proza); }
@media (min-width: 960px) {
  .program-pun .taus-prose > ol:has(> li:nth-child(6)) { columns: 2; column-gap: var(--s-8); }
  .program-pun .taus-prose > ol > li { break-inside: avoid; }
}

/* S12d: polja forme (main.css .field): bela, ivica iz tokena (--polje-ivica = --linija). */
.field input,
.field textarea,
.field select { background: var(--bela); border-color: var(--linija); }

/* -- 29. Kontakt: „Pozovi" i „Pošalji mejl" na telefonu, jedno pored drugog ---------------------------------------- */
.kontakt-brzo { display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.kontakt-brzo > .btn { flex: 1 1 0; min-width: 0; padding: 0 var(--s-3); }
@media (min-width: 640px) {
  .kontakt-brzo { display: none; }
}

/* -- 30. Pokret: mikro-interakcije (S12d) -------------------------------------------------------------------------- */
/* Dugmad (deo 4): hover 1px, pritisak .98. Tekst-link (deo 5): žuta linija se iscrta, strelica 4px. Kartice (deo 6):
   hover 4px + krug u uglu. Zaglavlje i padajući meni (deo 16), harmonike (delovi 11, 23, 27). Ovde: osobe, ukrasi. */
.dugme--neaktivno:hover,
.dugme--neaktivno:active { transform: none; }

/* Kartica osobe: hover, polumesec (krug iza fotografije, ::before) se okrene 12° oko središta fotografije i pomeri,
   fotografija scale 1.03. */
.osoba__img,
.osoba__inicijali { transition: transform .5s var(--izlaz); }
.pr-foto-cb .osoba__foto::before {
  transform-origin: 41.3% 41.3%; /* središte fotografije (92% okvira) u koordinatama kruga (od 8%) */
  transition: transform .6s var(--izlaz), opacity .6s ease-out;
}
.osoba:hover .osoba__img,
.osoba:hover .osoba__inicijali { transform: scale(1.03); }
.pr-foto-cb .osoba:hover .osoba__foto::before { transform: rotate(12deg) translate(2px, 3px); }

/* -- 31. Pokret: ulazak, Napredna, kalendar, prelazi (S12d; S12e; S12f; assets/js/pokret.js, kalendar.js) ---------- */
/* Pravila: animiraju se samo transform, opacity, clip-path i stroke-dashoffset (izuzetak: harmonike,
   grid-template-rows). Bez layout shift-a: sve što se pomera je transform, ukrasi su apsolutni. Početna stanja postoje
   samo uz .js (heroj, odmah pri učitavanju, CSS animacije sa fill-mode both) ili uz .pokret + data-pojava (ostalo; to
   dodaje pokret.js samo za ono što pri učitavanju nije na ekranu). S12e: sve se odigra jednom i stane (nema beskonačnih
   animacija, petlji ni praćenja miša); ulazak pri skrolu najviše 600ms, kartice 50ms jedna za drugom. Bez JS-a i uz
   prefers-reduced-motion: reduce sve je odmah u konačnom stanju (kraj ovog dela). */
:root { --izlaz: cubic-bezier(.2, .7, .2, 1); }

/* Reči naslova (maska + translateY): hero podstranice i početne (taus_reci_html()) i naslovi sekcija (pokret.js). Razmak
   oko reči u masci (padding) čuva kvačice (Č, Š, Ž) i silaznike. */
.js .rec {
  display: inline-block;
  overflow: hidden;
  overflow: clip;
  vertical-align: top;
  padding: .2em .04em .14em;
  margin: -.2em -.04em -.14em;
}
.js .rec > span { display: inline-block; }

/* Linije brojeva godina koje se iscrtavaju (inline SVG, pathLength 1): debljina iz --crta (u jedinicama viewBox-a). */
.ukras--inline [stroke] { stroke-width: var(--crta, 2); }

/* Nit na Naprednoj, između godina (pokret.js gradi putanju po godini; od 960px). Iza sadržaja sekcije. */
.ima-nit { position: relative; isolation: isolate; }
.nit {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: none;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.nit__put {
  fill: none;
  stroke: var(--roze);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (min-width: 960px) {
  .nit { display: block; }
}

/* Broj godine na Naprednoj (prsten četvrte godine se više ne okreće; jednom uđe uz kratak zaokret). */
.godina .broj-godine--4 > .broj-godine__a { transform-origin: 50% 50%; }
.godina .broj-godine { --crta: 1.2; }
.godina .broj-godine--4 { --crta: 2.7; }
@media (max-width: 959px) {
  .godina .broj-godine { --crta: 2.4; }
  .godina .broj-godine--4 { --crta: 5; }
}
.cip__broj { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }

/* Kalendar: talas iz tačke klika (kalendar.js). */
.cal__dan { position: relative; overflow: hidden; }
.kal-talas {
  position: absolute;
  width: 220%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--roze);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  /* Iscrtavanje: putanje sa pathLength 1 (inline linije brojeva godina, nit). */
  .ukras--inline path[stroke],
  .nit__put { stroke-dasharray: 1; }

  /* Hero (podstranice i početna): reči se kratko otkrivaju odozdo (≤ 600ms, počinju odmah; gornji deo reči se vidi od
     prvog frejma, poslednja kreće posle 90ms). */
  .js .naslov-reci .rec > span { animation: pr-rec-hero .5s var(--izlaz) both; animation-delay: calc(min(var(--i), 3) * 30ms); }

  /* Hero početne: fotografija se otvara clip-path-om od desne ivice ka levoj, jednom, 800ms. */
  .js .hero__media .home-hero__img { animation: pr-otvori .8s var(--izlaz) both; }

  /* Naslovi sekcija: reči odozdo, 50ms jedna za drugom (najviše 4 koraka), ukupno ≤ 600ms, jednom. */
  .pokret [data-pojava="naslov"]:not(.je-vidljivo) .rec > span { transform: translateY(110%); }
  [data-pojava="naslov"].je-vidljivo .rec > span { transition: transform .4s var(--izlaz) calc(min(var(--i), 4) * 50ms); }

  /* Fotografije: blago uvučen okvir se otvori (clip-path inset) + scale 1.04 → 1, 600ms. */
  .pokret [data-pojava="slika"]:not(.je-vidljivo) { clip-path: inset(7% round var(--r-lg)); transform: scale(1.04); }
  [data-pojava="slika"].je-vidljivo {
    clip-path: inset(0 round var(--r-lg));
    transition: clip-path .6s var(--izlaz), transform .6s var(--izlaz);
  }

  /* S12h: zalepljena fotografija ispod preloma (pokret.js, tip „foto"): fade + 16px (nagib ostaje: rotate je posebno
     svojstvo), pa se linije ukrasa iscrtaju jednom (deo 33). */
  .pokret [data-pojava="foto"]:not(.je-vidljivo) { opacity: 0; transform: translateY(16px); }
  [data-pojava="foto"].je-vidljivo { transition: opacity .5s ease-out, transform .5s var(--izlaz); }

  /* Kartice i pločice (S12f): fade + 16px, 50ms jedna za drugom (pokret.js, najviše 3 koraka). */
  .pokret [data-pojava="kartica"]:not(.je-vidljivo),
  .pokret [data-pojava="osoba"]:not(.je-vidljivo) { opacity: 0; transform: translateY(16px); }
  [data-pojava="kartica"].je-vidljivo,
  [data-pojava="osoba"].je-vidljivo {
    transition: opacity .45s ease-out var(--pojava-kasnjenje, 0ms), transform .45s ease-out var(--pojava-kasnjenje, 0ms);
  }
  /* Osoba: posle kartice fotografija (krug → pun oblik, 500ms), pa se polumesec iza nje pojavi (bez rotacije). */
  .pokret [data-pojava="osoba"]:not(.je-vidljivo) .osoba__img,
  .pokret [data-pojava="osoba"]:not(.je-vidljivo) .osoba__inicijali { clip-path: circle(18% at 50% 50%); transform: scale(1.04); }
  [data-pojava="osoba"].je-vidljivo .osoba__img,
  [data-pojava="osoba"].je-vidljivo .osoba__inicijali {
    clip-path: circle(75% at 50% 50%);
    transition: clip-path .5s ease-out calc(var(--pojava-kasnjenje, 0ms) + 80ms), transform .5s ease-out calc(var(--pojava-kasnjenje, 0ms) + 80ms);
  }
  .pokret .pr-foto-cb [data-pojava="osoba"]:not(.je-vidljivo) .osoba__foto::before { opacity: 0; }
  .pr-foto-cb [data-pojava="osoba"].je-vidljivo .osoba__foto::before {
    transition: transform .6s var(--izlaz), opacity .4s ease-out calc(var(--pojava-kasnjenje, 0ms) + 200ms);
  }

  /* Napredna: broj godine se „upali" kad nit stigne do njega: oblici se ispune (opacity, scale), obris i petlja se
     iscrtaju, žuti krug pulsira jednom, prsten (4) uđe uz kratak zaokret. */
  .pokret .broj-godine[data-pojava]:not(.je-vidljivo) > .ukras { opacity: .18; transform: scale(.86); }
  .pokret .broj-godine--4[data-pojava]:not(.je-vidljivo) > .broj-godine__a { transform: rotate(-40deg) scale(.86); }
  .pokret .broj-godine[data-pojava]:not(.je-vidljivo) .ukras--inline path[stroke] { stroke-dashoffset: 1; }
  .broj-godine[data-pojava].je-vidljivo > .ukras { transition: opacity .5s ease-out, transform .6s var(--izlaz); }
  .broj-godine[data-pojava].je-vidljivo .ukras--inline path[stroke] { animation: pr-crtaj .6s ease-out .2s both; }
  .broj-godine[data-pojava].je-vidljivo > .ukras--krug.ukras--zuta { animation: pr-puls .6s ease-in-out .4s 1; }

  /* Nit: iscrtava se srazmerno skrolu. Vrh niti je na ~80% visine prozora: animation-timeline gde postoji (Chrome,
     Safari 26), inače pokret.js postavlja --nit (rAF samo na skrol, dok je godina na ekranu). */
  .nit__put { stroke-dashoffset: var(--nit, 1); }
  @supports (animation-timeline: view()) {
    .ima-nit { view-timeline: --nit block; }
    .nit__put {
      animation: pr-crtaj linear both;
      animation-timeline: --nit;
      animation-range: cover 20vh cover calc(100% - 80vh);
    }
  }

  /* Kalendar: nova mreža klizne prema smeru (250ms), tačkice iskoče redom; spisak se zameni uz fade; talas na klik. */
  .kal-klizi-napred tbody { animation: pr-klizi-napred .25s ease-out both; }
  .kal-klizi-nazad tbody { animation: pr-klizi-nazad .25s ease-out both; }
  .kal-klizi-napred .cal__tacke i,
  .kal-klizi-nazad .cal__tacke i { animation: pr-iskoci .35s var(--izlaz) both; animation-delay: calc(140ms + var(--i, 0) * 16ms); }
  .kal-spisak-osvezi > .event:not([hidden]),
  .kal-spisak-osvezi > .prazno:not([hidden]) { animation: pr-fade-gore .28s ease-out both; }
  .kal-talas { animation: pr-talas .6s ease-out both; }

  /* Prelazi između stranica (Chrome 126+, Safari 18.2+; drugde obična navigacija): miran fade + blag pomeraj, ~280ms;
     zaglavlje stoji; fotografija (data-vt, skript u <head>) „preleti" na novo mesto. */
  @view-transition { navigation: auto; }
  ::view-transition-group(*) { animation-duration: .45s; animation-timing-function: var(--izlaz); }
  ::view-transition-old(root) { animation: pr-vt-van .24s ease-in both; }
  ::view-transition-new(root) { animation: pr-vt-u .3s ease-out both; }
  ::view-transition-group(zaglavlje),
  ::view-transition-old(zaglavlje),
  ::view-transition-new(zaglavlje) { animation: none; }
}

@keyframes pr-crtaj { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pr-rec-hero { from { transform: translateY(70%); } }
@keyframes pr-otvori { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes pr-puls { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.09); } }
@keyframes pr-klizi-napred { from { opacity: .2; transform: translateX(28px); } }
@keyframes pr-klizi-nazad { from { opacity: .2; transform: translateX(-28px); } }
@keyframes pr-iskoci { 0% { transform: scale(0); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes pr-talas {
  from { opacity: .4; transform: translate(-50%, -50%) scale(0); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@keyframes pr-fade-gore { from { opacity: 0; transform: translateY(6px); } }
@keyframes pr-vt-van { to { opacity: 0; transform: translateY(-6px); } }
@keyframes pr-vt-u { from { opacity: 0; transform: translateY(8px); } }

/* prefers-reduced-motion: reduce: nema animacija ni pomeranja, sve odmah u konačnom stanju (nit nacrtana);
   prelazi stranica isključeni (@view-transition je samo u no-preference). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .btn:hover,
  .btn:active,
  a.card:hover,
  a.kartica:hover,
  .kartica-vest:hover,
  .kartica:has(> .kartica__link):hover,
  .ploca:hover,
  .link-strelica:hover::after,
  .btn--link:hover::after,
  a:hover .link-strelica::after,
  .kartica:hover .link-strelica::after,
  .osoba:hover .osoba__img,
  .osoba:hover .osoba__inicijali,
  .pr-foto-cb .osoba:hover .osoba__foto::before,
  .site-header.je-skrolovano::before,
  .site-header.je-skrolovano .site-header__inner,
  .site-header.je-skrolovano .site-header__logo img { transform: none; }
}

/* -- 32. TA 101 i Supervizija: pločice, sertifikat, kvačice, tipovi, izdvojeni citat (S12f; inc/momenti.php) ---------- */
/* Line ikonice (taus_ikona()): currentColor, debljina linije iz atributa (1.5). */
.ikona { display: block; width: 28px; height: 28px; flex: 0 0 auto; }

/* Pločice sa brojem (<ol>; broj je dekorativan, redosled nosi lista). Bele, tanka ivica; hover podigne 4px i ivica
   pređe u --tamna (S12g: bez senke); ulaze redom pri skrolu (pokret.js, kao kartice). TA 101 teme: veliki serif broj, mreža
   3 / 2 / 1 kolona. Supervizija: mali broj, 2×2. */
.ploce {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .ploce { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
}
@media (min-width: 1024px) {
  .ploce--teme { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ploca {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
  margin: 0;
  padding: 28px 28px 32px;
  background: var(--bela);
  border: 1px solid var(--linija);
  border-radius: var(--r-md);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.ploca:hover { transform: translateY(-4px); border-color: var(--tamna); }
.ploca__broj {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(44px, 4vw, 56px);
  font-weight: 500;
  font-variant-numeric: lining-nums;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--tamna); /* veliki dekorativni broj (aria-hidden), 10.16:1 na beloj */
}
.ploca__naslov {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3-s);
  font-weight: 600;
  line-height: 1.3;
  color: var(--tamna);
}
.ploca__tekst { margin: 0; font-size: 16px; color: var(--tekst); }
.ploce--dve .ploca { gap: var(--s-3); }
.ploce--dve .ploca__broj { margin-bottom: var(--s-1); font-size: 28px; }
/* Telefon: broj teme levo od naziva (pločica u jednom redu, kraća strana). */
@media (max-width: 639px) {
  .ploca { padding: 22px 22px 24px; }
  .ploce--teme .ploca { flex-direction: row; align-items: center; gap: var(--s-4); padding: 18px 20px; }
  .ploce--teme .ploca__broj { flex: 0 0 auto; min-width: 1.3em; font-size: 36px; }
}

/* TA 101: sertifikat (S12j: pun blok --roze, ikonica u belom krugu) i ishodi (lista sa kvačicama), od 1024px jedno
   pored drugog (5/7), na traci --bg-alt. */
.ishodi-raspored { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); align-items: start; }
@media (min-width: 1024px) {
  .ishodi-raspored { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); }
  .ishodi-raspored > :only-child { grid-column: 1 / -1; }
}
.sertifikat {
  padding: clamp(28px, 3.4vw, 44px);
  color: var(--tekst);
  background: var(--roze);
  border-radius: var(--r-lg);
}
.sertifikat__ikona,
.tip__ikona {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  color: var(--tamna);
  border-radius: 50%;
}
.sertifikat__ikona { margin-bottom: var(--s-5); background: var(--bela); }
.sertifikat__ikona .ikona,
.tip__ikona .ikona { width: 30px; height: 30px; }
.sertifikat__naslov,
.ishodi__naslov { margin: 0 0 var(--s-4); font-size: clamp(24px, 2.3vw, 32px); line-height: 1.2; }
.ishodi__naslov { max-width: 26ch; margin-bottom: var(--s-6); }
.sertifikat__tekst { font-size: 16px; }
.sertifikat__tekst p { margin: 0 0 var(--s-3); }
.sertifikat__tekst > :last-child { margin-bottom: 0; }
@media (min-width: 1024px) {
  .ishodi { padding-top: var(--s-5); }
}
.ishodi-ostalo { margin-top: var(--s-8); }

/* Lista sa kvačicama: mali --tamna krug, žuta kvačica (S12g; žut krug se na --limun ne vidi); dve kolone dok su
   sertifikat i lista jedno ispod drugog (640–1023px), pored sertifikata (od 1024px) jedna kolona, jer bi tri stavke u
   dve kolone ostavile prazan ugao. */
.kvacice {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5) var(--s-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) and (max-width: 1023px) {
  .kvacice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kvacice li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0; }
.kvacice__znak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--zuta);
  background: var(--tamna);
  border-radius: 50%;
}
.kvacice__znak .ikona { width: 18px; height: 18px; stroke-width: 2.2; }
.kvacice__tekst { min-width: 0; padding-top: 1px; }

/* Supervizija: individualna i grupna, dve bele kartice iste visine sa ikonicom (telefon jedna ispod druge). */
.tipovi { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); align-items: stretch; }
@media (min-width: 768px) {
  .tipovi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
}
.tip { gap: var(--s-3); padding: clamp(24px, 3vw, 40px); }
.tip__ikona { margin-bottom: var(--s-2); background: var(--roze); }

/* Supervizija: poslednja rečenica teksta kao veliki citat (serif ~28px, --tamna, tanka linija --roze levo), od 1024px pored teksta, inače ispod. Sekcija je traka (S12g: --limun) ili osnovna, po ritmu. */
.izdvojeno-raspored { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.izdvojeno-raspored__tekst { min-width: 0; max-width: var(--proza); }
@media (min-width: 1024px) {
  .izdvojeno-raspored { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: center; }
}
.izdvojeno {
  max-width: 30ch;
  margin: 0;
  padding: var(--s-1) 0 var(--s-1) var(--s-5);
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--tamna);
  border-left: 3px solid var(--roze);
}

/* -- 33. S12h: „zalepljene" fotografije i ukrasi uz slike (taus_foto_lep(), psihoresurs_ukras_slike()) -------------- */
/* Fotografija je cela, u svom odnosu stranica (--r iz priloga): širina = min(kolona, --w-max, --h-max × --r) + okvir,
   visina iz aspect-ratio, pa je poznata pre učitavanja (CLS 0). Tanak beli okvir (--okvir 7px) sa blagom senkom, nagib
   --nagib (po stranici, -1.5° do 2°; rotate, ne transform, pa ga pokret ne gazi), iza pun blok boje (S12j: --roze /
   --zuta, ::before) pomeren --pomak. Ilustracije sa svojom pozadinom (.foto-lep--bez-okvira: Supervizija, Česta pitanja)
   nemaju beli okvir ni senku, samo blok. Telefon (do 639px): bez nagiba, najviše 280px visine (Savetovalište
   300px). Mesta: hero (deo 15), Napredna uz pregled godina, Savetovalište uz „Kako zakazati". Ukras: tačno jedan,
   apsolutno uz ugao figure (ne pomera sadržaj, aria-hidden, bez pointer-events); linije sa pathLength se iscrtaju
   jednom (hero odmah, ostalo pri ulasku, pokret.js), bez JS-a i uz smanjen pokret su odmah nacrtane. */
.foto-lep {
  --w-max: 460px;
  --h-max: 380px;
  --okvir: 7px;
  --pomak: 14px;
  position: relative;
  isolation: isolate;
  width: min(100% - var(--pomak), var(--w-max) + 2 * var(--okvir), var(--h-max) * var(--r, 1.5) + 2 * var(--okvir));
  margin: 0 var(--pomak) var(--pomak) 0;
  rotate: var(--nagib, 0deg);
}
.foto-lep::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--blok, transparent);
  border-radius: 3px;
  transform: translate(var(--pomak), var(--pomak));
}
.foto-lep--roze { --blok: var(--roze); }
.foto-lep--zuta { --blok: var(--zuta); }
.foto-lep__okvir {
  display: block;
  padding: var(--okvir);
  background: var(--bela);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(var(--tamna-rgb), .1), 0 14px 28px -18px rgba(var(--tamna-rgb), .5);
}
.foto-lep--bez-okvira { --okvir: 0px; }
.foto-lep--bez-okvira .foto-lep__okvir { background: none; box-shadow: none; }
.foto-lep__img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: var(--r, 1.5);
  object-fit: cover; /* odnos je iz samog priloga: ništa se ne seče */
  margin: 0;
  border-radius: 0;
}
@media (max-width: 639px) {
  .foto-lep { --h-max: 280px; --pomak: 10px; rotate: none; }
}
/* S13: kratak opis ispod fotografije (taus_foto_lep() 'opis'): u istom belom okviru, ispod slike (kao polaroid), serif,
   sitno, --tamna (na beloj 10.16:1). Okvir slike tada nema donji beli rub, opis ga nastavlja. */
.foto-lep--opis .foto-lep__okvir { padding-bottom: 0; border-radius: 3px 3px 0 0; }
.foto-lep__opis {
  display: block;
  padding: 7px var(--okvir) 9px;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.3;
  color: var(--tamna);
  text-align: center;
  background: var(--bela);
  border-radius: 0 0 3px 3px;
  box-shadow: 0 2px 2px -1px rgba(var(--tamna-rgb), .1), 0 14px 28px -18px rgba(var(--tamna-rgb), .5);
}
/* S13: slika koja se uvećava na klik (taus_foto_uvecaj(), deo 34): link oko slike, kursor lupa, fokus prsten oko slike. */
.foto-uvecaj { display: block; cursor: zoom-in; border-radius: 0; }
.foto-uvecaj:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }

/* Napredna: fotografija uz pregled četiri godine (taus_napredna_godine()): od 960px kartice levo (2 x 2), slika desno
   (~40% širine, najviše 420px visine); ispod 960px slika pa kartice. */
.godine-uvod { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.godine-foto { --w-max: 100%; --h-max: 360px; justify-self: start; }
@media (min-width: 960px) {
  .godine-uvod { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: var(--s-8); }
  .godine-uvod > .godine-pregled { grid-row: 1; grid-column: 1; }
  .godine-uvod .godine-pregled__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .godine-foto { grid-row: 1; grid-column: 2; --h-max: 420px; justify-self: center; }
}
/* S13: par fotografija uz pregled (taus_foto_par()): prva gore levo (-2°, blok --zuta), druga dole desno (+2°, blok
   --roze) preko donjeg desnog ugla prve; obe u istoj ćeliji mreže, vrh druge = 64% visine prve (iz --r1), pa je visina
   para poznata pre učitavanja (CLS 0). Beli okvir 8px, blaga senka (deo 33). Ukras (papirne kartice) uz donji levi ugao
   para. Od 960px kolone pregled / par su 5 : 4 (par traži više mesta od jedne slike); tablet: par do 600px.
   Telefon: jedna ispod druge sa razmakom, cele (bez sečenja), bez nagiba i preklapanja. */
.foto-par { position: relative; display: grid; width: 100%; max-width: 600px; }
.foto-par > .foto-lep { --okvir: 8px; grid-area: 1 / 1; align-self: start; }
.foto-par__prva { width: 76%; justify-self: start; }
.foto-par__druga { width: 70%; justify-self: end; margin-top: calc(76% / var(--r1, 1.5) * .64); }
@media (min-width: 960px) {
  .godine-uvod--par { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); }
  .godine-uvod--par .foto-par { max-width: none; }
}
/* S13b (od 1024px): kartice godina ~5/12, par ~7/12 (bio 4/9, preuzak); obe fotografije ~27% veće (74% i 68% širine
   para, bilo 76% i 70% užeg para), preklop, nagibi, okviri, blokovi i ukras isti. Kartice su jedna ispod druge (lista
   godina), vertikalno centrirane uz par, pa uz viši par nema velike prazne trake iznad i ispod njih; padding sekcije je
   običan (--sekcija-y). Desni rub para ostaje u kontejneru (druga ima desni razmak za blok i nagib). Ukras je u koloni
   para, ispod prve fotografije. */
@media (min-width: 1024px) {
  .godine-uvod--par { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-7); }
  .godine-uvod--par .godine-pregled__lista { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .godine-uvod--par .foto-par__prva { width: 74%; }
  .godine-uvod--par .foto-par__druga { width: 68%; margin-top: calc(74% / var(--r1, 1.5) * .64); margin-right: calc(var(--pomak) + 6px); }
  .godine-uvod--par .foto-par > .ukras-slike--kartice { left: 0; } /* u koloni para, ne uz ivicu kartica */
}
@media (max-width: 639px) {
  .foto-par { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-5); }
  .foto-par > .foto-lep { width: min(100% - var(--pomak), var(--h-max) * var(--r, 1.5) + 2 * var(--okvir)); margin-top: 0; }
}

/* Savetovalište (tpl-savetovaliste.php). S12i popravka: bez cik-caka i bez negativnih margina. Uvod: tekst i ilustracija
   jedno pored drugog (od 960px, psihoresurs.css .sekcija-slika), vrh teksta poravnat sa vrhom ilustracije, ilustracija
   blago nagnuta (+1.5°). „Kako zakazati": od 960px fotografija levo (ravna, 0°, unutar svoje sekcije), naslov i tekst
   desno poravnati po vrhu sa fotografijom, forma ispod teksta. Telefon i tablet: jedno ispod drugog, bez nagiba, tekst
   pre slike (uvod: tekst, ilustracija; zakazivanje: tekst, fotografija, forma), pa dve slike nikad nisu jedna ispod druge. */
.sav-zak { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.sav-zak__tekst { min-width: 0; }
.sav-zak__tekst > :last-child { margin-bottom: 0; }
.sav-zak__forma { min-width: 0; }
.sav-zak__foto { --w-max: 100%; --h-max: 300px; justify-self: start; }
@media (min-width: 960px) {
  .sav-uvod-red { align-items: start; }
  .sav-uvod-red > .slika-uz-tekst { rotate: 1.5deg; }
  .sav-zak { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--s-8); row-gap: var(--s-6); align-items: start; }
  .sav-zak__foto { grid-column: 1; grid-row: 1 / span 2; --w-max: 460px; --h-max: 400px; justify-self: start; }
  .sav-zak__tekst { grid-column: 2; grid-row: 1; }
  .sav-zak__forma { grid-column: 2; grid-row: 2; }
}

/* Ukrasi uz sliku (psihoresurs_ukras_slike()): veličina i mesto po ukrasu, uz ugao figure. */
.ukras-slike {
  position: absolute;
  z-index: 1;
  display: block;
  height: auto;
  overflow: visible;
  pointer-events: none;
}
.ukras-slike [pathLength] { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ukras-slike .papir { fill: var(--bela); stroke: var(--tamna); stroke-width: 1.2; }
.ukras-slike .papir__red { fill: none; stroke: var(--tamna); stroke-width: 1.6; stroke-linecap: round; opacity: .4; }
.ukras-slike .papir__sunce { fill: currentColor; }
.ukras-slike--strelica { width: 92px; left: -88px; top: -34px; }
.ukras-slike--kartice { width: 124px; left: -48px; bottom: -42px; filter: drop-shadow(0 2px 3px rgba(var(--tamna-rgb), .14)); }
.ukras-slike--oblacici { width: 108px; right: -40px; top: -50px; } /* S12i: gornji desni ugao (slika je levo) */
.ukras-slike--upitnik { width: 42px; right: -54px; top: -6px; }
/* S12i: potez četkom (TA zvanja) je IZA fotografije (ispod okvira, preko bloka boje), izlazi ispod donjeg levog ugla.
   Hero je iznad sledeće sekcije (z-index), da potez ne prekrije njena pozadina; ulazi samo u njen gornji razmak. */
.page-hero--cetka { position: relative; z-index: 1; }
.ukras-slike--cetka { z-index: -1; width: 400px; left: -196px; bottom: -92px; rotate: -6deg; }
.ukras-slike--zrake { width: 58px; left: -46px; top: -46px; }
@media (max-width: 959px) {
  /* Slika je ispod teksta: razmak 44px, da ukras iznad gornjeg ugla nikad ne dodirne tekst. */
  .page-hero--slika .page-hero__grid { row-gap: 44px; }
  /* Slika je ispod teksta, na početku reda: ukrasi sa leve strane idu u gornji desni ugao (ne ka tekstu iznad). */
  .ukras-slike--strelica { left: auto; right: -12px; top: -30px; transform: scaleX(-1); }
}
@media (max-width: 959px) {
  /* Savetovalište: ispod 960px slika je ispod teksta (razmak 44px, da oblačići iznad ugla ne dodirnu tekst). */
  .sav-zak { row-gap: 44px; }
  .ukras-slike--oblacici { right: -14px; top: -40px; }
}
@media (max-width: 639px) {
  .ukras-slike--strelica { width: 60px; right: -4px; top: -26px; }
  .ukras-slike--kartice { width: 92px; left: -4px; bottom: -32px; }
  .ukras-slike--oblacici { width: 80px; right: -4px; top: -32px; }
  .ukras-slike--upitnik { width: 34px; right: -42px; }
  .ukras-slike--cetka { width: 250px; left: -12px; bottom: -58px; }
  .ukras-slike--zrake { width: 44px; left: -8px; top: -36px; }
}

@media (prefers-reduced-motion: no-preference) {
  .ukras-slike [pathLength] { stroke-dasharray: 1; }
  /* Hero: linije se iscrtaju jednom posle reči naslova; potez četkom se jednom „povuče" sleva; tačka upitnika se pojavi
     na kraju. */
  .js .page-hero .ukras-slike [pathLength] { animation: pr-crtaj .8s ease-out .35s both; }
  .js .page-hero .ukras-slike__tacka { animation: pr-pojavi .25s ease-out 1.05s both; }
  .js .page-hero .ukras-slike--cetka { animation: pr-cetka .7s var(--izlaz) .3s both; }
  /* Ispod preloma: kad figura uđe (tip „foto"), linije se iscrtaju jednom. */
  .pokret [data-pojava="foto"]:not(.je-vidljivo) .ukras-slike [pathLength] { stroke-dashoffset: 1; }
  [data-pojava="foto"].je-vidljivo .ukras-slike [pathLength] { animation: pr-crtaj .7s ease-out .3s both; }
}
@keyframes pr-pojavi { from { opacity: 0; } }
@keyframes pr-cetka { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* -- 34. S13: uvećana fotografija (lightbox; assets/js/site.js „Uvećana fotografija", taus_foto_uvecaj()) ------------- */
/* Isti okvir kao modal podkasta i biografije (.embed-modal u opste.css: zatamnjena pozadina, dugme ×). Slika je cela, u
   svom odnosu (width/height iz data-w / data-h, pa nema skoka pri učitavanju), najviše do ivica ekrana minus mesto za
   opis; opis (opis, inače alt) ispod slike, beo na zatamnjenoj pozadini. Esc, klik van slike i × zatvaraju. Pojava 0.2s
   (fade + blago uvećanje), uz prefers-reduced-motion bez animacije. */
.foto-modal .embed-modal__dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  width: auto;
  max-width: 100%;
  background: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  pointer-events: none;
}
.foto-modal .embed-modal__dialog > * { pointer-events: auto; }
.foto-modal__slika {
  display: block;
  width: auto;
  height: auto;
  max-width: min(1400px, calc(100vw - 2rem));
  max-height: calc(100vh - 7.5rem);
  max-height: calc(100dvh - 7.5rem);
  background: var(--bela);
  border: 6px solid var(--bela);
  border-radius: 3px;
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .6);
}
.foto-modal__opis {
  max-width: 60ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.4;
  color: var(--bela);
  text-align: center;
}
.foto-modal__opis:empty { display: none; }
.foto-modal .embed-modal__close { position: fixed; top: 12px; right: 12px; }
.foto-modal .embed-modal__close:focus-visible { outline: 3px solid var(--zuta); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .foto-modal:not([hidden]) .embed-modal__backdrop { animation: pr-pojavi .2s ease-out both; }
  /* Na slici, ne na dijalogu: transform na dijalogu bi dugmetu × (position: fixed) promenio okvir. */
  .foto-modal:not([hidden]) .foto-modal__slika { animation: pr-foto-uvecaj .2s var(--izlaz) both; }
}
@keyframes pr-foto-uvecaj { from { opacity: 0; transform: scale(.96); } }