/* =====================================================================
   FONDACIJA MIHAJLOVIĆ – FENIKS
   Vesti, blog i stranice — dopuna stila naslovne

   Ovaj fajl NE ponavlja ono što već postoji u css/style.css.
   Zaglavlje, meni, podnožje, kartice vesti i tipografija dolaze odande;
   ovde je samo ono čega na naslovnoj nema: telo članka, potpisi,
   rubrike, straničenje i veze ka drugim portalima.

   Koriste se iste promenljive:
     --boja-povrsina  --boja-identitet  --boja-pozadina
     --boja-tekst     --boja-siva       --boja-linija
     --font-tekst     --font-naslov     --sirina-max  --header-visina
   ===================================================================== */


/* =====================================================================
   Stranice bez hero slike

   Na naslovnoj je zaglavlje providno preko hero slike i boji se tek pri
   pomeranju. Ovde hero slike nema, pa mora biti puno od početka —
   inače bi beli logotip stajao na beloj pozadini.
   ===================================================================== */

.strana-unutra .site-header { background: var(--boja-povrsina); }

/* Na naslovnoj je logotip nevidljiv dok je traka providna, pa se
   pojavljuje tek sa bojom. Ovde je traka obojena od početka, pa nema
   šta da se čeka. */
@media (min-width: 900px) {
    .strana-unutra .logo {
        opacity: 1;
        visibility: visible;
    }
}

/* Zaglavlje je izdvojeno iz toka, pa mu se pravi mesto. */
.unutrasnja { padding-top: var(--header-visina); }


/* =====================================================================
   Članak
   ===================================================================== */

.clanak {
    max-width: 760px;
    margin: 0 auto;
    padding: 72px 24px 0;
}

.clanak__vrh { margin-bottom: 40px; }

.clanak__rubrika {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--boja-identitet);
    margin-bottom: 16px;
}

.clanak__naslov {
    font-family: var(--font-naslov);
    font-weight: 400;
    font-size: clamp(32px, 4.6vw, 54px);
    line-height: 1.12;
    letter-spacing: -.015em;
    color: var(--boja-povrsina);
    margin: 0;
}

.clanak__podnaslov {
    font-family: var(--font-naslov);
    font-size: clamp(19px, 2.2vw, 24px);
    line-height: 1.4;
    color: var(--boja-siva);
    margin: 16px 0 0;
}

.clanak__podaci {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 26px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--boja-siva);
}

.clanak__autor { color: var(--boja-identitet); }

/* Naslovna slika izlazi izvan širine teksta — daje vazduh i naglašava
   vrh, kao hero na naslovnoj. */
.clanak__slika {
    width: min(100vw - 48px, 1040px);
    margin: 0 0 44px 50%;
    transform: translateX(-50%);
}

.clanak__slika img {
    display: block;
    margin: 0 auto;

    /* Uspravna slika inače preraste ekran, pa se vidi samo njen deo i
       tekst počinje tek negde daleko ispod. Visina se ograničava na
       ono što je vidljivo ispod trake, uz nešto vazduha. */
    max-width: 100%;
    max-height: calc(100vh - var(--header-visina) - 96px);
    width: auto;
    height: auto;

    border: 1px solid var(--boja-linija);
}

.clanak__slika figcaption {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--boja-siva);
    text-align: center;
}

.clanak__uvod {
    font-size: 19px;
    line-height: 1.65;
    color: #3b3530;
    margin: 0 0 36px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--boja-linija);
}

/* Uvod se unosi uređivačem, pa može imati više pasusa i poravnanje. */
.clanak__uvod > *:first-child { margin-top: 0; }
.clanak__uvod > *:last-child  { margin-bottom: 0; }

.clanak__uvod p,
.clanak__uvod section,
.clanak__uvod div { margin: 0 0 18px; }

.clanak__uvod .poravnaj-centar    { text-align: center; }
.clanak__uvod .poravnaj-desno     { text-align: right; }
.clanak__uvod .poravnaj-obostrano { text-align: justify; }
.clanak__uvod .poravnaj-levo      { text-align: left; }

.clanak__uvod a {
    color: var(--boja-identitet);
    text-decoration: underline;
    text-underline-offset: 4px;
}


/* --- Telo teksta ------------------------------------------------------ */

.clanak__telo { font-size: 17.5px; line-height: 1.75; }

.clanak__telo > *:first-child { margin-top: 0; }

.clanak__telo p,
.clanak__telo section,
.clanak__telo div { margin: 0 0 26px; }

.clanak__telo h2,
.clanak__telo h3 {
    font-family: var(--font-naslov);
    font-weight: 500;
    color: var(--boja-povrsina);
    line-height: 1.25;
    margin: 48px 0 16px;
}

.clanak__telo h2 { font-size: 30px; }
.clanak__telo h3 { font-size: 23px; }

.clanak__telo ul,
.clanak__telo ol { margin: 0 0 26px; padding-left: 24px; }

.clanak__telo li { margin-bottom: 8px; }

.clanak__telo blockquote {
    margin: 36px 0;
    padding: 4px 0 4px 26px;
    border-left: 2px solid var(--boja-identitet);
    font-family: var(--font-naslov);
    font-style: italic;
    font-size: 22px;
    line-height: 1.55;
    color: #3c3448;
}

.clanak__telo a {
    color: var(--boja-identitet);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.clanak__telo a:hover { color: var(--boja-identitet-hover); }

/* Poravnanje zadato u uređivaču */
.clanak__telo .poravnaj-centar    { text-align: center; }
.clanak__telo .poravnaj-desno     { text-align: right; }
.clanak__telo .poravnaj-obostrano { text-align: justify; }
.clanak__telo .poravnaj-levo      { text-align: left; }

/* Slika ubačena u tekst oznakom [slika:123] */
.slika-u-tekstu { margin: 40px 0; }

.slika-u-tekstu img {
    display: block;
    margin: 0 auto;

    max-width: 100%;
    max-height: calc(100vh - var(--header-visina) - 96px);
    width: auto;
    height: auto;

    border: 1px solid var(--boja-linija);
}

.slika-u-tekstu figcaption {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--boja-siva);
}

/* Galerija ubačena u tekst izlazi izvan širine teksta. */
.clanak__telo .galerija,
.clanak__telo .klizac {
    width: min(100vw - 48px, 1100px);
    margin-left: 50%;
    transform: translateX(-50%);
}


