/* =====================================================================
   UNUTRAŠNJE STRANICE
   Isti design tokeni, isti motion tokeni — samo mirnije.
   Bez parallaxa, bez velikih lebdećih elemenata, bez morphinga.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. BREADCRUMBS  — nikad H1
   --------------------------------------------------------------------- */
.crumbs { margin-bottom: var(--s-4); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.crumbs li { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
.crumbs a,
.crumbs span[aria-current] {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--c-ink-soft);
}
.crumbs a:hover { color: var(--acc-ink); text-decoration: underline; text-underline-offset: 3px; }
.crumbs span[aria-current] { color: var(--c-ink); }
.crumbs__sep { color: var(--c-line-strong); flex: none; }

/* Dug breadcrumb se prelama, posljednja stavka se skraćuje */
.crumbs li:last-child span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: min(60ch, 68vw); }

/* ---------------------------------------------------------------------
   2. INTERNAL HERO  — 280–420 px desktop
   --------------------------------------------------------------------- */
.ihero {
  position: relative; overflow: hidden;
  padding-top: clamp(6.5rem, 11vh, 8.5rem);
  padding-bottom: clamp(2rem, 4vw, 3.25rem);
  min-height: clamp(280px, 34vh, 420px);
  display: flex; align-items: center;
}
.ihero__wash {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(165deg,
      color-mix(in oklab, var(--acc-soft) 85%, #fff) 0%,
      color-mix(in oklab, var(--acc-soft) 35%, transparent) 55%,
      transparent 100%);
}
.ihero__blob {
  position: absolute; z-index: 0; display: block;
  border-radius: var(--r-organic); filter: blur(46px); opacity: .5;
}
.ihero__blob--1 { width: 34vw; height: 22vw; right: -6vw; top: -6vw; background: color-mix(in oklab, var(--acc) 45%, transparent); }
.ihero__blob--2 { width: 26vw; height: 18vw; left: -8vw; bottom: -8vw; background: color-mix(in oklab, var(--acc) 30%, transparent); }
.ihero__lines {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  fill: none; stroke: rgba(23,41,58,.08); stroke-width: 1.25;
}
.ihero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s-6); align-items: center;
}
.ihero--media .ihero__inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); }

.ihero__title {
  font-size: clamp(1.95rem, 1.2rem + 2.4vw, 3rem);
  letter-spacing: var(--ls-head); text-wrap: balance; max-width: 22ch;
}
.ihero__lead { margin-top: var(--s-4); font-size: var(--fs-lead); color: var(--c-ink-2); max-width: 62ch; }
.ihero__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--c-ink-soft); }
.ihero__meta span { display: inline-flex; align-items: center; gap: .4rem; }

.ihero__figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-3); }
.ihero__figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; }

/* Vrlo blag drift — jedini pokret u ovom zaglavlju */
@media (prefers-reduced-motion: no-preference) {
  .ihero__blob--1 { animation: iheroDrift 30s var(--ease-standard) infinite alternate; }
  .ihero__blob--2 { animation: iheroDrift 38s var(--ease-standard) infinite alternate-reverse; }
}
@keyframes iheroDrift {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-2.5%, 3%, 0); }
}

/* ---------------------------------------------------------------------
   3. OKVIR STRANE
   --------------------------------------------------------------------- */
.ipage { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.ipage__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.ipage__aside { position: sticky; top: 104px; display: grid; gap: var(--s-5); }

.panel {
  padding: clamp(1.1rem, 2vw, 1.6rem);
  border-radius: var(--r-lg);
  background: var(--c-surface); border: 1px solid var(--c-line);
  box-shadow: var(--sh-inset), var(--sh-1);
}
.panel__h { font-family: var(--f-head); font-size: var(--fs-xs); font-weight: 800; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-ink-soft); margin-bottom: var(--s-4); }

/* ---------------------------------------------------------------------
   4. FILTERI  (dokumenta, uspjesi, sekcije, zaposleni)
   --------------------------------------------------------------------- */
.filters {
  display: grid; gap: .9rem;
  padding: clamp(1rem, 2vw, 1.4rem);
  border-radius: var(--r-lg);
  background: var(--c-surface-3);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-inset), var(--sh-1);
  margin-bottom: var(--s-6);
}
.filters__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem; align-items: end; }
.filters__field { display: grid; gap: .3rem; min-width: 0; }
.filters__field label { font-size: var(--fs-xs); font-weight: 700; color: var(--c-ink-2); }
.filters__field select,
.filters__field input[type="search"],
.filters__field input[type="text"] {
  width: 100%; min-height: 44px; padding: .55rem .85rem;
  border-radius: var(--r-sm); border: 1.5px solid var(--c-line);
  background: rgba(255,255,255,.85); color: var(--c-ink); font-size: var(--fs-sm);
}
.filters__field select:focus-visible,
.filters__field input:focus-visible { border-color: var(--acc); }
.filters__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.filters__count { font-size: var(--fs-xs); color: var(--c-ink-soft); }

/* Prazno stanje */
.empty-state {
  text-align: center; padding: clamp(2rem, 5vw, 3.5rem) 1.2rem;
  border-radius: var(--r-lg);
  background: var(--c-surface); border: 1px dashed var(--c-line-strong);
}
.empty-state h2 { font-size: var(--fs-h3); margin-bottom: .5rem; }
.empty-state p { color: var(--c-ink-soft); max-width: 48ch; margin-inline: auto; }
.empty-state__actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: var(--s-5); }

/* ---------------------------------------------------------------------
   5. ARHIVA VIJESTI
   --------------------------------------------------------------------- */
.alist { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.alist--grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.acard {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--c-surface); border: 1px solid var(--c-line);
  box-shadow: var(--sh-inset), var(--sh-1);
  transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}
.acard:hover, .acard:focus-within { transform: translateY(-3px); box-shadow: var(--sh-3); }
.acard__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--acc-soft); }
.acard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--motion-slow) var(--ease-out); }
.acard:hover .acard__media img { transform: scale(1.035); }
.acard__body { display: grid; gap: .55rem; padding: clamp(1rem, 2vw, 1.35rem); }
.acard__title { font-size: 1.12rem; line-height: 1.32; text-wrap: balance; }
.acard__excerpt { font-size: var(--fs-sm); color: var(--c-ink-soft); }

