/* ============================================================
   TAUS — formalni sajt udruženja (taus.rs)
   Učitava se POSLE main.css i prepisuje samo ono što treba:
   - bez dekoracija (žute vijuge, tačkaste šare, organske forme, kolaži),
   - clay/sand akcenti -> plava i neutralne,
   - luk i kap (radius-arch, radius-pebble) -> obično zaobljenje,
   - tekstualan, miran hero sa puno prostora.
   Paleta i fontovi (Fraunces / Work Sans) ostaju iz main.css.
   ============================================================ */

/* -- Tokeni: akcenat i oblici ------------------------------------------ */
:root {
  --accent: var(--color-blue-700);
  --accent-soft: var(--color-blue-100);
  --surface-warm: var(--color-blue-50);
  --radius-arch: var(--radius-lg);
  --radius-pebble: var(--radius-lg);
  --radius-lg: 14px; /* umereno zaobljenje kartica i slika */
}

/* -- Clay akcenti -> plava / neutralne ---------------------------------- */
.eyebrow::before { background: var(--color-blue-700); }
.kicker::before { background: var(--color-blue-700); }
.site-nav__link.is-active::after { background: var(--color-blue-700); }
.btn--link { border-bottom-color: var(--color-blue-300); }
.tag--accent, .tag--olive { background: var(--color-blue-100); color: var(--color-blue-800); }
.card--warm, .card--peach { background: var(--color-blue-50); }
.bg-warm { background: var(--color-blue-50); }
.bg-cream { background: var(--color-surface); }
.hero--cream { background: var(--color-bg); }
.pull-quote { border-left-color: var(--color-blue-300); }
.stat { border-top-color: var(--color-blue-300); }
.bg-dark .stat__num { color: var(--color-blue-300); }
.feature-panel { border-top-color: var(--color-blue-700); }
.ego-badge--d { background: var(--color-blue-900); color: var(--color-white); }
.event-group__head { border-bottom-color: var(--color-blue-200); }
.u-clay, .u-gold { color: var(--color-blue-800); }
.card__media--placeholder { background: var(--color-blue-100); }
.card__media--ph-clay { background: linear-gradient(160deg, var(--color-blue-500), var(--color-blue-800)); }
.podcast-cover { background: var(--color-blue-100); }
.site-footer a:hover { color: var(--color-white); }
.social a:hover { background: var(--color-blue-700); color: var(--color-white); }
.ribbon, .tagline-band { background: var(--color-blue-50); }
.ribbon__track span::after { color: var(--color-blue-500); }
:is(.taus-prose, .taus-prose-less) li::marker,
:is(.taus-prose, .taus-prose-less) ol li::marker { color: var(--color-blue-700); }
:is(.taus-prose, .taus-prose-less) a { text-decoration-color: var(--color-blue-300); }
:is(.taus-prose, .taus-prose-less) blockquote { border-left-color: var(--color-blue-300); }

/* Talasasta „rukom crtana" podvlaka ispod kurziva u naslovu — uklonjena. */
.hero__title em,
.hero__title .serif-italic,
.u-mark {
  background-image: none;
  padding: 0;
}

/* -- Dekoracije: isključene --------------------------------------------- */
.hero__shapes, .shape,
.deco, .deco-dots, .deco-dots--gold, .deco-loop, .deco-wave,
.ribbon, .tagline-band { display: none !important; }
.img-organic::after,
.collage-img::after { display: none; }
.img-organic, .img-organic--arch, .img-organic--pebble, .img-organic--drop,
.img-organic__pebble, .collage-img, .hero__media img {
  border-radius: var(--radius-lg);
  aspect-ratio: auto;
}
.timeline__marker { border-radius: 50%; }
.section--arc { border-radius: 0; margin-top: 0; }
.site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--color-surface); }

/* -- Header: ime udruženja pored logoa ---------------------------------- */
.site-header__logo .site-header__name {
  display: none;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--color-ink);
  max-width: 16ch;
}
@media (min-width: 640px)  { .site-header__logo .site-header__name { display: block; } }
@media (min-width: 1120px) { .site-header__logo .site-header__name { max-width: none; white-space: nowrap; } }
@media (min-width: 1120px) and (max-width: 1279px) { .site-header__logo .site-header__name { font-size: .95rem; max-width: 16ch; white-space: normal; } }
/* Telefon (do 639px): ime uz logo u dva fiksna reda („Balkanska asocijacija" / „za transakcionu analizu"),
   13px, vertikalno centrirano uz logo (.site-header__logo je inline-flex). Poseban element iz header.php
   (.site-header__name-m, redovi iz taus_org_name_lines()); na desktopu ga skriva main.css (.site-header__logo span),
   pa desktop ostaje netaknut. Staje i na 360px: logo ~46px + 12px + ~150px teksta + 32px + meni 44px < 320px. */
@media (max-width: 639px) {
  .site-header__logo .site-header__name-m {
    display: flex;
    flex-direction: column;
    font-family: var(--font-display);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -.005em;
    color: var(--color-ink);
  }
  .site-header__logo .site-header__name-m > span { display: block; white-space: nowrap; }
}
/* Header i mobilni meni od oktobra 2026 koriste gotove PNG-ove taus-logo-56/112/168/224.png sa srcset-om
   (taus_header_logo() u inc/template-helpers.php: visine ispod moraju odgovarati onima u header.php, 56 i 44px).
   Logo: assets/images/taus-logo.png je uspravan (242 x 292, oko 0.83:1, providan), pa se dimenzioniše po VISINI,
   širina auto. Stari PNG (60 x 60) je imao isti uspravan znak u kvadratnom platnu (vidljiv deo 49 x 59), pa istu
   vizuelnu težinu kao ranije daju iste visine: header 56px (vidljivo ~45 x 54; na 52px bi bio ~9% lakši),
   mobilni meni i footer 44px. Footer je taman, pa tamo stoji taus-logo-white.png (footer.php) bez filtera za belu
   siluetu iz main.css; mobilni meni je svetao (--color-bg) i ostaje plavi logo. */
.site-header__logo img { height: 56px; width: auto; }
.mobile-drawer .site-header__logo img { height: 44px; width: auto; }
.site-footer__brand img { height: 44px; width: auto; filter: none; }

/* -- Header: glavni meni uvek u jednom redu, header 86px ------------------------------------------------- */
/* Stavke se nikad ne lome (nowrap). Od 1400px sve kao ranije (font 1rem, padding .75rem; 1440 i 1920 netaknuti).
   1280–1399px: font .95rem i manji razmak (na tačno 1280 se meni ranije lomio u dva reda, header 103px).
   960–1279px: ime u dva fiksna reda (isti element kao na telefonu, .site-header__name-m, „Balkanska asocijacija" /
   „za transakcionu analizu") umesto tri reda, još manji razmak i font .9rem, pa meni staje od 960px (hamburger samo
   ispod; ranije od 1120px). Telefon (do 639px) i tablet do 959px ostaju kakvi su bili.
   Od oktobra 2026 je na kraju menija dugme „TA 101 kurs", pa su razmaci na svim širinama manji (blok ispod ovog). */
.site-nav__link { white-space: nowrap; }
@media (min-width: 960px) {
  .site-nav { display: flex; align-items: center; }
  .site-header .menu-toggle { display: none; }
}
@media (min-width: 960px) and (max-width: 1399px) {
  .site-header__inner { gap: 1.5rem; }
  .site-nav { gap: 0; }
  .site-nav__link { padding-inline: .55rem; font-size: .95rem; }
  .site-nav__link.is-active::after { left: .55rem; right: .55rem; }
}
@media (min-width: 960px) and (max-width: 1279px) {
  .site-nav__link { padding-inline: .45rem; font-size: .9rem; }
  .site-nav__link.is-active::after { left: .45rem; right: .45rem; }
  /* Poslednji padajući meni („Aktuelno") se otvara ulevo, poravnat sa desnom ivicom stavke: na 960px bi inače
     izašao ~17px preko ivice ekrana. Grupe su <div>, obične stavke <a>, pa :last-of-type hvata poslednju grupu. */
  .site-nav__group:last-of-type .site-nav__menu { left: auto; right: 0; }
  .site-header__logo .site-header__name { display: none; }
  .site-header__logo .site-header__name-m {
    display: flex;
    flex-direction: column;
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--color-ink);
  }
  .site-header__logo .site-header__name-m > span { display: block; white-space: nowrap; }
}