/* =====================================================================
   Objave na drugim portalima
   ===================================================================== */

.prenosi {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 14px 0 0;
}

.prenosi__naziv {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--boja-siva);
    margin-right: 4px;
}

.prenosi__veza {
    display: inline-block;
    padding: 4px 11px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--boja-identitet);
    background: var(--boja-identitet-blaga);
    border: 1px solid var(--boja-linija);
    transition: background-color var(--prelaz), color var(--prelaz),
                border-color var(--prelaz);
}

.prenosi__veza:hover {
    background: var(--boja-identitet);
    border-color: var(--boja-identitet);
    color: #fff;
}

.clanak__prenosi {
    margin-top: 56px;
    padding-top: 30px;
    border-top: 1px solid var(--boja-linija);
}

.clanak__prenosi-naslov {
    font-family: var(--font-tekst);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--boja-siva);
    margin: 0;
}

.prenosi--velike { gap: 8px; margin-top: 16px; }
.prenosi--velike .prenosi__veza { font-size: 14px; padding: 6px 14px; }


/* =====================================================================
   Spisak: rubrike, podnaslov kartice, straničenje
   ===================================================================== */

.rubrike {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: -20px 0 44px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--boja-linija);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.rubrike a { color: var(--boja-siva); padding-bottom: 4px; }
.rubrike a:hover { color: var(--boja-identitet); }

.rubrike .izabrano {
    color: var(--boja-identitet);
    border-bottom: 2px solid var(--boja-identitet);
}

.vest-podnaslov {
    font-family: var(--font-naslov);
    font-style: italic;
    font-size: 16px;
    line-height: 1.45;
    color: var(--boja-siva);
    margin-bottom: 10px;
}

.vest .prenosi { margin-top: 12px; }

.strane-sajt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 64px;
    padding-top: 26px;
    border-top: 1px solid var(--boja-linija);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--boja-siva);
}

.strane-sajt a { color: var(--boja-identitet); }
.strane-sajt__broj { color: var(--boja-siva); }

/* Razmak do podnožja: isti kao između sekcija na naslovnoj. */
.clanak:last-child { padding-bottom: 88px; }