/* Istaknuta vijest na vrhu arhive */
.afeature { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.afeature .acard__media { aspect-ratio: 4/3; height: 100%; }
.afeature .acard__body { align-content: center; padding: clamp(1.4rem, 3vw, 2.4rem); gap: .75rem; }
.afeature .acard__title { font-size: var(--fs-h3); }

/* Kompaktna lista (bez slike) */
.acard--plain { border-left: 4px solid var(--acc); }

/* ---------------------------------------------------------------------
   6. PAGINACIJA
   --------------------------------------------------------------------- */
.pagination { margin-top: clamp(2rem, 4vw, 3rem); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; align-items: center; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: .4rem .7rem;
  border-radius: var(--r-sm); border: 1.5px solid var(--c-line);
  background: var(--c-surface);
  font-family: var(--f-head); font-weight: 700; font-size: var(--fs-sm); color: var(--c-ink-2);
  transition: all var(--motion-fast) var(--ease-standard);
}
.pagination a.page-numbers:hover { border-color: var(--acc); color: var(--acc-ink); }
.pagination .page-numbers.current { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.pagination .page-numbers.dots { border-color: transparent; background: none; }

/* ---------------------------------------------------------------------
   7. SINGLE — čitljivost je prioritet
   --------------------------------------------------------------------- */
.prose { max-width: 78ch; margin-inline: auto; font-size: 1.0625rem; line-height: 1.72; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); margin-top: 2em; }
.prose h3 { font-size: clamp(1.12rem, 1rem + .5vw, 1.35rem); margin-top: 1.6em; }
.prose a { color: var(--acc-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.prose a:hover { text-decoration-thickness: 2.5px; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose li + li { margin-top: .4em; }
.prose img { border-radius: var(--r-md); }
.prose figure { margin-block: 1.8em; }
.prose figcaption { margin-top: .6em; font-size: var(--fs-xs); color: var(--c-ink-soft); text-align: center; }

/* Slika smije malo da izađe iz kolone teksta — samo na desktopu */
@media (min-width: 1100px) {
  .prose .alignwide,
  .prose figure.wide { width: calc(100% + 8rem); margin-left: -4rem; max-width: none; }
}

.prose blockquote {
  margin-block: 1.8em; padding: 1.2rem 1.4rem;
  border-left: 4px solid var(--acc);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: color-mix(in oklab, var(--acc-soft) 55%, transparent);
  font-size: 1.1rem; font-style: italic; color: var(--c-ink);
}
.prose blockquote cite { display: block; margin-top: .6em; font-size: var(--fs-sm); font-style: normal; color: var(--c-ink-soft); }

.single-head { max-width: 78ch; margin-inline: auto; }
.single-media { margin-block: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-3); }
.single-media img { width: 100%; height: auto; }

/* Prethodna / sljedeća */
.postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.postnav__item {
  display: grid; gap: .3rem; padding: 1.1rem 1.3rem; min-height: 44px;
  border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-line);
  transition: transform var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
.postnav__item:hover { transform: translateY(-2px); border-color: var(--acc); }
.postnav__item--next { text-align: right; }
.postnav__label { font-size: var(--fs-xs); font-weight: 700; color: var(--c-ink-soft); text-transform: uppercase; letter-spacing: .08em; }
.postnav__title { font-family: var(--f-head); font-weight: 700; font-size: var(--fs-sm); }

/* ---------------------------------------------------------------------
   8. DOGAĐAJI
   --------------------------------------------------------------------- */
.evgroup + .evgroup { margin-top: clamp(2.5rem, 5vw, 4rem); }
.evgroup__h { display: flex; align-items: baseline; gap: .7rem; margin-bottom: var(--s-5); }
.evgroup__h h2 { font-size: var(--fs-h3); }
.evgroup__count { font-size: var(--fs-xs); color: var(--c-ink-soft); }

.evcard {
  /* Datumska kolona je šira nego ranije jer datum sada stoji u JEDNOM redu
     („01–31 JAN“), a ne u dva. Ukupna širina kartice je ista. */
  display: grid; grid-template-columns: 108px minmax(0,1fr) auto; gap: 1.1rem; align-items: center;
  padding: 1.1rem 1.3rem; border-radius: var(--r-lg);
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-left: 4px solid var(--acc);
  box-shadow: var(--sh-inset), var(--sh-1);
  transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
.evcard:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.evcard--past { opacity: .82; border-left-color: var(--c-line-strong); }
/* Datum u jednom redu: „14 APR“, „13–14 NOV“, „01–31 JAN“.
   Ranije je bio dvoredni blok sa brojem od 2.2rem, pa se raspon lomio na
   dva reda i zauzimao previše prostora. Veličina je smanjena SAMO ovdje —
   globalni tipografski tokeni nisu dirani. */
.evcard__date {
  display: flex; align-items: baseline; justify-content: flex-start;
  gap: .32rem; color: var(--acc-ink);
  white-space: nowrap;
}
.evcard__date strong { font-family: var(--f-display); font-weight: 800; font-size: 1.15rem; line-height: 1; letter-spacing: -.045em; }
.evcard__date span { font-family: var(--f-head); font-size: .7rem; font-weight: 700; letter-spacing: .12em; }
.evcard__body { display: grid; gap: .3rem; }
.evcard__title { font-family: var(--f-head); font-size: 1.1rem; font-weight: 800; }
.evcard__meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: var(--fs-xs); color: var(--c-ink-soft); }
.evcard__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.evcard__actions { display: flex; gap: .4rem; flex-wrap: wrap; }

.ev-done {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .8rem; border-radius: var(--r-pill);
  background: var(--c-line); color: var(--c-ink-2);
  font-family: var(--f-head); font-size: var(--fs-xs); font-weight: 700;
}

/* ---------------------------------------------------------------------
   9. DOKUMENTA — profesionalna lista
   --------------------------------------------------------------------- */
.doclist { display: grid; gap: .55rem; }
.docrow {
  display: grid; grid-template-columns: 68px minmax(0,1fr) auto; gap: 1rem; align-items: center;
  padding: .85rem 1.1rem; border-radius: var(--r-md);
  background: rgba(255,255,255,.72); border: 1px solid var(--c-line);
  box-shadow: var(--sh-inset);
  transition: border-color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}
.docrow:hover { transform: translateY(-1px); border-color: color-mix(in oklab, var(--acc) 40%, transparent); }
.docrow__type { display: grid; place-items: center; gap: .15rem; padding: .5rem .35rem; border-radius: var(--r-sm); background: var(--acc-soft); color: var(--acc-ink); }
.docrow__type span { font-family: var(--f-head); font-size: .66rem; font-weight: 800; letter-spacing: .08em; }
.docrow__main { display: grid; gap: .25rem; min-width: 0; }
.docrow__main strong { font-family: var(--f-head); font-size: 1rem; font-weight: 700; overflow-wrap: anywhere; }
.docrow__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; font-size: var(--fs-xs); color: var(--c-ink-soft); }
.docrow__actions { display: flex; gap: .4rem; }

/* ---------------------------------------------------------------------
   10. USPJESI — editorial wall
   --------------------------------------------------------------------- */
.awall { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.awall > .is-big { grid-column: span 2; }
@media (max-width: 700px) { .awall > .is-big { grid-column: auto; } }

.acard--award .acard__media { aspect-ratio: 4/3; }
.acard--award .ribbon { justify-self: start; }
.award-fallback {
  display: grid; place-items: center; aspect-ratio: 4/3;
  background: linear-gradient(150deg, color-mix(in oklab, var(--acc-soft) 90%, #fff), color-mix(in oklab, var(--acc) 22%, transparent));
  color: var(--acc-ink);
}
.award-fallback svg { width: 44%; max-width: 110px; height: auto; opacity: .55; fill: none; stroke: currentColor; stroke-width: 1.2; }
.award-meta { display: grid; gap: .25rem; font-size: var(--fs-xs); color: var(--c-ink-soft); }
.award-meta b { color: var(--c-ink-2); font-weight: 700; }

/* ---------------------------------------------------------------------
   11. ZAPOSLENI — navigator po predmetima + portretne kartice
   --------------------------------------------------------------------- */

/* ---- Navigator: obični sidro-linkovi, radi bez JS-a ---- */
/* Ljepljivost je uklonjena: sa prelamanjem spisak zauzima dva do tri reda,
   pa bi zalijepljen pojeo znatan dio vidnog polja — narocito na telefonu.
   Sve stavke su ionako vidljive na vrhu strane. */
.subjnav {
  position: relative; z-index: 4;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  padding: .5rem 0;
}

/* Sazimac postoji samo na telefonu — iznad 640 px navigator je uvijek
   otvoren, pa mu prekidac nista ne znaci. `display: none` na `summary`
   ne dira otvorenost: `open` je u markupu i skripta ga tamo i ostavlja. */
.subjnav__toggle { display: none; }
.subjnav__toggle::-webkit-details-marker { display: none; }
.subjnav__toggle::marker { content: ""; }

/* ---------------------------------------------------------------------
   PRETRAGA ZAPOSLENIH
   Radi nad vec ispisanim karticama; bez skripte polje se ne prikazuje.
   ------------------------------------------------------------------ */
/* Polje je u markupu `hidden`; otkriva ga sama skripta pretrage kad se
   uspjesno pokrene. Klasa `.js` se ovdje NE koristi — nju motion.js
   uklanja poslije 2,5 s, pa bi polje nestalo iako skripta radi. */
.staffsearch {
  position: relative; display: flex; align-items: center;
  width: min(100%, 580px);
  margin-bottom: .9rem;
}
.staffsearch[hidden] { display: none; }
.staffsearch__ico {
  position: absolute; left: 1rem; display: grid; place-items: center;
  color: var(--c-ink-soft); pointer-events: none;
}
.staffsearch__ico .ico { width: 18px; height: 18px; }

.staffsearch__input {
  width: 100%; min-height: 50px;
  padding: .7rem 3rem .7rem 2.9rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--c-line);
  background: var(--c-surface-2);
  color: var(--c-ink); font-size: var(--fs-sm);
  transition: border-color var(--motion-fast) var(--ease-standard),
              background-color var(--motion-fast) var(--ease-standard);
}
.staffsearch__input::placeholder { color: var(--c-ink-soft); }
.staffsearch__input:hover { border-color: var(--c-line-strong); }
.staffsearch__input:focus-visible {
  outline: none;
  border-color: var(--a-teal);
  background: #fff;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--a-teal) 22%, transparent);
}
/* Ugradjeni × pregledaca bi stajao preko naseg dugmeta. */
.staffsearch__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.staffsearch__clear {
  position: absolute; right: .5rem;
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: transparent; cursor: pointer;
  color: var(--c-ink-soft);
}
.staffsearch__clear:hover { color: var(--c-ink); background: var(--c-surface); }
.staffsearch__clear .ico { width: 15px; height: 15px; }
.staffsearch__clear[hidden] { display: none; }

.staffsearch__status {
  margin: 0 0 1rem;
  font-family: var(--f-head); font-weight: 700;
  font-size: var(--fs-sm); color: var(--c-ink-2);
}
.staffsearch__status[hidden] { display: none; }

.staffsearch__empty {
  padding: clamp(1.6rem, 4vw, 2.6rem) 1.2rem;
  border-radius: var(--r-lg);
  background: var(--c-surface); border: 1px dashed var(--c-line-strong);
  text-align: center;
}
.staffsearch__empty[hidden] { display: none; }
.staffsearch__empty-h { font-family: var(--f-head); font-weight: 700; color: var(--c-ink); }
.staffsearch__empty-p { margin-top: .35rem; font-size: var(--fs-sm); color: var(--c-ink-soft); }

/* Skrivena kartica ne smije ostaviti prazno mjesto u mrezi. */
.pcard[hidden], .subject[hidden] { display: none; }
/* Spisak se PRELAMA u vise redova. Ranije je bio vodoravni skroler, pa je
   sa 21 oblascu polovina stavki bila van vidnog polja. Bez strelica, bez
   carousela, bez skripte — samo `flex-wrap`. */
.subjnav__list {
  display: flex; flex-wrap: wrap; gap: .4rem .4rem;
  padding: .25rem 0; margin-inline: 0;
}
.subjnav__list li { flex: 0 1 auto; min-width: 0; }

.subjnav__pill {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px; padding: .5rem .95rem;
  border-radius: var(--r-pill); white-space: nowrap;
  background: var(--c-surface); border: 1.5px solid var(--c-line);
  font-family: var(--f-head); font-size: var(--fs-sm); font-weight: 700;
  color: var(--c-ink-2);
  transition: color var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard),
              background-color var(--motion-fast) var(--ease-standard);
}
.subjnav__pill .ico { color: var(--acc); }
.subjnav__pill:hover { color: var(--acc-ink); border-color: var(--acc); background: var(--acc-soft); }
.subjnav__pill:focus-visible { outline-offset: 2px; }

/* Tekuci filter. `aria-current` nosi SAMO kapsula koja zaista odredjuje
   prikaz: dok traje pretraga nijedna ga nema, jer su na ekranu ljudi iz svih
   oblasti. Bez skripte ga nosi „Svi zaposleni“ — i to je tacno, jer su tada
   sve sekcije vidljive. */
.subjnav__pill[aria-current="true"] {
  color: var(--acc-ink); border-color: var(--acc);
  background: var(--acc-soft);
}

/* Broj JEDINSTVENIH zaposlenih uz „Svi zaposleni“ — ne zbir clanstava po
   oblastima. Ostale kapsule brojac nemaju ni sada; sa 21 kapsulom spisak se
   vec prelama u dva do tri reda, pa bi ga brojevi produzili bez potrebe.
   Broj po oblasti je i dalje u zaglavlju sekcije (`.subject__count`). */
.subjnav__num {
  min-width: 22px; padding: .1rem .42rem;
  border-radius: var(--r-pill);
  background: var(--acc-soft); color: var(--acc-ink);
  font-size: var(--fs-xs); font-weight: 800; text-align: center;
}
.subjnav__pill[aria-current="true"] .subjnav__num {
  background: var(--c-surface); color: var(--acc-ink);
}

/* Natpis „Prikaži:“ otkriva skripta; bez nje sazimac kaze „Oblasti i aktivi“,
   sto tacno opisuje spisak linkova ispod. */
.subjnav__pre[hidden] { display: none; }
.subjnav__pre { color: var(--c-ink-soft); font-weight: 600; }

/* ---- Sekcija predmeta ---- */
.subject { scroll-margin-top: 150px; }
.subject + .subject { margin-top: clamp(2.5rem, 5vw, 4rem); }
.subject:focus { outline: none; }

.subject__head {
  display: flex; align-items: center; gap: .8rem;
  padding-bottom: .7rem; margin-bottom: clamp(1.1rem, 2vw, 1.6rem);
  border-bottom: 2px solid color-mix(in oklab, var(--acc) 40%, transparent);
}
.subject__ico {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: var(--r-sm); background: var(--acc-soft); color: var(--acc-ink);
}
.subject__title { font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); color: var(--acc-ink); }
.subject__count {
  margin-left: auto; min-width: 30px; padding: .18rem .5rem;
  border-radius: var(--r-pill); background: var(--acc-soft); color: var(--acc-ink);
  font-family: var(--f-head); font-size: var(--fs-xs); font-weight: 800; text-align: center;
}

.subject__sub { margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.subject__subtitle {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-bottom: .9rem; padding: .3rem .8rem;
  border-radius: var(--r-pill);
  background: var(--acc-soft); color: var(--acc-ink);
  font-family: var(--f-head); font-size: var(--fs-sm); font-weight: 800;
}

/* ---- Mreža ---- */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }

/* ---- Kartica ---- */
.pcard {
  display: grid; gap: .45rem; justify-items: center; text-align: center;
  padding: 1.4rem 1.1rem 1.2rem;
  border-radius: var(--r-lg);
  background: var(--c-surface); border: 1px solid var(--c-line);
  box-shadow: var(--sh-inset), var(--sh-1);
  transition: box-shadow var(--motion-base) var(--ease-out);
}
.pcard:hover, .pcard:focus-within { box-shadow: var(--sh-inset), var(--sh-2); }

/* Portret: fotografija + tanki gradijentni prsten + diskretan drugi prsten */
.pcard__portrait {
  position: relative; width: 132px; height: 132px; margin-bottom: .5rem;
  display: grid; place-items: center;
}
.pcard__ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 210deg,
    color-mix(in oklab, var(--acc) 70%, transparent),
    color-mix(in oklab, var(--acc-soft) 90%, #fff) 42%,
    color-mix(in oklab, var(--acc) 55%, transparent) 72%,
    color-mix(in oklab, var(--acc-soft) 90%, #fff));
  /* tanki prsten — bez dodatnog elementa */
  mask: radial-gradient(circle, transparent 0 61%, #000 62%);
  -webkit-mask: radial-gradient(circle, transparent 0 61%, #000 62%);
  transition: transform var(--motion-slow) var(--ease-out), opacity var(--motion-base) var(--ease-out);
}
.pcard__ring2 {
  position: absolute; width: 46px; height: 46px; right: 4px; bottom: 8px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--acc-soft) 70%, transparent);
  border: 1.5px solid color-mix(in oklab, var(--acc) 30%, transparent);
  transition: transform var(--motion-base) var(--ease-out);
}
.pcard__photo {
  position: relative; width: 104px; height: 104px; border-radius: 50%;
  overflow: hidden; background: var(--acc-soft);
  box-shadow: 0 6px 18px -8px rgba(23,41,58,.35);
  transition: transform var(--motion-base) var(--ease-out);
}
.pcard__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hover: podiže se portret, prsten se veoma blago okrene. Fotografija se NE rotira. */
@media (hover: hover) and (pointer: fine) {
  .pcard:hover .pcard__photo,
  .pcard:focus-within .pcard__photo { transform: translateY(-3px); }
  .pcard:hover .pcard__ring,
  .pcard:focus-within .pcard__ring { transform: rotate(16deg); }
  .pcard:hover .pcard__ring2,
  .pcard:focus-within .pcard__ring2 { transform: translate(2px, -2px); }
}

/* Fallback bez fotografije: inicijali + diskretna predmetna ikona */
.pcard__fallback {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(160deg,
    color-mix(in oklab, var(--acc-soft) 92%, #fff),
    color-mix(in oklab, var(--acc) 20%, transparent));
}
.pcard__fallback-ico {
  position: absolute; width: 56px; height: 56px;
  color: var(--acc); opacity: .22;
  fill: none; stroke: currentColor; stroke-width: 1.3;
}
.pcard__initials {
  position: relative; font-family: var(--f-head); font-weight: 800;
  font-size: 2rem; letter-spacing: -.02em; color: var(--acc-ink);
}

.pcard__name { font-family: var(--f-head); font-size: 1.04rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.pcard__name a { display: inline-flex; align-items: center; min-height: 44px; }
.pcard__name a:hover { color: var(--acc-ink); text-decoration: underline; text-underline-offset: 3px; }
.pcard__role { font-size: var(--fs-sm); color: var(--c-ink-soft); }

.pcard__tags { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; }
.pcard__tag {
  padding: .15rem .55rem; border-radius: var(--r-pill);
  background: var(--acc-soft); color: var(--acc-ink);
  font-size: .7rem; font-weight: 700;
}

.pcard__mail {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  min-height: 44px; font-size: var(--fs-xs); color: var(--acc-ink);
  overflow-wrap: anywhere;
}
.pcard__mail:hover { text-decoration: underline; text-underline-offset: 3px; }

.pcard__hours {
  width: 100%; margin-top: .35rem; padding-top: .7rem;
  border-top: 1px dashed var(--c-line-strong);
}
.pcard__hours-h {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-ink-soft); margin-bottom: .35rem;
}
.pcard__hours ul { display: grid; gap: .2rem; }
.pcard__hours li { display: flex; justify-content: center; gap: .45rem; font-size: var(--fs-xs); }
.pcard__day { color: var(--c-ink-2); font-weight: 600; }
.pcard__time { color: var(--acc-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- Single profil ---- */
.pprofile { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: clamp(1.4rem, 3vw, 2.4rem); align-items: start; }
.pprofile .pcard__portrait { width: 200px; height: 200px; }
.pprofile .pcard__photo { width: 160px; height: 160px; }
.pprofile .pcard__ring2 { width: 62px; height: 62px; }
.pprofile__meta { display: grid; gap: .6rem; }

/* ---- Stari staff raspored (koristi se na „O školi“) ---- */
.staff { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: clamp(.9rem, 2vw, 1.4rem); }
.staffcard {
  display: grid; gap: .7rem; padding: 1.1rem;
  border-radius: var(--r-lg); background: var(--c-surface);
  border: 1px solid var(--c-line); box-shadow: var(--sh-inset), var(--sh-1);
  text-align: center;
}
.staffcard__photo {
  width: 96px; height: 96px; margin-inline: auto; border-radius: 50%;
  overflow: hidden; background: var(--acc-soft); display: grid; place-items: center;
}
.staffcard__photo img { width: 100%; height: 100%; object-fit: cover; }
.staffcard__initials { font-family: var(--f-head); font-weight: 800; font-size: 1.6rem; color: var(--acc-ink); }
.staffcard__name { font-family: var(--f-head); font-size: 1.02rem; font-weight: 800; }
.staffcard__role { font-size: var(--fs-sm); color: var(--c-ink-soft); }
/* Mandat člana Školskog odbora — sitno, ispod funkcije. */
.staffcard__meta { font-size: var(--fs-xs); color: var(--c-ink-soft); opacity: .85; }
.staffcard__mail { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 44px; font-size: var(--fs-xs); color: var(--acc-ink); }
.staffcard__mail:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Skolski odbor: ista porodica, svoja mjera ----------------------
   Sve visi o `staff--board` na KONTEJNERU. `.staffcard` bez te klase —
   „O skoli“, Rukovodstvo — ostaje netaknut, a `/zaposleni/` ionako koristi
   drugi sklop (`.pcard` / `.pgrid`). */
.staff--board {
  /* `auto-FIT`, ne `auto-fill`: `auto-fill` bi zadrzao prazne staze, pa bi
     `justify-content` nemao sta da rasporedi i grupa bi ostala uz lijevu
     ivicu (izmjereno: 70 px lijevo, 351 px desno). `auto-fit` skuplja prazne
     staze, pa se tri kartice — i nepotpun red 2 + 1 — zaista centriraju.
     Gornja granica staze ostaje 256 px, pa se kartica nikad ne rastegne. */
  grid-template-columns: repeat(auto-fit, minmax(0, 256px));
  justify-content: center;
  gap: clamp(1rem, 2vw, 1.6rem);
}
.staff--board .staffcard {
  gap: .45rem;
  padding: 1.3rem 1.1rem 1.15rem;
  transition: transform var(--motion-base) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out);
}
.staff--board .staffcard__photo {
  width: 104px; height: 104px;
  box-shadow: 0 0 0 3px var(--c-surface), 0 0 0 4px var(--acc-soft);
}
.staff--board .staffcard__photo img { object-fit: cover; }
.staff--board .staffcard__initials { font-size: 1.85rem; }
.staff--board .staffcard__name { font-size: 1.05rem; line-height: 1.25; }
/* Funkcija je naglasena tekstom, ne vecom karticom — predsjednik i ostali
   clanovi imaju potpuno istu mjeru. */
.staff--board .staffcard__role {
  justify-self: center;
  padding: .18rem .6rem; border-radius: var(--r-pill);
  background: var(--acc-soft); color: var(--acc-ink);
  font-size: var(--fs-xs); font-weight: 700;
}
.staff--board .staffcard__meta { margin-top: .05rem; }

@media (hover: hover) and (pointer: fine) {
  .staff--board .staffcard:hover { transform: translateY(-2px); box-shadow: var(--sh-inset), var(--sh-2); }
}
@media (prefers-reduced-motion: reduce) {
  .staff--board .staffcard { transition: none; }
  .staff--board .staffcard:hover { transform: none; }
}
/* Na telefonu kartica popunjava sirinu — fiksna staza bi ostavila prazan
   pojas uz desnu ivicu. */
@media (max-width: 640px) {
  .staff--board { grid-template-columns: 1fr; }
}

/* ---- Rukovodstvo: isti vizuelni jezik, sredjeniji odnosi ------------
   Sve visi o `staff--lead` na KONTEJNERU. „O skoli“ i „Skolski odbor“
   koriste iste `.staffcard` klase bez ove — i ostaju nepromijenjeni. */
.staff--lead {
  /* Fiksna sirina staze umjesto `1fr`: grupa od jedne osobe dobija
     karticu iste sirine kao grupa od cetiri. Bez ovoga bi Zoricina
     kartica pojela cio red. */
  grid-template-columns: repeat(auto-fill, minmax(0, 252px));
  justify-content: start;
  gap: clamp(.9rem, 1.8vw, 1.25rem);
}
.staff--lead .staffcard {
  gap: .5rem;
  padding: 1.35rem 1.1rem 1.15rem;
  border-color: var(--acc-line, var(--c-line));
  box-shadow: var(--sh-inset), var(--sh-1);
  transition: transform var(--motion-base) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out);
}
/* Fotografija je izrazenija, sa tankim prstenom u boji oblasti. */
.staff--lead .staffcard__photo {
  width: 116px; height: 116px;
  box-shadow: 0 0 0 3px var(--c-surface), 0 0 0 4px var(--acc-soft);
}
.staff--lead .staffcard__initials { font-size: 2rem; }
.staff--lead .staffcard__name { font-size: 1.08rem; line-height: 1.25; }
/* Funkcija je tiha pilula — jasno odvojena od imena i od adrese. */
.staff--lead .staffcard__role {
  justify-self: center;
  padding: .18rem .6rem; border-radius: var(--r-pill);
  background: var(--acc-soft); color: var(--acc-ink);
  font-size: var(--fs-xs); font-weight: 700;
}
.staff--lead .staffcard__mail { min-height: 32px; opacity: .92; word-break: break-word; }
.staff--lead .staffcard__mail:hover { opacity: 1; }

/* Na telefonu kartica popunjava sirinu: fiksna staza bi ostavila prazan
   pojas uz desnu ivicu. Isti prelom (640px) koji vec koristi ostatak
   ovog fajla. */
@media (max-width: 640px) {
  .staff--lead { grid-template-columns: 1fr; }
}

/* Hover samo tamo gdje mis zaista postoji, i jedva primjetan. */
@media (hover: hover) and (pointer: fine) {
  .staff--lead .staffcard:hover { transform: translateY(-2px); box-shadow: var(--sh-inset), var(--sh-2); }
}
@media (prefers-reduced-motion: reduce) {
  .staff--lead .staffcard { transition: none; }
  .staff--lead .staffcard:hover { transform: none; }
}

/* Podgrupa je SEKUNDARNI nivo: tisa i manja od pilule koju koristi
   arhiva zaposlenih, da ne konkurise naslovu „Strucna sluzba“. */
.subject__subtitle--lead {
  padding: .18rem .1rem; border-radius: 0;
  background: none; color: var(--c-ink-soft);
  font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
}
.subject__subtitle--lead::before {
  content: ""; width: 18px; height: 2px; border-radius: 2px;
  background: var(--acc-ink); opacity: .55;
}

/* ---------------------------------------------------------------------
   12. HUB (Za učenike / Za roditelje)
   --------------------------------------------------------------------- */
.hub { display: grid; gap: clamp(.9rem, 2vw, 1.2rem); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.hub--calm { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.hubcard {
  position: relative; display: grid; gap: .5rem; align-content: start;
  padding: 1.25rem 1.35rem; min-height: 128px;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, color-mix(in oklab, var(--acc-soft) 62%, #fff), rgba(255,255,255,.6));
  border: 1px solid color-mix(in oklab, var(--acc) 22%, transparent);
  box-shadow: var(--sh-inset), var(--sh-1);
  transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}
.hubcard:hover { transform: translateY(-3px); box-shadow: var(--sh-2), var(--sh-acc); }
.hub--calm .hubcard { background: var(--c-surface); border-color: var(--c-line); border-left: 4px solid var(--acc); }
.hub--calm .hubcard:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.hubcard__ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-sm); background: rgba(255,255,255,.8); color: var(--acc-ink); }
.hubcard__title { font-family: var(--f-head); font-size: 1.08rem; font-weight: 800; }
.hubcard__desc { font-size: var(--fs-sm); color: var(--c-ink-soft); }
.hubcard__go { position: absolute; right: 1.1rem; bottom: 1.1rem; color: var(--acc-ink); opacity: .5; transition: transform var(--motion-base) var(--ease-out), opacity var(--motion-base) var(--ease-out); }
.hubcard:hover .hubcard__go { transform: translateX(5px); opacity: 1; }

/* ---------------------------------------------------------------------
   13. TIMELINE (istorijat)
   --------------------------------------------------------------------- */
.vtl { position: relative; display: grid; gap: clamp(1.2rem, 3vw, 2rem); padding-left: 3.2rem; }
.vtl::before {
  content: ""; position: absolute; left: 15px; top: 12px; bottom: 12px; width: 2px;
  background: repeating-linear-gradient(180deg, var(--c-line-strong) 0 6px, transparent 6px 13px);
}
.vtl__item { position: relative; }
.vtl__item::before {
  content: ""; position: absolute; left: -3.2rem; top: 6px;
  width: 18px; height: 18px; margin-left: 7px; border-radius: 50%;
  background: var(--acc); border: 3px solid #F4FAFB; box-shadow: var(--sh-1);
}
.vtl__year {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  letter-spacing: -.045em; color: var(--acc-ink); line-height: 1;
}
.vtl__title { font-family: var(--f-head); font-size: 1.1rem; font-weight: 800; margin-top: .35rem; }
.vtl__text { margin-top: .35rem; font-size: var(--fs-sm); color: var(--c-ink-soft); max-width: 62ch; }

/* Statement / citat blok */
.statement {
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, color-mix(in oklab, var(--acc-soft) 75%, #fff), rgba(255,255,255,.55));
  border: 1px solid color-mix(in oklab, var(--acc) 20%, transparent);
  box-shadow: var(--sh-inset), var(--sh-2);
}
.statement p { font-family: var(--f-head); font-size: clamp(1.15rem, 1rem + .9vw, 1.55rem); font-weight: 600; line-height: 1.42; text-wrap: balance; }
.statement cite { display: block; margin-top: .9rem; font-size: var(--fs-sm); font-style: normal; color: var(--c-ink-soft); }

/* ---------------------------------------------------------------------
   14. KONTAKT FORMA
   --------------------------------------------------------------------- */
.cform { display: grid; gap: .8rem; }
.cform__field { display: grid; gap: .28rem; }
.cform label { font-size: var(--fs-xs); font-weight: 700; color: var(--c-ink-2); }
.cform .req { color: var(--a-coral-ink); }
/* Polja su nesto niza nego prije; dodirna meta ostaje 44 px. */
.cform input, .cform textarea {
  width: 100%; padding: .58rem .85rem; min-height: 44px;
  border-radius: var(--r-sm); border: 1px solid var(--c-line);
  background: rgba(255,255,255,.72); color: var(--c-ink); font-size: var(--fs-sm);
  transition: border-color var(--motion-fast) var(--ease-standard),
              box-shadow var(--motion-fast) var(--ease-standard);
}
/* Textarea srednje visine — ne raste sama i ne siri kolonu. */
.cform textarea { min-height: 132px; max-height: 320px; resize: vertical; }
.cform input:focus-visible, .cform textarea:focus-visible {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--acc) 22%, transparent);
}
.cform [aria-invalid="true"] { border-color: var(--a-coral-ink); background: color-mix(in oklab, var(--a-coral-soft) 45%, #fff); }
.cform__err { font-size: var(--fs-xs); color: var(--a-coral-ink); font-weight: 600; }
.cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Status: prazan i skriven dok se nista ne posalje — nema stalnog okvira. */
.cform__status {
  margin: 0; padding: .7rem .95rem; border-radius: var(--r-md);
  font-size: var(--fs-sm); font-weight: 600;
}
.cform__status[hidden] { display: none; }
.cform__status--ok {
  background: var(--a-mint-soft); color: var(--a-mint-ink);
  border: 1px solid color-mix(in oklab, var(--a-mint) 45%, transparent);
}
.cform__status--err {
  background: var(--a-coral-soft); color: var(--a-coral-ink);
  border: 1px solid color-mix(in oklab, var(--a-coral) 45%, transparent);
}
/* Dugme: na desktopu prema sadrzaju i lijevo, na telefonu puna sirina. */
.cform__send { margin: .2rem 0 0; }
.cform[aria-busy="true"] { opacity: .92; }
@media (max-width: 640px) {
  .cform__send .btn { width: 100%; }
}

.form-summary {
  padding: .9rem 1.1rem; border-radius: var(--r-md);
  background: var(--a-coral-soft); border: 1px solid color-mix(in oklab, var(--a-coral) 45%, transparent);
  color: var(--a-coral-ink); font-size: var(--fs-sm);
}
.form-summary ul { margin-top: .4rem; padding-left: 1.1rem; }
.form-summary li { list-style: disc; }
.form-summary a { text-decoration: underline; text-underline-offset: 3px; }

.form-ok {
  padding: .9rem 1.1rem; border-radius: var(--r-md);
  background: var(--a-mint-soft); border: 1px solid color-mix(in oklab, var(--a-mint) 45%, transparent);
  color: var(--a-mint-ink); font-size: var(--fs-sm); font-weight: 600;
}

/* ---------------------------------------------------------------------
   14b. KOMPONENTE PREUZETE IZ sections.css
   Unutrašnje strane NE učitavaju sections.css (to je CSS početne), pa
   sve što one koriste mora postojati i ovdje. Bez ovoga bi kontakt
   podaci, mapa i traka priznanja ostali bez stilova.
   --------------------------------------------------------------------- */
.contact__list { display: grid; gap: .7rem; }
.contact__list li { display: flex; align-items: flex-start; gap: .8rem; }
.contact__list li > span:last-child { display: grid; gap: .1rem; }
.contact__list strong {
  font-family: var(--f-head); font-size: var(--fs-xs); font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; color: var(--c-ink-soft);
}
.contact__list li > span:last-child > span { font-size: 1.02rem; color: var(--c-ink); }
.contact__list a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 1.02rem; color: var(--c-ink);
}
.contact__list a:hover { color: var(--acc-ink); text-decoration: underline; text-underline-offset: 3px; }
.contact__ico {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  border-radius: var(--r-sm); background: rgba(255,255,255,.75); color: var(--acc-ink);
}

.contact__social { display: flex; gap: .5rem; flex-wrap: wrap; }
.contact__social a {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--r-sm); background: rgba(255,255,255,.7);
  color: var(--c-ink-2); border: 1px solid var(--c-line);
  transition: transform var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-standard);
}
.contact__social a:hover { transform: translateY(-2px); color: var(--acc-ink); }

.map-slot {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  min-height: 240px; border: 1px dashed var(--c-line-strong);
  background: #E4EFF0; box-shadow: var(--sh-2); display: grid; place-items: center;
}
.map-slot__pin {
  display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 50% 50% 50% 8px; rotate: -45deg;
  background: var(--a-coral); color: #fff; box-shadow: var(--sh-3);
}
.map-slot__pin .ico { rotate: 45deg; }
.map-slot__label {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  padding: .4rem .8rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.9); border: 1px dashed var(--a-coral);
  font-size: .72rem; font-weight: 700; color: var(--a-coral-ink); white-space: nowrap;
}

.ribbon {
  justify-self: start; display: inline-flex; align-items: center; gap: .45rem;
  padding: .38rem .85rem; border-radius: var(--r-pill);
  background: linear-gradient(120deg, var(--a-amber), #FFD98A);
  color: #5C3F02; font-family: var(--f-head); font-size: var(--fs-xs); font-weight: 800;
  box-shadow: 0 8px 20px -8px rgba(245,185,63,.9);
}

.sec-card__lead { font-size: var(--fs-xs); color: var(--acc-ink); opacity: .85; font-weight: 600; }

/* ---------------------------------------------------------------------
   14c. TEKSTUALNI LINKOVI U NASLOVIMA — puna površina za dodir
   --------------------------------------------------------------------- */
.staffcard__name a,
.sresult__title a,
.evcard__title a,
.acard__title a,
.form-summary a {
  display: inline-flex; align-items: center; min-height: 44px;
}

/* ---------------------------------------------------------------------
   15. PRETRAGA
   --------------------------------------------------------------------- */
.sresult {
  display: grid; gap: .4rem; padding: 1.05rem 1.2rem;
  border-radius: var(--r-md); background: var(--c-surface);
  border: 1px solid var(--c-line); border-left: 4px solid var(--acc);
  transition: transform var(--motion-fast) var(--ease-out);
}
.sresult:hover { transform: translateX(3px); }
.sresult__type {
  display: inline-flex; align-items: center; align-self: start;
  padding: .2rem .6rem; border-radius: var(--r-pill);
  background: var(--acc-soft); color: var(--acc-ink);
  font-family: var(--f-head); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.sresult__title { font-family: var(--f-head); font-size: 1.06rem; font-weight: 700; }
.sresult__excerpt { font-size: var(--fs-sm); color: var(--c-ink-soft); }

/* ---------------------------------------------------------------------
   16. 404
   --------------------------------------------------------------------- */
.e404 { text-align: center; padding-block: clamp(3rem, 8vw, 6rem); }
.e404__code {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(4.5rem, 3rem + 9vw, 9rem); line-height: 1;
  letter-spacing: -.05em;
  background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.e404__title { font-size: var(--fs-h2); margin-top: .4rem; text-wrap: balance; }
.e404__lead { margin-top: var(--s-4); color: var(--c-ink-soft); max-width: 52ch; margin-inline: auto; }
.e404__links { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: var(--s-6); }
.e404__search { max-width: 460px; margin: var(--s-6) auto 0; }

/* =====================================================================
   RITAM RADNOG DANA
   =====================================================================
   Bez JS-a: svi razredi jedan ispod drugog (naslov + lista) — potpuno
   upotrebljivo. Sa JS-om (`ritam--js`) pilule postaju tabovi. */
.ritam { margin-top: clamp(1.4rem, 3vw, 2.4rem); }

.ritam__tabs {
  display: flex; flex-wrap: wrap; gap: .45rem;
  margin-bottom: clamp(1.2rem, 2.4vw, 1.8rem);
}
.ritam__tab {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .55rem 1.05rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--c-line);
  background: var(--c-surface);
  font-family: var(--f-head); font-size: var(--fs-sm); font-weight: 600;
  color: var(--c-ink-2); white-space: nowrap;
  transition: background-color var(--motion-fast) var(--ease-standard),
              border-color var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}
.ritam__tab:hover { border-color: var(--a-teal); color: var(--a-teal-ink); }
.ritam__tab.is-on {
  background: var(--a-teal-soft); border-color: var(--a-teal); color: var(--a-teal-ink);
  box-shadow: inset 0 -2px 0 var(--a-teal);
}

.ritam__panel + .ritam__panel { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.ritam--js .ritam__panel + .ritam__panel { margin-top: 0; }
.ritam--js .ritam__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.ritam__title { font-family: var(--f-head); font-size: 1.15rem; font-weight: 800; margin-bottom: .8rem; }

.ritam__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.ritam__row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem;
  padding: .85rem 1.1rem;
  border-radius: var(--r-md);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--a-sky);
}
.ritam__what { font-family: var(--f-head); font-weight: 700; font-size: 1rem; color: var(--c-ink); }
.ritam__time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--c-ink-2); white-space: nowrap; }

/* Pretčas — čas prije prvog. Nije odmor, pa zadržava izgled časa,
   ali ima svoj lavanda akcenat da se odmah vidi da nije redovan čas. */
.ritam__row--pre {
  border-left-color: var(--a-lavender);
  background: color-mix(in oklab, var(--a-lavender-soft) 45%, #fff);
}
.ritam__row--pre .ritam__what { color: var(--a-lavender-ink); }

/* Odmor — pastelno zeleno, jasno različit od časa */
.ritam__row--break {
  background: color-mix(in oklab, var(--a-mint-soft) 70%, #fff);
  border-color: color-mix(in oklab, var(--a-mint) 26%, transparent);
  border-left-color: var(--a-mint);
}
.ritam__row--break .ritam__what { color: var(--a-mint-ink); }
.ritam__row--break .ritam__time { color: var(--a-mint-ink); }

@media (max-width: 640px) {
  /* Vodoravno pomjeranje pilula umjesto široke tabele — bez skrola strane. */
  .ritam__tabs {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    padding-bottom: .35rem;
  }
  .ritam__tabs::-webkit-scrollbar { display: none; }
  .ritam__row { padding: .75rem .9rem; gap: .7rem; }
  .ritam__what { font-size: .95rem; }
}

/* =====================================================================
   JAVNE NABAVKE — godina → predmet postupka → dokumenta
   ===================================================================== */
.nab__years { display: flex; flex-wrap: wrap; gap: .45rem; margin: clamp(1.2rem, 2.4vw, 2rem) 0; }

.nab__year + .nab__year { margin-top: clamp(2rem, 4vw, 3rem); }
.nab__year-title {
  font-family: var(--f-head); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800;
  letter-spacing: -.02em; padding-bottom: .5rem;
  border-bottom: 2px solid var(--c-line-strong);
}

.nab__case { margin-top: clamp(1.1rem, 2.2vw, 1.6rem); }
.nab__case-title {
  font-family: var(--f-head); font-size: 1.05rem; font-weight: 700;
  color: var(--a-mint-ink); margin-bottom: .55rem;
}
.nab__case-title::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--a-mint); margin-right: .5rem; vertical-align: middle;
}
.nab__list { list-style: none; margin: 0; padding: 0 0 0 1.1rem; display: grid; gap: .45rem;
  border-left: 2px solid color-mix(in oklab, var(--a-mint) 28%, transparent); }

@media (max-width: 640px) {
  .nab__list { padding-left: .6rem; }
}

/* -------------------------------------------------------------------------
   DIJELJENO SA POCETNOM
   Ova dva pravila su ranije zivjela u sections.css, ali ih koriste i
   unutrasnje strane (.map-embed — kontakt, .doc__meta — javne nabavke).
   Dok je sections.css nesvjesno stizao na svaku stranu preko lanca
   zavisnosti, to se nije primjecivalo. Sada kad se sections.css ucitava
   SAMO na pocetnoj, pravila moraju biti ovdje.
   Sadrzaj pravila je nepromijenjen — samo su premjestena.

   `.soon__hint` je bio i ovdje, ali ga `mmb_empty_state()` ispisuje i na
   POCETNOJ — gdje internal.css ne stize, pa je napomena tamo ostajala bez
   ijednog stila. Premjesten je u components.css, koji se ucitava svugdje.
   ---------------------------------------------------------------------- */
.doc__meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--c-ink-soft); }

