/* ============================================================
   Reli po galerijama 2026 - nadogradnja na Webflow template.
   Ucitava se ZADNJI, iza template.css. Original se ne dira,
   sve izmjene su ovdje da se Webflow re-export moze prekopirati.
   ============================================================ */

:root {
  --ink: #340712;         /* tamna bordo iz templatea */
  --lime: #f4fd86;
  --periwinkle: #c3d3f9;
  --pink: #ffb5c9;
  --brand-orange: #f75510; /* brand boja relipogalerijama */
}

/* ---------- Tipografija ----------
   Display font je Knockout iz templatea, prosiren hrvatskim dijakriticima
   (fonts/knockout-hr.woff2 - vidi README). Velicine ostaju kakve su u
   template.css; nista se ne kompenzira. */
body,
p,
.sub-title,
.tag,
.text-field {
  font-family: Poppins, "Helvetica Neue", Helvetica, sans-serif;
}

.sub-title { letter-spacing: .02em; font-weight: 500; }

/* ---------- Pulski kip u sekciji s datumima ----------
   Template ima macku 686x386 (polozeno) na 32rem sirine; kip je 511x779
   (uspravno, prozirna pozadina), pa ista sirina daje pretjerano visoku sliku.
   Sirina je manja, a slika je zbog uspravnog omjera i dalje visa od macke. */
.grump-cat-one {
  width: 27rem;
}
@media screen and (max-width: 991px) { .grump-cat-one { width: 23rem; } }
@media screen and (max-width: 620px) { .grump-cat-one { width: 18rem; } }

/* Pozadinska mreza: zagrebacki kip umjesto keksa iz templatea.
   Keks je 418x766 (omjer .546), kip 515x1012 (.509) - gotovo isti omjer, pa je
   sirina blizu templateovih 209px. Sirina se ipak zadaje eksplicitno jer o njoj
   ovisi visina reda: promjena motiva s drukcijim omjerom preklopila bi redove. */
.bone-img {
  width: 200px;
}

/* ---------- Kinetički tekst ----------
   Template racuna s line-height .8; nas globalni .82 uz vecu tipografiju
   nagomila 4 retka donjeg bloka. Rijeci se nikad ne smiju lomiti unutar
   retka - .text-wrap je flex nowrap s overflow:hidden, pa je rezanje
   ocekivano ponasanje, a prelamanje razbija roll efekt (text-shadow: 0 1em). */
/* Knockout je siri od proslogodisnjeg fonta i blok sad ima 4+4 retka umjesto
   3+4, pa bi na templateovih 13vw retci prelijevali (kolut se gnjeci jer nije
   .intro-title pa ga flex skuplja). 10.5vw drzi visinu blokova blizu originalu
   (4 x 10.08vw prema 3-4 x 10.4vw) uz istu prisutnost slova. */
.scroll-section .intro-title { font-size: 10.5vw; }
@media screen and (max-width: 991px) { .scroll-section .intro-title { font-size: 11.3vw; } }
@media screen and (max-width: 767px) { .scroll-section .intro-title { font-size: 12.9vw; } }
@media screen and (max-width: 479px) { .scroll-section .intro-title { font-size: 12vw; } }

/* Kolut nije .intro-title pa ga flex smije skupiti kad je redak pretijesan. */
.scroll-section .circle-pop,
.scroll-section .circle-pop-two { flex-shrink: 0; }

.scroll-section .intro-title,
.scroll-section .text-wrap-bold {
  white-space: nowrap;
  flex-shrink: 0;
  /* .text-wrap ima overflow:hidden visok tocno jedan redak (line-height .8).
     Kvacica na C/S seze do 0.844em, a vrh line boxa je na 0.7005em od baseline -
     bez ovoga se odreze. Verzali bez kvacice stanu (+0.034em), pa je template
     mogao bez toga. Padding dodaje visinu samo gore (0.8 -> 0.96em); char span
     koji GSAP pomice ostaje 0.8em, pa -120% i dalje odgovara text-shadow: 0 1em. */
  padding-top: .16em;
}
.scroll-section .text-wrap-bold { white-space: normal; }

/* ---------- Sekcija galerija ----------
   Template ima height: 300vh + sticky dijete (scroll-distance za 3 kartice).
   26 kartica trazi normalan tok dokumenta. */