.nazad {
    max-width: 760px;
    margin: 56px auto 88px;
    padding: 26px 24px 0;
    border-top: 1px solid var(--boja-linija);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.nazad a { color: var(--boja-identitet); }


/* =====================================================================
   Prazno, greška, nacrt
   ===================================================================== */

.prazno-sajt,
.greska-sajt {
    text-align: center;
    padding: 80px 24px;
    color: var(--boja-siva);
}

.greska-sajt h1 {
    font-family: var(--font-naslov);
    font-weight: 400;
    font-size: clamp(28px, 3.4vw, 42px);
    color: var(--boja-povrsina);
    margin-bottom: 12px;
}

.greska-sajt a { color: var(--boja-identitet); }

.traka-nacrta {
    max-width: 760px;
    margin: 24px auto 0;
    padding: 14px 20px;
    background: #FFF6DC;
    border: 1px solid #ECD9A0;
    color: #6B5410;
    font-size: 14px;
    text-align: center;
}


/* =====================================================================
   Telefon
   ===================================================================== */

@media (max-width: 760px) {
    .clanak { padding: 44px 20px 0; }

    /* Na telefonu je slika ionako uska, a ekran nizak: ograničenje
       visine bi je nepotrebno smanjilo. */
    .clanak__slika img,
    .slika-u-tekstu img { max-height: none; }

    .clanak__slika,
    .clanak__telo .galerija,
    .clanak__telo .klizac {
        width: calc(100% + 40px);
        margin-left: -20px;
        transform: none;
    }

    .clanak__telo { font-size: 16.5px; }

    .nazad { padding-left: 20px; padding-right: 20px; margin-bottom: 56px; }

    .clanak:last-child { padding-bottom: 56px; }

    .strane-sajt { font-size: 12px; gap: 12px; }
}


/* =====================================================================
   Naslovna strana — dopune

   Osnovni izgled dolazi iz css/style.css; ovde je samo ono što u njemu
   ne postoji, jer ranije nije ni bilo moguće.
   ===================================================================== */

/* Broj kolona u mreži vesti sada zadaje administracija. */
.vesti-mreza {
    grid-template-columns: repeat(var(--po-redu, 3), minmax(0, 1fr));
}


/* --- Klizač u odeljku vesti ------------------------------------------ */

.vesti-klizac {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.vesti-klizac::-webkit-scrollbar { display: none; }

.vesti-klizac .vest {
    flex: 0 0 calc((100% - (var(--po-redu, 4) - 1) * 24px) / var(--po-redu, 4));
    scroll-snap-align: start;
}

.klizac-dugmad {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

.klizac-dugmad .klizac__dugme {
    position: static;
    transform: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--boja-povrsina);
    background: transparent;
    border: 1px solid var(--boja-linija);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: none;
}

.klizac-dugmad .klizac__dugme:hover {
    background: var(--boja-identitet);
    border-color: var(--boja-identitet);
    color: #fff;
}

.klizac-dugmad .klizac__dugme[hidden] { display: none; }


/* --- Meni: podgrupa i oznaka „novo“ ---------------------------------- */

.menu-podgrupa {
    margin: 18px 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .55;
}

.menu-novo {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 7px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    background: var(--boja-identitet);
    border-radius: 999px;
    vertical-align: 2px;
}


/* --- Program: opis termina ------------------------------------------- */

.agenda-opis {
    margin-top: 6px;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--boja-siva);
}


@media (max-width: 900px) {
    .vesti-mreza { grid-template-columns: repeat(min(var(--po-redu, 3), 2), minmax(0, 1fr)); }
    .vesti-klizac .vest { flex-basis: calc((100% - 24px) / 2); }
}

@media (max-width: 620px) {
    .vesti-mreza { grid-template-columns: 1fr; }
    .vesti-klizac .vest { flex-basis: 82%; }
}


/* Sa jednim slajdom strelice i tačkice nemaju svrhu. Atribut hidden
   sam po sebi ne bi bio dovoljan, jer im style.css zadaje prikaz. */
.hero-strelica[hidden],
.hero-tacke[hidden] { display: none !important; }


/* =====================================================================
   Kontrole hera: prigušene dok se ne priđe

   Strelice i tačkice su tu kad zatrebaju, ali ne otimaju pažnju od
   slike. Čim miš pređe preko hera, vraćaju se u punu vidljivost.

   Pravilo važi samo tamo gde miš postoji. Na dodirnim ekranima nema
   prelaza mišem, pa bi kontrole ostale zauvek prigušene — a tamo su
   strelice ionako skrivene i menja se prevlačenjem.
   ===================================================================== */

@media (hover: hover) and (pointer: fine) {

    .hero-strelica,
    .hero-tacke {
        opacity: .35;
        transition: opacity .3s ease, background-color var(--prelaz);
    }

    .hero:hover .hero-strelica,
    .hero:hover .hero-tacke {
        opacity: 1;
    }

    /* Kad se dođe tastaturom, kontrole moraju biti vidljive iako miš
       nije nad herom. */
    .hero:focus-within .hero-strelica,
    .hero:focus-within .hero-tacke,
    .hero-strelica:focus-visible {
        opacity: 1;
    }
}


/* =====================================================================
   Prečice u vrhu naslovne

   Poluprozirne, sa belim obrisom: na herou se vide kao staklo, a kad
   se traka pri pomeranju oboji, ostaju čitljive bez izmene. Puna boja
   bi na svetlim slikama bila mrlja, a potpuno prozirne bi se izgubile.
   ===================================================================== */

.precice {
    display: flex;
    align-items: center;
    gap: 10px;

    /* Kad se prođe hero, prečice se povuku naviše i nestanu — ispod
       njih počinje tekst, a tamo bi samo smetale. */
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
}

.precice--sakrivene {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
}

/* Dok je meni otvoren, prečice se sklanjaju. One stoje u traci, a
   traka ostaje iznad menija — pa bi inače stajale preko njega. */
body.menu-otvoren .precice {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.precica {
    display: inline-block;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;

    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    backdrop-filter: blur(4px);

    transition: background-color .25s ease, border-color .25s ease,
                color .25s ease;

    /* Tri otkucaja pri učitavanju, pa mir. Dovoljno da se primeti,
       prekratko da smeta. Svaka sledeća kreće malo kasnije, pa deluje
       kao talas umesto kao treptaj table. */
    animation: precica-otkucaj 1.1s ease-in-out var(--kasnjenje, 0ms) 3;
}

.precica:hover,
.precica:focus-visible {
    background: #fff;
    border-color: #fff;
    color: var(--boja-povrsina);
    animation: none;   /* dodir prekida pozivanje na pažnju */
}

@keyframes precica-otkucaj {
    0%, 100% {
        background: rgba(255, 255, 255, .12);
        border-color: rgba(255, 255, 255, .55);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
    50% {
        background: rgba(255, 255, 255, .3);
        border-color: #fff;
        box-shadow: 0 0 0 4px rgba(255, 255, 255, .12);
    }
}

/* Ko je u podešavanjima tražio manje kretanja, ne dobija otkucaje. */
@media (prefers-reduced-motion: reduce) {
    .precica { animation: none; }
}


/* --- Desktop ---------------------------------------------------------
   Dok traka nije obojena, logotip je nevidljiv ali i dalje zauzima
   mesto — pa bi prečice iza njega završile na sredini. Zato se tada
   postavljaju uz samu levu ivicu, tačno tamo gde logotip inače stoji.

   Čim se traka oboji i logotip pojavi, prečice se vraćaju u red iza
   njega, da mu ne stoje preko.
   --------------------------------------------------------------------- */

@media (min-width: 900px) {

    .site-header .precice {
        margin-left: 28px;
        margin-right: auto;
        transition: left .3s ease, margin-left .3s ease;
    }

    .site-header:not(.skrolovan) .precice {
        position: absolute;
        left: max(24px, calc((100% - var(--sirina-max)) / 2 + 24px));
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
    }

    /* Ovde je transform već upotrebljen za centriranje, pa se
       sakrivanje ne sme osloniti na njega. */
    .site-header:not(.skrolovan) .precice--sakrivene {
        transform: translateY(-50%);
    }
}


/* --- Telefon ---------------------------------------------------------
   Prečice izlaze ispod trake umesto da stoje u njoj. Da su unutra,
   traka bi morala da poraste i priljubila bi se uz dugmad; ovako
   traka ostaje iste visine, a dugmad dobijaju vazduh oko sebe.
   --------------------------------------------------------------------- */

@media (max-width: 899px) {

    .site-header .precice {
        position: absolute;
        top: calc(var(--header-visina) + 14px);
        left: 20px;
        right: 20px;
        margin: 0;
        flex-wrap: wrap;
        gap: 8px;
    }

    .precica {
        padding: 6px 13px;
        font-size: 12px;
    }
}


/* --- Krupnije prečice -------------------------------------------------
   Prekidač u administraciji. Slovo je uvećano manje nego okvir: da je
   i ono dvostruko, bilo bi krupnije od naslova u herou i otimalo bi mu
   pažnju umesto da je usmerava.
   --------------------------------------------------------------------- */

.precice--krupne { gap: 14px; }

.precice--krupne .precica {
    padding: 14px 32px;
    font-size: 16px;
    letter-spacing: .07em;
    border-width: 1.5px;
}

@media (max-width: 899px) {
    .precice--krupne { gap: 10px; }

    .precice--krupne .precica {
        padding: 12px 26px;
        font-size: 14px;
    }
}


/* =====================================================================
   Prevod

   Googleov prevodilac dodaje na stranu svoj izbornik, traku na vrhu i
   oblačić nad prevedenim tekstom. Ništa od toga nam ne treba — jezik
   se bira vezama u meniju.

   Izbornik se ne sme ukloniti nego samo skloniti sa vidika: bez njega
   prevod nema šta da pokrene.
   ===================================================================== */

#prevodilac {
    position: absolute;
    left: -9999px;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Traka koju Google ubacuje iznad strane i pomera sadržaj naniže. */
.skiptranslate iframe,
.goog-te-banner-frame { display: none !important; }

body { top: 0 !important; }

/* Oblačić koji iskače nad prevedenim tekstom. */
.goog-tooltip,
.goog-tooltip:hover { display: none !important; }

.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
}


/* =====================================================================
   Ostali jezici

   Spisak se otvara na mestu, ispod dugmeta, bez zatvaranja glavnog
   menija. Dugme je pisano istim slogom kao „Srpski“ i „English“, da
   deluje kao treća stavka istog reda, a ne kao nešto dodato.
   ===================================================================== */

.menu-lang__ostali { position: relative; }

.menu-lang__dugme {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    font: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--boja-siva);

    padding: 0 0 4px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;

    transition: color var(--prelaz), border-color var(--prelaz);
}

.menu-lang__dugme:hover { color: var(--boja-identitet); }

/* Kad je izabran neki od ostalih jezika, dugme se ponaša kao tekuća
   stavka — isto kao „Srpski“ i „English“ kad su izabrani. */
.menu-lang__dugme--izabran {
    color: var(--boja-tekst);
    border-color: var(--boja-identitet);
}

.menu-lang__strelica {
    width: 12px;
    height: 12px;
    transition: transform var(--prelaz);
}

.menu-lang__dugme[aria-expanded="true"] .menu-lang__strelica {
    transform: rotate(180deg);
}

.menu-lang__spisak {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 20;

    min-width: 170px;
    margin: 0;
    padding: 8px 0;
    list-style: none;

    background: var(--boja-pozadina, #FCFBF8);
    border: 1px solid var(--boja-linija);
    box-shadow: 0 14px 34px rgba(44, 26, 58, .18);
}

.menu-lang__spisak[hidden] { display: none; }

.menu-lang__spisak li { margin: 0; }

.menu-lang__spisak a {
    display: block;
    padding: 8px 18px;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: none;
    color: var(--boja-tekst);
    border-bottom: none;
    white-space: nowrap;
}

.menu-lang__spisak a:hover {
    background: var(--boja-identitet-blaga);
    color: var(--boja-identitet);
}

.menu-lang__spisak a[aria-current="true"] {
    color: var(--boja-identitet);
    font-weight: 600;
}

/* Meni je na telefonu poravnat ulevo, pa i spisak ide uz levu ivicu. */
@media (max-width: 899px) {
    .menu-lang__spisak { right: auto; left: 0; }
}


/* =====================================================================
   Pretraga

   Sloj preko strane: sadržaj ispod se vidi, ali zatamnjen, pa se zna
   gde si i kuda se vraćaš.
   ===================================================================== */

.sloj-pretrage[hidden] { display: none; }

.sloj-pretrage {
    position: fixed;
    inset: 0;
    z-index: 300;          /* iznad zaglavlja, ispod menija */

    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 18vh 20px 20px;

    background: rgba(28, 18, 40, .62);
    backdrop-filter: blur(3px);
    animation: pretraga-ulaz .22s ease-out;
}

@keyframes pretraga-ulaz {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.sloj-pretrage__okvir { width: min(80%, 860px); }

@media (max-width: 700px) {
    .sloj-pretrage { padding-top: 12vh; }
    .sloj-pretrage__okvir { width: 100%; }
}

.sloj-pretrage__forma {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: #fff;
    box-shadow: 0 20px 50px rgba(28, 18, 40, .3);
}

.sloj-pretrage__polje {
    flex: 1;
    min-width: 0;
    padding: 18px 20px;
    font-family: var(--font-tekst);
    font-size: 19px;
    color: var(--boja-tekst);
    background: none;
    border: none;
    outline: none;
}

.sloj-pretrage__polje::placeholder { color: #9a9490; }

/* Browseri sami dodaju svoj iks u polje tipa search — imamo svoj. */
.sloj-pretrage__polje::-webkit-search-cancel-button { display: none; }

.sloj-pretrage__brisi {
    padding: 0 14px;
    font-size: 26px;
    line-height: 1;
    color: #9a9490;
    background: none;
    border: none;
    cursor: pointer;
    transition: color var(--prelaz);
}

.sloj-pretrage__brisi:hover { color: var(--boja-povrsina); }
.sloj-pretrage__brisi[hidden] { display: none; }

.sloj-pretrage__trazi {
    padding: 0 30px;
    font-family: var(--font-tekst);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--boja-identitet);
    border: none;
    cursor: pointer;
    transition: background-color var(--prelaz);
}

.sloj-pretrage__trazi:hover { background: var(--boja-povrsina); }

.sloj-pretrage__savet {
    margin-top: 14px;
    font-size: 13px;
    color: rgba(255, 255, 255, .7);
    text-align: center;
}


/* --- Predlozi --------------------------------------------------------- */

.sloj-pretrage__predlozi {
    margin-top: 2px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(28, 18, 40, .3);
    max-height: 46vh;
    overflow-y: auto;
}

.sloj-pretrage__predlozi[hidden] { display: none; }

.predlog {
    display: block;
    padding: 13px 20px;
    color: var(--boja-tekst);
    text-decoration: none;
    border-bottom: 1px solid var(--boja-linija);
}

.predlog:last-child { border-bottom: none; }

.predlog:hover { background: var(--boja-identitet-blaga); }

.predlog__oznaka {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--boja-identitet);
    margin-bottom: 3px;
}

.predlog__naslov {
    display: block;
    font-family: var(--font-naslov);
    font-size: 17px;
    line-height: 1.35;
}

.predlog--prazno {
    margin: 0;
    padding: 16px 20px;
    color: var(--boja-siva);
    font-size: 14px;
}

/* Dok je sloj otvoren, strana ispod se ne pomera. */
body.pretraga-otvorena { overflow: hidden; }


/* --- Stranica sa rezultatima ------------------------------------------ */

.pretraga-forma {
    display: flex;
    gap: 0;
    max-width: 620px;
    margin: -14px 0 30px;
    border: 1px solid var(--boja-linija);
}

.pretraga-forma__polje {
    flex: 1;
    min-width: 0;
    padding: 13px 16px;
    font-family: var(--font-tekst);
    font-size: 16px;
    border: none;
    outline: none;
    background: #fff;
}

.pretraga-forma__dugme {
    padding: 0 24px;
    font-family: var(--font-tekst);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--boja-identitet);
    border: none;
    cursor: pointer;
}

.pretraga-broj {
    margin: 0 0 26px;
    font-size: 14px;
    color: var(--boja-siva);
}


/* --- Stranica rezultata: obrazac i broj ------------------------------- */

/* Broj rezultata stoji uz naslov odeljka, kao veza „vidi sve“ kod
   ostalih odeljaka — ali se ne klikće, pa nema ni podvlaku. */
.sekcija-link--tiho {
    color: var(--boja-siva);
    cursor: default;
    border-bottom: none;
}

.sekcija-link--tiho:hover { color: var(--boja-siva); }


/* =====================================================================
   Knjiga — listanje PDF dokumenata
   ===================================================================== */

/* Knjiga je šira od kolone teksta, pa izlazi iz nje. Podrazumevano je
   centrirana; poravnanje zadato u uređivaču je pomera.
   
   Piše se kao `.clanak__telo .knjiga` namerno: pravilo koje pasusima
   daje razmak zahvata i div, pa bi inače poništilo levu marginu i
   knjiga bi ostala pomerena za pola širine ulevo. */
.knjiga,
.clanak__telo .knjiga {
    position: relative;
    width: min(100vw - 48px, 1000px);
    margin: 48px 0 48px 50%;
    transform: translateX(-50%);
}

/* Poravnanje uz desnu ivicu teksta. */
.clanak__telo .poravnaj-desno .knjiga,
.clanak__telo .poravnaj-desno.knjiga {
    margin-left: 100%;
    transform: translateX(-100%);
}

/* U celom ekranu okvir nije u koloni teksta, pa mu centriranje
   preko margine ne treba. */
.knjiga:fullscreen,
.clanak__telo .knjiga:fullscreen {
    margin: 0;
    transform: none;
}

/* Poravnanje uz levu ivicu.
   Obostrano se namerno ne računa: tekst se tako slaže po celoj širini,
   ali knjiga tada treba da ostane u sredini — a pasusi su najčešće
   baš obostrano poravnati. */
.clanak__telo .poravnaj-levo .knjiga,
.clanak__telo .poravnaj-levo.knjiga {
    margin-left: 0;
    transform: none;
}

.knjiga__platno {
    /* Biblioteka unutra pravi svoj element sa tačno zadatom širinom.
       Kad je knjiga uža od okvira, taj element se lepi uz levu ivicu —
       zato se centrira ovde, a ne samo okvir oko njega. */
    display: flex;
    justify-content: center;

    /* Sadržaj se pojavljuje tek kad biblioteka složi strane; do tada
       stoji mirna površina umesto gomile slika jedne ispod druge. */
    visibility: hidden;
}

/* Element koji biblioteka sama napravi. */
.knjiga__platno > * { margin-left: auto; margin-right: auto; }

.knjiga--spremna .knjiga__platno { visibility: visible; }

.knjiga__list {
    background: #fff;
    box-shadow: 0 1px 3px rgba(44, 26, 58, .18);
}

.knjiga__list img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.knjiga__trake {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 20px;

    /* Biblioteka postavlja stranice apsolutno i one se pri listanju
       šire preko svog okvira. Bez ovoga prekriju traku i progutaju
       klikove, iako se ne vide. */
    position: relative;
    z-index: 5;
}

.knjiga__dugme {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--boja-povrsina);
    background: transparent;
    border: 1px solid var(--boja-linija);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color var(--prelaz), color var(--prelaz),
                border-color var(--prelaz);
}