.map-embed {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  min-height: 320px; box-shadow: var(--sh-2); border: 1px solid var(--c-line);
  background: #E4EFF0;
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* =====================================================================
   HIMNA ŠKOLE — dekorativni blok uz uvod na „O školi“

   Na desktopu stoji desno od uvodnog teksta; timeline ispod ostaje na
   punoj širini. Na telefonu ide ispod uvoda, punom širinom.
   Bez audio plejera — nema zvaničnog snimka.
   ===================================================================== */
.oskola__uvod { display: grid; gap: clamp(1.4rem, 3vw, 2.4rem); }

@media (min-width: 900px) {
  .oskola__uvod--split { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
}

.anthem {
  position: relative; overflow: hidden;
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  border-radius: var(--r-lg);
  /* staklo-papir: pastelna podloga, bez jakih efekata */
  background:
    linear-gradient(160deg, rgba(255,255,255,.92), rgba(255,255,255,.62)),
    var(--acc-soft);
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-inset), var(--sh-1);
}

/* Notne linije — vrlo diskretno, samo nagovještaj. */
.anthem__lines {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: var(--acc-ink); stroke-width: 1;
  opacity: .07; pointer-events: none;
}

.anthem > *:not(.anthem__lines) { position: relative; z-index: 1; }

.anthem__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin: 0 0 .7rem;
  border-radius: 50%; background: var(--c-surface);
  border: 1px solid var(--c-line); color: var(--acc-ink);
  box-shadow: var(--sh-1);
}