#galerije.section-sticky-yellow {
  height: auto;
  padding: 6rem 0 11rem;
}
/* .whipe-section-btm je 20% visine sekcije. U templateu je sekcija 300vh sa
   sticky sadrzajem, pa tih 20% padne na prazan prostor ispod tri kartice.
   Ovdje sekcija prati sadrzaj, pa bi 20% preslo preko zadnjeg reda - fiksiramo
   traku i ostavljamo joj mjesta u padding-bottomu. */
#galerije .whipe-section-btm {
  height: 10rem;
}
/* Template ima flex-flow: column tek ispod 991px; iznad toga je red,
   pa bi se mreza galerija stisnula u jedan flex redak. */
#galerije .sticky-parent {
  position: static;
  flex-flow: column nowrap;
  align-items: center;
  height: auto;
  gap: 0;
  padding: 0 clamp(1rem, 4vw, 4rem);
}
#galerije .intro-text-three {
  position: relative;
  margin-bottom: 2.5rem;
}
/* Veliki naslov ostaje periwinkle (izgled templatea), ali podnaslov
   u toj boji na limeti nije citljiv. */
#galerije [ani="scroll-title"] {
  color: var(--ink);
  max-width: 32rem;
}

/* ---------- Prebacivanje gradova ---------- */
.city-switch {
  --thumb: 0;                       /* 0 = Pula, 1 = Zagreb */
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  width: min(26rem, 100%);
  padding: .35rem;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: transparent;
}
.city-switch-thumb {
  position: absolute;
  z-index: 0;
  top: .35rem;
  bottom: .35rem;
  left: .35rem;
  width: calc(50% - .35rem);
  border-radius: 999px;
  background: var(--ink);
  transform: translateX(calc(var(--thumb) * 100%));
  transition: transform .45s cubic-bezier(.65, .05, .1, 1);
}
.city-btn {
  position: relative;
  z-index: 1;
  padding: .7rem .5rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: Knockout, Impact, sans-serif;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .3s ease;
}
.city-btn.is-active { color: var(--lime); }
.city-btn:focus-visible { outline: 3px solid var(--brand-orange); outline-offset: 4px; }

.city-date {
  margin: .9rem 0 2.6rem;
  color: var(--ink);
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.city-date[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .city-switch-thumb { transition: none; }
}

/* ---------- Mreza kartica ---------- */
/* 5 stupaca: 13 lokacija ide u 5+5+3, a kartica ostaje sitna kao u templateu.
   4 stupca bi dala 4+4+4+1 - zadnja kartica sama u retku. */
/* ---------- Nit koja se crta uz kartice ----------
   Ista ideja kao Lottie uze u sekciji s datumima (#f86749), samo SVG.
   Putanju gradi js/reli.js iz stvarne geometrije kartica - fiksni val se
   ne poklapa s ritmom kartica pa zavrsi ispod njih (mjereno: 78-80%
   skriveno na mobitelu, 55% na desktopu).
   .gallery-stage MORA biti position: relative - inace se SVG pozicionira
   prema #galerije i razvuce se preko cijele sekcije. */
.gallery-stage {
  position: relative;
  width: 100%;
  max-width: 82rem;
}
.gallery-thread {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  /* visinu postavlja js/reli.js (visina popisa + lepeza), da se viewBox
     i element poklope i lepeza se ne rastegne po visini */
  pointer-events: none;
  overflow: visible;
}
.gallery-pane {
  position: relative;
  z-index: 1;
}

/* Brojevi lokacija sjede NA niti, u razmaku iznad svoje kartice, i pale se
   kad ih crtanje niti dosegne. Zamjenjuju bedz koji se u templateu vidio
   samo na hover - na dodiru hovera nema. */
.gallery-marks {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.gallery-mark {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--lime);
  font-family: Knockout, Impact, sans-serif;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: 1px;
  /* prsten u boji podloge "prereze" nit ispod oznake */
  box-shadow: 0 0 0 5px var(--lime);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.3);
  transition: opacity .3s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
.gallery-mark.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.gallery-mark.is-bonus { background: var(--brand-orange); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .gallery-mark { opacity: 1; transform: translate(-50%, -50%); transition: none; }
}


@media (prefers-reduced-motion: reduce) {
  .gallery-thread { display: none; }
}


.gallery-pane {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3rem 1.5rem;
  width: 100%;
  max-width: 82rem;
}
.gallery-pane[hidden] { display: none; }

@media screen and (max-width: 1200px) { .gallery-pane { grid-template-columns: repeat(4, 1fr); } }
@media screen and (max-width: 991px)  { .gallery-pane { grid-template-columns: repeat(3, 1fr); } }
@media screen and (max-width: 767px)  { .gallery-pane { grid-template-columns: repeat(2, 1fr); gap: 2.4rem 1rem; } }
@media screen and (max-width: 479px)  { .gallery-pane { grid-template-columns: 1fr; } }

.gallery-card {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  color: var(--ink);
  text-decoration: none;
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1);
}
.gallery-card.is-in { opacity: 1; transform: none; }