.knjiga__dugme:hover {
    background: var(--boja-identitet);
    border-color: var(--boja-identitet);
    color: #fff;
}

.knjiga__broj {
    min-width: 88px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--boja-siva);
}

.knjiga__preuzmi {
    margin-left: 8px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--boja-identitet);
}

.knjiga__bez-skripte {
    padding: 24px;
    text-align: center;
    background: var(--boja-identitet-blaga);
}

/* Izlaz iz celog ekrana. Esc radi, ali se toga ne seti svako — bez
   vidljivog izlaza se lako oseti zarobljeno. */
.knjiga__izlaz {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 9px 16px 9px 13px;
    font: inherit;
    font-size: 1.15rem;
    line-height: 1;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background-color var(--prelaz), color var(--prelaz);
}

.knjiga__izlaz span {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.knjiga__izlaz:hover { background: #fff; color: #14101c; }

.knjiga__izlaz[hidden] { display: none; }

.knjiga__dugme[hidden] { display: none; }


/* U celom ekranu knjiga dobija tamnu podlogu, da se strane odvoje od
   pozadine i da svetlo sa strane ne odvlači pogled. */
.knjiga:fullscreen {
    width: 100%;
    height: 100%;
    padding: 20px 24px 16px;
    background: #14101c;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Platno ne sme da preraste svoje mesto i pojede traku ispod. */
.knjiga:fullscreen .knjiga__platno {
    flex: 0 1 auto;
    min-height: 0;
    justify-content: center;
}

.knjiga:fullscreen .knjiga__trake {
    flex: 0 0 auto;
    margin-top: 16px;
}

.knjiga:fullscreen .knjiga__dugme {
    color: #fff;
    border-color: rgba(255, 255, 255, .4);
}

.knjiga:fullscreen .knjiga__broj { color: rgba(255, 255, 255, .75); }


@media (max-width: 760px) {
    .knjiga {
        width: calc(100% + 40px);
        margin-left: -20px;
        transform: none;
    }

    .knjiga__trake { gap: 10px; }
    .knjiga__dugme { width: 38px; height: 38px; }
}


/* =====================================================================
   Kontakt strana
   ===================================================================== */

.kontakt-uvod {
    max-width: 680px;
    margin: -14px 0 40px;
    font-size: 18px;
    line-height: 1.65;
    color: #3b3530;
}

.kontakt {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 40px;
    padding-bottom: 8px;
}

.kontakt-naslov {
    margin: 0 0 12px;
    font-family: var(--font-tekst);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--boja-identitet);
}

.kontakt-kolona > .kontakt-naslov:not(:first-child) { margin-top: 32px; }

.kontakt-adresa {
    font-style: normal;
    line-height: 1.75;
    margin: 0;
}

.kontakt-red { margin: 0 0 6px; line-height: 1.6; }

.kontakt-red a { color: var(--boja-identitet); }

.kontakt-opis,
.kontakt-sitno {
    color: var(--boja-siva);
    font-size: 14px;
}

.kontakt-sitno { margin: 10px 0 0; }

.kontakt-oznaka {
    display: inline-block;
    min-width: 108px;
    font-size: 13px;
    color: var(--boja-siva);
}


/* --- Mapa -------------------------------------------------------------
   Do klika stoji mirna površina; Google se učitava tek kad posetilac to
   zatraži, pa dotad nema ni kolačića ni čekanja na njihov server.
   --------------------------------------------------------------------- */

.mapa {
    margin-top: 56px;
    aspect-ratio: 16 / 7;
    background: var(--boja-identitet-blaga);
    border: 1px solid var(--boja-linija);
}

.mapa__poziv {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 100%;
    padding: 24px;
    font: inherit;
    text-align: center;
    color: var(--boja-povrsina);
    background: none;
    border: none;
    cursor: pointer;
    transition: background-color var(--prelaz);
}

.mapa__poziv:hover { background: rgba(75, 46, 131, .06); }

.mapa__igla { width: 38px; height: 38px; color: var(--boja-identitet); }

.mapa__naslov {
    font-family: var(--font-naslov);
    font-size: 22px;
    line-height: 1.3;
}

.mapa__uputstvo {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--boja-identitet);
}

.mapa__napomena {
    max-width: 380px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--boja-siva);
}