.anthem__title {
  font-family: var(--f-head); font-size: 1.12rem; font-weight: 800;
  letter-spacing: -.02em; color: var(--c-ink); margin-bottom: .6rem;
}

.anthem__quote { position: relative; margin: 0 0 1rem; padding-left: 1.5rem; }
/* Dekorativni navodnik. */
.anthem__quote::before {
  content: "„"; position: absolute; left: -.1rem; top: -.5rem;
  font-family: var(--f-head); font-size: 3rem; line-height: 1;
  color: var(--acc); opacity: .5;
}
/* Cijela himna stoji u kartici — pet strofa, bez skrola i bez „prikazi
   vise“. Prored je zato malo smiren (1.75 -> 1.68) i razmak medju strofama
   suzen, ali velicina slova ostaje ista: tekst se i dalje cita bez napora. */
.anthem__quote p {
  margin: 0; font-size: var(--fs-sm); line-height: 1.68;
  color: var(--c-ink-2); font-style: italic;
}
.anthem__quote p + p { margin-top: .55rem; }

.anthem__more { text-decoration: none; }

/* =====================================================================
   ŠKOLSKI KALENDAR — DOKUMENT

   Bez PDF.js. Tema namjerno nema nijednu spoljnu biblioteku, pa prikaz
   ide kroz `<object>` sa `<iframe>` rezervom i tekstualnim ispadom.

   Ispod 900 px ugradjeni prikaz se GASI i prikazuju se slike strana.
   Razlog nije estetika nego cinjenica: iOS Safari i dio Android
   pregledaca u ugradjenom PDF-u prikazu samo prvu stranu i ne daju da se
   skroluje. Slike su tu jedini nacin da obje strane ostanu citljive.
   ===================================================================== */