/* .profile-card je u templateu position:absolute, 19x20rem, dio fan-out
   kompozicije od tri kartice. U mrezi mora biti obican blok. */
.gallery-card .profile-card {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 19 / 20;
  margin-top: 0;
  border: 3px solid transparent;
  overflow: visible;
}
.gallery-card .profile-img { border-radius: 20px; }


.gallery-caption {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.gallery-index {
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .55;
}
.is-bonus .gallery-index { color: var(--brand-orange); opacity: 1; font-weight: 600; }
.gallery-name {
  font-family: Knockout, Impact, sans-serif;
  font-size: 1.3rem;
  line-height: 1.15;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.gallery-address {
  font-size: .78rem;
  letter-spacing: .02em;
  opacity: .7;
}
/* Uloga na ruti (prva / zadnja / bonus lokacija) - jedini podatak na kartici
   koji nije naziv i adresa, pa ide u brand narancastu da se izdvoji. */
.gallery-role {
  margin-top: .25rem;
  color: var(--brand-orange);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.25;
}
.gallery-show {
  margin-top: .2rem;
  font-size: .78rem;
  line-height: 1.35;
  opacity: .85;
}

/* Galerija bez fotografije: prazan okvir u tamnoj bordo, isti oblik i omjer
   kao ostale kartice, da red ne poskoci. */
.gallery-card .profile-img.is-empty {
  width: 100%;
  height: 100%;
  background: var(--ink);
  border-radius: 20px;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-card { opacity: 1; transform: none; transition: none; }
  .gallery-card .profile-img img { transition: none; }
}

/* ---------- Kako igrati: dugi hrvatski nazivi ---------- */
.services-list-child-left h3.text-left,
.services-list-child-right h3.text-left {
  font-size: clamp(1.6rem, 4.2vw, 4rem);
  line-height: .9;
  max-width: 70%;
}

/* ---------- Kako igrati: opis obilaska ----------
   Prati isti prekidac gradova kao popis galerija (js/reli.js, selectCity).
   Puna sirina sekcije, poravnat s 2rem paddingom redaka "Igraj & osvoji"
   iznad. Sekcija je roza (#ffb4c9), pa tekst ide u tamnu bordo. */
.play-desc {
  width: 100%;
  margin-top: 5rem;
  padding: 0 2rem 1rem;
  color: var(--ink);
}
.play-desc-body[hidden] { display: none; }

/* Instrument Serif, umjetno podebljan.
   Knockout se ne moze stanjiti: datoteka je jedan rez (Knockout HTF70 Full
   Welterweight, usWeightClass 500, bez fvar osi), a tanji "Lightweight" je
   zaseban licencirani font kojeg u projektu nemamo.
   Instrument Serif s Google Fontsa dolazi samo u 400 (ital@0;1, bez wght osi),
   pa debljina ide preko -webkit-text-stroke: potez se zadeblja jednoliko na
   sve strane i ne mijenja sirinu slova. font-weight: 700 bi dao sinteticki
   bold - preglednik razmaze glif vodoravno, sto je mutnije i nejednako po
   preglednicima. Vrijednost stroka je jedini regulator debljine. */
.play-desc p {
  margin: 0 0 1rem;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.1vw, 2.3rem);
  line-height: 1.4;
  letter-spacing: .035em;
  -webkit-text-stroke: .5px currentColor;
}

/* Datum, vrijeme i grad ispod teksta - jedini podatak koji kaze na koji se
   grad opis odnosi, jer je prekidac gore uz popis galerija. */
.play-desc-meta {
  margin: 2rem 0 0;
  font-size: clamp(2rem, 4vw, 2.9rem);
  line-height: 1.15;
  letter-spacing: .035em;
}
.play-desc-meta span { opacity: .4; padding: 0 .35rem; }

@media screen and (max-width: 767px) {
  .play-desc { margin-top: 3.5rem; padding: 0 1.2rem 1rem; }
  .play-desc p { font-size: 1.45rem; line-height: 1.38; }
  /* na manjem stupnju isti strok izgleda deblji */
  .play-desc p { -webkit-text-stroke-width: .35px; }
  .play-desc-meta { font-size: 1.75rem; margin-top: 1.6rem; }
}

/* ---------- Kako igrati: na dodir nije klikabilno ----------
   Redovi su u templateu cursor:pointer, imaju :hover pozadinu i IX3
   mouseenter/mouseleave interakciju (i-c23d9e09 / i-450d3b63). Na dodir tap
   upali hover i on ostane zalijepljen dok se ne tapne drugdje, a red nikamo
   ne vodi - pa izgleda kao da si nesto pokvario.

   pointer-events: none gasi i hover i IX3 trigger u korijenu (dogadaj se ne
   generira). Dodir prolazi dalje pa skrolanje preko sekcije i dalje radi.
   Vezano uz mogucnost hovera, ne uz sirinu ekrana: tablet sa 1024px isto
   nema hover. */
@media (hover: none) {
  .services-list-child-left,
  .services-list-child-right {
    cursor: default;
    pointer-events: none;
  }
}

/* Element koji CSS i IX3 vec ciljaju, ali ga u templateu nije bilo u markupu */
.services-whipe {
  position: absolute;
  inset: auto 0 0 0;
  height: 0%;
  background-color: var(--ink);
  pointer-events: none;
}

/* ---------- CTA umjesto forme ---------- */
.cta-lead {
  margin: 0 0 .8rem;
  text-align: center;
  color: var(--lime);
}
a.submit {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  letter-spacing: .08em;
  font-weight: 600;
  transition: background-color .2s ease, transform .2s ease;
}
a.submit:hover { background-color: var(--pink); transform: translateY(-2px); }

/* Template ima fiksnih 60vh; ovdje panel nosi i logotipe partnera. */
.cta-parent {
  height: auto;
  min-height: 60vh;
  padding: 2.5rem 1rem 4.5rem;
}

/* ---------- Partneri ---------- */
/* Natpis "Partneri" je izbacen - iz logotipa je ocito sto su. Gornji
   razmak preuzima ono sto je prije davao natpis (1.8rem + 1rem ispod njega). */
.partners {
  width: 100%;
  margin: 2.6rem 0 0;
  text-align: center;
}
/* Maska: traka klizi ispod nje, rubovi se stapaju s podlogom. */
.partners-marquee {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.partners-track {
  display: flex;
  align-items: center;
  gap: 4rem;
  width: max-content;
  will-change: transform;
}
/* Omjeri logotipa idu od 0.87 (Ministarstvo, gotovo kvadratno) do 7.50
   (Erste Urbanka, vrlo siroko). Na fiksnoj visini uski logotip ispadne sitan,
   a siroki golem - zato svaki dobiva isti okvir i skalira se unutar njega. */
.partners-track img {
  width: 10rem;
  height: 4.5rem;
  max-width: none;
  object-fit: contain;
  flex-shrink: 0;
}

@media screen and (max-width: 767px) {
  .partners { margin-top: 1.4rem; }
  .partners-track { gap: 2rem; }
  .partners-track img { width: 7.5rem; height: 3.4rem; }
}

/* ---------- Footer ---------- */
.bar-footer .sub-title { font-size: .8rem; letter-spacing: .04em; }
.bar-footer a.text-yellow + a.text-yellow { margin-left: .9rem; }

/* Mobitel: cta-parent ima puno vise sadrzaja nego u templateu */
@media screen and (max-width: 767px) {
  .partners { margin-top: 1rem; padding: .7rem 1rem .8rem; }
  .partners-row img { height: 1.2rem; max-width: 5rem; }
}

/* ============================================================
   MOBILNA VERZIJA
   Template na uskim ekranima gasi .circle-pop, .paw-left/right i
   .whipe-section-*, pa nekoliko stvari koje na desktopu rade
   ovdje treba rijesiti drukcije.
   ============================================================ */


@media screen and (max-width: 767px) {
  /* Gumb izbornika je fiksiran na vrh sredine i na uskom ekranu stalno
     prelazi preko naslova. .menu-parent ostaje 20rem sirok (padajuci
     izbornik je width:100% od njega), samo se gumb gura na desni rub. */
  .menu-parent { justify-content: flex-end; }

  /* Datumi su najvazniji podatak, a na .intro-title (17vw) "16.10."
     zauzme jedva 100px od 375. */
  #program .intro-title { font-size: 28vw; }

  /* .text-wrap-bold je u templateu 5rem (~75px) - necitljivo. */
  .text-wrap-bold { width: 11rem; font-size: 4.2vw; }

  /* .whipe-section-btm je ovdje display:none, pa mu ne treba mjesta. */
  /* donji prostor nosi trokut koji uvodi u iducu sekciju */
  #galerije.section-sticky-yellow { padding: 4rem 0 16rem; }

  /* Dodirne mete: linkovi izbornika su bili 37x15 px. */
  .nav-link-parent {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    width: 100%;
  }
  .bar-footer a.text-yellow {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 .2rem;
  }
}

@media screen and (max-width: 620px) {
  /* Knockout je siri od proslogodisnjeg fonta: "galerijama" u Instrument Serifu
     na templateovih 24vw izlazi 20px izvan kadra. */
  .intro-title.hero { font-size: 21.5vw; }

  /* Jedna kartica po redu, veca slika. Kartica je uza od stupca da se
     nit vidi s obje strane, i naizmjenicno je pomaknuta lijevo/desno
     kako bi nit prolazila izmedu njih. */
  .gallery-pane {
    grid-template-columns: 1fr;
    gap: 2.2rem 0;
  }
  .gallery-pane { gap: 2.8rem 0; }
  .gallery-card {
    gap: .6rem;
    width: 88%;
    justify-self: center;
  }
  /* Natpisi su na 15.1px rootu bili 9.7px / 11.8px. */
  .gallery-index   { font-size: .72rem; }
  .gallery-name    { font-size: 1.05rem; }
  .gallery-address { font-size: .85rem; }

  .city-switch { width: 100%; }
  .city-btn { font-size: 1.5rem; padding: .95rem .5rem; }
  .city-date { font-size: .82rem; margin-bottom: 1.8rem; }
}

/* ============================================================
   ARHIVA (arhiva.html)
   Obican popis u jednom stupcu: prazan widget + natpis, grupirano
   po godinama. Bez niti - .gallery-thread na stranici ne postoji,
   pa js/reli.js odmah odustane i ostaje samo otkrivanje kartica.
   ============================================================ */

/* Template daje sekciji 300vh sa sticky djetetom (scroll-distance za tri
   kartice); popis od 16 trazi normalan tok. */
#arhiva.section-sticky-yellow {
  height: auto;
  padding: 8rem 0 9rem;
}
#arhiva .sticky-parent {
  position: static;
  flex-flow: column nowrap;
  align-items: center;
  height: auto;
  gap: 0;
  padding: 0 clamp(1rem, 4vw, 4rem);
  /* Template drzi overflow: hidden iznad 991px, sto ovdje nema sto skrivati
     ni cemu koristiti - popis tece normalno. */
  overflow: visible;
}
#arhiva .intro-text-three {
  position: relative;
  margin-bottom: 1.2rem;
}
/* Periwinkle podnaslov na limeti nije citljiv - isto kao u #galerije. */
#arhiva .archive-sub {
  color: var(--ink);
  max-width: 32rem;
}

