/* --------------------------------------------------------------------------
   Fontovi (self-hosted, bez eksternih servisa)
   Big Shoulders (naslovi i oznake) i Metropolis (tekst, dogradjen sa „ i ‚)
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Big Shoulders";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/big-shoulders-var.woff2) format("woff2-variations");
}
@font-face{
  font-family:"Metropolis";font-style:normal;font-weight:300;font-display:swap;
  src:url(../fonts/metropolis-light.woff2) format("woff2");
}
@font-face{
  font-family:"Metropolis";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/metropolis-regular.woff2) format("woff2");
}
@font-face{
  font-family:"Metropolis";font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/metropolis-medium.woff2) format("woff2");
}

:root{
  /* Boje brenda */
  --zelena-900:#0F1D0C;
  --zelena-800:#16290F;
  --zelena-700:#1B3317;
  --zelena-600:#23421E;   /* zvanicna zelena */
  --zelena-500:#2E5527;
  --zelena-400:#436B3B;

  --krem-50:#FBF8F1;      /* glavna svetla povrsina */
  --krem-100:#F4EEE1;
  --krem-200:#E9E0CD;     /* razdelne linije na svetlom */
  --krem-300:#D8CCB2;

  --tinta:#191918;        /* zvanicna tamna */
  --tinta-70:#4A4A46;
  --tinta-55:#6B6B64;

  --bordo:#671E1C;        /* sporedna boja brenda */
  --bordo-svetli:#8B2B28;
  --bordo-tinta:rgba(103,30,28,.09);

  /* Semanticki tokeni */
  --bg:var(--krem-50);
  --bg-alt:var(--krem-100);
  --tekst:var(--tinta);
  --tekst-tiho:var(--tinta-70);
  --tekst-tise:var(--tinta-55);
  --linija:var(--krem-200);
  --akcent:var(--bordo);

  /* Tipografija */
  --font-display:"Big Shoulders",'Arial Narrow','Helvetica Neue Condensed',sans-serif;
  --font-tekst:"Metropolis",'Helvetica Neue',Helvetica,Arial,sans-serif;

  --fs-display:clamp(2.6rem,8vw,6.6rem);
  --fs-h1:clamp(2.3rem,6vw,4.4rem);
  --fs-h2:clamp(1.9rem,3.8vw,3.1rem);
  --fs-h3:clamp(1.3rem,2vw,1.75rem);
  --fs-lead:clamp(1.125rem,1.45vw,1.375rem);
  --fs-body:1.125rem;
  --fs-sm:1rem;
  --fs-xs:0.875rem;

  /* Ritam */
  --s-1:0.25rem; --s-2:0.5rem;  --s-3:0.75rem; --s-4:1rem;
  --s-5:1.5rem;  --s-6:2rem;    --s-7:3rem;    --s-8:4rem;
  --s-9:6rem;    --s-10:8rem;

  --sirina:1280px;
  --sirina-tekst:68ch;
  --gutter:clamp(1rem,4vw,3rem);

  /* Gradijenti: svi izvedeni iz zvanicne zelene, samo tonski pomeraj */
  --grad-zeleno:linear-gradient(180deg,var(--zelena-500) 0%,var(--zelena-600) 54%,var(--zelena-700) 100%);
  --grad-zeleno-hover:linear-gradient(180deg,#386330 0%,var(--zelena-500) 54%,var(--zelena-600) 100%);
  --grad-krem:linear-gradient(180deg,#FFFDF7 0%,var(--krem-50) 56%,var(--krem-100) 100%);
  --grad-krem-hover:linear-gradient(180deg,#fff 0%,#FFFDF7 56%,var(--krem-50) 100%);
  --grad-okvir:linear-gradient(165deg,var(--zelena-700) 0%,var(--zelena-900) 100%);

  /* Reljef: gornji odsjaj + donja senka + spoljna senka */
  --reljef-zeleno:inset 0 1px 0 rgba(251,248,241,.18),inset 0 -1.5px 0 rgba(8,18,6,.32),
                  0 1px 2px rgba(11,20,10,.3),0 10px 22px -12px rgba(11,20,10,.62);
  --reljef-zeleno-hover:inset 0 1px 0 rgba(251,248,241,.26),inset 0 -1.5px 0 rgba(8,18,6,.3),
                  0 2px 4px rgba(11,20,10,.28),0 16px 30px -14px rgba(11,20,10,.68);
  --reljef-krem:inset 0 1px 0 #fff,inset 0 -1.5px 0 rgba(35,66,30,.16),
                  0 1px 2px rgba(11,20,10,.28),0 10px 22px -12px rgba(11,20,10,.55);
  --reljef-krem-hover:inset 0 1px 0 #fff,inset 0 -1.5px 0 rgba(35,66,30,.14),
                  0 2px 4px rgba(11,20,10,.26),0 16px 30px -14px rgba(11,20,10,.6);

  --r-s:3px; --r-m:7px; --r-l:10px;
  --brzo:160ms; --sporo:320ms;
  --lako:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--tekst);
  font-family:var(--font-tekst);
  font-size:var(--fs-body);
  line-height:1.72;
  font-synthesis-weight:none;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  text-transform:uppercase;     /* Big Shoulders je rezan za verzal */
  line-height:0.98;             /* verzal nema donje produzetke, pa prored moze zbijeno */
  letter-spacing:0.004em;
  margin:0;
  text-wrap:balance;
}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2.5px solid var(--bordo-svetli);outline-offset:3px;border-radius:2px}
.na-zelenom :focus-visible,.zelena-sekcija :focus-visible{outline-color:#F3D9CF}

.preskoci{
  position:absolute;left:var(--s-4);top:-60px;z-index:200;
  background:var(--krem-50);color:var(--zelena-600);
  padding:.7rem 1.1rem;border-radius:var(--r-m);font-weight:600;
  text-decoration:none;transition:top var(--brzo) var(--lako);
}
.preskoci:focus{top:var(--s-4)}

/* ---------- Layout ---------- */
.omot{width:100%;max-width:var(--sirina);margin-inline:auto;padding-inline:var(--gutter)}
.omot--usko{max-width:920px}
.sekcija{padding-block:clamp(3.25rem,7vw,6rem)}
.sekcija--tesna{padding-block:clamp(2.5rem,5vw,4rem)}
.zelena-sekcija{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(168deg,var(--zelena-700) 0%,var(--zelena-600) 46%,#1E3A19 100%);
  color:var(--krem-50);
}
/* Dva mekana tonska polja koja se vrlo sporo pomeraju. Amplituda je mala,
   pa se ne primecuje kao animacija nego kao da povrsina ima dubinu. */
.zelena-sekcija::before,.glava-predstave::before{
  content:"";position:absolute;inset:-22%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(56% 50% at 26% 14%,rgba(72,116,60,.30),transparent 66%),
    radial-gradient(52% 46% at 84% 88%,rgba(12,32,10,.38),transparent 64%);
  animation:disanje 34s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes disanje{
  from{transform:translate3d(-2.5%,-1.5%,0) scale(1.02)}
  to{transform:translate3d(2.5%,1.5%,0) scale(1.09)}
}
.zelena-sekcija h1,.zelena-sekcija h2,.zelena-sekcija h3{color:var(--krem-50)}
.krem-sekcija{background:linear-gradient(180deg,var(--krem-100) 0%,#F7F2E7 58%,var(--krem-100) 100%)}

.nadnaslov{
  font-family:var(--font-display);
  font-size:var(--fs-xs);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--tekst-tise);
  margin:0 0 var(--s-3);
}
.zelena-sekcija .nadnaslov{color:rgba(251,248,241,.72)}
.zaglavlje-sekcije{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--s-4);margin-bottom:var(--s-6);
  padding-bottom:var(--s-4);border-bottom:1px solid var(--linija);
}
.zelena-sekcija .zaglavlje-sekcije{border-bottom-color:rgba(251,248,241,.2)}
.zaglavlje-sekcije h2{font-size:var(--fs-h2)}
.uvodni-tekst{font-size:var(--fs-lead);line-height:1.6;max-width:62ch;color:var(--tekst-tiho)}
.zelena-sekcija .uvodni-tekst{color:rgba(251,248,241,.85)}

/* ---------- Dugmici ---------- */
.dugme{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:48px;padding:.85rem 1.6rem;
  font-family:var(--font-tekst);font-size:var(--fs-sm);font-weight:600;
  letter-spacing:.02em;text-decoration:none;cursor:pointer;
  border:1.5px solid transparent;border-radius:var(--r-m);
  transition:background var(--brzo) var(--lako),color var(--brzo) var(--lako),
             border-color var(--brzo) var(--lako),transform var(--brzo) var(--lako);
}
.dugme{position:relative;overflow:hidden;isolation:isolate;
  transition:background var(--brzo) var(--lako),color var(--brzo) var(--lako),
             border-color var(--brzo) var(--lako),transform var(--brzo) var(--lako),
             box-shadow var(--brzo) var(--lako);}
/* blagi odsjaj po gornjoj ivici, daje polu-3D osecaj bez sjaja */
.dugme--puno::before,.dugme--zeleno::before{
  content:"";position:absolute;inset:0 0 auto;height:52%;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.16),transparent);
  pointer-events:none;
}
.dugme--zeleno::before{background:linear-gradient(180deg,rgba(251,248,241,.14),transparent)}
.dugme:active{transform:translateY(1px)}

.dugme--puno{background:var(--grad-krem);color:var(--zelena-600);box-shadow:var(--reljef-krem)}
.dugme--puno:hover{background:var(--grad-krem-hover);box-shadow:var(--reljef-krem-hover);transform:translateY(-1px)}
.dugme--puno:active{box-shadow:var(--reljef-krem);transform:translateY(1px)}

.dugme--zeleno{background:var(--grad-zeleno);color:var(--krem-50);box-shadow:var(--reljef-zeleno)}
.dugme--zeleno:hover{background:var(--grad-zeleno-hover);box-shadow:var(--reljef-zeleno-hover);transform:translateY(-1px)}
.dugme--zeleno:active{box-shadow:var(--reljef-zeleno);transform:translateY(1px)}

.dugme--obris-svetli{
  border-color:rgba(251,248,241,.5);color:var(--krem-50);
  background:linear-gradient(180deg,rgba(251,248,241,.10),rgba(251,248,241,.02));
  box-shadow:inset 0 1px 0 rgba(251,248,241,.14);
}
.dugme--obris-svetli:hover{
  border-color:var(--krem-50);
  background:linear-gradient(180deg,rgba(251,248,241,.22),rgba(251,248,241,.08));
  box-shadow:inset 0 1px 0 rgba(251,248,241,.2),0 10px 22px -14px rgba(0,0,0,.6);
  transform:translateY(-1px);
}
.dugme--obris{
  border-color:rgba(35,66,30,.45);color:var(--zelena-600);
  background:linear-gradient(180deg,rgba(35,66,30,.05),rgba(35,66,30,.01));
}
.dugme--obris:hover{
  border-color:transparent;background:var(--grad-zeleno);color:var(--krem-50);
  box-shadow:var(--reljef-zeleno);transform:translateY(-1px);
}
.dugme .strelica{transition:transform var(--brzo) var(--lako)}
.dugme:hover .strelica{transform:translateX(3px)}

.tekst-link{
  display:inline-flex;align-items:center;gap:.45rem;
  font-weight:600;font-size:var(--fs-sm);text-decoration:none;
  color:var(--bordo);
  min-height:44px;
}
.tekst-link span:not(.strelica),.tekst-link{position:relative}
.tekst-link::after{content:"";position:absolute;left:0;right:0;bottom:12px;height:1.5px;background:currentColor}
.tekst-link:hover{color:var(--bordo-svetli)}
.zelena-sekcija .tekst-link{color:var(--krem-50)}

.znacka{
  display:inline-flex;align-items:center;
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  padding:.35rem .7rem;border:0;border-radius:2px;
  background:rgba(35,66,30,.08);color:var(--tekst-tiho);white-space:nowrap;
}
.znacka--zelena{border:0;color:rgba(251,248,241,.92);background:rgba(251,248,241,.16)}
.znacka--bordo{border:0;color:var(--bordo);background:var(--bordo-tinta)}

/* ---------- Navigacija ---------- */
.zaglavlje{
  position:sticky;top:0;z-index:100;
  background:linear-gradient(103deg,#1C3517 0%,#24431E 46%,#1A3215 100%);
  border-bottom:1px solid rgba(251,248,241,.16);
  box-shadow:0 1px 0 rgba(8,18,6,.35),0 8px 24px -18px rgba(8,18,6,.9);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
  min-height:74px;
}
.nav__logo{display:flex;align-items:center;padding:.5rem 0;text-decoration:none;flex:0 0 auto}
.nav__logo img{height:34px;width:auto}
@media (min-width:768px){.nav__logo img{height:40px}}
.nav__linkovi{display:none}
@media (min-width:900px){
  .nav__linkovi{display:flex;align-items:center;gap:var(--s-2)}
  .nav__prekidac{display:none}
}
.nav__link{
  position:relative;display:inline-flex;align-items:center;
  min-height:44px;padding:.5rem .9rem;
  color:rgba(251,248,241,.85);text-decoration:none;
  font-size:var(--fs-sm);font-weight:500;letter-spacing:.02em;
  border-radius:var(--r-s);transition:color var(--brzo) var(--lako);
}
.nav__link:hover{color:var(--krem-50)}
.nav__link::after{
  content:"";position:absolute;left:.9rem;right:.9rem;bottom:.55rem;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--brzo) var(--lako);
}
.nav__link:hover::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{color:var(--krem-50);font-weight:600}
.nav__link[aria-current="page"]::after{transform:scaleX(1);height:2px}

.nav__prekidac{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-width:48px;min-height:48px;padding:.5rem .8rem;
  background:transparent;border:1.5px solid rgba(251,248,241,.4);
  border-radius:var(--r-m);color:var(--krem-50);cursor:pointer;
  font-family:var(--font-tekst);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
}
.nav__prekidac:hover{border-color:var(--krem-50)}
@media (min-width:900px){.nav__prekidac{display:none}}
.burger{display:block;width:18px;height:12px;position:relative}
.burger span{position:absolute;left:0;right:0;height:1.8px;background:currentColor;transition:transform var(--brzo) var(--lako),opacity var(--brzo)}
.burger span:nth-child(1){top:0}
.burger span:nth-child(2){top:5px}
.burger span:nth-child(3){top:10px}
[aria-expanded="true"] .burger span:nth-child(1){transform:translateY(5px) rotate(45deg)}
[aria-expanded="true"] .burger span:nth-child(2){opacity:0}
[aria-expanded="true"] .burger span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.meni{
  display:none;background:linear-gradient(180deg,#1F3A1A,var(--zelena-700));
  border-bottom:1px solid rgba(251,248,241,.14);
}
.meni[data-otvoren="true"]{display:block}
@media (min-width:900px){.meni{display:none !important}}
.meni ul{padding:var(--s-3) 0 var(--s-5)}
.meni a{
  display:flex;align-items:center;min-height:56px;
  padding:.5rem var(--gutter);
  color:rgba(251,248,241,.9);text-decoration:none;
  font-family:var(--font-display);font-size:1.5rem;font-weight:700;
  border-bottom:1px solid rgba(251,248,241,.1);
}
.meni a[aria-current="page"]{color:var(--tinta)}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--zelena-900);color:var(--krem-50);isolation:isolate}
.hero__slika{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__slika img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero__preliv{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to right,rgba(10,20,8,.82) 0%,rgba(10,20,8,.62) 34%,rgba(10,20,8,.14) 66%,rgba(10,20,8,.02) 100%),
    linear-gradient(to top,rgba(10,20,8,.80) 0%,rgba(10,20,8,.46) 26%,rgba(10,20,8,.10) 58%,rgba(10,20,8,.38) 100%);
}
.hero__sadrzaj{
  position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:min(86vh,760px);
  padding-block:clamp(3.5rem,10vw,6rem);
}
.hero__oznaka{
  display:inline-flex;align-items:center;
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(251,248,241,.8);margin-bottom:var(--s-4);
}
.hero h1{
  font-size:var(--fs-display);
  letter-spacing:0;
  line-height:0.92;
  max-width:19ch;
  margin-bottom:var(--s-5);
  text-shadow:0 2px 24px rgba(0,0,0,.45);
}
.hero__lead{
  font-size:var(--fs-lead);line-height:1.6;
  max-width:52ch;color:rgba(251,248,241,.9);
  margin-bottom:var(--s-6);
}
.hero__akcije{display:flex;flex-wrap:wrap;gap:var(--s-3)}
/* Telefon: fotografija dobija svoj kadar, tekst ide ispod na zelenoj povrsini,
   tako da su i slika i poruka potpuno citljivi. */