/* -- Header: dugme „TA 101 kurs" na kraju menija (oktobar 2026) ------------------------------------- */
/* Dugme je Ilijino „Prijavi se na 101" (header.php, .site-header__cta: btn--accent btn--sm, pill u --color-blue-700,
   stil u main.css), koje je ranije bilo vidljivo tek od 1280px. Sada od 960px, kad i meni, u istom redu: meni je gurnut
   udesno do dugmeta (margin-left: auto), pa je dugme odmah posle poslednje stavke, a slobodan prostor stoji između
   imena i menija (ranije je meni stajao na sredini tog prostora). Ispod 960px samo hamburger, a dugme je na dnu
   mobilnog menija (.mobile-drawer__cta).
   Da dugme (~109px) i strelica „Šta je TA ▾" stanu u isti red bez guranja imena, razmak između stavki (padding) i
   razmak ime/meni/dugme (gap) su manji; font stavki ostaje isti, osim na 960–1023px. Mereno na najužoj širini
   svakog opsega (.mobile-check/_alati/cta-test.mjs): 960 / 1024 / 1100 / 1280 / 1400.
     od 1400px:   gap 1.5rem (bilo 2rem), padding .6rem (bilo .75rem), font 1rem
     1280–1399:   gap 1rem (bilo 1.5rem), padding .4rem (bilo .55rem), font .95rem
     1100–1279:   kao ranije (gap 1.5rem, padding .45rem, font .9rem)
     1024–1099:   gap 1rem, padding .3rem, font .9rem
     960–1023:    gap .75rem, padding .25rem, font .85rem (bilo .9rem), dugme padding .5rem .8rem
   display: none mora biti ovde: u main.css .btn (display: inline-flex) dolazi posle .site-header__cta i pregazi ga. */
.site-header__cta { display: none; }
@media (min-width: 960px) {
  .site-nav { margin-left: auto; }
  .site-header__cta { display: inline-flex; }
}
@media (min-width: 1400px) {
  .site-header__inner { gap: 1.5rem; }
  .site-nav__link { padding-inline: .6rem; }
  .site-nav__link.is-active::after { left: .6rem; right: .6rem; }
}
@media (min-width: 1280px) and (max-width: 1399px) {
  .site-header__inner { gap: 1rem; }
  .site-nav__link { padding-inline: .4rem; }
  .site-nav__link.is-active::after { left: .4rem; right: .4rem; }
}
@media (min-width: 960px) and (max-width: 1099px) {
  .site-header__inner { gap: 1rem; }
  .site-nav__link { padding-inline: .3rem; }
  .site-nav__link.is-active::after { left: .3rem; right: .3rem; }
}
@media (min-width: 960px) and (max-width: 1023px) {
  .site-header__inner { gap: .75rem; }
  .site-nav__link { padding-inline: .25rem; font-size: .85rem; }
  .site-nav__link.is-active::after { left: .25rem; right: .25rem; }
  .site-nav__caret { margin-left: .15rem; }
  .site-header__cta { padding: .5rem .8rem; }
}
/* Mobilni meni: isto dugme ispod poslednje stavke, širina po tekstu (kao Ilijino: margin-top 2rem, align-self). */
.mobile-drawer__cta { margin-top: 2rem; align-self: flex-start; }

/* -- Tipografija naslovne: formalniji ton ----------------------------------- */
/* h1 i naslovi sekcija (h2) na naslovnoj ~20% manji nego u main.css; h3/h4 i
   kartice ostaju isti, pa hijerarhija h1 > h2 > h3 ostaje. Samo body.home. */
body.home {
  --fs-h1: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem);     /* main: clamp(2.75rem, 2rem + 3vw, 4.5rem) */
  --fs-h2: clamp(1.8rem, 1.5rem + 1.45vw, 2.6rem);    /* main: clamp(2.25rem, 1.9rem + 1.8vw, 3.25rem) */
}
@media (max-width: 639px) {
  /* Na telefonu main.css već smanjuje naslove; ovde blaže (~10%) da ostanu čitljivi. */
  body.home {
    --fs-h1: clamp(1.7rem, 1.2rem + 3vw, 2.4rem);
    --fs-h2: clamp(1.45rem, 1.1rem + 2vw, 1.95rem);
  }
}
/* Naslov sekcije „Šta je TA": kraći red, prelama se u dva reda na desktopu. */
@media (min-width: 960px) { .home-ega__title { max-width: 14ch; } }

/* -- Hero: tekstualan, ozbiljan, prostran --------------------------------- */
.hero--formal {
  padding-block: clamp(5rem, 4rem + 5vw, 9rem) clamp(4rem, 3rem + 4vw, 7rem);
  background: linear-gradient(180deg, var(--color-blue-50) 0%, var(--color-bg) 100%);
  overflow: visible;
}
.hero--formal .hero__copy { max-width: 46rem; }
.hero--formal .eyebrow { margin-bottom: 1.5rem; }
.hero--formal .hero__title {
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1.08;
  max-width: 18ch;
}
.hero--formal .hero__title em { color: var(--color-blue-800); }
.hero--formal .hero__lead { max-width: 60ch; margin-bottom: 2.5rem; }

/* Hero bez slika: tekst levo, desno SVG dijagram ego stanja (pravila ispod). .hero__inner iz main.css je grid koji
   ispod 960px slaže kolone jednu ispod druge → dijagram ide ispod teksta. */
.hero--formal .hero__inner { gap: 3rem; }
@media (min-width: 960px) {
  .hero--formal .hero__inner { grid-template-columns: 1.15fr .85fr; gap: 4rem; align-items: center; }
}

/* -- Hero naslovne preko cele širine (front-page.php, .hero--cover, kad postoji bar jedna slika) ------------- */
/* Slika (sa 2+ slike slajder, site.js „Slajder na naslovnoj") je od ivice do ivice, odmah ispod headera. Preko nje
   je SAMO naslov (h1), beo, dole levo u containeru, iznad tačkica; kicker, uvod i dugmad su u svetloj sekciji ispod
   (.hero-intro). Visina: od 960px ceo prvi ekran ispod headera (100svh − header, najmanje 480px), sa strelicom
   nadole ka uvodu (.hero-scroll); 640–959px 480px; ispod 640px odnos 4:3, da se fotografije što manje seku.
   Gradijent je samo u donjem delu slike: ::before naslova, od dna slike do 6rem (telefon 3rem) iznad naslova; iza
   gornjeg reda naslova bar .62 plave 900, što i na potpuno beloj slici daje belom (velikom) naslovu oko 4:1 (WCAG AA
   za veliki tekst 3:1). Ostatak slike nije zatamnjen. Slojevi: slike (z 0) < naslov (z 2) < strelice i tačkice (z 3).
   Selektor .hero.hero--cover: jači od mobilnog .hero--formal { min-height: 0; padding } na dnu fajla. */
.hero.hero--cover {
  --scrim: 22, 52, 79; /* --color-blue-900 */
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  /* 640–959px: 480px. Od 960px: ceo prvi ekran ispod headera (pravilo ispod). Telefon: 4:3, pravilo niže. */
  min-height: 480px;
  padding: 0;
  background: var(--color-blue-900);
  overflow: hidden;
  touch-action: pan-y; /* uspravni skrol ostaje stranici, vodoravni prevlak menja sliku */
}
/* Od 960px: ceo prvi ekran ispod headera. --header-h meri site.js (stvarna visina .site-header); bez JS-a 86px
   (logo 56px + 2 × .9rem + 1px okvir). */
