/* ==========================================================================
   TV Kikinda — rubrika sufinansiranog projekta (inc/projekat.php): zeleni list u meniju i na oznakama, strana
   rubrike (zaglavlje sa listom koji se iscrtava, pojas sa obaveštenjem, teme), obaveštenje uz objavu.
   Zelena je boja rubrike; narandžasta ostaje akcenat portala.
   ========================================================================== */

:root {
  --eko: #1f9d55;          /* list, trake, ivice */
  --eko-ink: #157347;      /* zelen tekst na svetloj podlozi (5,9:1 na beloj) */
  --eko-300: #7ee2a8;      /* zelen tekst i linije na tamnoj podlozi (12,9:1 na noći) */
  --eko-tint: rgba(31, 157, 85, .1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --eko-ink: #5fd18c; --eko-tint: rgba(31, 157, 85, .16); }
}
:root[data-theme="dark"] { --eko-ink: #5fd18c; --eko-tint: rgba(31, 157, 85, .16); }

/* ---------- Meni: zeleni list uz stavku sa klasom tvk-ikona-list ---------- */
.nav__ikona { width: 18px; height: 18px; margin-right: 6px; color: var(--eko); fill: var(--eko-tint); vertical-align: -3px; }
.nav__link:has(.nav__ikona) { display: inline-flex; align-items: center; }
.mobile-menu__list a .nav__ikona { width: .8em; height: .8em; margin-right: .18em; color: var(--eko-300); vertical-align: -.06em; }

/* ---------- Oznaka rubrike na karticama i u objavi: list umesto kose trake ---------- */
.kicker--list::before { display: none; }
.kicker--list .ico { color: var(--c, var(--eko)); fill: var(--eko-tint); stroke-width: 2.4; }

/* ---------- Zaglavlje strane rubrike ---------- */
.projekat-head {
  background: radial-gradient(110% 120% at 100% 0%, #1b2a7a 0%, rgba(27, 42, 122, 0) 60%), var(--navy-950);
  padding-block: clamp(52px, 7vw, 104px) clamp(40px, 5vw, 72px);
}
/* Zeleni sjaj „svitanja“ je poseban sloj (ispod kosih pruga), da bi se upalio pri ulazu. */
.projekat-head__svit {
  position: absolute; inset: 0; z-index: -2; pointer-events: none; transform-origin: 88% 18%;
  background: radial-gradient(70% 110% at 88% 18%, rgba(31, 157, 85, .4) 0%, rgba(31, 157, 85, 0) 58%);
}
.projekat-head__inner { position: relative; z-index: 1; }
.projekat-head__eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.projekat-head__eyebrow .ico { color: var(--eko-300); fill: rgba(126, 226, 168, .18); }
.projekat-head__eyebrow .eyebrow-bar { display: none; }
.projekat-head__title em { font-style: italic; color: var(--eko-300); }
.projekat-head__count { color: var(--eko-300); }
.projekat-head .page-head__desc { max-width: 58ch; }

/* List koji se iscrtava (buđenje): obris, glavni nerv, pa bočni nervi jedan za drugim */
/* Sloj nosi položaj i nagib lista (i pomeranje mišem i skrolom u motion.js); SVG u njemu ima samo svoj 3D ulaz. */
.projekat-list-sloj {
  position: absolute; z-index: 0; right: max(3vw, 16px); bottom: -14%; width: min(44vw, 560px); aspect-ratio: 1;
  transform: rotate(-6deg); pointer-events: none;
}
.projekat-list {
  display: block; width: 100%; height: 100%; transform-origin: 10% 90%; /* peteljka (M40 360 u viewBox-u) */
  fill: none; stroke: var(--eko-300); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .55;
}
/* Seme koje list pusti ka svetlu: tačke na vrhovima bočnih nerava, vidljive samo dok traje ulaz. */
.projekat-seme { position: absolute; inset: 0; }
.projekat-seme i {
  position: absolute; left: var(--x); top: var(--y); width: 6px; height: 6px; margin: -3px; border-radius: 50%; opacity: 0;
  background: var(--eko-300); box-shadow: 0 0 10px 2px rgba(126, 226, 168, .55);
}
.projekat-list__obris { fill: rgba(31, 157, 85, .08); }
.projekat-list path { stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .projekat-list path { stroke-dashoffset: 1; animation: projekat-crtaj 1.5s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 110ms + 250ms); }
}
@keyframes projekat-crtaj { to { stroke-dashoffset: 0; } }

/* ---------- Pojas sa obaveštenjem ispod zaglavlja ---------- */
.projekat-pojas { background: var(--surface); border-bottom: 1px solid var(--line); }

/* ---------- Obaveštenje o sufinansiranju ---------- */
/* Znak su tri grba na providnoj pozadini (287 × 158): visinu određuje mesto, širina ide za njom. */
.projekat-napomena { --znak-h: 72px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px 26px; }
.projekat-napomena .projekat-napomena__znak { display: block; width: auto; height: var(--znak-h); max-width: none; }
.projekat-napomena__tekst { display: grid; gap: 6px; max-width: 72ch; }
.projekat-napomena__ko { margin: 0; font: 700 .98rem/1.4 var(--font-body); color: var(--ink); }
.projekat-napomena__stav { margin: 0; font: 400 .9rem/1.5 var(--font-body); color: var(--muted); }
.projekat-napomena--rubrika { padding-block: 22px; }
.projekat-napomena--objava {
  --znak-h: 60px; gap: 12px 20px;
  margin-top: clamp(28px, 4vw, 44px); padding: 18px 22px; border-radius: var(--r-lg);
  background: var(--surface-2);
}
.prose .projekat-napomena p { margin: 0; }
.prose .projekat-napomena img { margin: 0; border-radius: 0; box-shadow: none; }
@media (max-width: 600px) {
  .projekat-napomena { --znak-h: 56px; grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Telo strane: teme, istaknuta objava, mreža ---------- */
.projekat-teme { margin-bottom: 28px; }
/* Teme projekta imaju duge nazive: na računaru se prelamaju u redove (skriven skrol mišem se ne vidi), na telefonu se prevlače. */
@media (min-width: 761px) {
  .projekat-teme { flex-wrap: wrap; row-gap: 10px; overflow: visible; }
}
.projekat-teme .chip[aria-current="true"]::before { background: linear-gradient(100deg, #12623a 0%, var(--eko) 100%); }
.projekat-istaknuto { margin-bottom: clamp(32px, 4.5vw, 56px); }
.projekat-istaknuto .lead { min-height: clamp(380px, 56vh, 560px); }
.projekat-istaknuto .badge--orange { --tag-bg: var(--eko); color: #fff; }
.projekat-istaknuto .lead__cta { color: var(--eko-300); }
.projekat-istaknuto .lead__shade {
  background:
    linear-gradient(180deg, rgba(7, 7, 26, 0) 25%, rgba(7, 7, 26, .5) 55%, rgba(7, 7, 26, .94) 100%),
    linear-gradient(90deg, rgba(18, 98, 58, .5) 0%, rgba(18, 98, 58, 0) 60%);
}
.projekat-mreza .kicker::before { background: var(--eko); }
/* Sa JS-om „Učitaj još“ zamenjuje strane (one ostaju u HTML-u za pretraživače i bez JS-a). */
.js .projekat-strane--js { display: none; }

/* ---------- Prazna rubrika ili tema bez priča ---------- */
.projekat-prazno { display: grid; justify-items: center; gap: 14px; padding-block: clamp(40px, 7vw, 88px); text-align: center; }
.projekat-prazno > .ico { width: 56px; height: 56px; color: var(--eko); fill: var(--eko-tint); stroke-width: 1.6; }
.projekat-prazno h2 { font: italic 900 clamp(1.8rem, 1.2rem + 2vw, 2.8rem)/1 var(--font-display); text-transform: uppercase; }
.projekat-prazno p { max-width: 56ch; color: var(--muted); }

/* ---------- Objava u rubrici ---------- */
.tvk-projekat .article__tags .kicker--list { color: var(--eko-ink); }

@media (max-width: 760px) {
  .projekat-list-sloj { width: 78vw; right: -16vw; bottom: -10%; }
  .projekat-list { opacity: .26; }
  .projekat-seme i:nth-child(n + 5) { display: none; }
}

/* Rubrika: kosa maska na karticama i slikama je zelena (boja rubrike) umesto narandžaste. */
.tvk-projekat .wipe { background: linear-gradient(90deg, var(--navy) 0%, #12623a 70%, var(--eko) 70.5%, var(--eko) 100%); }
/* Kartice i istaknuta priča se uspravljaju u 3D (motion.js). Neutralna 2D transformacija im ostaje i posle ulaza,
   jer bi je inače Chrome pri brisanju 3D stanja prijavio kao pomeranje strane (CLS) sloja za klik (.card__title a::after). */
.tvk-projekat .card, .projekat-istaknuto .lead { transform: translate(0, 0); }

/* ==========================================================================
   Ulazne animacije „buđenja“: ono što je uspavano leži položeno i uspravlja se ka čitaocu (3D), kroz kosu masku od
   16° i redom brenda (pruga, traka, podtraka, tekst), krivom cubic-bezier(0.16, 1, 0.3, 1). Prvi ekran je CSS i
   kreće od prvog iscrtavanja (ne čeka JS); ostatak strane i objava idu kroz motion.js (GSAP + ScrollTrigger).
   Izabrana tema ili strana 2+ (.projekat--tiho) ne ponavljaju uvod. Sa „smanji pokrete“ nema animacija.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .projekat:not(.projekat--tiho) .projekat-head::before { animation: eko-zrak .9s var(--ease-out) backwards; }
  .projekat:not(.projekat--tiho) .projekat-head::after { animation: eko-zrak .9s var(--ease-out) .12s backwards; }
  .projekat:not(.projekat--tiho) .projekat-head__svit { animation: eko-svit 2s var(--ease-out) backwards; }
  .projekat:not(.projekat--tiho) .projekat-head__eyebrow { animation: eko-traka .7s var(--ease-out) backwards; }
  .projekat:not(.projekat--tiho) .projekat-head__eyebrow .ico { transform-origin: 19% 81%; animation: eko-klija .8s var(--ease-out) .08s backwards; }
  .projekat:not(.projekat--tiho) .projekat-head__title { transform-origin: 0 50%; animation: eko-naslov 1s var(--ease-out) .12s backwards; }
  .projekat:not(.projekat--tiho) .projekat-head__title em { animation: eko-budi 1s var(--ease-in-out) .45s backwards; }
  .projekat:not(.projekat--tiho) .projekat-head .page-head__desc { animation: eko-odmotaj .9s var(--ease-out) .24s backwards; }
  .projekat-head__count { animation: eko-traka .6s var(--ease-out) .36s backwards; }
  .projekat--tiho .projekat-head__count { animation-delay: 0s; }
  .projekat:not(.projekat--tiho) .projekat-list { animation: eko-list 1.8s var(--ease-out) .15s backwards; }
  .projekat:not(.projekat--tiho) .projekat-seme i { animation: eko-seme 1.8s var(--ease-out) var(--d) backwards; }
  .projekat--tiho .projekat-list path { animation: none; stroke-dashoffset: 0; }
  .projekat:not(.projekat--tiho) .projekat-pojas { transform-origin: 50% 0; animation: eko-rasklopi .95s var(--ease-out) .42s backwards; }
  .projekat:not(.projekat--tiho) .projekat-pojas .projekat-napomena__znak { transform-origin: 50% 100%; animation: eko-ustani .9s var(--ease-out) .62s backwards; }
  .projekat:not(.projekat--tiho) .projekat-teme .chip { transform-origin: 50% 0; animation: eko-sarka .7s var(--ease-out) calc(.62s + min(var(--i, 0), 10) * .05s) backwards; }
  .projekat-teme .chip[aria-current="true"]::before { animation: eko-puni .55s var(--ease-out) .9s backwards; }
  .projekat--tiho .projekat-teme .chip[aria-current="true"]::before { animation-delay: .15s; }

  /* Objava u rubrici: oznake izlaze iz kose, list klija, uvod i podaci se odmotavaju (naslov: motion.js, reč po reč u 3D). */
  .tvk-projekat .article__tags > * { animation: eko-kosa .6s var(--ease-out) backwards; }
  .tvk-projekat .article__tags > * + * { animation-delay: .12s; }
  .tvk-projekat .article__tags .badge { --kosa: .8em; }
  .tvk-projekat .article__tags .kicker--list .ico { transform-origin: 19% 81%; animation: eko-klija .8s var(--ease-out) .1s backwards; }
  .tvk-projekat .article__lede { animation: eko-odmotaj .8s var(--ease-out) .36s backwards; }
  .tvk-projekat .article__meta { animation: eko-odmotaj .7s var(--ease-out) .48s backwards; }

  @media (max-width: 760px) {
    .projekat:not(.projekat--tiho) .projekat-list { --ry: 34deg; --rx: 14deg; animation-duration: 1.4s; }
  }
}

/* Kosa pruga se spušta odozgo (transform pruge, skewX, ostaje netaknut). */
@keyframes eko-zrak { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes eko-svit { from { opacity: 0; transform: scale(.82); } }
/* Tekst izlazi iz svoje trake: maska stoji na donjoj ivici trake dok se tekst diže kroz nju. */
@keyframes eko-traka {
  from { transform: translateY(calc(100% + .3em)); clip-path: inset(-.05em -.2em calc(100% + .05em) -.2em); }
  to { transform: none; clip-path: inset(-.35em -.2em -.25em -.2em); }
}
@keyframes eko-klija { from { opacity: 0; transform: scale(.2) rotate(-40deg); } }
/* Naslov izlazi iza ivice od 16° i otvara se kao vrata (pomak .45em na visini 1.57em = tg 16°). */
@keyframes eko-naslov {
  from {
    clip-path: polygon(-.6em -.4em, -.6em -.4em, -1.05em calc(100% + .3em), -1.05em calc(100% + .3em));
    transform: perspective(900px) rotateY(24deg) translateX(-.1em);
  }
  to {
    clip-path: polygon(-.6em -.4em, calc(100% + 1.05em) -.4em, calc(100% + .6em) calc(100% + .3em), -1.05em calc(100% + .3em));
    transform: none;
  }
}
@keyframes eko-budi { from { color: #fff; } }
@keyframes eko-odmotaj {
  from { clip-path: inset(-.3em -.2em 100% -.2em); transform: translateY(.6em); }
  to { clip-path: inset(-.3em -.2em -.3em -.2em); transform: none; }
}
/* List leži položen i okrenut od svetla, pa se razvija oko peteljke. */
@keyframes eko-list { from { opacity: 0; transform: perspective(1200px) rotateY(var(--ry, 58deg)) rotateX(var(--rx, 22deg)) scale(.86); } }
@keyframes eko-seme {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.4); }
  20% { opacity: .9; }
  100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) scale(1); }
}
/* Pojas se rasklapa sa šarke na donjoj ivici zaglavlja; grbovi se uspravljaju; teme se spuštaju sa šarke. */
@keyframes eko-rasklopi { from { opacity: 0; transform: perspective(1200px) rotateX(-90deg); } 30% { opacity: 1; } to { transform: perspective(1200px) rotateX(0deg); } }
@keyframes eko-ustani { from { opacity: 0; transform: perspective(600px) rotateX(64deg); } }
@keyframes eko-sarka { from { opacity: 0; transform: perspective(420px) rotateX(-90deg); } 30% { opacity: 1; } to { transform: perspective(420px) rotateX(0deg); } }
@keyframes eko-puni { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes eko-kosa {
  from { clip-path: polygon(-.2em -.3em, -.2em -.3em, calc(-.2em - var(--kosa, .5em)) calc(100% + .3em), calc(-.2em - var(--kosa, .5em)) calc(100% + .3em)); }
  to { clip-path: polygon(-.2em -.3em, calc(100% + .2em + var(--kosa, .5em)) -.3em, calc(100% + .2em) calc(100% + .3em), calc(-.2em - var(--kosa, .5em)) calc(100% + .3em)); }
}

/* ==========================================================================
   Veze rubrike sa portalom (ugovor, čl. 4 t. 4): blok na naslovnoj, podnožje, pretraga
   ========================================================================== */
/* Blok na naslovnoj: svetla zelena podloga i list umesto kose trake; kartice i obaveštenje kao u rubrici. */
.projekat-blok {
  padding-block: clamp(48px, 6vw, 88px);
  background: linear-gradient(180deg, var(--eko-tint) 0%, rgba(31, 157, 85, 0) 70%);
  border-top: 1px solid var(--line);
}
.projekat-blok__eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--eko-ink); }
.projekat-blok__eyebrow .ico { color: var(--eko); fill: var(--eko-tint); }
.projekat-blok .link-arrow { color: var(--eko-ink); }
.projekat-napomena--blok { --znak-h: 48px; gap: 10px 18px; margin-top: clamp(28px, 4vw, 44px); padding-top: 22px; border-top: 1px solid var(--line); }
.projekat-napomena--blok .projekat-napomena__ko { font-size: .9rem; }
.projekat-napomena--blok .projekat-napomena__stav { font-size: .82rem; }

/* Podnožje: rubrika projekta sa listom, posle rubrika vesti. */
.footer__projekat .nav__ikona { width: 15px; height: 15px; margin-right: 6px; color: var(--eko-300); fill: rgba(126, 226, 168, .14); align-self: center; }

/* Pretraga: izbor rubrike između polja i dugmeta (isti izgled kao polje). */
.page-search { width: min(760px, 100%); }
.page-search__cat {
  flex: none; max-width: 15rem; height: 50px; padding: 0 14px; border-radius: 6px; border: 1.5px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08); color: #fff; font: inherit; font-size: 1rem;
}
.page-search__cat option { color: var(--ink); background: var(--bg); }
.page-search__cat:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
@media (max-width: 760px) {
  .page-search__cat { max-width: none; }
}

/* Čitljivost u objavama rubrike (ugovor, čl. 4 t. 6): red teksta do ~68 znakova (bio ~92), natpisi najmanje 12 px,
   potpis fotografije najmanje 11 px. */
.tvk-projekat .article__content > p, .tvk-projekat .article__content > ul, .tvk-projekat .article__content > ol { max-width: 68ch; }
.tvk-projekat .kicker, .tvk-projekat .card__meta { font-size: max(.75rem, 12px); }
.tvk-projekat .photo-credit { font-size: max(.7rem, 11px); }