.mapa--ucitana { border-color: transparent; }

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

.mapa__veza {
    margin: 12px 0 0;
    font-size: 13px;
}

.mapa__veza a { color: var(--boja-identitet); }


@media (max-width: 700px) {
    .kontakt { gap: 32px; }
    .mapa { aspect-ratio: 4 / 3; }
}


/* =====================================================================
   Stranica vesti — mrvice, tri stila zaglavlja, kretanje kroz vesti
   ===================================================================== */

.clanak-vrh {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 24px 0;
}


/* --- Mrvice ----------------------------------------------------------- */

.mrvice { font-size: 12.5px; }

.mrvice ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.mrvice li { display: flex; align-items: center; gap: 8px; color: var(--boja-siva); }

.mrvice li + li::before {
    content: "›";
    color: var(--boja-linija);
}

.mrvice a { color: var(--boja-siva); text-decoration: none; }
.mrvice a:hover { color: var(--boja-identitet); }

.mrvice li[aria-current] {
    color: var(--boja-povrsina);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 46ch;
}


/* --- Stil „traka“: slika levo, naslov desno --------------------------- */

.clanak--traka { max-width: 1000px; }

.clanak__vrh--traka {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 36px;
    align-items: center;
    margin-bottom: 36px;
}

.traka__slika {
    margin: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--boja-identitet-blaga);
}