@media (min-width: 960px) {
  .hero.hero--cover {
    min-height: max(480px, calc(100vh - var(--header-h, 86px)));
    min-height: max(480px, calc(100svh - var(--header-h, 86px)));
  }
}
.hero-cover { position: absolute; inset: 0; }
.hero-cover:focus-visible { outline: 3px solid var(--color-blue-300); outline-offset: -6px; }
.hero--cover .hero-slider__viewport { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* Vidi se samo aktivna slika; sledeća je pripremljena (is-staged: display block, providna) da se učita pre prelaza.
   Prelaz .8s: nova (iznad) postaje vidljiva, stara (is-leaving) ostaje ispod dok se prelaz ne završi. */
.hero--cover .hero-slider__slide { position: absolute; inset: 0; display: none; opacity: 0; transition: opacity .8s ease-in-out; }
.hero--cover .hero-slider__slide.is-staged { display: block; }
.hero--cover .hero-slider__slide.is-leaving { display: block; opacity: 1; z-index: 1; transition: none; }
.hero--cover .hero-slider__slide.is-active { display: block; opacity: 1; z-index: 2; }
/* Isečak prati „Fokus slike" iz Media (inc/media-focus.php): ispod 960px --focus-m („Fokus slike"), od 960px --focus-d
   („Fokus slike, desktop"), pa --focus-m; bez njih center 35% (glave se ne seku). Ista tačka i za ken burns. */
.hero--cover .hero-slider__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--focus-m, center 35%);
  transform-origin: var(--focus-m, center 35%);
  border-radius: 0;
}
@media (min-width: 960px) {
  .hero--cover .hero-slider__img {
    object-position: var(--focus-d, var(--focus-m, center 35%));
    transform-origin: var(--focus-d, var(--focus-m, center 35%));
  }
}
/* Hero slika tpl-standard stranica (page-templates/tpl-standard.php, isečak 4:3): isto pravilo, bez fokusa sredina. */
.hero-focus { object-position: var(--focus-m, 50% 50%); }
@media (min-width: 960px) {
  .hero-focus { object-position: var(--focus-d, var(--focus-m, 50% 50%)); }
}
/* Kartice osoba (cards sekcija sa fotografijama, inc/sections.php; samo Organi udruženja): kvadrat na vrhu kao na Naš
   tim, isečak prati „Fokus slike" (prazno = 50% 40%); bez fotografije inicijali na plavoj podlozi.
   Red .row--people je flex umesto grida: sve kartice iste širine (--cols u redu), nepun poslednji red i grupe od 1 i 3
   osobe centrirani, kartice u istom redu iste visine (stretch). Kolone: 2 do 639px, 3 do 959px, 4 od 960px; grupa do
   5 osoba (.row--people-5) od 1200px 5, pa staje u jedan red. */
.row.row--people { --cols: 2; --pgap: var(--col-gap); display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; column-gap: var(--pgap); }
.row--people > .card--person { flex: 0 0 calc((100% - (var(--cols) - 1) * var(--pgap)) / var(--cols)); }
@media (max-width: 639px) { .row.row--people { --pgap: 1rem; } } /* isti razmak kao .row na telefonu (main.css) */
@media (min-width: 640px) { .row.row--people { --cols: 3; } }
@media (min-width: 960px) { .row.row--people { --cols: 4; } }
@media (min-width: 1200px) { .row.row--people-5 { --cols: 5; } }
.card__media--person { flex: none; aspect-ratio: 1 / 1; display: grid; place-items: center; background: var(--color-blue-100); }
.card__media--person img { object-position: var(--focus-m, 50% 40%); }
@media (min-width: 960px) {
  .card__media--person img { object-position: var(--focus-d, var(--focus-m, 50% 40%)); }
}
.card__initials { font-family: var(--font-display); font-size: 3rem; line-height: 1; color: var(--brand-strong); }
.card--person .card__body { gap: .4rem; }
.card--person .card__title { font-size: 1.15rem; }
@media (max-width: 639px) {
  .card--person .card__body { padding: 1rem; }
  .card--person .card__title { font-size: 1rem; }
  .card--person .card__excerpt { font-size: .9rem; }
}
/* Vrlo blag „ken burns": aktivna slika se za vreme prikaza (i prelaza) uveća 1 → 1.04. Uz prefers-reduced-motion
   ga gasi i globalno pravilo u main.css (animation: none). */
.hero--cover .hero-slider__slide:is(.is-active, .is-leaving) .hero-slider__img { animation: hero-ken-burns 7s linear forwards; }
@keyframes hero-ken-burns { from { transform: scale(1); } to { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) {
  .hero--cover .hero-slider__img { animation: none !important; transform: none; }
}
/* Naslov: postojeći container, dole; ispod mesto za tačkice. Od 960px levo bar 76px od ivice ekrana (16px + strelica
   44px + 16px), da se ne preklopi sa levom strelicom (od ~1360px važi običan gutter containera). */
.hero--cover .hero-cover__content { position: relative; z-index: 2; width: 100%; padding-block: 2rem 4rem; }
@media (min-width: 960px) {
  .hero--cover .hero-cover__content { padding-left: max(var(--gutter), calc(76px - max(0px, (100vw - var(--container-max)) / 2))); }
}
.hero--cover .hero__title {
  position: relative;
  z-index: 0;
  margin: 0;
  color: var(--color-white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 2px 18px rgba(var(--scrim), .35);
}
.hero--cover .hero__title em { color: var(--color-blue-200); }
.hero--cover .hero__title::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -6rem -100vw -4rem; /* do dna slike (padding ispod naslova) i 6rem iznad njega */
  background: linear-gradient(to top, rgba(var(--scrim), .8) 0, rgba(var(--scrim), .62) calc(100% - 6rem), rgba(var(--scrim), 0) 100%);
  pointer-events: none;
}
/* Strelice: levo i desno na sredini visine, samo na desktopu (od 960px, uz miš), vidljive na hover/fokus. */
.hero--cover .hero-slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--color-ink);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s ease, background .2s ease, color .2s ease;
}
.hero--cover .hero-slider__arrow svg { width: 22px; height: 22px; }
.hero--cover .hero-slider__arrow--prev { left: 1rem; }
.hero--cover .hero-slider__arrow--next { right: 1rem; }
.hero--cover .hero-slider__arrow:hover { background: var(--color-white); color: var(--color-blue-800); }
.hero--cover .hero-slider__arrow:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; }
.hero--cover:is(:hover, :has(:focus-visible)) .hero-slider__arrow { opacity: 1; }
.hero-cover:not(.is-ready) .hero-slider__arrow { display: none; } /* bez JS-a nema ni strelica */
@media (max-width: 959px), (hover: none), (pointer: coarse) { .hero--cover .hero-slider__arrow { display: none; } }
/* Tačkice dole na sredini: dugme 24px (mesto za prst), vidljiva tačka 8px, aktivna bela „pilula"; tanak taman obod
   i senka da se vide na svakoj slici. */
.hero--cover .hero-slider__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.25rem;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem;
}
.hero--cover .hero-slider__dot {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  cursor: pointer;
}
.hero--cover .hero-slider__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .6);
  box-shadow: 0 0 0 1px rgba(var(--scrim), .35), 0 1px 3px rgba(0, 0, 0, .35);
  transition: width .3s ease, margin .3s ease, background .3s ease;
}
.hero--cover .hero-slider__dot:hover::before { background: rgba(255, 255, 255, .9); }
.hero--cover .hero-slider__dot.is-active::before { width: 22px; margin-left: -11px; background: var(--color-white); }
.hero--cover .hero-slider__dot:focus-visible { outline: 2px solid var(--color-white); outline-offset: 0; }
/* Strelica nadole (od 960px, gde hero zauzima ceo ekran): link na #uvod, centriran tik iznad tačkica (ne preklapa ih;
   naslov je levo). Glatki skrol daje html { scroll-behavior: smooth } iz main.css (uz reduced-motion trenutno),
   .hero-intro ima scroll-margin-top za sticky header. Bela, diskretna, blago „poskakuje"; uz reduced-motion miruje. */
.hero-scroll { display: none; }
@media (min-width: 960px) {
  .hero-scroll {
    position: absolute;
    left: 50%;
    bottom: calc(1.25rem + 24px + .25rem); /* iznad reda tačkica (bottom 1.25rem, visina 24px) */
    z-index: 3;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    border-radius: 50%;
    color: var(--color-white);
    opacity: .85;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
    transition: opacity .2s ease;
  }
  .hero-scroll svg { width: 26px; height: 26px; animation: hero-scroll-bob 2.4s ease-in-out infinite; }
  .hero-scroll:hover { opacity: 1; color: var(--color-white); }
  .hero-scroll:focus-visible { opacity: 1; outline: 2px solid var(--color-white); outline-offset: 2px; }
}
@keyframes hero-scroll-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) {
  .hero-scroll svg { animation: none !important; }
}
/* Telefon (ispod 640px): odnos 4:3 (raste samo ako naslov ne stane), naslov manji (najviše 3–4 reda u donjem delu
   slike, i dalje veliki tekst: bar 24px), gradijent 3rem iznad naslova, tačkice bliže dnu. Selektor sa
   .hero-cover__content je jači od mobilnog .hero--formal .hero__title na dnu fajla. */
@media (max-width: 639px) {
  .hero.hero--cover { aspect-ratio: 4 / 3; min-height: auto; }
  .hero--cover .hero-cover__content { padding-block: 1rem 2.75rem; }
  .hero--cover .hero-cover__content .hero__title {
    max-width: none;
    margin: 0;
    font-size: clamp(1.5rem, 1.05rem + 2.2vw, 1.75rem);
    line-height: 1.12;
  }
  .hero--cover .hero__title::before {
    inset: -3rem -100vw -2.75rem;
    background: linear-gradient(to top, rgba(var(--scrim), .8) 0, rgba(var(--scrim), .62) calc(100% - 3rem), rgba(var(--scrim), 0) 100%);
  }
  .hero--cover .hero-slider__dots { bottom: .5rem; }
}