@media (max-width:700px){
  .hero{background:var(--zelena-600)}
  .hero__slika{position:relative;inset:auto;z-index:0;aspect-ratio:4 / 5;max-height:62vh}
  .hero__slika img{object-position:center 40%}
  .hero__preliv{display:none}
  .hero__sadrzaj{min-height:auto;padding-block:clamp(1.75rem,7vw,2.5rem) clamp(2.5rem,9vw,3.5rem)}
  .hero h1{max-width:100%;text-shadow:none}
  .hero__akcije .dugme{flex:1 1 100%}
}

/* ---------- Kartica predstave (mreza) ---------- */
.mreza-predstava{
  display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
.karta{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;group:card}
.karta__plakat{
  position:relative;background:var(--grad-okvir);
  border:1px solid var(--linija);border-radius:var(--r-m);
  overflow:hidden;margin-bottom:var(--s-4);
  aspect-ratio:4 / 5;
  display:flex;align-items:center;justify-content:center;
}
.zelena-sekcija .karta__plakat{border-color:rgba(251,248,241,.18)}
.karta__plakat img{
  width:100%;height:100%;object-fit:contain;
  transition:transform var(--sporo) var(--lako);
}
.karta:hover .karta__plakat img{transform:scale(1.025)}
.karta__meta{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-2)}
.karta h3{font-size:var(--fs-h3);margin-bottom:var(--s-2)}
.karta:hover h3{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.karta__uvod{font-size:var(--fs-sm);color:var(--tekst-tiho);line-height:1.55;margin-bottom:var(--s-4)}
.zelena-sekcija .karta__uvod{color:rgba(251,248,241,.78)}
.karta__akcija{
  margin-top:auto;display:inline-flex;align-items:center;gap:.45rem;
  font-size:var(--fs-sm);font-weight:600;color:var(--bordo);
}
.zelena-sekcija .karta__akcija{color:rgba(251,248,241,.9)}

/* ---------- Repertoar: lista ---------- */
.lista-repertoara{border-top:1px solid var(--linija)}
.red{
  display:grid;gap:var(--s-5);
  grid-template-columns:1fr;
  padding-block:clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--linija);
}
@media (min-width:760px){
  .red{grid-template-columns:minmax(200px,264px) 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
}
.red__plakat{
  background:var(--grad-okvir);border:1px solid var(--linija);border-radius:var(--r-m);
  box-shadow:0 12px 28px -20px rgba(11,20,10,.7);
  overflow:hidden;aspect-ratio:4 / 5;display:flex;align-items:center;justify-content:center;
}
.red__plakat img{width:100%;height:100%;object-fit:contain}
.red__glava{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);margin-bottom:var(--s-3)}
.red h3{font-size:clamp(1.5rem,3vw,2.15rem);margin-bottom:var(--s-3)}
.red h3 a{text-decoration:none}
.red h3 a:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.red__podnaslov{font-size:var(--fs-sm);color:var(--tekst-tise);margin:-.4rem 0 var(--s-3)}
.red__uvod{color:var(--tekst-tiho);max-width:58ch;margin-bottom:var(--s-5)}
.red__detalji{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6);
  padding-block:var(--s-4);margin-bottom:var(--s-5);
  border-block:1px solid var(--linija);
}
.detalj{min-width:150px}
.detalj dt{font-size:var(--fs-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tekst-tise);margin-bottom:.2rem}
.detalj dd{margin:0;font-size:var(--fs-sm);font-weight:500}
.detalj dd.nedostaje{color:var(--tekst-tise);font-weight:400;font-style:italic}
.red__akcije{display:flex;flex-wrap:wrap;gap:var(--s-3)}
@media (max-width:480px){.red__akcije .dugme{flex:1 1 100%}}

/* ---------- Stranica predstave ---------- */
.glava-predstave{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(168deg,var(--zelena-700) 0%,var(--zelena-600) 48%,#1E3A19 100%);
  color:var(--krem-50);padding-block:clamp(2.5rem,6vw,4.5rem);
}
/* Kadar iz predstave kao jedva vidljiv sloj u zaglavlju. mix-blend-mode:luminosity
   uzima samo svetlinu fotografije, a ton ostaje zelen, pa se ne bije sa identitetom.
   Maska ga gasi prema dnu da spoj sa sekcijom ispod ostane cist. */
.glava-predstave__pozadina{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.glava-predstave__pozadina img{
  width:100%;height:100%;object-fit:cover;
  opacity:.13;mix-blend-mode:luminosity;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.7) 55%,rgba(0,0,0,.2) 84%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.7) 55%,rgba(0,0,0,.2) 84%,transparent 100%);
}
/* Zeleni zastor preko fotografije: levo, gde stoji tekst, gotovo pun,
   desno popusta, pa se kadar nazire ka ivici a tekst ostaje na tamnoj podlozi. */