/* Traka i dokument su JEDNA kartica: okvir i sjenka su na `.pdfview`, ne
   vise na samom `__frame`. Uzi viewer NIJE stednja prostora — uz `#view=FitH`
   pregledac uklapa SIRINU, pa siri okvir znaci visu stranu i manje vidljivog
   dokumenta. Na 940 px se vidi osjetno veci dio A4 nego na 1160 px. */
.pdfview {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 940px;
  margin-inline: auto;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--c-line);
  box-shadow: var(--sh-2);
  background: var(--c-surface);
}

/* Alatna traka — kompaktni linkovi, bez `.btn` mase i bez jakih boja. */
.pdfbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem .9rem;
  padding: .6rem .75rem;
  background: linear-gradient(180deg, var(--c-surface), var(--c-surface-2));
  border-bottom: 1px solid var(--c-line);
}
.pdfbar__doc {
  display: flex; align-items: center; gap: .6rem; margin: 0; min-width: 0;
}
.pdfbar__doc .ico { color: var(--acc-ink); flex: none; }
.pdfbar__doc span { display: grid; gap: .05rem; min-width: 0; }
.pdfbar__doc strong {
  font-family: var(--f-head); font-size: var(--fs-sm); font-weight: 800;
  color: var(--c-ink); overflow-wrap: anywhere;
}
.pdfbar__doc small { font-size: var(--fs-xs); color: var(--c-ink-soft); }