/* -- Uvod ispod slajdera (front-page.php, .hero-intro): kicker, uvod, dugmad ---------------------------------- */
/* Svetla sekcija (pozadina strane), postojeći container, dugmad u normalnom stilu (plavo + obrubljeno tamno). Od 960px
   uvod levo, dugmad desno (poravnato po dnu); ispod jedno ispod drugog. Ispod sledi „O udruženju" sa svojim razmakom. */
.hero-intro { padding-block: clamp(2.5rem, 2rem + 1.5vw, 3.5rem) 0; scroll-margin-top: var(--header-h, 86px); }
.hero-intro .eyebrow { margin: 0 0 1rem; }
.hero-intro__row { display: grid; gap: 1.5rem; align-items: end; }
.hero-intro .hero__lead { max-width: 62ch; margin: 0; font-size: var(--fs-lead); line-height: 1.6; color: var(--color-body); }
@media (min-width: 960px) {
  .hero-intro__row { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(2rem, 4vw, 5rem); }
  .hero-intro .btn-group { flex-wrap: nowrap; justify-content: flex-end; }
}
/* Telefon: sekcija ispod („O udruženju") gubi gornji razmak (mobilno pravilo za dve susedne sekcije bez pozadine),
   pa razmak od 48px daje donji padding uvoda. */
@media (max-width: 639px) { .hero-intro { padding-bottom: 3rem; } }

/* Hero bez slike: inline SVG strukturni dijagram ego stanja (front-page.php). Tri kruga koji se
   dodiruju, konture 1.5px u ink boji (vector-effect: ne skaliraju se), slovo O u brand plavoj kao
   jedini akcenat, bez senki. Podloga: blago plava zaobljena pločica; ispod sitan natpis.
   Na telefonu (ispod 960px .hero__inner slaže kolone) dijagram ide ispod teksta, najviše 240px. */
.hero--formal .hero__media--diagram { display: flex; justify-content: flex-start; }
@media (min-width: 960px) {
  .hero--formal .hero__media--diagram { justify-self: end; justify-content: flex-end; width: 100%; }
}
.ego-diagram {
  margin: 0;
  width: 100%;
  max-width: 21rem;
  padding: 2.25rem 2rem 1.5rem;
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  background: var(--color-blue-100);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.ego-diagram__svg { display: block; width: 100%; max-width: 12.5rem; height: auto; overflow: visible; }
.ego-diagram__svg circle {
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.ego-diagram__letter {
  font-family: var(--font-display);
  font-size: 40px; /* u jedinicama viewBox-a (krug r=44) */
  font-weight: 500;
  fill: var(--color-ink);
  text-anchor: middle;
  dominant-baseline: central;
}
.ego-diagram__letter--o { fill: var(--color-blue-700); }
.ego-diagram__caption {
  margin: 0;
  font-family: var(--font-sans);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: center;
}
@media (max-width: 959px) {
  .ego-diagram { max-width: 240px; padding: 1.5rem 1.25rem 1.1rem; gap: .85rem; }
  .ego-diagram__svg { max-width: 9.5rem; }
}

/* -- Tu smo za vas: naslov, jedna rečenica, dugme (podaci su u footeru i na Kontakt strani) ----- */
.home-kontakt { max-width: 60ch; }
.home-kontakt p:not(.eyebrow) { margin: 0; font-size: var(--fs-lead); line-height: 1.6; } /* eyebrow ostaje kao svuda */

/* -- O udruženju: eyebrow i naslov preko cele širine, ispod red slika + tekst ------------------------- */
/* front-page.php: .home-about__head (eyebrow + h2), pa .home-about__row: fotografija (polje home_about.media) levo,
   tekst (više pasusa) desno, vertikalno centriran u odnosu na sliku. Ispod 960px jedna kolona: naslov, slika, tekst. */
.home-about__head { margin-bottom: 2.5rem; }
.home-about__head .eyebrow { margin: 0 0 .9rem; }
.home-about__head h2 { margin: 0; }
.home-about__row { display: grid; gap: 2rem; }
@media (min-width: 960px) {
  .home-about__row--media { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 3rem; align-items: center; }
}
.home-about__body { max-width: 60ch; }
.home-about__body p { font-size: var(--fs-lead); line-height: 1.6; margin: 0 0 1.1rem; }
.home-about__body p:last-child { margin-bottom: 0; }
/* Fotografija: 4:3, isto zaobljenje kao ostale slike. */
.home-about__media { margin: 0; }
.home-about__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
@media (max-width: 959px) { .home-about__media { max-width: 32rem; } }

/* -- Šta je TA: fotografija Erika Berna pored teksta (polje home_ega.media) ----- */
.home-ega__intro--media {
  display: grid;
  grid-template-columns: minmax(7rem, 10rem) 1fr;
  gap: 1.5rem;
  align-items: start;
}
.home-ega__media { margin: 0; }
.home-ega__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.home-ega__media figcaption {
  margin-top: .5rem;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--color-muted);
}
@media (max-width: 479px) {
  .home-ega__intro--media { grid-template-columns: 1fr; }
  .home-ega__media { max-width: 10rem; }
}

/* -- Šta je TA: dijagram ego stanja R / O / D (Bernov strukturni dijagram) ---------------------------- */
/* Tri kruga (72px; telefon: poseban raspored ispod) jedan ispod drugog koji se DODIRUJU: svaki red (.ego-item) je visok tačno
   koliko i krug, bez razmaka između redova, pa se krugovi naslanjaju jedan na drugi. Naziv i opis stoje desno,
   vertikalno centrirani na centar svog kruga; tekst je zato zbijen (h4 + najviše dva reda opisa stanu u 72px).
   Ako bi opis bio duži od kruga, red se produži i krugovi se razmaknu za tu razliku (nema preklapanja).
   Cela kolona je vertikalno centrirana u odnosu na tekst levo (.home-ega__row), na telefonu ide ispod teksta
   (.col-6 se slaže ispod 960px). Boje bedževa ostaju iz main.css (+ .ego-badge--d iznad). */
@media (min-width: 960px) { .home-ega__row { align-items: center; } }
.ego-list { display: grid; gap: 0; width: 100%; max-width: 32rem; }
.ego-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap: 1.25rem;
  align-items: center;
  min-height: 72px;
}
.ego-badge {
  width: 72px;
  height: 72px;
  font-size: 1.85rem;
  font-weight: 500;
  line-height: 1;
}
.ego-item h4 { margin: 0 0 .15rem; font-size: 1.1rem; line-height: 1.2; }
.ego-item p { margin: 0; font-size: .95rem; line-height: 1.4; color: var(--color-body); }
/* Telefon (do 639px): opisi imaju 2-3 reda i razmicali bi krugove, pa se razdvajaju. Tri kruga (64px) u jednom
   centriranom stubu koji se tačno dodiruju (bez razmaka: razmak centara = prečnik), ispod stuba tri opisa jedan
   ispod drugog, svaki sa malom tačkom u boji svog kruga. Isti markup: .ego-item je display: contents, pa su krug i
   opis direktno stavke flex kolone .ego-list; order stavlja sve krugove pre svih opisa (redosled R, O, D ostaje). */
@media (max-width: 639px) {
  .ego-list { display: flex; flex-direction: column; align-items: center; max-width: none; }
  .ego-item { display: contents; }
  .ego-badge { order: 0; width: 64px; height: 64px; margin: 0; font-size: 1.6rem; }
  .ego-badge + div {
    order: 1;
    align-self: stretch;
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    column-gap: .625rem;
    margin-top: 1rem;
  }
  .ego-item:first-child > .ego-badge + div { margin-top: 1.75rem; } /* razmak stub → prvi opis */
  .ego-badge + div > * { grid-column: 2; }
  .ego-badge + div::before { /* tačka u boji kruga (iste boje kao .ego-badge--r/o/d) */
    content: "";
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 10px;
    height: 10px;
    margin-top: .3rem;
    border-radius: 50%;
    background: var(--color-blue-700);
  }
  .ego-badge--o + div::before { background: var(--color-blue-500); }
  .ego-badge--d + div::before { background: var(--color-blue-900); }
  .ego-item h4 { font-size: 1rem; line-height: 1.2; margin: 0 0 .15rem; }
  .ego-item p { font-size: .9rem; line-height: 1.45; }
}