.glava-predstave__pozadina::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(95deg,rgba(18,36,15,.82) 0%,rgba(18,36,15,.66) 42%,rgba(18,36,15,.34) 76%,rgba(18,36,15,.2) 100%);
}
@media (max-width:700px){
  .glava-predstave__pozadina img{opacity:.12}
  .glava-predstave__pozadina::after{background:linear-gradient(180deg,rgba(18,36,15,.42) 0%,rgba(18,36,15,.7) 62%,rgba(18,36,15,.8) 100%)}
}

.glava-predstave__grid{display:grid;gap:clamp(2rem,4vw,3.5rem);grid-template-columns:1fr;position:relative}
@media (min-width:820px){
  .glava-predstave__grid{grid-template-columns:minmax(260px,340px) 1fr;align-items:start}
}
.glava-predstave .plakat-okvir{
  background:var(--grad-okvir);border:1px solid rgba(251,248,241,.22);
  border-radius:var(--r-m);overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(251,248,241,.14),0 18px 40px -24px rgba(8,18,6,.9);
}
.glava-predstave .plakat-okvir img{width:100%;height:auto}
.glava-predstave h1{font-size:var(--fs-h1);margin-bottom:var(--s-4);letter-spacing:-0.02em}
.glava-predstave__podnaslov{font-size:var(--fs-lead);color:rgba(251,248,241,.82);margin-bottom:var(--s-5);max-width:48ch}
.glava-predstave__znacke{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-5)}
.glava-predstave__akcije{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
@media (max-width:480px){.glava-predstave__akcije .dugme{flex:1 1 100%}}
.putanja{font-size:var(--fs-xs);letter-spacing:.06em;color:rgba(251,248,241,.72);margin-bottom:var(--s-5)}
.putanja a{text-decoration:none;border-bottom:1px solid rgba(251,248,241,.4)}
.putanja a:hover{color:#fff;border-bottom-color:#fff}
.putanja span{margin-inline:.5rem}

.tekst-blok{max-width:var(--sirina-tekst)}
.tekst-blok p{font-size:var(--fs-lead);line-height:1.68;margin-bottom:1.1em}
.tekst-blok p:first-child{font-family:var(--font-tekst);font-weight:300;font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.42}

.dve-kolone{display:grid;gap:clamp(2rem,4vw,4rem);grid-template-columns:1fr}
@media (min-width:760px){.dve-kolone{grid-template-columns:1fr 1fr}}
.spisak-uloga li{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-3);
  padding-block:.7rem;border-bottom:1px solid var(--linija);
}
.spisak-uloga .lik{color:var(--tekst-tise);font-size:var(--fs-sm)}
.spisak-uloga .glumac{font-weight:600}
.spisak-tima li{padding-block:.7rem;border-bottom:1px solid var(--linija)}
.spisak-tima .rola{display:block;font-size:var(--fs-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tekst-tise);margin-bottom:.15rem}
.spisak-tima .imena{font-weight:500}
.fusnota{font-size:var(--fs-sm);color:var(--tekst-tise);margin-top:var(--s-4);max-width:60ch}

/* ---------- Video ---------- */
.video-okvir{
  position:relative;background:var(--grad-okvir);border-radius:var(--r-m);
  box-shadow:0 20px 44px -28px rgba(11,20,10,.8);
  overflow:hidden;aspect-ratio:16 / 9;
}
.video-okvir img,.video-okvir video{width:100%;height:100%;object-fit:cover;display:block}
.video-pusti{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--s-3);
  background:linear-gradient(to top,rgba(10,20,8,.7),rgba(10,20,8,.15));
  border:0;cursor:pointer;color:var(--krem-50);
  font-family:var(--font-tekst);font-size:var(--fs-sm);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  transition:background var(--brzo) var(--lako);
}
.video-pusti:hover{background:linear-gradient(to top,rgba(10,20,8,.6),rgba(10,20,8,.05))}
.video-pusti .krug{
  width:70px;height:70px;border-radius:50%;
  background:var(--grad-krem);color:var(--zelena-600);
  box-shadow:inset 0 1px 0 #fff,0 2px 4px rgba(11,20,10,.35),0 16px 34px -14px rgba(11,20,10,.8);
  display:grid;place-items:center;
  transition:transform var(--brzo) var(--lako);
}
.video-pusti:hover .krug{transform:scale(1.06)}
.video-pusti .krug svg{width:24px;height:24px;margin-left:3px}

/* ---------- Galerija ---------- */
.galerija{display:grid;gap:var(--s-3);grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){.galerija{grid-template-columns:repeat(3,1fr);gap:var(--s-4)}}
@media (min-width:1080px){.galerija{grid-template-columns:repeat(4,1fr)}}
.galerija button{
  padding:0;border:1px solid rgba(251,248,241,.16);background:var(--grad-okvir);
  border-radius:var(--r-s);overflow:hidden;cursor:pointer;display:block;width:100%;
}
.galerija img{width:100%;height:100%;object-fit:cover;aspect-ratio:3 / 2;transition:transform var(--sporo) var(--lako),opacity var(--brzo)}
.galerija[data-odnos="2 / 3"] img{aspect-ratio:2 / 3}
.galerija button:hover img{transform:scale(1.04);opacity:.92}