.pdfbar__acts { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; }
.pdfbar__act {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 40px; padding: .35rem .7rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs); font-weight: 700; color: var(--c-ink-2);
  transition: background var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}
.pdfbar__act:hover, .pdfbar__act:focus-visible {
  background: var(--acc-soft); color: var(--acc-ink);
}
.pdfbar__act--main { color: var(--acc-ink); }

/* Visina krece od `clamp(680px, 78vh, 980px)`, ali NIKAD ne prelazi 85%
   vidnog polja. Bez te gornje granice bi na niskom laptopu (1366x600) donjih
   680 px bilo vise od ekrana i dokument bi progutao stranicu. Izmjereno:
   85vh daje 528 px na 1366x600 i 653 px na 1366x768 — kartica ostaje velika,
   a iznad i ispod nje se i dalje vidi da stranica ide dalje. */
.pdfview__frame {
  position: relative;
  height: min(clamp(680px, 78vh, 980px), 85vh);
  background: var(--c-surface-2);
}

.pdfview__iframe {
  display: block; width: 100%; height: 100%; border: 0;
}

/* Slike strana — na sirokom ekranu ih nosi ugradjeni prikaz, pa stoje. */
.pdfview__pages { display: none; }

.pdfview__page { margin: 0; }
/* „Papir“: bijela podloga, vrlo tanak okvir, mekana sjenka. `aspect-ratio`
   drzi mjesto dok se slika ucitava, pa raspored ne poskakuje. */