/* -- Standardna stranica, sekcija „text" sa logotipom (inc/sections.php, polje image) ------------- */
/* Trening centri: logo levo na beloj zaobljenoj pločici sa tankim okvirom, maks 160px, ceo logo vidljiv
   (object-fit: contain, bez cover isecanja), tekst desno. Na telefonu logo iznad teksta, centriran. */
.section-logo { display: grid; gap: 1.75rem; align-items: start; }
@media (min-width: 640px) {
  .section-logo { grid-template-columns: 160px minmax(0, 1fr); gap: 3rem; }
}
.section-logo__media {
  box-sizing: border-box;
  width: 160px;
  max-width: 100%;
  min-height: 120px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
@media (min-width: 640px) { .section-logo__media { margin: .35rem 0 0; } }
.section-logo__media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 110px;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}
.section-logo__body > .eyebrow { margin-top: 0; }
.section-logo__body .taus-prose { max-width: 70ch; }
/* -- Standardna stranica, sekcije „Tekst + slika" (image-left / image-right, inc/sections.php) ------------- */
/* Npr. Osnivači na O nama. Fotografija se vidi CELA (širina 100%, visina auto, bez aspect-ratio i object-fit),
   i na telefonu. Razmak kolona je ovde, ne inline: .row ima 12 traka, pa bi inline gap 3rem dao 11 × 48 = 528px
   razmaka i na telefonu (širem od ekrana) gurnuo kolonu teksta van ekrana; ovako na telefonu važi column-gap 1rem
   iz main.css. Ispod 960px kolone se slažu i fotografija ide PRE teksta, da ne visi ispod šest pasusa. */
.section-media { align-items: center; row-gap: 2rem; }
@media (min-width: 960px) { .section-media { column-gap: 3rem; } }
.section-media__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
@media (max-width: 959px) {
  .section-media__media { order: -1; }
  .section-media__img { max-width: 36rem; } /* tablet: kvadratna slika ne zauzima ceo ekran; telefon: 100% */
  /* tpl-standard hero (O nama, Šta je TA): slika pre teksta. */
  section .row > .col-6:has(> img:only-child) { order: -1; }
}

/* -- Standardna stranica, sekcija „Numerisana lista" (layout numbered, inc/sections.php; Teme kursa na TA 101) -- */
/* Bez kartica: levo veliki tanak broj u plavoj --color-blue-500 (oko 2.8:1 na beloj; sa --blue-300 je bio prebled,
   1.8:1; dekorativan, redosled nosi <ol>), desno
   naslov. Dve kolone od 640px (redom 01 02 / 03 04 …), na telefonu jedna; tanka linija samo između redova. */
.num-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 3rem; }
.num-list__item {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  column-gap: 1rem;
  align-items: center;
  padding: 1.1rem 0;
  border-top: 1px solid var(--color-rule);
}
.num-list__item:first-child { border-top: 0; }
@media (min-width: 640px) {
  .num-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .num-list__item:nth-child(2) { border-top: 0; }
}
.num-list__num {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--color-blue-500);
}
.num-list__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--color-ink);
}
.num-list__text { margin: .35rem 0 0; font-size: .95rem; color: var(--color-body); }
@media (max-width: 639px) { .num-list__title { font-size: 1.1rem; } }

/* -- 404 (padding i min-height su uz pravila za .page-hero, niže) ---------------- */
.page-hero--404 h1 { max-width: 16ch; }

/* -- Footer: ime udruženja ------------------------------------------------- */
.site-footer__name {
  margin: 0 0 .75rem !important;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-bg);
}

/* -- Footer: kolona Kontakt (adresa, telefon, mejl; ispod društvene mreže) ----------------------------- */
/* footer.php, vrednosti iz taus_settings (prazno polje = nema reda); u HTML-u poslednja kolona. Desktop (od 960px):
   [logo + naziv + opis] [Udruženje] [Aktuelno] [Kontakt], naslov istog stila kao ostali h5 u footeru; 640–959px
   dve kolone (brend | Udruženje, Aktuelno | Kontakt). Telefon (do 639px): uvek otvorena (nije <details>), odmah
   ispod opisa (order), sa istim razmacima kao kad je stajala u prvoj koloni. Ikonice su inline SVG u currentColor,
   iste boje kao tekst footera; kod telefona i mejla ikonica je deo linka (hover: bela, kao ostali linkovi). */
@media (min-width: 640px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
}
.footer-contact > .social:first-child { margin-top: 0; } /* bez kontakt podataka: samo mreže, poravnate sa vrhom */
.site-footer .footer-contact__list { gap: .6rem; }
.footer-contact__list li,
.footer-contact__list a { display: flex; align-items: flex-start; gap: .65rem; }
.footer-contact__list a { width: fit-content; max-width: 100%; }
.footer-contact__list svg { margin-top: .2em; }
.footer-contact__list span { min-width: 0; overflow-wrap: anywhere; }

/* -- Footer: kolone Udruženje / Aktuelno kao <details> ---------------------------------------- */
/* Desktop (od 640px): bez promene izgleda; summary nije klikabilan, strelica skrivena, lista uvek
   vidljiva (atribut open; site.js ga ne skida). Telefon (do 639px): hibrid, logo + opis + kontakt + mreže
   otvoreni na vrhu, dve kolone kao sklopive sekcije (naslov sa strelicom, po defaultu sklopljene). */
.footer-col__summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: default;
}
.footer-col__summary::-webkit-details-marker { display: none; }
.footer-col__summary::marker { content: ""; }
.footer-col__summary:focus-visible { outline: 2px solid var(--color-blue-500); outline-offset: 2px; border-radius: var(--radius-sm); }
.footer-col__chev { display: none; }
@media (min-width: 640px) {
  .footer-col__summary { pointer-events: none; }
}
@media (max-width: 639px) {
  .site-footer__grid { gap: 0; }
  .site-footer__brand { order: -2; margin-bottom: var(--sp-5); }
  .footer-contact { order: -1; margin-bottom: var(--sp-5); } /* odmah ispod opisa, pa sklopive kolone */
  .site-footer .footer-contact h5 { margin-bottom: .9rem; }
  .footer-col { border-top: 1px solid rgba(243, 247, 251, .12); }
  .footer-col__summary { cursor: pointer; padding: 1rem 0; }
  .footer-col__summary h5 { margin: 0; }
  .footer-col__chev {
    display: block;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--color-bg);
    opacity: .7;
    transition: transform .25s var(--ease);
  }
  .footer-col[open] .footer-col__chev { transform: rotate(180deg); }
  .footer-col > ul { padding-bottom: 1.1rem; }
  .site-footer__partners { margin-top: var(--sp-6); }
}

/* -- Footer: red „Partneri" sa logotipima iznad copyright-a ---------------------- */
/* Logotipi iste visine (40px), na tamnoj podlozi kao bela silueta (filter), puna boja na hover.
   Logo sa belom podlogom (.partner-logo--tile) stoji u beloj zaobljenoj pločici, siv dok nije hover.
   Bez logotipa ostaje tekstualni link (.partner-text). Na telefonu dve kolone. */
.site-footer__partners {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(243, 247, 251, .12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2.5rem;
}
.site-footer__partners-label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-bg);
}
/* .site-footer u selektoru: main.css ima `.site-footer ul { display: grid }` (jača specifičnost). */
.site-footer .site-footer__partners-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2.5rem;
  font-size: inherit;
}
.site-footer .site-footer__partners-list li { display: flex; align-items: center; }
.partner-logo { display: inline-flex; align-items: center; height: 40px; border-radius: var(--radius-sm); }
.partner-logo img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 170px;
  filter: brightness(0) invert(1);
  opacity: .62;
  transition: filter .25s var(--ease), opacity .25s var(--ease);
}
.partner-logo:hover img,
.partner-logo:focus-visible img { filter: none; opacity: 1; }
.partner-logo--tile {
  height: auto;
  padding: .25rem .4rem;
  background: var(--color-white);
}
.partner-logo--tile img { filter: grayscale(1); opacity: .75; }
.partner-logo--tile:hover img,
.partner-logo--tile:focus-visible img { filter: none; opacity: 1; }
/* Logo već napravljen za tamnu podlogu (beli tekst + simbol u boji): bela silueta bi ga pretvorila
   u mrlju, pa je u miru siv (grayscale), puna boja na hover. */