.svetlo{
  position:fixed;inset:0;z-index:300;display:none;
  background:#0B140A;
  padding:clamp(.75rem,3vw,2rem);
}
.svetlo[data-otvoren="true"]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:var(--s-3)}
.svetlo__traka{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);color:rgba(251,248,241,.8);font-size:var(--fs-sm)}
.svetlo__platno{position:relative;min-height:0;overflow:hidden}
.svetlo__platno img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:var(--r-s)}
.svetlo__dno{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
@media (max-width:560px){.svetlo__dno [data-svetlo-natpis]{display:none}}
.ikon-dugme{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-width:48px;min-height:48px;padding:.6rem 1rem;
  background:transparent;border:1.5px solid rgba(251,248,241,.4);border-radius:var(--r-m);
  color:var(--krem-50);cursor:pointer;font-family:var(--font-tekst);font-size:var(--fs-sm);font-weight:600;
}
.ikon-dugme:hover{border-color:var(--krem-50);background:rgba(251,248,241,.12)}
.ikon-dugme svg{width:18px;height:18px}

/* ---------- O nama ---------- */
.uredjeni-tekst{max-width:var(--sirina-tekst)}
.uredjeni-tekst p{font-size:var(--fs-lead);line-height:1.7;margin-bottom:1.15em}
.izdvojeno{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.6rem,4vw,2.6rem);line-height:1.2;letter-spacing:-0.015em;
  max-width:26ch;margin:0;
}
.slika-preko{position:relative}
.slika-preko img{width:100%;border-radius:var(--r-m)}
.potpis-slike{font-size:var(--fs-xs);color:var(--tekst-tise);margin-top:var(--s-3);letter-spacing:.02em}
.zelena-sekcija .potpis-slike{color:rgba(251,248,241,.6)}
.krediti{display:grid;gap:0;grid-template-columns:1fr}
.kredit{
  display:grid;gap:var(--s-4) clamp(2rem,5vw,4.5rem);grid-template-columns:1fr;
  padding-block:clamp(1.75rem,3.2vw,2.75rem);
}
@media (min-width:820px){.kredit{grid-template-columns:minmax(10rem,16rem) 1fr;align-items:baseline}}
.kredit__uloga{
  margin:0;font-family:var(--font-tekst);
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tekst-tise);
}
.kredit__imena{display:grid;gap:.5rem clamp(1.5rem,4vw,3.5rem);grid-template-columns:1fr}
@media (min-width:560px){.kredit__imena[data-siroko]{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.kredit__imena[data-siroko]{grid-template-columns:repeat(3,1fr)}}
.kredit__imena li{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.45;letter-spacing:0;
  break-inside:avoid;
}

/* ---------- Kontakt ---------- */
.kontakt-grid{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr}
@media (min-width:880px){.kontakt-grid{grid-template-columns:1fr 1fr;align-items:start}}
.kanali{border-top:1px solid var(--linija)}
.kanal{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-3);padding-block:var(--s-4);border-bottom:1px solid var(--linija)}
.kanal dt{font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tekst-tise)}
.kanal dd{margin:0;font-family:var(--font-display);font-size:clamp(1.1rem,2vw,1.5rem);font-weight:700}
.kanal dd a{text-decoration:none;border-bottom:1.5px solid var(--krem-300)}
.kanal dd a:hover{border-bottom-color:var(--bordo);color:var(--bordo)}
.kanal dd.u-pripremi{font-family:var(--font-tekst);font-size:var(--fs-sm);font-weight:500;font-style:italic;color:var(--tekst-tise)}
.napomena-karta{
  background:linear-gradient(180deg,#F8F3E9,var(--krem-100));border:1px solid var(--linija);border-left:3px solid var(--bordo);
  border-radius:var(--r-m);padding:var(--s-5);font-size:var(--fs-sm);color:var(--tekst-tiho);
}
.napomena-karta strong{color:var(--tekst);display:block;margin-bottom:.35rem;font-size:var(--fs-body)}

/* ---------- Footer ---------- */
.podnozje{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(180deg,#1C3517 0%,#18300F 45%,#102309 100%);
  color:rgba(251,248,241,.8);padding-block:clamp(3rem,6vw,4.5rem) var(--s-6);
}
.podnozje__grid{display:grid;gap:clamp(2rem,4vw,3rem);grid-template-columns:1fr}
@media (min-width:760px){.podnozje__grid{grid-template-columns:1.4fr 1fr 1fr}}
.podnozje img{height:44px;width:auto;margin-bottom:var(--s-4)}
.podnozje h2{font-family:var(--font-tekst);font-size:var(--fs-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(251,248,241,.6);margin-bottom:var(--s-4)}
.podnozje p{font-size:var(--fs-sm);line-height:1.6;max-width:42ch}
.podnozje a{color:rgba(251,248,241,.85);text-decoration:none}
.podnozje a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.podnozje li{padding-block:0}
.podnozje li a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-sm)}
.podnozje__dno{
  display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);justify-content:space-between;
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:var(--s-5);
  border-top:1px solid rgba(251,248,241,.16);
  font-size:var(--fs-xs);color:rgba(251,248,241,.6);
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Animacije ---------- */
@media (prefers-reduced-motion:no-preference){
  .js .otkrij{opacity:0;transform:translateY(14px);transition:opacity 420ms var(--lako),transform 420ms var(--lako)}
  .js .otkrij.vidljivo{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .js .otkrij{opacity:1;transform:none}
}

/* ==========================================================================
   MOTION I EDITORIAL SLOJ
   Jedna krivulja i jedan skup trajanja za ceo sajt. Sve se pali tek kada
   JavaScript doda klasu .js na <html>, pa bez skripte sadrzaj stoji vidljiv.
   ========================================================================== */
:root{
  --izlaz:cubic-bezier(.16,1,.3,1);      /* sporo usporavanje, bez odskoka */
  --t-tekst:300ms;
  --t-slika:380ms;
  --t-zum:700ms;
  --t-prelaz:1100ms;                     /* smena fotografija */
  --nav-h:74px;
}

/* --- tekst: kratak fade uz jedva primetno podizanje --- */
.js [data-otkrij]{
  opacity:0;transform:translate3d(0,8px,0);
  transition:opacity var(--t-tekst) ease-out,transform var(--t-tekst) ease-out;
  transition-delay:var(--kasni,0ms);
}
.js [data-otkrij].vidi-se{opacity:1;transform:none}

/* --- slike: samo fade, bez maske i bez zuma --- */
.js [data-otkrij-sliku]{opacity:0;transition:opacity var(--t-slika) ease-out;transition-delay:var(--kasni,0ms)}
.js [data-otkrij-sliku].vidi-se{opacity:1}

/* --- linija koja se izvlaci --- */
.js [data-otkrij-liniju]{transform:scaleX(0);transform-origin:left;transition:transform var(--t-slika) ease-out}
.js [data-otkrij-liniju].vidi-se{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  .js [data-otkrij],.js [data-otkrij-sliku],.js [data-otkrij-liniju]{
    opacity:1 !important;transform:none !important;clip-path:none !important;
  }
  .js [data-otkrij-sliku] img{transform:none !important}
}

/* ==========================================================================
   VITRINA — velika smena fotografija u sekciji O teatru
   ========================================================================== */
.vitrina{
  position:relative;isolation:isolate;overflow:clip;
  background:var(--zelena-900);color:var(--krem-50);
  min-height:min(92vh,880px);display:flex;align-items:flex-end;
}
.vitrina__slike{position:absolute;inset:0;z-index:-2}
.vitrina__slika{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.045);
  transition:opacity var(--t-prelaz) var(--izlaz),transform 8s linear;
}
.vitrina__slika.aktivna{opacity:1;transform:scale(1)}
.vitrina__veo{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(95deg,rgba(9,18,7,.9) 0%,rgba(9,18,7,.74) 34%,rgba(9,18,7,.34) 62%,rgba(9,18,7,.12) 100%),
    linear-gradient(to top,rgba(9,18,7,.72) 0%,rgba(9,18,7,.12) 42%,rgba(9,18,7,.35) 100%);
}
.vitrina__sadrzaj{padding-block:clamp(3.5rem,9vw,7rem);width:100%}
.vitrina__tekst{max-width:34rem}
.vitrina h2{font-size:var(--fs-h2);margin-bottom:var(--s-5)}
.vitrina p{color:rgba(251,248,241,.9)}
.vitrina .nadnaslov{color:rgba(251,248,241,.74)}

.vitrina__akcija{margin-top:clamp(2rem,4vw,3rem)}
.vitrina__kontrole{display:flex;align-items:center;gap:var(--s-4);margin-top:clamp(3rem,6vw,5rem)}
.vitrina__broj{
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.16em;
  color:rgba(251,248,241,.78);font-variant-numeric:tabular-nums;
}

/* ---------- strelice za smenu fotografija, isti oblik svuda ---------- */
.slajd-kontrole{display:flex;align-items:center;gap:var(--s-2)}
.slajd-strelica{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;padding:0;cursor:pointer;
  background:none;border:1.5px solid var(--linija);border-radius:50%;
  color:var(--tekst);
  transition:border-color var(--brzo) var(--lako),background var(--brzo) var(--lako),transform var(--brzo) var(--lako);
}
.slajd-strelica:hover{border-color:var(--zelena-600);background:rgba(35,66,30,.06);transform:translateX(2px)}
.slajd-strelica[data-slajd-nazad]:hover{transform:translateX(-2px)}
.slajd-strelica svg{width:19px;height:19px}
.na-tamnom .slajd-strelica{border-color:rgba(251,248,241,.42);color:var(--krem-50)}
.na-tamnom .slajd-strelica:hover{border-color:var(--krem-50);background:rgba(251,248,241,.12)}
@media (max-width:820px){
  .vitrina{min-height:92svh;align-items:flex-end}
  .vitrina__sadrzaj{padding-block:clamp(14rem,44vw,20rem) clamp(2.5rem,8vw,3.5rem)}
  .vitrina__veo{background:linear-gradient(to top,rgba(9,18,7,.95) 0%,rgba(9,18,7,.86) 34%,rgba(9,18,7,.42) 64%,rgba(9,18,7,.25) 100%)}
  .vitrina__tekst{max-width:100%}
  .vitrina__kontrole{margin-top:var(--s-6)}
}

/* ==========================================================================
   PRICA — opis predstave levo, fotografije koje se smenjuju desno
   ========================================================================== */
.prica{padding-block:clamp(3rem,7vw,6rem)}
.prica__grid{display:grid;gap:clamp(2rem,4vw,4rem);grid-template-columns:1fr}
.prica__ram{
  position:relative;aspect-ratio:var(--ram-mob,3 / 2);overflow:hidden;border-radius:var(--r-s);
  background:var(--grad-okvir);
}
.prica__ram img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.03);
  transition:opacity var(--t-prelaz) var(--izlaz),transform 3200ms var(--izlaz);
}
.prica__ram img.aktivna{opacity:1;transform:scale(1)}
.prica__noga{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  margin-top:var(--s-4);
}
.prica__brojac{
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.16em;color:var(--tekst-tise);
  font-variant-numeric:tabular-nums;
}
.prica__tekst p{font-size:var(--fs-lead);line-height:1.7;margin-bottom:1.15em}
.prica__uvod{
  font-family:var(--font-tekst);font-weight:300;
  font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.42;letter-spacing:-0.005em;
}
@media (min-width:900px){
  .prica__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(3rem,6vw,6rem);align-items:start}
  .prica__slike{order:2;position:sticky;top:calc(var(--nav-h) + 3rem)}
  .prica__tekst{order:1}
  .prica__ram{aspect-ratio:var(--ram-desk,5 / 4)}
}

/* ==========================================================================
   SCENE — O nama kao niz vizuelnih prizora
   ========================================================================== */
.scene{position:relative;isolation:isolate;background:var(--zelena-900);color:var(--krem-50);overflow:clip}
.scene__pozadine{position:absolute;inset:0;z-index:-2}
.scene__pozadine img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.05);
  transition:opacity 1400ms var(--izlaz),transform 9s var(--izlaz);
}
.scene__pozadine img.aktivna{opacity:1;transform:scale(1)}
.scene__veo{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(98deg,rgba(7,15,6,.9) 0%,rgba(7,15,6,.8) 30%,rgba(7,15,6,.62) 50%,rgba(7,15,6,.32) 62%,rgba(7,15,6,.5) 80%,rgba(7,15,6,.66) 100%),
    linear-gradient(to top,rgba(7,15,6,.78) 0%,rgba(7,15,6,.2) 44%,rgba(7,15,6,.4) 100%);
}
.scene__okvir{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  min-height:calc(100svh - var(--nav-h));
  padding-block:clamp(4rem,10vw,7rem) clamp(6rem,12vw,8rem);
}
.scena{max-width:40rem}
.js .scena{position:absolute;opacity:0;visibility:hidden;transform:translate3d(0,28px,0);
  transition:opacity 800ms var(--izlaz),transform 800ms var(--izlaz),visibility 0s linear 800ms}
.js .scena.aktivna{position:relative;opacity:1;visibility:visible;transform:none;transition-delay:0s,0s,0s}
.scena__oznaka{
  display:block;
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(251,248,241,.78);margin-bottom:var(--s-5);
}
.scena h1,.scena h2{font-size:clamp(1.9rem,4.4vw,3.25rem);margin-bottom:var(--s-5);max-width:18ch}
.scena p{font-size:var(--fs-lead);line-height:1.72;color:rgba(251,248,241,.92)}
.scene__upravljanje{
  position:absolute;left:0;right:0;bottom:clamp(2rem,5vw,3.5rem);
  display:flex;align-items:center;gap:var(--s-5);
}
.scene__traka{position:relative;flex:1 1 auto;height:1.5px;background:rgba(251,248,241,.24);max-width:16rem}
.scene__traka span{position:absolute;inset:0 auto 0 0;background:var(--krem-50);transition:width 700ms var(--izlaz)}
.scene__stanje{font-size:var(--fs-xs);font-weight:600;letter-spacing:.18em;color:rgba(251,248,241,.8);font-variant-numeric:tabular-nums}
.scene__dugmici{display:flex;gap:var(--s-2);margin-left:auto}
.strelica-dugme{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;padding:0;cursor:pointer;
  background:none;border:1.5px solid rgba(251,248,241,.42);border-radius:50%;
  color:var(--krem-50);transition:border-color var(--brzo) var(--lako),background var(--brzo) var(--lako),transform var(--brzo) var(--lako);
}
.strelica-dugme:hover:not(:disabled){border-color:var(--krem-50);background:rgba(251,248,241,.12);transform:translateX(2px)}
.strelica-dugme[data-nazad]:hover:not(:disabled){transform:translateX(-2px)}
.strelica-dugme:disabled{opacity:.3;cursor:default}
.strelica-dugme svg{width:20px;height:20px}
@media (max-width:640px){
  .scene__okvir{min-height:calc(100svh - var(--nav-h));padding-bottom:clamp(7rem,20vw,9rem)}
  .scene__traka{max-width:none}
  .scene__stanje{display:none}
  .strelica-dugme{width:52px;height:52px}
}

/* ==========================================================================
   KONTAKT — tipografija i prazan prostor umesto komponenti
   ========================================================================== */
.kontakt-naslov{
  font-size:clamp(3rem,13vw,10rem);line-height:.92;letter-spacing:-0.02em;
  margin-bottom:clamp(2.5rem,6vw,5rem);
}
.kontakt-lista{border-top:1px solid var(--linija)}
.kontakt-red{
  display:grid;gap:var(--s-2) var(--s-6);grid-template-columns:1fr;
  padding-block:clamp(1.75rem,3.5vw,2.75rem);border-bottom:1px solid var(--linija);
}
@media (min-width:760px){.kontakt-red{grid-template-columns:minmax(9rem,14rem) 1fr;align-items:baseline}}
.kontakt-red dt{
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tekst-tise);margin:0;
}
.kontakt-red dd{margin:0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.2;letter-spacing:0}
.kontakt-red dd a{text-decoration:none;position:relative}
.kontakt-red dd a::after{
  content:"";position:absolute;left:0;right:0;bottom:-.12em;height:1.5px;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform 420ms var(--izlaz);
}
.kontakt-red dd a:hover{color:var(--bordo)}
.kontakt-red dd a:hover::after{transform:scaleX(1)}
.kontakt-red dd small{display:block;font-family:var(--font-tekst);font-size:var(--fs-sm);
  font-weight:400;color:var(--tekst-tise);margin-top:var(--s-2);letter-spacing:0}