.traka__slika img,
.traka__slika picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.traka__tekst .clanak__naslov { font-size: clamp(26px, 3vw, 40px); }

.clanak__legenda {
    max-width: 1000px;
    margin: -20px auto 32px;
    padding: 0 24px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--boja-siva);
}


/* --- Stil „pojas“: široka niska slika --------------------------------- */

.vrh-pojas {
    position: relative;
    margin-top: 22px;
    aspect-ratio: 3 / 1;
    overflow: hidden;
    background: var(--boja-identitet-blaga);
}

.vrh-pojas__slika,
.vrh-pojas picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vrh-natpis {
    position: absolute;
    left: 24px;
    bottom: 20px;
    margin: 0;

    /* Krupnije nego kod ostalih sitnih natpisa: ovo je jedina reč
       preko slike i treba da se pročita iz hoda. Razmak među slovima
       je manji nego kod sitnog teksta, jer bi pri ovoj veličini reč
       počela da se razvlači. */
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 1px 14px rgba(20, 14, 28, .8);
}


/* --- Stil „veliko“: slika preko celog ekrana -------------------------- */

.vrh-veliki {
    position: relative;
    height: 70vh;
    min-height: 380px;
    overflow: hidden;
    background: var(--boja-povrsina);
}

.vrh-veliki__slika,
.vrh-veliki picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Preliv umesto ravnomerne providnosti: traka na 70% preko svetle slike
   i dalje guta beli logotip, a preliv ga čuva nad bilo kakvom slikom. */
.vrh-veliki::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 220px;
    background: linear-gradient(rgba(20, 14, 28, .68), rgba(20, 14, 28, 0));
    pointer-events: none;
}

.vrh-veliki__preko {
    position: absolute;
    inset: auto 0 0;
    padding: 24px;
    max-width: 1000px;
    margin: 0 auto;
}

.vrh-veliki__preko .mrvice { margin-bottom: 10px; }
.vrh-veliki__preko .mrvice li,
.vrh-veliki__preko .mrvice a { color: rgba(255, 255, 255, .82); }
.vrh-veliki__preko .mrvice li[aria-current] { color: #fff; }
.vrh-veliki__preko .mrvice a:hover { color: #fff; }
.vrh-veliki__preko .mrvice li + li::before { color: rgba(255, 255, 255, .45); }
.vrh-veliki__preko .mrvice { text-shadow: 0 1px 10px rgba(20, 14, 28, .8); }

.vrh-veliki__preko .vrh-natpis { position: static; }

/* Kod ovog stila zaglavlje je providno, pa sadržaj kreće od vrha. */
.clanak--veliko { margin-top: 0; }


/* Pri prevlačenju se sadržaj pomera vodoravno; bez ovoga bi se
   pojavio klizač preko cele strane. */
body { overflow-x: hidden; }


/* --- Prethodno i sledeće ---------------------------------------------- */

.susedi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 1000px;
    margin: 56px auto 0;
    padding: 30px 24px 0;
    border-top: 1px solid var(--boja-linija);
}

.sused {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: border-color var(--prelaz), background-color var(--prelaz);
}

.sused:hover {
    border-color: var(--boja-linija);
    background: var(--boja-identitet-blaga);
}

.sused--sledeci { flex-direction: row-reverse; text-align: right; }

.sused--prazno { border: none; }

.sused__slika {
    flex: 0 0 84px;
    width: 84px;
    height: 60px;
    overflow: hidden;
    background: var(--boja-identitet-blaga);
}

.sused__slika img,
.sused__slika picture {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sused__telo { min-width: 0; }

/* Strelice uz oznaku: levo za prethodno, desno za sledeće — kao što
   se i strana pomera pri prevlačenju. */
.sused--prethodni .sused__oznaka::before { content: "← "; }
.sused--sledeci .sused__oznaka::after { content: " →"; }

.sused__oznaka {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--boja-identitet);
    margin-bottom: 4px;
}

.sused__naslov {
    display: block;
    font-family: var(--font-naslov);
    font-size: 17px;
    line-height: 1.3;
    color: var(--boja-povrsina);
}


@media (max-width: 860px) {
    .clanak__vrh--traka { grid-template-columns: 1fr; gap: 20px; }

    .vrh-natpis { font-size: 16px; left: 20px; bottom: 16px; }

    .vrh-pojas { aspect-ratio: 2 / 1; }

    .vrh-veliki { height: 58vh; min-height: 300px; }

    .susedi { grid-template-columns: 1fr; gap: 10px; }

    .sused--sledeci { flex-direction: row; text-align: left; }

    .clanak__legenda { margin-top: -12px; padding: 0 20px; }
}


/* =====================================================================
   Deljenje
   ===================================================================== */

.deljenje {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 760px;
    margin: 44px auto 0;
    padding-top: 26px;
    border-top: 1px solid var(--boja-linija);
}

.deljenje__naziv {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--boja-siva);
}