.partner-logo--dark img { filter: grayscale(1); opacity: .8; }
.partner-logo--dark:hover img,
.partner-logo--dark:focus-visible img { filter: none; opacity: 1; }
.partner-text { font-size: .85rem; }
.site-footer__partners + .site-footer__bottom { margin-top: var(--sp-6); }
@media (max-width: 639px) {
  .site-footer__partners { gap: 1rem; }
  .site-footer__partners-label { flex-basis: 100%; }
  .site-footer .site-footer__partners-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1rem;
  }
  .partner-logo img { max-width: 100%; }
}

/* -- Dugme „Nazad na vrh" (footer.php, site.js) ----------------------------------------------------- */
/* Fiksno dole desno, 44px, plava iz palete; pojavljuje se posle jednog ekrana skrola. site.js ga sklanja dok je
   ispod njega link, dugme ili polje forme (i dok je fokus u polju forme), pa ne prekriva kontrole dok se skroluje.
   Na dnu strane stoji pored poslednjeg reda footera: dugme zauzima 16 + 44px od ivice ekrana, pa .site-footer__bottom
   ima zdesna mesta do 68px od ivice (4.25rem minus gutter: 48px na telefonu, 28px od 1280px), tekst se završava 8px
   levo od dugmeta. */
.site-footer__bottom { padding-right: max(0px, calc(4.25rem - var(--gutter))); }
.to-top {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 40; /* ispod headera (50), mobilnog menija (60) i modala (1000) */
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-blue-700);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s, background .2s ease;
}
.to-top[hidden] { display: none; }
.to-top.is-visible { opacity: 1; visibility: visible; transition-delay: 0s; }
.to-top:hover { background: var(--color-blue-800); }
.to-top:focus-visible { outline: 2px solid var(--color-blue-500); outline-offset: 3px; }

/* -- Page hero (standard, vesti, podcast, kontakt): niži ---------------------------- */
/* Hero sa naslovom i jednom rečenicom ne zauzima više od ~40% visine ekrana na desktopu:
   bez min-height, manji gornji padding; donji padding = ritam sekcija (--section-y), pa je
   razmak od heroja do prve sekcije isti kao između sekcija. Članak (page-hero--article)
   i 404 zadržavaju svoje vrednosti. */
.page-hero {
  min-height: 0;
  padding-block: clamp(2.5rem, 2rem + 1.5vw, 3.5rem) var(--section-y);
}
.page-hero .breadcrumb { margin-bottom: 1.25rem; }
.page-hero h1 { margin-bottom: 1rem; }
.page-hero .lead,
.page-hero p:last-child { margin-bottom: 0; }
.page-hero--article { padding-bottom: var(--sp-6); }
.page-hero--404 { padding-bottom: var(--section-y-lg); min-height: 55vh; }

/* -- Podcast hero: ista visina kao page-hero, desno sličica najnovije epizode ------- */
.hero--podcast {
  padding-block: clamp(2.5rem, 2rem + 1.5vw, 3.5rem) var(--section-y);
  background: linear-gradient(180deg, var(--color-blue-50), var(--color-bg)); /* ista podloga kao .page-hero */
  overflow: visible;
}
.hero--podcast .breadcrumb { margin-bottom: 1.25rem; }
.hero--podcast .hero__title { font-size: var(--fs-h1); font-weight: 500; line-height: 1.05; margin-bottom: 1rem; }
.hero--podcast .hero__lead { margin-bottom: 0; }
.hero--podcast .hero__inner { gap: 2.5rem; }
@media (min-width: 960px) {
  .hero--podcast .hero__inner { grid-template-columns: 1.1fr .9fr; gap: 4rem; align-items: center; }
  .hero--podcast .podcast-thumb-wrap { justify-self: end; width: 100%; max-width: 34rem; }
}
/* Sličica (istaknuta slika epizode, 16:9) sa play ikonom; <button data-embed> otvara modal (site.js). */
.podcast-thumb {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--color-blue-100);
  color: inherit;
  font: inherit;
  text-align: left;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
button.podcast-thumb { cursor: pointer; }
.podcast-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform .4s var(--ease);
}
button.podcast-thumb:hover img { transform: scale(1.03); }
button.podcast-thumb:focus-visible { outline: 3px solid var(--color-blue-500); outline-offset: 3px; }
.podcast-thumb__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--color-blue-800);
  box-shadow: var(--shadow-md);
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.podcast-thumb__play svg { margin-left: 4px; }
button.podcast-thumb:hover .podcast-thumb__play { transform: scale(1.06); background: var(--color-white); }
.podcast-thumb__caption {
  position: absolute;
  left: .85rem;
  bottom: .85rem;
  padding: .3rem .7rem;
  border-radius: var(--radius-pill);
  background: rgba(15, 23, 42, .72);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
@media (max-width: 639px) {
  .podcast-thumb__play { width: 60px; height: 60px; }
}

/* -- Najnovija epizoda: bez lažnog progress bara; link „Gledaj na YouTube" --------- */
/* Naslov je samo u h2 iznad panela (tpl-podcast.php). Panel: datum (.feature-panel__date), sličica sa play
   dugmetom (.feature-panel__media > .podcast-thumb, isti blok kao u heroju) i tekst/link (.feature-panel__body).
   Od 640px: sličica levo (najviše 30rem) preko oba reda, desno datum pa opis i link; ispod toga sve u jednoj koloni
   istim redom (datum, sličica, link). */
.bg-dark .btn--link { color: var(--color-white); border-bottom-color: var(--color-blue-300); }
.bg-dark .btn--link:hover { color: var(--color-blue-100); }
.feature-panel__watch { margin-top: 1.5rem; align-self: flex-start; }
.feature-panel--episode .feature-panel__body { display: flex; flex-direction: column; align-items: flex-start; }
.feature-panel.feature-panel--episode { grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; justify-items: stretch; }
.feature-panel--episode .feature-panel__date { margin: 0; }
.feature-panel--episode .feature-panel__media { width: 100%; max-width: 30rem; }
.feature-panel--episode .feature-panel__body > p:first-child { margin-top: 0; }
.feature-panel--episode .feature-panel__body:empty { display: none; }
@media (min-width: 640px) {
  .feature-panel.feature-panel--episode {
    grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: .75rem 2.5rem;
  }
  .feature-panel--episode .feature-panel__media { grid-column: 1; grid-row: 1 / span 2; }
  .feature-panel--episode .feature-panel__date,
  .feature-panel--episode .feature-panel__body { grid-column: 2; }
  .feature-panel--episode .feature-panel__watch { margin-top: 1rem; }
}

/* Lista „Sezona 2026": najnovija epizoda ostaje u listi, uz broj stoji oznaka „trenutno" (plavo, sitno). */
.episode__current {
  display: block;
  margin-top: .25rem;
  font-family: var(--font-sans);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-blue-700);
}

/* -- Ugrađeni sadržaj u tekstu (YouTube oEmbed 500 × 281, WP embed): nikad šire od kolone ---------------- */
/* html/body imaju overflow-x: hidden (main.css), pa bi širi iframe na telefonu bio odsečen desno, bez skrola.
   Na desktopu ostaje širina iz atributa (500px); visina prati širinu (16:9) kad se suzi. */
.article-content iframe,
:is(.taus-prose, .taus-prose-less) iframe { max-width: 100%; }
.article-content iframe[src*="youtube"],
.article-content iframe[src*="vimeo"],
:is(.taus-prose, .taus-prose-less) iframe[src*="youtube"],
:is(.taus-prose, .taus-prose-less) iframe[src*="vimeo"] { height: auto; aspect-ratio: 16 / 9; }

/* -- Vesti: poruka kad pretraga/filter ne nađe ništa (site.js) ------------------------ */
.news-empty { margin: 0 0 var(--sp-8); color: var(--color-muted); }

/* -- Vesti: tabovi kategorija su linkovi (?kategorija=, tpl-vesti.php), izgledaju kao dugmad u .filter-bar ---- */
.filter-bar a { display: inline-block; text-decoration: none; }
/* Linkovi tabova i paginacije vode na #lista-vesti: traka sa tabovima ne ide ispod sticky headera */
.news-list { scroll-margin-top: var(--header-h, 86px); }

/* -- Vesti: paginacija ispod liste (tpl-vesti.php; osnova .pagination u main.css) ------------------------------ */
.pagination .btn { position: relative; min-height: 2.75rem; }
.pagination__num { min-width: 2.75rem; padding-inline: .5rem; font-variant-numeric: tabular-nums; }
.pagination .btn--primary { border: 1.5px solid var(--color-ink); cursor: default; }
.pagination .btn--primary:hover { transform: none; background: var(--color-ink); }
.pagination .is-disabled { opacity: .3; pointer-events: none; }