/* --- editorial ciscenje: manje zaobljenja, napomene bez okvira --- */
.napomena-karta{
  background:none;border:0;border-left:1.5px solid var(--bordo);border-radius:0;
  padding:var(--s-1) 0 var(--s-1) var(--s-5);
}
.znacka{border-radius:2px;letter-spacing:.16em}
.dugme{border-radius:4px}
.strelica{display:inline-block}

/* --- parallax nosaci --- */
.js [data-parallax]{will-change:transform}
@media (prefers-reduced-motion:reduce){.js [data-parallax]{transform:none !important}}

/* ==========================================================================
   TERMINI — repertoar je lista izvođenja, ne lista predstava
   ========================================================================== */
.lista-termina{border-top:1px solid var(--linija)}
.termin{
  display:grid;gap:var(--s-4) clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:96px 1fr;grid-template-areas:"plakat info" "akcija akcija";
  padding-block:clamp(1.75rem,3.5vw,2.75rem);border-bottom:1px solid var(--linija);
  align-items:start;
}
@media (min-width:760px){
  .termin{grid-template-columns:150px minmax(0,1fr) auto;grid-template-areas:"plakat info akcija";align-items:center}
}
.termin__plakat{
  grid-area:plakat;overflow:hidden;border-radius:var(--r-s);
  background:var(--grad-okvir);aspect-ratio:4 / 5;display:block;
}
.termin__plakat img{width:100%;height:100%;object-fit:contain}
.termin__info{grid-area:info;min-width:0}
.termin__kada{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .9rem;
  font-family:var(--font-tekst);font-size:var(--fs-sm);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--bordo);
  margin:0 0 var(--s-2);
}
.termin__vreme{
  color:var(--tekst-tise);letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
}
.termin__vreme::before{content:"";display:inline-block;width:1px;height:.85em;
  background:var(--krem-300);margin-right:.9rem;vertical-align:-.05em}
.termin h3{font-size:clamp(1.4rem,2.6vw,2rem);margin-bottom:var(--s-2)}
.termin h3 a{text-decoration:none}
.termin h3 a:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.termin__uvod{font-size:var(--fs-sm);color:var(--tekst-tiho);max-width:52ch;margin:0 0 var(--s-3)}
.termin__mesto{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem;
  font-size:var(--fs-sm);font-weight:500;margin:0;
}
.termin__mesto a{text-decoration:none;border-bottom:1.5px solid var(--krem-300)}
.termin__mesto a:hover{color:var(--bordo);border-bottom-color:var(--bordo)}
.termin__mesto span{color:var(--tekst-tise);font-weight:400}
.termin__akcija{
  grid-area:akcija;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-5);
}
@media (min-width:760px){.termin__akcija{flex-direction:column;align-items:flex-end;gap:var(--s-3)}}
@media (max-width:480px){.termin__akcija .dugme{flex:1 1 100%}}

/* termini na stranici predstave */
.termini-uz-predstavu{border-top:1px solid var(--linija)}
.termini-uz-predstavu li{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s-4);padding-block:var(--s-5);border-bottom:1px solid var(--linija);
}
@media (max-width:520px){.termini-uz-predstavu li .dugme{flex:1 1 100%}}

/* prazan repertoar */
.prazno__naslov{
  font-size:clamp(2rem,5vw,3.5rem);max-width:24ch;
  margin-bottom:var(--s-5);
}
.prazno__akcije{display:flex;flex-wrap:wrap;gap:var(--s-3)}
@media (max-width:480px){.prazno__akcije .dugme{flex:1 1 100%}}


/* ==========================================================================
   OZNAKE — sitan verzalni tekst uvek u naslovnom rezu
   Metropolis ima jednu vrlo tanku debljinu i na 14px se gubi.
   ========================================================================== */
.nadnaslov,.znacka,.detalj dt,.kanal dt,.kontakt-red dt,.kredit__uloga,
.spisak-tima .rola,.termin__kada,.termin__vreme,.prica__brojac,.vitrina__broj,
.scene__stanje,.scena__oznaka,.hero__oznaka,.podnozje h2,.putanja,
.dugme,.nav__link,.nav__prekidac,.tekst-link,.karta__akcija,.potpis-slike,
.svetlo__traka,.ikon-dugme{
  font-family:var(--font-display);
  font-weight:600;
  text-transform:uppercase;
}
.nadnaslov{color:var(--bordo);letter-spacing:.2em;font-weight:600}
.kontakt-red dd,.kredit__imena li{text-transform:none}
.spisak-uloga .glumac,.spisak-tima .imena,.detalj dd,.kanal dd{font-family:var(--font-tekst);text-transform:none;font-weight:500}
.zelena-sekcija .nadnaslov,.na-tamnom .nadnaslov,.vitrina .nadnaslov{color:rgba(251,248,241,.78)}
.dugme{letter-spacing:.09em;font-size:0.9375rem;font-weight:600}
.nav__link{font-size:0.9375rem;letter-spacing:.14em;font-weight:600}
.termin__kada{font-size:1rem;letter-spacing:.14em;font-weight:600}
.strelica{font-family:var(--font-display)}   /* strelicu ima naslovni rez */

/* ==========================================================================
   DUGMAD BEZ IVICA — nijedno dugme nema stroke, samo ispunu
   Prsten fokusa ostaje, jer je to jedini trag za tastaturu.
   ========================================================================== */
.dugme{border:0}
.dugme--obris-svetli{
  border:0;color:var(--krem-50);
  background:rgba(251,248,241,.22);
  box-shadow:0 10px 24px -16px rgba(0,0,0,.8);
}
.dugme--obris-svetli:hover{
  background:rgba(251,248,241,.34);
  box-shadow:0 14px 28px -16px rgba(0,0,0,.85);
  transform:translateY(-1px);
}
.dugme--obris{
  border:0;color:var(--bordo);background:var(--bordo-tinta);
}
.dugme--obris:hover{
  background:linear-gradient(180deg,var(--bordo-svetli),var(--bordo));
  color:var(--krem-50);box-shadow:var(--reljef-zeleno);transform:translateY(-1px);
}
.slajd-strelica,.strelica-dugme,.ikon-dugme,.nav__prekidac{
  border:0;
  background:rgba(35,66,30,.08);
}
.slajd-strelica:hover{background:var(--bordo-tinta);color:var(--bordo)}
.strelica-dugme,.ikon-dugme,.nav__prekidac,
.na-tamnom .slajd-strelica{background:rgba(251,248,241,.16);color:var(--krem-50)}
.strelica-dugme:hover:not(:disabled),.ikon-dugme:hover,.nav__prekidac:hover,
.na-tamnom .slajd-strelica:hover{background:rgba(251,248,241,.28)}

/* ==========================================================================
   PRAZAN REPERTOAR — fotografija iza teksta, sa vrlo sporim zumom
   ========================================================================== */
.prazno-hero{
  position:relative;isolation:isolate;overflow:clip;
  background:var(--zelena-900);color:var(--krem-50);
  display:flex;align-items:center;
  min-height:min(88vh,860px);
}
.prazno-hero__slika{position:absolute;inset:0;z-index:-2}
.prazno-hero__slika img{
  width:100%;height:100%;object-fit:cover;opacity:.85;
  animation:disi-zum 26s ease-in-out infinite alternate;
  transform-origin:center 45%;
}
@keyframes disi-zum{from{transform:scale(1)} to{transform:scale(1.15)}}
.prazno-hero__veo{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(7,15,6,.9) 0%,rgba(7,15,6,.76) 40%,rgba(7,15,6,.4) 72%,rgba(7,15,6,.2) 100%),
    linear-gradient(to top,rgba(7,15,6,.7) 0%,rgba(7,15,6,.18) 46%,rgba(7,15,6,.38) 100%);
}
.prazno-hero__sadrzaj{position:relative;max-width:44rem;padding-block:clamp(4rem,10vw,7rem)}
.prazno-hero h1{font-size:clamp(2.2rem,5.6vw,4.2rem);max-width:20ch;margin-bottom:var(--s-5)}
.prazno-hero p{font-size:var(--fs-lead);line-height:1.66;color:rgba(251,248,241,.9);margin-bottom:var(--s-6)}
.dugme .ikona{width:19px;height:19px;flex:0 0 auto}
@media (prefers-reduced-motion:reduce){.prazno-hero__slika img{animation:none}}

/* ==========================================================================
   SCENE — kategorije sa strane umesto listanja jedne po jedne
   ========================================================================== */
.scene__raspored{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr;align-items:start}
@media (min-width:900px){
  .scene__raspored{grid-template-columns:minmax(0,1fr) minmax(14rem,19rem);gap:clamp(3rem,6vw,6rem)}
}
/* Mek zastor iza spiska, bez ivica i bez kutije: samo radijalno tamnjenje
   da poglavlja ostanu citljiva preko svetlijih delova fotografije. */
.kategorije-okvir{position:relative;isolation:isolate}
.kategorije-okvir::before{
  content:"";position:absolute;inset:-2.5rem -3rem;z-index:-1;pointer-events:none;
  background:radial-gradient(118% 88% at 62% 50%,rgba(7,15,6,.78),rgba(7,15,6,0) 74%);
}
.kategorije{display:flex;flex-direction:column;gap:3px;margin:0;padding:0;list-style:none}
.kategorija{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:none;border:0;padding:var(--s-3) 0;
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.2;
  color:rgba(251,248,241,.88);
  transition:color var(--brzo) var(--lako);
  min-height:48px;
}
.kategorija:hover{color:rgba(251,248,241,.95)}
.kategorija[aria-current="true"]{color:var(--krem-50)}
.kategorija__broj{
  display:inline-block;width:2.4em;
  font-size:var(--fs-xs);letter-spacing:.14em;
  color:rgba(251,248,241,.8);vertical-align:.1em;
}
.kategorija[aria-current="true"] .kategorija__broj{color:var(--krem-50)}
@media (max-width:899px){
  .kategorije{margin-top:var(--s-6);border-top:1px solid rgba(251,248,241,.18);padding-top:var(--s-4)}
  .kategorija{font-size:1.0625rem;padding-block:var(--s-2)}
}


/* ==========================================================================
   JEDNA CRVENA — #671E1C
   Crvena se pojavljuje samo na svetlim povrsinama, gde ima kontrast.
   Na tamnoj zelenoj i na fotografijama nema crvene: tu radi krem.
   Zato je zaglavlje preslo na krem, pa linija ispod izabrane kartice
   moze da bude bas #671E1C, kako je i trazeno.
   ========================================================================== */

