/* ============================================================
   Psihoresurs: OPŠTE ISPRAVKE (učitava se posle main.css, pre psihoresurs.css)
   Preuzeto iz assets/styles/udruzenje.css teme taus (stanje 8450c03, 14. 10. 2026), bez brenda udruženja
   (boje, isključene dekoracije, formalni hero, naslovna udruženja, red „Partneri", podcast, „mirniji ton").
   Ovde je samo ono što ne zavisi od brenda: slajder na naslovnoj i uvod ispod njega, sekcije buildera
   (logo, tekst + slika, numerisana lista), 404 i niži page hero, footer (kolona Kontakt, <details> na telefonu),
   „Nazad na vrh", ugrađeni sadržaj, kartice vesti, .nowrap, modal za embed i mobilni prolaz (do 639px).
   Boje dolaze iz tokena main.css (--color-blue-*, --color-ink …), koje psihoresurs.css prepisuje.
   Ispravka u udruzenje.css na taus.rs koja dira neki od ovih blokova prenosi se ovde ručno (isti selektori).
   ============================================================ */

/* -- 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 `section { padding-block }` na dnu fajla. */
.hero.hero--cover {
  --scrim: var(--tamna-rgb); /* S12g: --tamna */
  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%)); }
}
/* 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(var(--scrim), .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: var(--bela);
  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: var(--bela);
  box-shadow: 0 0 0 1px rgba(var(--scrim), .35), 0 1px 3px rgba(var(--scrim), .35);
  transition: width .3s ease, margin .3s ease, background .3s ease;
}
.hero--cover .hero-slider__dot:hover::before { background: var(--bela); }
.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; S12e: miruje (bez beskonačnog poskakivanja). */
.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(var(--tamna-rgb), .45));
    transition: opacity .2s ease;
  }
  .hero-scroll svg { width: 26px; height: 26px; }
  .hero-scroll:hover { opacity: 1; color: var(--color-white); }
  .hero-scroll:focus-visible { opacity: 1; outline: 2px solid var(--color-white); outline-offset: 2px; }
}
/* 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 `h1, .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. Sledeća sekcija ide 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 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; } }

/* -- 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: 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, naslov istog stila
   kao ostali h5 u footeru. 640–959px dve kolone; raspored od 960px zavisi od broja kolona sa linkovima, pa je u
   brendu (psihoresurs.css). Telefon (do 639px): uvek otvorena (nije <details>), odmah ispod logoa (order).
   Ikonice su inline SVG u currentColor, iste boje kao tekst footera; kod telefona i mejla ikonica je deo linka. */
@media (min-width: 640px) {
  .site-footer__grid { grid-template-columns: repeat(2, 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 color-mix(in srgb, var(--bela) 22%, transparent); }
  .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; }
}

/* -- 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, 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; }

/* -- Link-dugme na tamnoj podlozi (npr. #prijava na /kurs-101/, .bg-dark sekcije) ------------------------ */
.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); }

/* -- 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: naslovi kartica se ne skraćuju (S12a); skraćuje se samo uvod, najviše 3 reda (niže i sistem.css) ---- */

/* -- 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;
}

/* 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: var(--zatamnjenje); }
.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: var(--bela); 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: var(--tamna); }
.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 · 4 dugmad · 5 kartice · 6 vesti ·
   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: ako brend (psihoresurs.css) postavi `body.home { --fs-h1/--fs-h2 }`, telefon ipak dobija ovu skalu. */
  :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 { 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, .section-head h2 { max-width: none; }
  .lead, .hero__lead, .page-hero .lead, .page-hero p,
  .article-content { font-size: 1.0625rem; line-height: 1.55; }

  /* -- 2. Razmaci: sekcije 48px, hero gore 32px, container 20px ------------------------------------------- */
  section { padding-block: 3rem; }
  .page-hero { 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 */
  .page-hero .eyebrow { margin-bottom: 1rem; }
  .hero__lead { margin-bottom: 1.5rem; }
  .page-hero .breadcrumb { margin-bottom: 1rem; }
  .section-head { gap: 1rem; margin-bottom: 2rem; }
  hr { margin: 2rem 0; }
  .site-footer { padding-top: 3rem; }
  .article-cover { margin-bottom: 2rem; }

  /* -- 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 button { 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 */

  /* -- 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; }

  /* -- 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 */
}