/* -- Vesti: naslovi kartica najviše tri reda („…") ----------------------------------- */
.card--feature .card__title,
[data-filter-list] .card__title,
.home-aktuelno .card__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -- Kartice vesti (naslovna „Aktuelno", /vesti/): iste visine u redu, „Pročitaj" na dnu ------------- */
/* Kartica je stavka grida (.row), pa se rasteže na visinu najviše kartice u redu; .card__body (flex kolona,
   flex: 1) popunjava sve ispod slike, a link dobija margin-top: auto i uvek stoji na dnu, bez obzira na dužinu
   naslova i isečka, bez praznog prostora ispod njega. Link je širok koliko i tekst (align-self), ne cela kartica.
   Isečak najviše 3 reda („…"); istaknuta vest na /vesti/ (.card--feature) ima duži isečak i ne seče se. */
.home-aktuelno .card__body,
[data-filter-list] .card__body { flex: 1 1 auto; }
.home-aktuelno .card__body > .btn--link,
[data-filter-list] .card__body > .btn--link { margin-top: auto; padding-top: .5rem; align-self: flex-start; }
.card--feature .card__body > .btn--link { align-self: flex-start; } /* „Pročitaj članak": širok koliko tekst */.home-aktuelno .card__excerpt,
[data-filter-list] .card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -- Podcast: broj epizode uz sezonu, sklopljena arhiva 2022 -------------------- */
.episode__num { display: grid; justify-items: center; line-height: 1; }
.episode__season {
  display: block;
  margin-top: .3rem;
  font-family: var(--font-sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--color-muted);
}
.podcast-archive { padding-top: 0; }
.episode-archive { border-top: 1px solid var(--color-rule); }
.episode-archive__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.75rem 0 1.25rem;
}
.episode-archive__summary::-webkit-details-marker { display: none; }
.episode-archive__summary:focus-visible { outline: 2px solid var(--color-blue-500); outline-offset: 2px; border-radius: var(--radius-sm); }
.episode-archive__head { display: grid; gap: .5rem; }
.episode-archive__head .eyebrow { margin: 0; }
.episode-archive__title { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--color-ink); }
.episode-archive__count { font-size: var(--fs-small); }
.episode-archive__toggle::after { content: "prikaži"; text-decoration: underline; text-decoration-color: var(--color-blue-300); }
.episode-archive[open] .episode-archive__toggle::after { content: "sakrij"; }
.episode-list--archive .episode__num { font-size: 1.5rem; color: var(--color-muted); }
.episode-list--archive .episode__title { font-size: 1rem; }

/* -- Ostalo: mirniji ton ----------------------------------------------------- */
.card:hover { transform: none; box-shadow: var(--shadow-sm); }
.btn:hover { transform: none; }
.kicker { box-shadow: none; }

/* Skraćenica sa padežnim nastavkom (EATA-e, TAUS-a …): taus_nowrap_abbr() u inc/template-helpers.php je obmota, da se
   red ne prelomi na crtici („EATA-" / „e:"). */
.nowrap { white-space: nowrap; }