/* ---------- Zaglavlje na krem povrsini ---------- */
.zaglavlje{
  background:linear-gradient(180deg,#FDFBF6 0%,var(--krem-50) 100%);
  border-bottom:1px solid var(--krem-200);
  box-shadow:0 1px 0 rgba(25,25,24,.03),0 12px 28px -24px rgba(25,25,24,.55);
}
.nav__link{
  color:var(--tinta-70);
  font-family:var(--font-display);font-weight:700;
  font-size:1.0625rem;letter-spacing:.1em;
}
.nav__link:hover{color:var(--zelena-600)}
.nav__link::after{background:var(--bordo);height:2px;bottom:.5rem}
.nav__link[aria-current="page"]{color:var(--tinta);font-weight:800}
.nav__link[aria-current="page"]::after{transform:scaleX(1);background:var(--bordo);height:3px}

.nav__prekidac{
  border:0;background:rgba(35,66,30,.07);color:var(--zelena-600);
  font-family:var(--font-display);font-weight:700;letter-spacing:.12em;
}
.nav__prekidac:hover{background:rgba(35,66,30,.13)}

.meni{background:var(--krem-50);border-bottom:1px solid var(--krem-200)}
.meni a{
  color:var(--tinta-70);border-bottom:1px solid var(--linija);
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
}
.meni a[aria-current="page"]{
  color:var(--tinta);
  box-shadow:inset 3px 0 0 var(--bordo);
}

/* zaglavlje je svetlo, pa i prsten fokusa u njemu ide crvenom */
.zaglavlje :focus-visible,.meni :focus-visible{outline-color:var(--bordo)}
.hero :focus-visible,.scene :focus-visible,.vitrina :focus-visible,
.podnozje :focus-visible,.prazno-hero :focus-visible{outline-color:#F3D9CF}

/* ---------- Crvena na svetlom ---------- */
.kontakt-naslov{color:var(--bordo)}
.termin__kada{color:var(--bordo)}
.nadnaslov{color:var(--bordo)}

.dugme--cta{
  background:linear-gradient(180deg,#7E2724 0%,var(--bordo) 54%,#511715 100%);
  color:var(--krem-50);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1.5px 0 rgba(0,0,0,.28),
             0 1px 2px rgba(40,10,9,.3),0 10px 22px -12px rgba(40,10,9,.7);
}
.dugme--cta::before{
  content:"";position:absolute;inset:0 0 auto;height:52%;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.14),transparent);
  pointer-events:none;
}
.dugme--cta:hover{
  background:linear-gradient(180deg,#8E2E2A 0%,#75221F 54%,var(--bordo) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 4px rgba(40,10,9,.28),
             0 16px 30px -14px rgba(40,10,9,.75);
  transform:translateY(-1px);
}
.dugme--cta:active{transform:translateY(1px)}

/* ---------- Tamne povrsine: krem umesto crvene ---------- */
.hero__oznaka,.scena__oznaka{color:rgba(251,248,241,.82)}
.kategorija[aria-current="true"] .kategorija__broj{color:var(--krem-50)}

/* ==========================================================================
   TEZI REZ NASLOVNOG FONTA — svuda gde je citljivo
   ========================================================================== */
.nadnaslov,.znacka,.detalj dt,.kanal dt,.kontakt-red dt,.kredit__uloga,
.spisak-tima .rola,.termin__kada,.termin__vreme,.prica__brojac,.vitrina__broj,
.scene__stanje,.scena__oznaka,.hero__oznaka,.podnozje h2,.putanja,
.dugme,.nav__link,.nav__prekidac,.tekst-link,.karta__akcija,.potpis-slike,
.svetlo__traka,.ikon-dugme,.kategorija{font-weight:700}
.dugme{font-weight:700;letter-spacing:.1em}
h1,h2{font-weight:800}
h3,h4{font-weight:700}
.kanal dd,.meni a{font-weight:700}
.kategorija[aria-current="true"]{font-weight:800}

/* imena i brojevi idu naslovnim rezom, telo teksta ostaje Metropolis */
.spisak-uloga .glumac,.spisak-tima .imena{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.05rem,1.5vw,1.25rem);letter-spacing:.01em;
}
.podnozje__grid a{font-family:var(--font-display);font-weight:700;letter-spacing:.04em}

/* ==========================================================================
   LJUDI — ansambl i saradnici
   Glumacki ansambl dobija zid imena, ostalo ide u miran indeks.
   ========================================================================== */
.zid-imena{
  columns:1;column-gap:clamp(1.5rem,4vw,4rem);
  margin:0;padding:0;list-style:none;
}
@media (min-width:600px){.zid-imena{columns:2}}
@media (min-width:1080px){.zid-imena{columns:3}}
.zid-imena li{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.45rem,2.6vw,2.05rem);line-height:1.22;
  letter-spacing:.008em;color:var(--tekst);
  padding-block:.3rem;break-inside:avoid;
}

.indeks{
  display:grid;gap:clamp(2rem,4vw,3.25rem) clamp(2rem,5vw,4rem);
  grid-template-columns:1fr;
  margin-top:clamp(3rem,6vw,5rem);
  padding-top:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--linija);
}
@media (min-width:640px){.indeks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.indeks{grid-template-columns:repeat(3,minmax(0,1fr))}}
.indeks__grupa{break-inside:avoid}
.indeks__uloga{
  margin:0 0 var(--s-3);padding-bottom:var(--s-2);
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:var(--fs-xs);letter-spacing:.18em;color:var(--bordo);
  border-bottom:1px solid var(--bordo-tinta);
}
.indeks__imena{margin:0;padding:0;list-style:none}
.indeks__imena li{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.02rem,1.35vw,1.15rem);line-height:1.62;
  letter-spacing:.03em;color:var(--tekst-tiho);
}

/* ==========================================================================
   PORTRETI — vodoravno listanje ljudi
   ========================================================================== */
.portreti{position:relative;margin-top:clamp(1.5rem,3vw,2.5rem)}
.portreti__upravljanje{display:none;gap:var(--s-2);justify-content:flex-end;margin-bottom:var(--s-4)}
.portreti[data-preliva="da"] .portreti__upravljanje{display:flex}
  .portreti__traka:focus-visible{outline-offset:-3px}
.portreti__traka{
  display:flex;gap:clamp(1rem,2.4vw,1.75rem);
  margin:0;padding:0 var(--gutter) var(--s-5);list-style:none;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  margin-inline:calc(-1 * var(--gutter));
}
.portret{
  flex:0 0 min(78vw,20rem);scroll-snap-align:start;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#F8F3E9,var(--krem-100));
  border-radius:var(--r-m);overflow:hidden;
  box-shadow:0 1px 0 rgba(25,25,24,.05),0 22px 44px -32px rgba(25,25,24,.55);
}
@media (min-width:900px){.portret{flex:0 0 21rem}}
.portret__slika,.portret__monogram{
  width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--krem-200);
}
.portret__monogram{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#1F3A1A 0%,var(--zelena-600) 55%,#1A3215 100%);
  color:rgba(251,248,241,.9);
  font-family:var(--font-display);font-weight:800;letter-spacing:.04em;
  font-size:clamp(3.5rem,7vw,4.75rem);line-height:1;
}
.portret__telo{padding:clamp(1.1rem,2.2vw,1.6rem);display:flex;flex-direction:column;gap:var(--s-2)}
.portret__ime{
  margin:0;font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.4rem,2.2vw,1.75rem);line-height:1.04;
}
.portret__uloga{
  margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:var(--fs-xs);letter-spacing:.14em;color:var(--bordo);line-height:1.5;
}
.portret__opis{margin:0;font-size:var(--fs-sm);line-height:1.65;color:var(--tekst-tiho)}
@media (prefers-reduced-motion:reduce){.portreti__traka{scroll-behavior:auto}}

/* ==========================================================================
   POGLAVLJA U SEKCIJI O NAMA — zelena ploca za izabrano i strelice
   ========================================================================== */
.kategorija{
  display:flex;align-items:baseline;gap:.9rem;
  padding-inline:clamp(.7rem,1.4vw,1rem);
  margin-inline:calc(-1 * clamp(.7rem,1.4vw,1rem));
  border-radius:var(--r-s);
  transition:color var(--brzo) var(--lako),background var(--brzo) var(--lako);
}
.kategorija:hover{background:rgba(35,66,30,.32)}
.kategorija[aria-current="true"]{background:rgba(35,66,30,.68);box-shadow:none}
.kategorija__broj{flex:0 0 auto;width:auto}
.kategorija__ime{flex:1 1 auto;min-width:0}

.scene__koraci{
  display:flex;align-items:center;gap:var(--s-4);
  margin-top:clamp(1.25rem,2.5vw,1.75rem);
  padding-top:clamp(1rem,2vw,1.25rem);
  border-top:1px solid rgba(251,248,241,.2);
}
.scene__koraci .scene__stanje{margin:0;display:block}
.scene__koraci .scene__dugmici{margin-left:auto}
.scene__koraci .strelica-dugme{width:48px;height:48px;border-width:1.5px}
@media (max-width:899px){
  .scene__koraci{margin-top:var(--s-4)}
}

/* ==========================================================================
   MAPA — najcesce mesto izvodjenja na stranici kontakta
   ========================================================================== */
.mapa{
  position:relative;overflow:hidden;border-radius:var(--r-m);
  background:var(--krem-100);
  aspect-ratio:16/9;
  box-shadow:0 1px 0 rgba(25,25,24,.05),0 24px 48px -34px rgba(25,25,24,.6);
}
@media (max-width:640px){.mapa{aspect-ratio:4/3}}
.mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.mapa__ispod{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s-4) var(--s-5);margin-top:clamp(1.25rem,2.5vw,1.75rem);
}
.mapa__ispod p{margin:0}
.mapa__adresa{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.05rem,1.6vw,1.3rem);letter-spacing:.03em;line-height:1.35;
}
.mapa__adresa span{
  display:block;font-size:var(--fs-xs);letter-spacing:.16em;
  color:var(--tekst-tise);margin-top:.35rem;
}

/* ==========================================================================
   ==========================================================================
   TELEFON — poseban sloj
   Desktop raspored se ne dira. Ispod 900px menjaju se ritam i gustina,
   ispod 640px svaka sekcija dobija svoj mobilni raspored.
   ==========================================================================
   ========================================================================== */