/* Ulaz naslova arhive.
   IX3-ov ani="scroll-title" ovdje ne valja: to je continuous
   SCROLLING_IN_VIEW timeline cij je napredak vezan uz prolazak elementa kroz
   kadar. Na index.html je ta sekcija na sredini stranice pa je timeline vec u
   tijeku kad do nje dodes; ovdje je naslov na vrhu, na scrollu 0 stoji na
   progresu 0 (= skriven) i pojavi se tek kad ga prodes. Zato obican CSS
   ulaz na load, sa stepenicom po elementu. */
.archive-in {
  animation: archive-in .75s cubic-bezier(.16, 1, .3, 1) .08s both;
}
.archive-in-2 { animation-delay: .2s; }
.archive-in-3 { animation-delay: .34s; }

@keyframes archive-in {
  from { opacity: 0; transform: translateY(1.4rem); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .archive-in { animation: none; }
}

.archive-lead {
  margin: 0 0 3.5rem;
  color: var(--ink);
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
}

/* U mrezu ide GODINA kao cjelina, ne pojedini reli: grupa nosi svoju
   oznaku i ispod nje jedan ili dva relija te godine. Razmak izmedu redova
   mreze je razmak izmedu godina, pa je i dalje jasno veci od razmaka
   unutar grupe. */
.gallery-pane.is-archive {
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem 2.5rem;
  max-width: 62rem;
  margin: 0 auto;
}
.archive-group {
  display: flex;
  flex-flow: column;
  gap: 1.6rem;
}
/* Redak je samo tekst - .gallery-card ostaje klasa zbog otkrivanja u
   js/reli.js (opacity + translateY na scroll). */
.gallery-pane.is-archive .gallery-card {
  width: 100%;
  gap: .1rem;
}

.archive-year-head {
  display: flex;
  justify-content: flex-start;
  margin-bottom: .2rem;
}
/* Roza na limeti je preslab par za tekst, pa roza ide na tamnu bordo
   pilulu - godina je roza, a citljiva. */
.archive-year {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .35rem 1.4rem .5rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--pink);
  font-family: Knockout, Impact, sans-serif;
  font-size: clamp(2.8rem, 8vw, 3.8rem);
  line-height: 1;
  letter-spacing: 2px;
}