.pdfview__page img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1489 / 2105;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
  border: 1px solid color-mix(in oklab, var(--c-line) 70%, transparent);
  box-shadow: 0 8px 22px rgba(23, 41, 58, .09);
}

.pdfview__none { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Bez PDF-a, samo slike: tada su one glavni sadrzaj i vide se uvijek. */
.pdfview--images .pdfview__pages {
  display: grid; gap: clamp(1rem, 2.5vw, 1.8rem);
  max-width: 820px; margin-inline: auto;
}

/* ---- Rukovodstvo: tabovi --------------------------------------------
   Sve visi o `.ltabs`. Nijedna postojeca klasa nije promijenjena, pa
   „O skoli“, „Skolski odbor“ i `/zaposleni/` ostaju netaknuti.

   BEZ JAVASCRIPTA je `.ltabs--on` odsutna: spisak tabova se ne crta (bila
   bi to mrtva dugmad), a svi paneli i njihovi naslovi ostaju vidljivi
   jedan ispod drugog. Sadrzaj se nikad ne gubi. */
.ltabs { margin-top: .4rem; position: relative; }

/* Bez skripte: dugmad se ne prikazuju, paneli se svi vide. */
.ltabs:not(.ltabs--on) .ltabs__list { display: none; }
.ltabs:not(.ltabs--on) .ltabs__panel + .ltabs__panel { margin-top: clamp(1.6rem, 3vw, 2.4rem); }

/* Sa skriptom: vidi se samo aktivan panel, naslov panela zamjenjuje tab. */
.ltabs--on .ltabs__panel { display: none; }
.ltabs--on .ltabs__panel.is-active { display: block; }
.ltabs--on .ltabs__ph {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Spisak tabova. `wrap` je namjeran: ako pet naziva ne stane u jedan red,
   prelomi se u drugi. Horizontalnog skrolbara nema nigdje. */
.ltabs__list {
  display: flex; flex-wrap: wrap; gap: .4rem .5rem;
  margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem);
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--c-line);
}