@media (max-width:899px){
  :root{ --nav-h:62px; }

  /* zaglavlje nize, dodir najmanje 48px */
  .nav{min-height:62px}
  .nav__logo img{height:30px}
  .nav__prekidac{min-height:46px;padding-inline:.9rem;border-radius:var(--r-m)}

  /* naslov sekcije i link „vidi sve“ nikada u istom redu */
  .zaglavlje-sekcije{
    display:block;margin-bottom:var(--s-5);
    padding-bottom:0;border-bottom:0;
  }
  .zaglavlje-sekcije > div{
    padding-bottom:var(--s-3);
    border-bottom:1px solid var(--linija);
  }
  .zelena-sekcija .zaglavlje-sekcije > div,
  .na-tamnom .zaglavlje-sekcije > div{border-bottom-color:rgba(251,248,241,.2)}
  .zaglavlje-sekcije > .tekst-link{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;min-height:52px;margin-top:0;
    border-bottom:1px solid var(--linija);
  }
  .zelena-sekcija .zaglavlje-sekcije > .tekst-link,
  .na-tamnom .zaglavlje-sekcije > .tekst-link{border-bottom-color:rgba(251,248,241,.2)}
  .zaglavlje-sekcije > .tekst-link::after{display:none}

  /* dugmad preko cele sirine, jedno ispod drugog */
  .hero__akcije,.glava-predstave__akcije,.red__akcije,
  .termin__akcija,.prazno__akcije{flex-direction:column;align-items:stretch;gap:var(--s-3)}
  .hero__akcije .dugme,.glava-predstave__akcije .dugme,
  .red__akcije .dugme,.termin__akcija .dugme,.prazno__akcije .dugme{width:100%}
}

@media (max-width:640px){
  :root{
    --gutter:20px;
    --fs-display:clamp(2.9rem,12.5vw,3.5rem);
    --fs-h1:clamp(2.4rem,10.5vw,3rem);
    --fs-h2:clamp(1.95rem,8.6vw,2.4rem);
    --fs-h3:1.45rem;
    --fs-lead:1.0625rem;
    --fs-body:1.0625rem;
    --fs-sm:0.9375rem;
  }
  .sekcija{padding-block:3.25rem}
  .sekcija--tesna{padding-block:2.5rem}
  .tekst-blok p{line-height:1.7}
  .tekst-blok p:first-child{font-size:1.3125rem;line-height:1.45}

  /* ---------- Hero: fotografija preko celog ekrana, tekst na njoj ---------- */
  .hero{background:var(--zelena-900)}
  .hero__slika{position:absolute;inset:0;z-index:-2;aspect-ratio:auto;max-height:none}
  .hero__slika img{object-position:center 38%}
  .hero__preliv{
    display:block;
    background:linear-gradient(to top,
      rgba(8,16,6,.95) 0%,rgba(8,16,6,.88) 30%,
      rgba(8,16,6,.56) 62%,rgba(8,16,6,.36) 100%);
  }
  .hero__sadrzaj{
    min-height:78svh;justify-content:flex-end;
    padding-block:5rem 2.75rem;
  }
  .hero h1{max-width:100%;line-height:.94;text-shadow:0 2px 20px rgba(0,0,0,.5);margin-bottom:var(--s-4)}
  .hero__lead{max-width:100%;margin-bottom:var(--s-6)}

  /* ---------- Kartice predstava: plakat levo, tekst desno ---------- */
  .mreza-predstava{grid-template-columns:1fr;gap:0}
  .karta{
    display:grid;align-content:start;
    grid-template-columns:104px minmax(0,1fr);
    column-gap:var(--s-4);row-gap:.35rem;
    grid-template-areas:"plakat meta" "plakat naslov" "plakat uvod" "plakat akcija";
    padding-block:var(--s-5);
    border-bottom:1px solid var(--linija);
  }
  .zelena-sekcija .karta{border-bottom-color:rgba(251,248,241,.16)}
  .mreza-predstava .karta:last-child{border-bottom:0;padding-bottom:0}
  .karta__plakat{grid-area:plakat;margin-bottom:0;aspect-ratio:4 / 5;align-self:start}
  .karta__meta{grid-area:meta;margin-bottom:.1rem}
  .karta h3{grid-area:naslov;font-size:1.35rem;margin-bottom:.15rem}
  .karta__uvod{grid-area:uvod;margin-bottom:.4rem;font-size:.9375rem;line-height:1.5}
  .karta__akcija{grid-area:akcija;margin-top:.15rem;min-height:32px;align-items:center}

  /* ---------- Repertoar i stranica predstave: plakat u svom formatu ---------- */
  .red{grid-template-columns:128px minmax(0,1fr);gap:var(--s-4) var(--s-5);align-items:start}
  .red__plakat{aspect-ratio:4 / 5}
  .red__telo{min-width:0}
  .red h3{font-size:1.45rem}
  .red__detalji{gap:var(--s-3) var(--s-5);padding-block:var(--s-3)}
  .detalj{min-width:0;flex:1 1 44%}

  /* ---------- Stranica predstave ---------- */
  .glava-predstave{padding-block:1.75rem 2.5rem}
  .putanja{margin-bottom:var(--s-4);font-size:.8125rem}
  .glava-predstave__grid{gap:var(--s-5)}
  .glava-predstave .plakat-okvir{max-width:230px;margin-inline:auto}
  .glava-predstave h1{letter-spacing:-.01em}
  .glava-predstave__podnaslov{font-size:1.0625rem;margin-bottom:var(--s-4)}
  .glava-predstave__znacke{gap:.4rem;margin-bottom:var(--s-4)}
  .glava-predstave__akcije{margin-top:var(--s-5)}

  /* podela i autorski tim kao parovi oznaka + vrednost */
  .dve-kolone{gap:var(--s-7)}
  .spisak-uloga li{
    display:grid;grid-template-columns:1fr;gap:.1rem;
    padding-block:.75rem;
  }
  .spisak-uloga .lik{order:1;font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase}
  .spisak-uloga .glumac{order:2;font-size:1.125rem}

  /* ---------- Galerija ---------- */
  .galerija{gap:.5rem}
  .galerija img{aspect-ratio:1 / 1}
  .galerija[data-odnos="2 / 3"] img{aspect-ratio:2 / 3}

  /* ---------- Vitrina „O teatru“ ---------- */
  .vitrina{min-height:auto}
  .vitrina__sadrzaj{padding-block:11rem 2.5rem}
  .vitrina__kontrole{margin-top:var(--s-6)}

  /* ---------- Scene „O nama“ ---------- */
  .scene__okvir{min-height:auto;padding-block:2.5rem 2rem}
  .scena h1,.scena h2{font-size:clamp(1.9rem,8vw,2.35rem);max-width:100%}
  .scena p{font-size:1.0625rem;line-height:1.65}
  .kategorije{margin-top:var(--s-5);padding-top:var(--s-3)}
  .kategorija{font-size:1.0625rem;min-height:50px;gap:.75rem}
  .scene__koraci{margin-top:var(--s-3);padding-top:var(--s-3)}
  .scene__koraci .strelica-dugme{width:52px;height:52px}

  /* ---------- Ljudi ---------- */
  .portreti__traka{scroll-padding-inline:var(--gutter)}
  .portret{flex:0 0 min(80vw,17rem)}
  .zid-imena li{font-size:1.3rem;line-height:1.3;padding-block:.22rem}
  .indeks{gap:var(--s-6);margin-top:var(--s-7);padding-top:var(--s-5)}
  .indeks__imena li{font-size:1rem;line-height:1.7}

  /* ---------- Kontakt ---------- */
  .kontakt-lista{margin-top:var(--s-4)}
  .kontakt-red{display:block;padding-block:var(--s-4)}
  .kontakt-red dt{margin-bottom:.35rem}
  .kontakt-red dd{font-size:1.35rem}
  .mapa{aspect-ratio:3 / 4}
  .mapa__ispod{display:block}
  .mapa__ispod > p + p{margin-top:var(--s-4)}
  .mapa__ispod .dugme{width:100%}

  /* ---------- Podnozje ---------- */
  .podnozje{padding-block:2.75rem var(--s-5)}
  .podnozje__grid{gap:var(--s-6)}
  .podnozje img{height:38px}
  .podnozje__dno{margin-top:var(--s-6);flex-direction:column;gap:var(--s-2)}

  /* ---------- Termini ---------- */
  .termin{grid-template-columns:84px minmax(0,1fr)}
  .termin h3{font-size:1.35rem}
  .termini-uz-predstavu li{display:block}
  .termini-uz-predstavu li .dugme{width:100%;margin-top:var(--s-3)}
}

/* ==========================================================================
   MENI KAO PLOHA PREKO EKRANA
   ========================================================================== */