.deljenje__spisak {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.deljenje__stavka {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--boja-povrsina);
    background: none;
    border: 1px solid var(--boja-linija);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color var(--prelaz), color var(--prelaz),
                border-color var(--prelaz);
}

.deljenje__stavka svg { width: 19px; height: 19px; }

.deljenje__stavka:hover,
.deljenje__stavka:focus-visible {
    background: var(--boja-identitet);
    border-color: var(--boja-identitet);
    color: #fff;
}

/* Potvrda posle kopiranja: bez nje se ne zna da se išta desilo. */
.deljenje__potvrda {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 10px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #fff;
    background: var(--boja-povrsina);
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}

.deljenje__stavka--kopirano .deljenje__potvrda { opacity: 1; }

/* Na stranama gde tekst ide preko cele širine traka prati taj okvir. */
.sekcija--tanka {
    padding-top: 0;
    padding-bottom: 56px;
}

.sekcija--tanka .deljenje {
    max-width: none;
    margin-top: 0;
}


@media (max-width: 700px) {
    .deljenje { gap: 10px; }
    .deljenje__stavka { width: 38px; height: 38px; }
}


/* Izložilac i indeks ne smeju da razvuku prored. */
.clanak__telo sup,
.clanak__telo sub,
.clanak__uvod sup,
.clanak__uvod sub {
    font-size: .72em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

.clanak__telo sup, .clanak__uvod sup { top: -.5em; }
.clanak__telo sub, .clanak__uvod sub { bottom: -.25em; }


/* =====================================================================
   Podrazumevano poravnanje teksta

   Obostrano je ono što se najčešće koristi, pa je učinjeno
   podrazumevanim — time se ne mora označavati svaki pasus, ni pri
   kucanju ni pri lepljenju iz Worda.

   Važi samo za telo teksta i uvod. Naslovi, kartice, meni i sve ostalo
   ostaju kako jesu.

   Ko želi da odstupi, bira „uz levu ivicu“ — to se i dalje upisuje
   izričito.
   ===================================================================== */

.clanak__telo,
.clanak__uvod { text-align: justify; }

/* Ono što se ne prelama u više redova ne treba razvlačiti. */
.clanak__telo h2,
.clanak__telo h3,
.clanak__telo figcaption,
.clanak__telo .galerija,
.clanak__telo .knjiga { text-align: left; }


/* =====================================================================
   Meni: tekst bez veze i sklopljene grupe
   ===================================================================== */

/* Napomena u meniju — nije veza, pa se i ne ponaša kao veza. */
.menu-tekst {
    color: var(--boja-siva);
    font-style: italic;
    cursor: default;
}

/* Sklopljena grupa: vidi se samo naziv dok se ne klikne. Radi
   oznakom <details>, pa otvaranje ne traži JavaScript. */
.menu-sklop { margin: 6px 0; }

.menu-sklop summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    list-style: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--boja-tekst);
    transition: color var(--prelaz);
}

.menu-sklop summary::-webkit-details-marker { display: none; }

/* Strelica se okreće kad se grupa otvori. */
.menu-sklop summary::before {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--prelaz);
    opacity: .6;
}

.menu-sklop[open] summary::before { transform: rotate(45deg); }

.menu-sklop summary:hover { color: var(--boja-identitet); }

.menu-sklop .menu-links { padding-left: 15px; }


/* =====================================================================
   Razmak između odeljaka naslovne

   Svaki odeljak ima po 88 piksela gore i dole, pa se između dva
   susedna sabere 176 — dvostruko više nego između hera i prvog
   odeljka, gde postoji samo gornji.

   Zato odeljci bez pozadine nose samo gornji razmak. Oni sa pozadinom
   — sivi program, baner, newsletter — zadržavaju oba, jer im razmak
   nije praznina nego deo obojene površine.
   ===================================================================== */

main > .sekcija:not(.sekcija--siva) { padding-bottom: 0; }

/* Poslednjem u nizu razmak ipak treba: bez njega bi nalegao na
   podnožje. */
main > .sekcija:not(.sekcija--siva):last-child { padding-bottom: 88px; }

/* Ispred obojene površine razmak mora ostati: razmak koji ta površina
   ima unutar sebe je već obojen, pa tekst iznad njega naleže na ivicu
   boje ako se ovaj oduzme. */
main > .sekcija:not(.sekcija--siva):has(+ .baner),
main > .sekcija:not(.sekcija--siva):has(+ .njuzleter),
main > .sekcija:not(.sekcija--siva):has(+ .sekcija--siva) { padding-bottom: 88px; }


@media (max-width: 760px) {
    main > .sekcija:not(.sekcija--siva):last-child { padding-bottom: 56px; }
}


/* Sadržaj sklopljene grupe ne sme da bude odsečen dok se grupa iznad
   otvara — visina se preračunava, ali prelaz traje. */
.menu-group-panel { overflow: hidden; }

.menu-sklop > ul { margin-bottom: 4px; }


/* =====================================================================
   Sponzori

   Šablon stranice „Sponzori“: ispod uvodnog teksta kategorije, u
   svakoj logotipi u pločicama — beo teren u svetlom okviru, kao na
   strani Bijenala. Bela pločica nosi i logotipe koji stižu kao JPG sa
   belom pozadinom, pa ne izgledaju kao isečci na toploj podlozi.

   Veličinu pločice nosi kategorija, pa se rang vidi bez reči.
   Kategorija „uz prethodnu“ staje u isti red — organizator i
   generalni sponzor jedan pored drugog.
   ===================================================================== */

.sponzori {
    /* Dole širok razmak — strana se završava pločicama, pa bez njega
       poslednji red naleže na podnožje. */
    margin: 64px 0 112px;
    padding-top: 8px;
    border-top: 1px solid var(--boja-linija);
}