.ltabs__tab {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; min-height: 40px;
  padding: .42rem .85rem; border-radius: var(--r-pill);
  border: 1px solid var(--c-line); background: var(--c-surface);
  color: var(--c-ink-soft);
  font: inherit; font-size: var(--fs-sm); font-weight: 700; line-height: 1.2;
  text-align: left;
  transition: background var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
}
.ltabs__tab[aria-selected="true"] {
  background: var(--acc-soft); color: var(--acc-ink);
  border-color: var(--acc-soft);
}
@media (hover: hover) and (pointer: fine) {
  .ltabs__tab:hover { color: var(--acc-ink); border-color: var(--acc-soft); }
}
.ltabs__tab:focus-visible { outline: 2px solid var(--acc-ink); outline-offset: 2px; }
.ltabs__panel:focus-visible { outline: 2px solid var(--acc-ink); outline-offset: 4px; }

/* Prazna grupa — jedan tih red, bez ikone i bez okvira. */
.ltabs__empty { color: var(--c-ink-soft); font-size: var(--fs-sm); }

/* Mobilni prekidac se na desktopu ne crta ni kad mu JS skine `hidden`. */
.ltabs__toggle { display: none; }
.ltabs__toggle[hidden] { display: none; }

/* ---- Telefon: kompaktan izbornik umjesto pet dugmadi u pet redova ----
   Isti spisak (`role="tablist"`) postaje padajuca lista. Dugmad se ne
   dupliraju, pa ARIA veze ostaju jedne jedine. */
@media (max-width: 640px) {
  .ltabs--on .ltabs__toggle {
    display: flex; align-items: center; gap: .45rem; width: 100%;
    min-height: 46px; padding: .55rem .85rem;
    border: 1px solid var(--c-line); border-radius: var(--r-lg);
    background: var(--c-surface); color: var(--c-ink);
    font: inherit; font-size: var(--fs-sm); font-weight: 700;
    cursor: pointer; text-align: left;
  }
  .ltabs--on .ltabs__toggle[hidden] { display: none; }
  .ltabs__toggle-pre { color: var(--c-ink-soft); font-weight: 600; }
  .ltabs__current { flex: 1 1 auto; color: var(--acc-ink); }
  .ltabs__chev { flex: 0 0 auto; transition: transform var(--motion-fast) var(--ease-out); }
  .ltabs--open .ltabs__chev { transform: rotate(180deg); }

  .ltabs--on .ltabs__list {
    display: none;
    position: absolute; z-index: 20; inset-inline: 0; top: calc(46px + .35rem);
    flex-direction: column; flex-wrap: nowrap; gap: .15rem;
    margin: 0; padding: .35rem;
    border: 1px solid var(--c-line); border-radius: var(--r-lg);
    background: var(--c-surface); box-shadow: var(--sh-2);
  }
  .ltabs--on.ltabs--open .ltabs__list { display: flex; }
  .ltabs__tab { width: 100%; border-radius: var(--r-sm); }

  /* Panel pocinje ispod zatvorenog prekidaca — lista lebdi iznad njega. */
  .ltabs--on .ltabs__panel { margin-top: clamp(1.1rem, 3vw, 1.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .ltabs__tab, .ltabs__chev { transition: none; }
  .ltabs--open .ltabs__chev { transform: none; }
}