@media (max-width:899px){
  .meni{
    position:fixed;inset:var(--nav-h) 0 0;z-index:99;
    display:none;flex-direction:column;
    overflow-y:auto;overscroll-behavior:contain;
    background:linear-gradient(180deg,#FDFBF6 0%,var(--krem-50) 40%);
    border-bottom:0;
    padding-bottom:max(var(--s-6),env(safe-area-inset-bottom));
  }
  .meni[data-otvoren="true"]{display:flex}
  .meni ul{padding:var(--s-2) 0 0}
  .meni a{min-height:64px;font-size:1.75rem}
  .meni__dno{
    margin-top:auto;padding:var(--s-6) var(--gutter) 0;
  }
  .meni__oznaka{
    font-family:var(--font-display);font-weight:700;text-transform:uppercase;
    font-size:var(--fs-xs);letter-spacing:.18em;color:var(--bordo);
    margin:0 0 var(--s-3);
  }
  .meni__dno .dugme{width:100%;font-size:1.0625rem}
  .meni__mreze{padding:0;margin:var(--s-4) 0 0;display:flex;flex-wrap:wrap;gap:0 var(--s-5)}
  .meni__mreze li{border:0}
  .meni__mreze a{
    min-height:44px;display:inline-flex;align-items:center;
    font-family:var(--font-tekst);font-size:var(--fs-sm);font-weight:500;
    text-transform:none;letter-spacing:0;color:var(--tekst-tiho);border-bottom:0;
    padding:0;
  }
  html.meni-otvoren,html.meni-otvoren body{overflow:hidden}
}

/* ==========================================================================
   LEPLJIVA TRAKA NA TELEFONU — karta ili rezervacija uvek nadohvat
   ========================================================================== */
.mob-traka{display:none}
@media (max-width:899px){
  .mob-traka{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:95;
    background:linear-gradient(180deg,rgba(251,248,241,.94),var(--krem-50) 38%);
    border-top:1px solid var(--linija);
    box-shadow:0 -10px 30px -22px rgba(25,25,24,.8);
    padding-bottom:env(safe-area-inset-bottom);
    transform:translateY(102%);
    transition:transform 380ms var(--izlaz);
  }
  .mob-traka[data-vidi="da"]{transform:translateY(0)}
  .mob-traka[hidden]{display:none}
  .mob-traka__omot{
    padding:.7rem var(--gutter) .8rem;
    display:flex;flex-direction:column;gap:.45rem;
  }
  .mob-traka__natpis{
    margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
    font-size:var(--fs-xs);letter-spacing:.14em;color:var(--tekst-tise);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .mob-traka .dugme{width:100%;min-height:52px}
  body:has(.mob-traka) .podnozje{padding-bottom:calc(5.5rem + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  .mob-traka{transition:none}
}

/* ==========================================================================
   ZNACKE — svetla varijanta samo na tamnim povrsinama
   Na krem podlozi ista znacka nije imala kontrast.
   ========================================================================== */
.znacka--zelena{color:var(--zelena-600);background:rgba(35,66,30,.10)}
.zelena-sekcija .znacka--zelena,
.na-tamnom .znacka--zelena,
.glava-predstave .znacka--zelena,
.vitrina .znacka--zelena,
.scene .znacka--zelena{color:rgba(251,248,241,.92);background:rgba(251,248,241,.16)}

/* dugme u meniju nasledjuje svoju boju, ne boju linka u meniju */
.meni .dugme{color:var(--krem-50);border-bottom:0}
.meni .dugme:hover{color:var(--krem-50)}

@media (max-width:640px){
  .jedno-dugme .dugme{width:100%}
}

@media (max-width:640px){
  /* ploca izabranog poglavlja ide od ivice do ivice, simetricno */
  .kategorija{
    padding-inline:var(--gutter);
    margin-inline:calc(-1 * var(--gutter));
    border-radius:0;
  }
}

@media (max-width:640px){
  /* arhiva predstava: plakat u svom redu, tekst preko cele sirine */
  .red{grid-template-columns:1fr;gap:var(--s-4);padding-block:var(--s-6)}
  .red__plakat{max-width:11.5rem;aspect-ratio:4 / 5}
  .red__detalji{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3) var(--s-4)}
  .detalj{flex:none;min-width:0}
  .red__uvod{margin-bottom:var(--s-4)}

  /* kontakt: vrednost je dodirna meta pune visine */
  .kontakt-red dd a{display:inline-flex;align-items:center;min-height:44px}
}

@media (max-width:899px){
  /* dodirne mete: naslov predstave i putanja dobijaju visinu bez pomeranja rasporeda */
  .red h3 a,.termin h3 a{display:inline-block;padding-block:.75rem;margin-block:-.75rem}
  .putanja{display:flex;flex-wrap:wrap;align-items:center;margin-bottom:var(--s-3)}
  .putanja a{display:inline-flex;align-items:center;min-height:44px}
}

/* ==========================================================================
   ==========================================================================
   MOBILNA DORADA PO SPECIFIKACIJI
   Referentna sirina 390px, bocne margine 20px, korisna sirina 350px.
   ==========================================================================
   ========================================================================== */

/* ---------- 9. POGLAVLJA U „O NAMA“ — najvisi prioritet ----------
   Lista, razdelne linije i aktivna podloga dele isti kontejner.
   Aktivno stanje ne menja ni sirinu, ni visinu, ni polozaj teksta. */
.kategorija[aria-current="true"]{font-weight:700}   /* debljina se ne menja */
@media (max-width:899px){
  .kategorije{margin-inline:0}
  .kategorija{
    margin-inline:0;
    padding-inline:12px;
    padding-block:12px;
    min-height:56px;
    align-items:center;
    gap:12px;
    border-radius:3px;
    line-height:1.15;
  }
  .kategorija__broj{
    flex:0 0 24px;width:24px;
    font-size:.8125rem;letter-spacing:.1em;vertical-align:baseline;
    font-variant-numeric:tabular-nums;
  }
  .kategorija__ime{align-self:center}
  .kategorije li + li{border-top:1px solid rgba(251,248,241,.14)}
}

@media (max-width:640px){
  /* ---------- 2. Osnovni ritam ---------- */
  :root{ --gutter:20px; }
  .sekcija{padding-block:3rem}
  .nadnaslov{margin-bottom:.625rem}
  .zaglavlje-sekcije{margin-bottom:var(--s-5)}
  .zaglavlje-sekcije > div{padding-bottom:.75rem}
  .zaglavlje-sekcije > .tekst-link{min-height:46px}

  /* ---------- 3. Zaglavlje i meni ---------- */
  .nav__logo img{height:32px}
  .meni a{font-size:1.9rem;min-height:0;padding-block:1.0625rem}
  .meni__dno{padding-top:var(--s-7)}
  .dugme--ravno{background:var(--bordo);box-shadow:none}
  .dugme--ravno:hover{background:var(--bordo-svetli);box-shadow:none;transform:none}
  .dugme--ravno::before{display:none}
  .meni__mreze{display:block;margin-top:var(--s-4)}
  .meni__mreze li + li{border-top:1px solid var(--linija)}
  .meni__mreze a{display:flex;align-items:center;width:100%;min-height:52px}

  /* ---------- 4. Hero: kadar prema sceni i ljudima ---------- */
  .hero__slika img{object-position:center 62%}
  .hero__sadrzaj{padding-block:4rem 2.5rem}
  .hero__lead{margin-bottom:var(--s-5)}
  .hero__akcije{gap:.625rem}
  /* druga akcija je laksa od glavne */
  .hero__akcije .dugme--obris-svetli{
    background:transparent;box-shadow:none;
    border:1px solid rgba(251,248,241,.42);
  }
  .hero__akcije .dugme--obris-svetli:hover{background:rgba(251,248,241,.12);transform:none}

  /* ---------- 5. Lista predstava: plakat i naslov gore, opis preko cele sirine ---------- */
  .karta{
    grid-template-columns:104px minmax(0,1fr);
    grid-template-areas:"plakat glava" "uvod uvod" "akcija akcija";
    column-gap:15px;row-gap:0;
    padding-block:var(--s-5);
  }
  .karta__glava{grid-area:glava;align-self:start}
  .karta__plakat{grid-area:plakat;width:104px}
  .karta h3{font-size:1.3125rem;line-height:1.1;margin-bottom:0}
  .karta__meta{margin-bottom:.45rem}
  .karta__uvod{grid-area:uvod;margin:1rem 0 0;font-size:.9375rem;line-height:1.55}
  .karta__akcija{grid-area:akcija;margin-top:.875rem;min-height:40px;align-items:center}
  .znacka{font-size:.75rem;padding:.3rem .55rem}

  /* ---------- 6. Vitrina ---------- */
  .vitrina__slika{object-position:center 58%}
  .vitrina h2{font-size:clamp(1.9rem,8vw,2.15rem);margin-bottom:var(--s-4)}
  .vitrina p{font-size:1rem;line-height:1.6}
  .vitrina__akcija{margin-top:var(--s-5)}
  .vitrina__akcija .dugme{width:100%}
  .vitrina__kontrole{margin-top:var(--s-5);justify-content:space-between}

  /* ---------- 7. Repertoar bez termina ---------- */
  .prazno-hero__sadrzaj{padding-block:3rem}
  .prazno__naslov{font-size:clamp(2rem,8.5vw,2.3rem);max-width:100%;margin-bottom:var(--s-4)}
  .prazno__akcije .dugme--obris-svetli{
    background:transparent;box-shadow:none;border:0;
    min-height:48px;padding-inline:0;justify-content:flex-start;
    text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;
  }
  .prazno__akcije .dugme--obris-svetli:hover{background:transparent;transform:none}

  /* ---------- 8. Podnozje ---------- */
  .podnozje p{font-size:.9375rem}
  .podnozje__grid ul{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s-4)}
  .podnozje li a{min-height:46px}
  .podnozje__dno{margin-top:var(--s-6);padding-bottom:env(safe-area-inset-bottom)}

  /* ---------- 10. Portreti ---------- */
  .portreti{margin-top:1.75rem}
  .portret{flex:0 0 min(80vw,19.5rem)}
  .portreti__traka{scroll-padding-inline:var(--gutter);padding-right:var(--gutter)}
  .portret__ime{font-size:1.5rem}
  .portret__opis{font-size:.9375rem}

  /* ---------- 11. Ansambl ---------- */
  .zid-imena{columns:1}
  .zid-imena li{font-size:1.3125rem;line-height:1.25;padding-block:.3rem}

  /* ---------- 12. Saradnja ---------- */
  .dve-kolone .slika-preko img{aspect-ratio:4 / 3;object-fit:cover;object-position:center 32%}

  /* ---------- 13. Kontakt ---------- */
  .kontakt-red{padding-block:1.375rem}
  .kontakt-red dt{margin-bottom:.625rem}
  .kontakt-red dd{font-size:1.3125rem;overflow-wrap:anywhere}
  .kontakt-red dd a{gap:.5rem}
  .kontakt-red dd a::before{
    content:"";flex:0 0 auto;width:7px;height:7px;order:2;
    border-right:1.5px solid var(--bordo);border-top:1.5px solid var(--bordo);
    transform:rotate(45deg);opacity:.75;
  }
}

/* ---------- 15. Do 320px sadrzaj ostaje citljiv ---------- */
@media (max-width:359px){
  :root{ --gutter:16px; }
  .karta{grid-template-columns:88px minmax(0,1fr);column-gap:12px}
  .karta__plakat{width:88px}
  .red__plakat{max-width:9.5rem}
  .portret{flex:0 0 84vw}
  .meni a{font-size:1.65rem}
}

/* red kontrola portreta: brojac levo, strelice desno */
.portreti__upravljanje{align-items:center;justify-content:space-between}
.portreti__strelice{display:flex;gap:var(--s-2)}
.portreti__broj{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:var(--fs-xs);letter-spacing:.16em;color:var(--tekst-tise);
  font-variant-numeric:tabular-nums;
}
@media (max-width:899px){
  .portreti[data-preliva="ne"] .portreti__upravljanje{display:flex}
}

@media (max-width:899px){
  /* kontrole portreta idu ispod trake, da ne rastu razmak ispod naslova */
  .portreti{display:flex;flex-direction:column}
  .portreti__traka{order:1}
  .portreti__upravljanje{order:2;margin:var(--s-3) 0 0}
  /* akcija u sekciji „Saradnja“ ide preko cele sirine, kao i ostale glavne akcije */
  .zelena-sekcija .dve-kolone .dugme{width:100%}
}

/* ==========================================================================
   NOVI SADRZAJ: izjava u herou, imena sa predstavama, zakljucak u poglavlju
   ========================================================================== */
.hero__izjava{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.05rem,1.5vw,1.3rem);letter-spacing:.06em;line-height:1.3;
  color:rgba(251,248,241,.9);max-width:34ch;
  margin:calc(-1 * var(--s-3)) 0 var(--s-6);
}
.scena__izjava{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.05rem,1.6vw,1.3rem);letter-spacing:.05em;line-height:1.3;
  color:var(--krem-50);margin-top:var(--s-5);
}

.zid-imena li{display:block}
.zid-imena__ime{display:block}
.zid-imena__u{
  display:block;margin-top:.1rem;
  font-family:var(--font-tekst);font-weight:400;text-transform:none;
  font-size:.875rem;line-height:1.45;letter-spacing:0;color:var(--tekst-tise);
}

@media (max-width:640px){
  .hero__izjava{font-size:1rem;margin-bottom:var(--s-5)}
  .zid-imena li{padding-block:.45rem}
  .zid-imena__u{font-size:.8125rem}
}