/* Grad u Knockoutu (isti rez kao godina), datum u Poppinsu ispod njega -
   isti par na svih 16 redaka. */
.archive-city {
  color: var(--ink);
  font-family: Knockout, Impact, sans-serif;
  font-size: 1.9rem;
  line-height: 1.05;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.archive-name {
  color: var(--ink);
  font-size: .95rem;
  letter-spacing: .02em;
}
.archive-date {
  color: var(--ink);
  font-size: .88rem;
  letter-spacing: .02em;
  opacity: .6;
}

@media screen and (max-width: 991px) {
  .gallery-pane.is-archive { grid-template-columns: repeat(2, 1fr); max-width: 42rem; }
}

/* Mobitel: jedan stupac i sve centrirano - u jednom stupcu lijevo poravnat
   tekst uz siroke bijele margine izgleda kao da je zapeo uz rub. */
@media screen and (max-width: 620px) {
  #arhiva.section-sticky-yellow { padding: 6rem 0 5rem; }
  .archive-lead { font-size: .82rem; margin-bottom: 2.6rem; }
  .gallery-pane.is-archive {
    grid-template-columns: 1fr;
    gap: 3.2rem 0;
    max-width: 24rem;
    text-align: center;
  }
  .archive-year-head { justify-content: center; }
  .archive-city { font-size: 1.65rem; }
  .archive-name { font-size: .92rem; }
  .archive-date { font-size: .85rem; }
}

/* ============================================================
   USKORO (/prijava)
   Rezervirano mjesto za igru. Isti okvir kao #arhiva - template
   sekciji daje 300vh sa sticky djetetom, a ovdje treba obican tok.
   ============================================================ */
#uskoro.section-sticky-yellow {
  height: auto;
  min-height: 78vh;
  padding: 10rem 0 8rem;
}
#uskoro .sticky-parent {
  position: static;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  height: auto;
  gap: 0;
  padding: 0 clamp(1rem, 4vw, 4rem);
  overflow: visible;
}
#uskoro .intro-text-three {
  position: relative;
  margin-bottom: 1.2rem;
}
#uskoro .archive-sub {
  color: var(--ink);
  max-width: 32rem;
}
.uskoro-text {
  max-width: 34rem;
  margin: 0;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
}
.uskoro-text a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: .18em;
}
.uskoro-text a:hover { color: var(--brand-orange); }

@media screen and (max-width: 620px) {
  #uskoro.section-sticky-yellow { padding: 7rem 0 5rem; }
  .uskoro-text { font-size: .92rem; }
}