/* Pločice su šire od stupca teksta (760 px), pa odeljak izlazi iz
   njega do 1140 px — koliko je širok i sadržaj na strani Bijenala,
   da četiri pločice srednje veličine stanu u red. */
.clanak .sponzori {
    width: min(1140px, calc(100vw - 48px));
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.sponzori__red {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 0 64px;
}

.sponzori__grupa {
    padding: 48px 0 0;
    text-align: center;
    min-width: 0;

    --plocica-sirina: 255px;
    --plocica-visina: 240px;
    --plocica-okvir:  26px;
    --plocica-unutra: 8px;
    --plocica-razmak: 30px;
}

/* Mere sa Bijenala: siva pločica 360 × 322, u njoj bela površina sa
   logotipom tačno 260 × 250 — okvir je 36 gore i dole, 50 levo i desno. */
.sponzori__grupa--krupno {
    --plocica-sirina: 360px;
    --plocica-visina: 322px;
    --plocica-okvir:  36px 50px;
    --plocica-unutra: 0px;
    --plocica-razmak: 30px;
}

.sponzori__grupa--sitno {
    --plocica-sirina: 220px;
    --plocica-visina: 208px;
    --plocica-okvir:  22px;
    --plocica-unutra: 8px;
    --plocica-razmak: 26px;
}

.sponzori__naslov {
    font-family: var(--font-naslov);
    font-weight: 400;
    font-size: clamp(30px, 3.4vw, 40px);
    line-height: 1.2;
    color: var(--boja-povrsina);
    margin: 0 0 32px;
}

/* Kratka crta ispod naslova. */
.sponzori__naslov::after {
    content: "";
    display: block;
    width: 54px;
    height: 2px;
    margin: 18px auto 0;
    background: var(--boja-identitet);
    opacity: .55;
}

.sponzori__niz {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--plocica-razmak);

    /* Najviše četiri u redu — osam prijatelja staje u dva jednaka
       reda, a ne šest pa dva. */
    max-width: calc(4 * var(--plocica-sirina) + 3 * var(--plocica-razmak));
    margin: 0 auto;
}

.sponzori__stavka { margin: 0; padding: 0; }

.sponzori__plocica {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--plocica-sirina);
    height: var(--plocica-visina);
    padding: var(--plocica-unutra);
    background: #fff;
    border: solid #F1EEE8;
    border-width: var(--plocica-okvir);
    color: inherit;
    text-decoration: none;
}

.sponzori__plocica picture { display: contents; }

.sponzori__logo {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

a.sponzori__plocica { transition: border-color .2s ease, transform .2s ease; }

@media (hover: hover) and (pointer: fine) {
    a.sponzori__plocica:hover {
        border-color: #E6E0EF;
        transform: translateY(-2px);
    }
}

a.sponzori__plocica:focus-visible {
    outline: 2px solid var(--boja-identitet);
    outline-offset: 3px;
}

/* Sponzor bez logotipa — ime, slogom naslova. */
.sponzori__ime {
    font-family: var(--font-naslov);
    font-size: 22px;
    line-height: 1.25;
    color: var(--boja-povrsina);
}

.sponzori__grupa--krupno .sponzori__ime { font-size: 27px; }
.sponzori__grupa--sitno  .sponzori__ime { font-size: 19px; }

/* Telefon: po dve pločice u redu. Kategorije iz istog reda slažu se
   jedna ispod druge kad nema mesta — to radi flex sam. */
@media (max-width: 620px) {
    .sponzori__grupa         { --plocica-sirina: 160px; --plocica-visina: 152px; --plocica-okvir: 16px; --plocica-unutra: 6px; --plocica-razmak: 14px; }
    .sponzori__grupa--krupno { --plocica-sirina: 300px; --plocica-visina: 268px; --plocica-okvir: 30px 42px; --plocica-unutra: 0px; }
    .sponzori__grupa--sitno  { --plocica-sirina: 160px; --plocica-visina: 152px; }

    .sponzori        { margin-bottom: 72px; }
    .sponzori__grupa { padding-top: 40px; }
    .sponzori__naslov { margin-bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    a.sponzori__plocica { transition: none; }
}


/* =====================================================================
   Newsletter — strana potvrde

   Do nje vodi link iz mejla. Jedna kolona, uska kao pismo: naslov,
   rečenica, dva neobavezna polja i dugme — isto ono dugme kao u
   obrascu za prijavu, da se vidi da je to nastavak istog.
   ===================================================================== */

.potvrda { padding-top: 72px; padding-bottom: 104px; }

.potvrda__okvir {
    max-width: 560px;
    margin: 0 auto;
}

.potvrda__naslov {
    font-family: var(--font-naslov);
    font-weight: 400;
    font-size: clamp(32px, 4.4vw, 48px);
    line-height: 1.12;
    color: var(--boja-povrsina);
    margin: 0 0 20px;
}

.potvrda__tekst {
    font-size: 17.5px;
    line-height: 1.7;
    margin: 0 0 28px;
}

.potvrda__tekst b { font-weight: 600; word-break: break-all; }

.potvrda__forma {
    padding-top: 28px;
    border-top: 1px solid var(--boja-linija);
}

.potvrda__uvod {
    font-size: 15px;
    color: var(--boja-siva);
    margin: 0 0 18px;
}

.potvrda__par {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.potvrda__polje span {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--boja-siva);
    margin-bottom: 8px;
}

.potvrda__polje input {
    box-sizing: border-box;
    width: 100%;
    padding: 14px 16px;
    font: inherit;
    font-size: 16px;
    color: var(--boja-tekst);
    background: #fff;
    border: 1px solid var(--boja-linija);
    border-radius: 0;
}

.potvrda__polje input:focus {
    outline: 2px solid var(--boja-identitet);
    outline-offset: -1px;
}

.potvrda__polje--telefon { display: block; margin-bottom: 24px; }

.potvrda__polje input[aria-invalid="true"] { border-color: #9B2226; }

.potvrda__greska {
    font-size: 15px;
    line-height: 1.5;
    color: #9B2226;
    margin: 0 0 18px;
}

.potvrda__dugme { width: 100%; }

.potvrda__dalje { margin: 8px 0 0; font-size: 15px; }

.potvrda__dalje a { color: var(--boja-identitet); }

@media (max-width: 560px) {
    .potvrda { padding-top: 48px; padding-bottom: 72px; }
    .potvrda__par { grid-template-columns: 1fr; }
}