/* -- Podcast: play dugme otvara embed (YouTube / Spotify) u modalu ------------ */
.play-btn--empty { display: inline-block; visibility: hidden; } /* drži kolonu kad epizoda nema embed */
.embed-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.embed-modal[hidden] { display: none; }
.embed-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .8); }
.embed-modal__dialog {
  position: relative;
  width: min(960px, 100%);
  background: var(--color-ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.embed-modal__close {
  position: absolute; top: .5rem; right: .5rem; z-index: 1;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--color-ink);
  font-size: 1.6rem; line-height: 1;
  cursor: pointer;
}
.embed-modal__close:focus-visible { outline: 2px solid var(--color-blue-300); outline-offset: 2px; }
.embed-modal__frame { aspect-ratio: 16 / 9; background: #000; }
.embed-modal__frame--audio { aspect-ratio: auto; height: 352px; background: transparent; padding-top: 3rem; }
.embed-modal__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
body.has-embed-modal { overflow: hidden; }

/* ============================================================
   TELEFON (do 639px): mobilni prolaz kroz celu temu (2026-10-07).
   Sve u ovom bloku važi SAMO do 639px; tablet/desktop (od 640px, a pogotovo od 960px) ostaju netaknuti.
   Redosled: 1 tipografija · 2 razmaci · 3 hero naslovne · 4 dugmad · 5 kartice · 6 vesti · 7 podcast ·
   8 sekcije sa slikom · 9 tabele · 10 sitnice.
   ============================================================ */
@media (max-width: 639px) {

  /* -- 1. Tipografska skala: body 16/1.6, h1 34/1.15, h2 28/1.2, h3 20, eyebrow 11, lead 17/1.55 ---------- */
  /* body.home u selektoru: udruzenje.css iznad ima `body.home { --fs-h1/--fs-h2 }` jače specifičnosti od :root. */
  :root,
  body.home {
    --fs-body: 1rem;
    --fs-lead: 1.0625rem;
    --fs-eyebrow: .6875rem;
    --fs-h1: 2.125rem;
    --fs-h2: 1.75rem;
    --fs-h3: 1.25rem;
    --fs-h4: 1.2rem;
    --fs-display: 2.125rem;
    --section-y: 3rem;      /* 48px gore i dole, umesto desktop ritma */
    --section-y-lg: 3rem;
    --section-y-sm: 3rem;
    --gutter: 1.25rem;      /* container 20px sa strane */
  }
  body { font-size: 1rem; line-height: 1.6; }
  /* Bez hyphens i bez lomljenja reči: dugi naslovi se lome na razmacima (main.css ima overflow-wrap: break-word). */
  h1, h2, h3, h4, .hero__title, .card__title, .display { hyphens: none; overflow-wrap: normal; word-break: normal; }
  h1, .hero__title, .hero--formal .hero__title, .hero--podcast .hero__title { font-size: 2.125rem; line-height: 1.15; }
  h2 { font-size: 1.75rem; line-height: 1.2; }
  h3 { font-size: 1.25rem; line-height: 1.3; }
  :is(.taus-prose, .taus-prose-less) h3 { font-size: 1.25rem; }
  .card__title { font-size: 1.25rem; }
  .card--feature .card__title { font-size: 1.5rem; }
  /* Naslovi koriste punu širinu (desktop ograničenja u ch nemaju smisla na 350px). */
  .page-hero h1, .page-hero--404 h1, .hero--formal .hero__title, .section-head h2 { max-width: none; }
  /* Eyebrow sme u dva reda: crtica ostaje uz prvi red. */
  .eyebrow { font-size: .6875rem; letter-spacing: .08em; line-height: 1.5; align-items: flex-start; }
  .eyebrow::before { flex: 0 0 auto; margin-top: calc(.75em - 1px); }
  .lead, .hero__lead, .page-hero .lead, .page-hero p,
  .article-content, .home-about__body p, .home-kontakt p:not(.eyebrow) { font-size: 1.0625rem; line-height: 1.55; }

  /* -- 2. Razmaci: sekcije 48px, hero gore 32px, container 20px ------------------------------------------- */
  section { padding-block: 3rem; }
  .hero--formal, .page-hero, .hero--podcast { padding-block: 2rem 3rem; min-height: 0; }
  .page-hero--404 { padding-bottom: 3rem; min-height: 0; }
  .page-hero--article { padding-bottom: 2rem; }
  .article-body { padding-top: 0; }
  /* Dve susedne sekcije iste (prozirne) podloge: gornji padding druge se skida, pa razmak ostaje 48px, a ne 96px.
     Hero (gradijent koji se završava bojom pozadine) + prva sekcija isto. Obojene trake (.bg-*) zadržavaju svoj padding. */
  section:not([class*="bg-"]) + section:not([class*="bg-"]) { padding-top: 0; }
  .hero.hero--cover + section:not([class*="bg-"]) { padding-top: 2rem; } /* uvod ispod slajdera: razmak od slike */
  .hero--formal .eyebrow, .page-hero .eyebrow { margin-bottom: 1rem; }
  .hero--formal .hero__title, .hero--podcast .hero__title { margin-bottom: 1rem; }
  .hero--formal .hero__lead, .hero--podcast .hero__lead, .hero__lead { margin-bottom: 1.5rem; }
  .page-hero .breadcrumb, .hero--podcast .breadcrumb { margin-bottom: 1rem; }
  .section-head { gap: 1rem; margin-bottom: 2rem; }
  .home-about__head { margin-bottom: 1.5rem; }
  .home-about__row { gap: 1.5rem; }
  hr { margin: 2rem 0; }
  .site-footer { padding-top: 3rem; }
  .article-cover { margin-bottom: 2rem; }

  /* -- 3. Hero naslovne: eyebrow, naslov, lead, dva dugmeta jedno ispod drugog, pa dijagram 200px centriran ---- */
  .hero--formal .hero__inner { gap: 2rem; } /* 32px iznad dijagrama; ispod njega samo donji padding heroja (48px) */
  /* Kicker (ime udruženja): veći razmak od headera, bliže naslovu (koji je odmah ispod), dva ujednačena reda
     (bez „ANALIZU" samog u drugom). Ime stoji i uz logo u headeru (.site-header__name-m), kao na desktopu. */
  .hero--formal { padding-top: 2.5rem; }
  .hero--formal .eyebrow { margin-bottom: .75rem; text-wrap: balance; }
  .hero--formal .hero__media--diagram { justify-content: center; }
  .ego-diagram { width: 200px; max-width: 200px; margin: 0 auto; padding: 1.25rem 1rem 1rem; gap: .75rem; }
  .ego-diagram__svg { max-width: 8.5rem; }

  /* -- 4. Dugmad: visina 48px; u grupi od dva (btn-group) jedno ispod drugog, puna širina, 12px razmak ------- */
  .btn:not(.btn--link):not(.play-btn) { min-height: 48px; padding-block: .7rem; white-space: normal; text-align: center; }
  .btn-group { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: .75rem; }
  .btn-group > .btn { width: 100%; }
  .play-btn { width: 56px; height: 56px; }
  .play-btn--sm, .play-btn--empty { width: 40px; height: 40px; }

  /* -- 5. Kartice: jedna kolona (col-* već span 12), padding 20px, 12px razmak ------------------------------- */
  .row:has(> .card), .row:has(> * > .card) { row-gap: .75rem; }
  .card__body, .card--feature .card__body, .card--pad { padding: 1.25rem; }
  .card__meta { flex-wrap: wrap; row-gap: .25rem; }

  /* -- 6. Vesti: tabovi u jednom redu sa horizontalnim skrolom, pretraga ispod puna širina, istaknuta 16:9 ----- */
  .news-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; margin-bottom: 1.5rem; }
  .filter-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-bar :is(button, a) { flex: 0 0 auto; white-space: nowrap; }
  .news-search input { width: 100%; min-width: 0; }
  .card--feature .card__media { aspect-ratio: 16 / 9; }
  .card--feature.mb-8 { margin-bottom: .75rem; } /* isti razmak kao između kartica u mreži */
  /* Paginacija: dugmad 44×48px (visina iz pravila za .btn gore), strelice bez reči („Prethodna"/„Sledeća" ostaju za čitač ekrana) */
  .pagination { gap: .375rem; margin-top: 2rem; }
  .pagination .btn { min-width: 44px; padding-inline: .5rem; }
  .pagination__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pagination__gap { padding: 0 .125rem; }

  /* -- 7. Podcast: sličica ispod teksta (grid već slaže), red epizode sa malim brojem/sezonom, play 40px ------- */
  .hero--podcast .hero__inner { gap: 1.5rem; }
  .podcast-thumb__play { width: 56px; height: 56px; }
  .feature-panel.feature-panel--episode { gap: 1rem; }
  .feature-panel--episode .feature-panel__media { max-width: none; }
  .episode { grid-template-columns: auto auto minmax(0, 1fr); gap: .35rem .75rem; padding: 1rem 0; }
  .episode__num, .episode-list--archive .episode__num { font-size: 1rem; color: var(--color-muted); }
  .episode__season { margin-top: .15rem; font-size: .65rem; }
  .episode__current { font-size: .55rem; margin-top: .15rem; }
  .episode__title { font-size: 1.05rem; }
  .episode__link { grid-column: 3; justify-self: start; } /* ispod naslova i datuma */

  /* -- 8. Sekcije sa slikom: slika iznad teksta; logo centriran, najviše 140px ------------------------------- */
  .page-hero .row > .col-6:has(> img) { order: -1; } /* tpl-standard hero (O nama, Šta je TA): slika pre teksta */
  .section-logo { gap: 1.25rem; }
  .section-logo__media { width: 140px; max-width: 140px; min-height: 100px; padding: .75rem; margin: 0 auto; }
  .section-logo__media img { max-height: 84px; }
  .home-ega__intro--media { grid-template-columns: 1fr; gap: 1rem; } /* Šta je TA na naslovnoj: fotografija iznad teksta */
  .home-ega__media { max-width: 10rem; }

  /* -- 9. Tabele: horizontalni skrol unutar sadržaja (umesto probijanja širine ekrana) ---------------------- */
  .article-content table,
  :is(.taus-prose, .taus-prose-less) table { display: block; width: 100%; max-width: 100%; margin: 0 0 1.25rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .article-content :is(th, td),
  :is(.taus-prose, .taus-prose-less) :is(th, td) { padding: .35rem .5rem; vertical-align: top; }

  /* -- 10. Sitnice: ništa šire od ekrana, bez praznina većih od 64px ------------------------------------- */
  .article-share { gap: .5rem; }
  .contact-list__link { overflow-wrap: anywhere; }
  blockquote.pull-quote { margin-top: 0; }   /* sekcija sa citatom već ima 48px gore */
  .col-md-5 > :last-child { margin-bottom: 0; } /* Kontakt: poslednji pasus uz dno sekcije */
}

/* ============================================================
   DESKTOP (od 1024px): tri stranice, oktobar 2026. Ispod 1024px sve ostaje kao pre (pravila postoje samo ovde).
   1 Vesti: niži hero, slika istaknute vesti u svojoj koloni · 2 Organi: grupa sa jednom osobom u dve kolone ·
   3 Šta je TA: uvod uz hero.
   ============================================================ */
@media (min-width: 1024px) {

  /* -- 1. Vesti (tpl-vesti): tabovi odmah ispod podnaslova. Umesto donjeg paddinga heroja (--section-y) i gornjeg
     paddinga liste (još --section-y) jedan razmak od 3.5rem; skok na #lista-vesti ostavlja isti vazduh ispod headera. */
  .page-vesti .page-hero { padding-bottom: var(--section-y-sm); }
  .page-vesti .news-list { padding-top: 0; scroll-margin-top: calc(var(--header-h, 86px) + var(--section-y-sm)); }
  /* Istaknuta vest: sa height:100% + aspect-ratio slika je širinu računala iz visine i (min-width:auto) bila šira
     od svoje kolone (1024–1260px), preko teksta. Sada je široka tačno koliko kolona; visinu i dalje daje 16/11 ili
     viši tekst, slika je pokriva (object-fit: cover iz .card__media img). Od 1280px isto kao pre. */
  .card--feature .card__media { width: 100%; min-width: 0; }

  /* -- 2. Organi udruženja: cards sekcija sa tačno jednom osobom (Etički koordinator). Naslov sekcije i uvodni tekst
     levo, kartica desno odmah uz tekst, vertikalno centrirana prema bloku teksta. Kartica malo šira od ostalih
     (16rem), naslov kartice u jednom redu. Grupe sa više osoba ne pogađa (:only-child); bez :has ostaje stari raspored. */
  .container:has(> .row--people > .card--person:only-child) {
    display: grid;
    grid-template-columns: minmax(0, 46rem) 16rem;
    grid-template-rows: auto auto;
    justify-content: start;
    column-gap: 4rem;
  }
  .container:has(> .row--people > .card--person:only-child) > * { grid-column: 1; margin-bottom: 0; }
  .container:has(> .row--people > .card--person:only-child) > .section-head { align-self: end; }
  .container:has(> .row--people > .card--person:only-child) > .taus-prose { align-self: start; margin: 1.5rem 0 0 !important; } /* inline margin-bottom:2rem iz sections.php */
  .container:has(> .row--people > .card--person:only-child) > .row--people { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: block; }
  .row--people > .card--person:only-child .card__title { white-space: nowrap; }

  /* -- 3. Šta je TA: prva sekcija posle heroja („TA je istovremeno…") u istoj koloni kao hero tekst: puna širina
     kontejnera umesto container--narrow, tekst širok kao leva kolona heroja (col-6), bez gornjeg paddinga (razmak
     do heroja je samo njegov donji padding, upola manje nego pre). Ostale sekcije ostaju u užoj koloni. Redosled u HTML-u isti. */
  .page-sta-je-ta .page-hero + section { padding-top: 0; }
  .page-sta-je-ta .page-hero + section > .container--narrow { max-width: var(--container-max); }
  .page-sta-je-ta .page-hero + section .taus-prose { max-width: calc((100% - var(--col-gap)) / 2); }
}