/* ============================================================
   Studio Centar - komponente
   Vanilla prevod komponenti iz design systema (components/*).
   Sve vrednosti dolaze iz tokens.css.
   ============================================================ */

/* ============================================================
   Button  (core/Button)
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:var(--font-text);font-weight:var(--fw-semibold);letter-spacing:.01em;
  border-radius:var(--r-button);border:var(--bw-solid) solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  padding:12px 20px;font-size:var(--fs-body);min-height:46px;
  transition:background-color var(--t-hover),color var(--t-hover),
             border-color var(--t-hover),transform var(--t-press);
}
.btn:active{transform:scale(var(--press-scale))}
.btn--sm{padding:8px 14px;font-size:var(--fs-sm);min-height:36px}
.btn--lg{padding:16px 28px;font-size:var(--fs-body-lg);min-height:56px}
.btn--full{width:100%}

/* strelica je jedini grafički znak u sistemu */
.btn .arrow{font-family:var(--font-mono);transition:transform var(--t-hover)}
.btn:hover .arrow{transform:translateX(3px)}

.btn--primary{background:var(--action);border-color:var(--action);color:var(--text-onbrand)}
.btn--primary:hover{background:var(--action-hover);border-color:var(--action-hover);color:var(--text-onbrand)}
.btn--secondary{background:transparent;border-color:var(--border-solid);color:var(--text-strong)}
.btn--secondary:hover{background:var(--paper-2);border-color:var(--border-strong);color:var(--text-strong)}
.btn--ghost{background:transparent;border-color:transparent;color:var(--action);padding:8px 4px;min-height:0}
.btn--ghost:hover{color:var(--action-hover)}

/* na tamnoj podlozi */
.sc-stage .btn--primary,.btn--primary.on-stage{background:var(--action-stage);border-color:var(--action-stage);color:var(--coal-900)}
.sc-stage .btn--primary:hover,.btn--primary.on-stage:hover{background:var(--action-stage-hover);border-color:var(--action-stage-hover);color:var(--coal-900)}
.sc-stage .btn--secondary,.btn--secondary.on-stage{border-color:var(--border-stage-strong);color:var(--text-stage-strong)}
.sc-stage .btn--secondary:hover,.btn--secondary.on-stage:hover{background:var(--coal-600);border-color:var(--chalk-2);color:var(--text-stage-strong)}
.sc-stage .btn--ghost,.btn--ghost.on-stage{color:var(--action-stage)}
.sc-stage .btn--ghost:hover,.btn--ghost.on-stage:hover{color:var(--chalk-0)}

/* dugme na zelenom CTA bloku: belo */
.btn--onbrand{background:var(--paper-0);border-color:var(--paper-0);color:var(--green-900)}
.btn--onbrand:hover{background:var(--paper-2);border-color:var(--paper-2);color:var(--green-900)}

.btn[disabled],.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}

/* ============================================================
   StatusBadge  (core/StatusBadge) - tri fiksna statusa
   ============================================================ */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid currentColor;border-radius:var(--r-badge);padding:3px 8px;
  font:var(--type-mono);text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);font-size:var(--fs-eyebrow);
}
.badge::before{content:"";width:6px;height:6px;background:currentColor;border-radius:var(--r-pill);flex:0 0 auto}
.badge--live{color:var(--status-live-fg);background:var(--status-live-bg)}
.badge--soon{color:var(--status-soon-fg);background:var(--status-soon-bg)}
.badge--archive{color:var(--status-archive-fg);background:var(--status-archive-bg)}
.sc-stage .badge--live{color:var(--status-live-stage-fg);background:var(--status-live-stage-bg)}
.sc-stage .badge--soon{color:var(--status-soon-stage-fg);background:var(--status-soon-stage-bg)}
.sc-stage .badge--archive{color:var(--status-archive-stage-fg);background:var(--status-archive-stage-bg)}

/* ============================================================
   SectionHeading  (core/SectionHeading)
   2px linija iznad naslova je strukturni potpis sistema.
   ============================================================ */
.section-heading{
  display:flex;gap:var(--sp-6);align-items:flex-end;justify-content:space-between;flex-wrap:wrap;
  border-top:var(--bw-strong) solid var(--border-strong);
  padding-top:var(--sp-4);margin-bottom:var(--sp-8);
}
.sc-stage .section-heading{border-top-color:var(--border-stage-strong)}
.section-heading__text{max-width:62ch;flex:1 1 320px}
.section-heading .eyebrow{display:block;margin-bottom:var(--sp-3)}
.section-heading h2,.section-heading h1{
  font:var(--fw-bold) var(--fs-d2)/var(--lh-display) var(--font-display);
  letter-spacing:var(--ls-display);
}
.section-heading__lead{margin-top:var(--sp-4);font:var(--type-body);font-size:var(--fs-body-lg);color:var(--text-body)}
.sc-stage .section-heading__lead{color:var(--text-stage-body)}
.section-heading__action{flex:0 0 auto;padding-bottom:4px}

/* ============================================================
   ShowCard  (theatre/ShowCard)
   Plakat sedi u uvučenom okviru - bez toga skoro beo plakat
   iscuri u papir, a skoro crn u ugljenu podlogu.
   ============================================================ */
.show-card{
  display:flex;flex-direction:column;text-decoration:none;
  background:var(--surface-card);border:var(--border-card);
  border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--shadow-none);
  transition:transform var(--t-hover),box-shadow var(--t-hover),border-color var(--t-hover);
}
.show-card:hover{transform:translateY(-2px);border-color:var(--border-strong);box-shadow:var(--shadow-card-hover)}
.sc-stage .show-card{background:var(--surface-stage-raised);border:var(--border-card-stage)}
.sc-stage .show-card:hover{border-color:var(--chalk-2);box-shadow:var(--shadow-stage-hover)}

.show-card__frame{
  margin:var(--sp-3) var(--sp-3) 0;
  position:relative;aspect-ratio:5/7;overflow:hidden;
  border:var(--frame-poster);border-radius:var(--r-media);background:var(--paper-2);
}
.sc-stage .show-card__frame{border:var(--frame-poster-stage);background:var(--coal-700)}
.show-card__frame img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.94);
  transition:filter var(--t-hover),transform var(--t-reveal);
}
.show-card:hover .show-card__frame img{filter:none;transform:scale(1.02)}

.show-card__body{
  padding:var(--sp-4) var(--sp-4) var(--sp-5);
  display:flex;flex-direction:column;gap:var(--sp-3);flex:1;
}
.show-card__title{font:var(--fw-bold) var(--fs-h1)/var(--lh-heading) var(--font-display);letter-spacing:var(--ls-heading)}
.sc-stage .show-card__title{color:var(--text-stage-strong)}
.show-card__note{font:var(--type-meta);color:var(--text-body)}
.sc-stage .show-card__note{color:var(--text-stage-body)}
.show-card__meta{
  margin-top:auto;padding-top:var(--sp-3);
  border-top:1px solid var(--border-hairline);
  display:flex;gap:var(--sp-4);flex-wrap:wrap;
  font:var(--type-mono);color:var(--text-muted);
}
.sc-stage .show-card__meta{border-top-color:var(--border-stage);color:var(--text-stage-muted)}

/* ============================================================
   RepertoireRow  (theatre/RepertoireRow)
   ============================================================ */
.repertoire{border:1px solid var(--border-hairline)}
.sc-stage .repertoire{border-color:var(--border-stage)}

.rep-row{
  display:grid;grid-template-columns:84px 96px minmax(0,1fr) auto;
  align-items:center;gap:var(--sp-4);
  padding:var(--sp-4);
  border-bottom:1px solid var(--border-hairline);
  transition:background-color var(--t-hover);
}
.sc-stage .rep-row{border-bottom-color:var(--border-stage)}
.rep-row:last-child{border-bottom:0}
.rep-row:hover{background:var(--paper-2)}
.sc-stage .rep-row:hover{background:var(--coal-700)}

.rep-row__date{display:flex;align-items:baseline;gap:6px}
.rep-row__day{
  font:var(--fw-bold) 2rem/1 var(--font-display);
  letter-spacing:-.02em;color:var(--action);font-variant-numeric:tabular-nums;
}
.sc-stage .rep-row__day{color:var(--action-stage)}
.rep-row__month{font:var(--type-mono);text-transform:uppercase;color:var(--text-muted)}
.sc-stage .rep-row__month{color:var(--text-stage-muted)}

.rep-row__when{
  font:var(--type-mono);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
  color:var(--text-muted);display:flex;flex-direction:column;gap:4px;
}
.sc-stage .rep-row__when{color:var(--text-stage-muted)}
.rep-row__time{color:var(--text-strong);font-size:var(--fs-sm)}
.sc-stage .rep-row__time{color:var(--text-stage-strong)}

.rep-row__main{min-width:0}
.rep-row__title{font:var(--fw-bold) var(--fs-h2)/var(--lh-heading) var(--font-display);letter-spacing:var(--ls-heading);color:var(--text-strong)}
.sc-stage .rep-row__title{color:var(--text-stage-strong)}
.rep-row__title a{color:inherit;text-decoration:none}
.rep-row__title a:hover{text-decoration:underline}
.rep-row__scene{font:var(--type-mono);color:var(--text-muted);margin-top:4px}
.sc-stage .rep-row__scene{color:var(--text-stage-muted)}

.rep-row__soldout{
  font:var(--type-mono);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
  color:var(--text-muted);border:1px solid var(--border-hairline);padding:8px 12px;display:inline-block;
}
.sc-stage .rep-row__soldout{color:var(--text-stage-muted);border-color:var(--border-stage)}

/* prazan repertoar - nikad prazna sekcija */
.repertoire__empty{padding:var(--sp-10) var(--sp-4);text-align:center}
.repertoire__empty p{font:var(--type-body);font-size:var(--fs-body-lg);color:var(--text-body)}
.sc-stage .repertoire__empty p{color:var(--text-stage-body)}

@media (max-width:720px){
  .rep-row{grid-template-columns:64px minmax(0,1fr);gap:var(--sp-3) var(--sp-4)}
  .rep-row__when{grid-column:2;flex-direction:row;gap:var(--sp-3)}
  .rep-row__main{grid-column:2}
  .rep-row__action{grid-column:2;justify-self:start}
  .rep-row__date{grid-row:span 3;align-self:start}
}

/* ============================================================
   ShowCredits  (theatre/ShowCredits) - krediti + podela u dve kolone
   ============================================================ */
.credits{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-12)}
.credits dl{margin:0}
.credits__row{
  display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:var(--sp-4);
  padding:var(--sp-3) 0;border-bottom:1px solid var(--border-hairline);
}
.sc-stage .credits__row{border-bottom-color:var(--border-stage)}
.credits__row dt{font:var(--type-mono);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--text-muted)}
.sc-stage .credits__row dt{color:var(--text-stage-muted)}
.credits__row dd{margin:0;font:var(--type-meta);font-size:var(--fs-body);color:var(--text-strong)}
.sc-stage .credits__row dd{color:var(--text-stage-strong)}

.cast__title{
  font:var(--type-mono);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
  color:var(--text-muted);padding-bottom:var(--sp-3);border-bottom:1px solid var(--border-hairline);
}
.sc-stage .cast__title{color:var(--text-stage-muted);border-bottom-color:var(--border-stage)}
.cast__list{list-style:none;margin:0;padding:0;columns:2;column-gap:var(--sp-8)}
.cast__list li{break-inside:avoid;padding:var(--sp-2) 0;font:var(--type-body);font-size:var(--fs-sm);color:var(--text-body)}
.sc-stage .cast__list li{color:var(--text-stage-body)}
.cast__role{font:var(--type-mono);text-transform:uppercase;color:var(--text-muted);display:block}
.sc-stage .cast__role{color:var(--text-stage-muted)}
@media (max-width:520px){.cast__list{columns:1}}

/* ============================================================
   ProgramCard  (programs/ProgramCard)
   ============================================================ */
.program-card{
  display:flex;flex-direction:column;gap:var(--sp-4);height:100%;
  background:var(--surface-card);border:var(--border-card);border-radius:var(--r-card);
  padding:var(--sp-6);box-shadow:var(--shadow-none);
  transition:border-color var(--t-hover),box-shadow var(--t-hover);
}
.program-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-card-hover)}
.program-card__index{font:var(--type-mono);color:var(--text-muted)}
.program-card__title{font:var(--fw-bold) var(--fs-h1)/var(--lh-heading) var(--font-display);letter-spacing:var(--ls-heading)}
.program-card__tags{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.tag{
  font:var(--type-mono);color:var(--text-body);background:var(--surface-sunken);
  border:1px solid var(--border-hairline);border-radius:var(--r-badge);padding:4px 8px;
}
.program-card__desc{font:var(--type-body);color:var(--text-body)}
.program-card__foot{
  margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--border-hairline);
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
}
.program-card__price{font:var(--fw-semibold) var(--fs-body-lg)/1.2 var(--font-text);color:var(--text-strong)}

/* ============================================================
   PriceTable  (programs/PriceTable)
   Na mobilnom prelazi u kartice, NE u horizontalni scroll.
   ============================================================ */
.price-table{background:var(--surface-card);border:var(--border-card);border-radius:var(--r-card)}
.price-table th{
  text-align:left;font:var(--type-mono);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
  color:var(--text-muted);font-weight:var(--fw-medium);
  padding:var(--sp-4) var(--sp-5);border-bottom:var(--bw-solid) solid var(--border-strong);
}
.price-table td{padding:var(--sp-5);border-bottom:1px solid var(--border-hairline);font:var(--type-body);font-size:var(--fs-sm);color:var(--text-body)}
.price-table tr:last-child td{border-bottom:0}
.price-table .cell-program{font:var(--fw-semibold) var(--fs-body)/1.35 var(--font-text);color:var(--text-strong)}
.price-table .cell-detail{font:var(--type-meta);font-weight:var(--fw-regular);color:var(--text-muted);margin-top:4px}
.price-table .cell-age{white-space:nowrap}
.price-table th:last-child,.price-table .cell-price{
  text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.price-table .cell-price{font:var(--fw-semibold) var(--fs-body)/1.3 var(--font-text);color:var(--text-strong)}
.price-note{margin-top:var(--sp-4);font:var(--type-meta);color:var(--text-muted)}

@media (max-width:760px){
  .price-table,.price-table tbody,.price-table tr,.price-table td{display:block;width:100%}
  .price-table thead{display:none}
  .price-table{border:0;background:transparent}
  .price-table tr{
    background:var(--surface-card);border:var(--border-card);border-radius:var(--r-card);
    padding:var(--sp-5);margin-bottom:var(--grid-gap);
  }
  .price-table td{border-bottom:0;padding:0}
  .price-table td + td{margin-top:var(--sp-3)}
  /* labela kolone ispred vrednosti na mobilnom */
  .price-table td[data-label]::before{
    content:attr(data-label);display:block;
    font:var(--type-mono);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
    color:var(--text-muted);margin-bottom:4px;
  }
  .price-table .cell-price{
    text-align:left;padding-top:var(--sp-3);
    border-top:1px solid var(--border-hairline);font-size:var(--fs-body-lg);
  }
}

/* ============================================================
   EnrollCTA  (programs/EnrollCTA) - jedini pun blok boje
   ============================================================ */
/* Podloga je green-800, a ne green-700: nadnaslov u lisnatoj zelenoj
   na svetlijoj podlozi daje 3.4:1, a na ovoj 5.47:1. */
.enroll-cta{
  background:var(--green-800);color:var(--paper-0);border-radius:var(--r-card);
  padding:clamp(28px,5vw,64px);
  display:grid;
  /* tekstualna kolona je šira; dugmad se poravnavaju sa DNOM teksta,
     inače lebde na sredini i ostavljaju praznu površinu ispod sebe */
  grid-template-columns:minmax(0,1.45fr) minmax(240px,auto);
  gap:var(--sp-10);align-items:end;
}
@media (max-width:860px){
  .enroll-cta{grid-template-columns:1fr;gap:var(--sp-8)}
}
.enroll-cta .eyebrow{color:var(--leaf-onbrand);display:block;margin-bottom:var(--sp-4)}
.enroll-cta h2{
  font:var(--fw-black) var(--fs-d1)/var(--lh-display) var(--font-display);
  letter-spacing:var(--ls-display);color:var(--paper-0);
}
.enroll-cta__lead{margin-top:var(--sp-5);font:var(--type-body);font-size:var(--fs-body-lg);color:var(--onbrand-lead);max-width:48ch}
.enroll-cta__actions{display:flex;flex-direction:column;gap:var(--sp-4);align-items:flex-start}
.enroll-cta__note{font:var(--type-mono);color:var(--onbrand-note)}
.enroll-cta__note a{color:var(--paper-0)}
.enroll-cta .btn--secondary{border-color:var(--onbrand-border);color:var(--paper-0)}
.enroll-cta .btn--secondary:hover{background:var(--green-900);border-color:var(--paper-0);color:var(--paper-0)}

/* ============================================================
   TeamCard  (people/TeamCard)
   Fiksan isečak 4:5 + grayscale poravnava neujednačenu arhivu.
   ============================================================ */
.team-card{display:flex;flex-direction:column;gap:var(--sp-3);margin:0}
.team-card__photo{
  aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-media);
  border:var(--frame-poster);background:var(--paper-2);
}
.sc-stage .team-card__photo{border:var(--frame-poster-stage);background:var(--coal-700)}
.team-card__photo img{
  width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  filter:grayscale(1) contrast(1.04);transition:filter var(--t-reveal);
}
.team-card:hover .team-card__photo img{filter:grayscale(.15) contrast(1.02)}
.team-card__name{font:var(--fw-bold) var(--fs-h3)/1.25 var(--font-display);color:var(--text-strong)}
.sc-stage .team-card__name{color:var(--text-stage-strong)}
.team-card__role{font:var(--type-mono);color:var(--text-muted);margin-top:4px}
.sc-stage .team-card__role{color:var(--text-stage-muted)}

/* ============================================================
   PartnerStrip  (brand/PartnerStrip)
   ============================================================ */
.partners{
  border-top:1px solid var(--border-hairline);border-bottom:1px solid var(--border-hairline);
  padding:var(--sp-6) 0;display:flex;align-items:center;gap:var(--sp-10);flex-wrap:wrap;
}
.sc-stage .partners{border-color:var(--border-stage)}
.partners__title{font:var(--type-mono);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--text-muted)}
.sc-stage .partners__title{color:var(--text-stage-muted)}
.partners__list{display:flex;align-items:center;gap:var(--sp-10);flex-wrap:wrap}
.partners__list img{height:38px;width:auto;filter:grayscale(1) opacity(.72)}
.sc-stage .partners__list img{filter:grayscale(1) invert(1) opacity(.8)}
/* partner bez logo-artworka: tipografski žig, logotipi se ne izmišljaju */
.partners__wordmark{font:var(--fw-bold) var(--fs-h3)/1 var(--font-display);letter-spacing:.02em;color:var(--text-muted)}
.sc-stage .partners__wordmark{color:var(--text-stage-muted)}

/* ============================================================
   SiteHeader  (navigation/SiteHeader)
   Jedini blur na sajtu. Logo klijenta je rađen za crnu podlogu,
   pa u svetlom zaglavlju sedi na tamnoj pločici.
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--surface-header);backdrop-filter:saturate(1.1) blur(10px);
  border-bottom:1px solid var(--border-hairline);
}
.site-header__inner{
  max-width:var(--container);margin:0 auto;padding:var(--sp-3) var(--gutter);
  display:flex;align-items:center;gap:var(--sp-4);
}

/* logo na tamnoj pločici, jer mu je pozadina crna */
.site-header__logo{
  flex:0 0 auto;display:block;text-decoration:none;
  line-height:0;
  transition:opacity var(--t-hover);
}
.site-header__logo:hover{opacity:.88}
/* Logo je isečen do same grafike (bez providne margine), pa mu se leva ivica
   poklapa sa ivicom sadržaja. Podnaslov je sitan, zato je logo krupan. */
.site-header__logo img{height:54px;width:auto;display:block}
@media (min-width:1001px){.site-header__logo{margin-right:var(--sp-4)}}

.site-nav{display:flex;gap:var(--sp-5);flex-wrap:wrap}
.site-nav a{
  font:var(--fw-medium) var(--fs-sm)/1 var(--font-text);letter-spacing:.01em;
  color:var(--text-body);text-decoration:none;
  padding-bottom:4px;border-bottom:2px solid transparent;
  transition:color var(--t-hover),border-color var(--t-hover);
}
.site-nav a:hover{color:var(--text-strong)}
.site-nav a[aria-current="page"]{color:var(--text-strong);border-bottom-color:var(--action)}

.site-header__actions{margin-left:auto;display:flex;align-items:center;gap:var(--sp-3)}

/* delovi panela vidljivi samo na mobilnom */
.site-nav-wrap__head,.site-nav-wrap__foot{display:none}

/* ---- hamburger --------------------------------------------------
   Tri linije koje se na otvaranju pretvaraju u X. Bez biblioteke. */
.nav-toggle{
  display:none;
  width:44px;height:44px;                /* pun cilj za prst */
  align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border-solid);
  border-radius:var(--r-2);cursor:pointer;padding:0;
  transition:border-color var(--t-hover),background-color var(--t-hover);
}
.nav-toggle:hover{border-color:var(--border-strong);background:var(--paper-2)}
.nav-toggle__box{position:relative;display:block;width:20px;height:14px}
.nav-toggle__lines,
.nav-toggle__lines::before,
.nav-toggle__lines::after{
  position:absolute;left:0;width:20px;height:2px;
  background:var(--text-strong);border-radius:2px;
  transition:transform var(--t-hover),opacity var(--dur-1) var(--ease-out);
}
.nav-toggle__lines{top:6px}
.nav-toggle__lines::before{content:"";top:-6px}
.nav-toggle__lines::after{content:"";top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle__lines{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__lines::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__lines::after{transform:translateY(-6px) rotate(-45deg)}

/* zatamnjenje iza panela */
.nav-backdrop{
  position:fixed;inset:0;z-index:40;
  background:rgba(10,12,10,.55);
  opacity:0;transition:opacity var(--t-hover);
}
.nav-backdrop[hidden]{display:none}
.nav-backdrop.je-otvoren{opacity:1}

@media (max-width:1000px){
  /* backdrop-filter na zaglavlju pravi containing block, pa bi panel
     sa position:fixed bio zakovan za zaglavlje umesto za ekran.
     Na mobilnom blur nije potreban, zaglavlje ide u punu boju. */
  .site-header{backdrop-filter:none;background:var(--paper-1)}

  .nav-toggle{display:inline-flex}

  /* navigacija postaje panel koji klizi s desne strane */
  .site-nav-wrap{
    position:fixed;top:0;right:0;bottom:0;z-index:70;
    width:min(340px,86vw);
    background:var(--surface-stage);color:var(--text-stage-body);
    border-left:1px solid var(--border-stage);
    box-shadow:var(--shadow-overlay);
    display:flex;flex-direction:column;
    transform:translateX(100%);
    transition:transform var(--dur-3) var(--ease-out);
    overscroll-behavior:contain;
  }
  .site-nav-wrap.je-otvoren{transform:translateX(0)}

  .site-nav-wrap__head{
    display:flex;align-items:center;justify-content:space-between;
    padding:var(--sp-4) var(--sp-5);
    border-bottom:1px solid var(--border-stage);
    flex:0 0 auto;
  }
  .site-nav-wrap__title{
    font:var(--type-mono);text-transform:uppercase;
    letter-spacing:var(--ls-eyebrow);color:var(--text-stage-muted);
  }
  .nav-close{
    width:40px;height:40px;display:flex;align-items:center;justify-content:center;
    background:transparent;border:1px solid var(--border-stage-strong);
    border-radius:var(--r-2);color:var(--text-stage-strong);
    font-size:24px;line-height:1;cursor:pointer;
    transition:border-color var(--t-hover),background-color var(--t-hover);
  }
  .nav-close:hover{border-color:var(--chalk-2);background:var(--coal-700)}

  .site-nav{
    display:block;flex:1 1 auto;overflow-y:auto;
    padding:var(--sp-2) var(--sp-5);
  }
  .site-nav a{
    display:block;padding:var(--sp-4) 0;
    font:var(--fw-semibold) var(--fs-h3)/1.2 var(--font-display);
    color:var(--text-stage-body);
    border-bottom:1px solid var(--border-stage);
    border-left:0;
    transition:color var(--t-hover),padding-left var(--t-hover);
  }
  .site-nav a:last-child{border-bottom:0}
  .site-nav a:hover{color:var(--text-stage-strong);padding-left:var(--sp-2)}
  .site-nav a[aria-current="page"]{
    color:var(--action-stage);border-bottom-color:var(--border-stage);
  }

  .site-nav-wrap__foot{
    display:grid;gap:var(--sp-3);
    padding:var(--sp-5);
    border-top:1px solid var(--border-stage);
    flex:0 0 auto;
  }
  /* panel je tamna površina, pa dugme ide u scensku zelenu kao i
     u ostalim tamnim sekcijama, a ne u tamnozelenu sa svetle strane */
  .site-nav-wrap .btn--primary{
    background:var(--action-stage);border-color:var(--action-stage);color:var(--coal-900);
  }
  .site-nav-wrap .btn--primary:hover{
    background:var(--action-stage-hover);border-color:var(--action-stage-hover);color:var(--coal-900);
  }
  .site-nav-wrap :focus-visible{outline-color:var(--focus-ring-stage)}

  .site-nav-wrap__tel{
    text-align:center;font:var(--type-mono);
    color:var(--text-stage-body);text-decoration:none;padding:var(--sp-2);
  }
  .site-nav-wrap__tel:hover{color:var(--action-stage)}

  /* dugme u zaglavlju se sklanja na najužim ekranima, ostaje u panelu */
  .site-header__logo img{height:42px}
}

@media (max-width:359px){
  .site-header__cta{display:none}
}

@media (prefers-reduced-motion:reduce){
  .site-nav-wrap{transition:none}
  .nav-backdrop{transition:none}
}

/* telo se ne skroluje dok je panel otvoren */
body.meni-otvoren{overflow:hidden}

/* ============================================================
   SiteFooter  (navigation/SiteFooter) - uvek taman
   ============================================================ */
.site-footer{background:var(--surface-stage);color:var(--text-stage-body);padding:var(--section-y) 0 var(--sp-8)}
.site-footer__grid{display:grid;grid-template-columns:minmax(240px,1.4fr) repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-10)}
.site-footer__logo{height:34px;width:auto;margin-bottom:var(--sp-5)}
.site-footer picture{display:block}
.site-footer address{font-style:normal;font:var(--type-body);font-size:var(--fs-sm);color:var(--text-stage-body);display:grid;gap:6px}
.site-footer__col-title{font:var(--type-mono);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--text-stage-muted);margin-bottom:var(--sp-4)}
.site-footer ul{list-style:none;display:grid;gap:var(--sp-3)}
.site-footer ul a{font:var(--type-body);font-size:var(--fs-sm);color:var(--text-stage-body);text-decoration:none}
.site-footer ul a:hover{color:var(--chalk-0);text-decoration:underline}
@media (max-width:760px){
  .site-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-8)}
  .site-footer__grid > :first-child{grid-column:1 / -1}
}
@media (max-width:420px){
  .site-footer__grid{grid-template-columns:1fr}
}
.site-footer__legal{
  margin-top:var(--sp-16);padding-top:var(--sp-5);border-top:1px solid var(--border-stage);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-4);
  font:var(--type-mono);color:var(--text-stage-muted);
}

/* ============================================================
   Forme  (kontakt)
   ============================================================ */
/* Forma se ne razvlači preko cele širine - duga polja se teško popunjavaju.
   Leva ivica ostaje ista kao kod ostalih sekcija. */
.form{display:grid;gap:var(--sp-5);max-width:700px}
.form__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-5)}
.field{display:flex;flex-direction:column;gap:var(--sp-2)}
.field label{font:var(--type-mono);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--text-muted)}
.field .req{color:var(--action)}
.field input,.field select,.field textarea{
  background:var(--surface-card);color:var(--text-strong);
  border:1px solid var(--border-solid);border-radius:var(--r-2);
  padding:12px 14px;font:var(--type-body);min-height:46px;width:100%;
  transition:border-color var(--t-hover);
}
.field textarea{min-height:120px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--border-strong)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--ember);border-width:var(--bw-solid)}
.field__error{font:var(--type-meta);font-size:var(--fs-sm);color:var(--ember);min-height:0}
.field__hint{font:var(--type-meta);font-size:var(--fs-sm);color:var(--text-muted)}

.field--check{flex-direction:row;align-items:flex-start;gap:var(--sp-3);flex-wrap:wrap}
.field--check .field__error{flex:1 0 100%}
.field--check input{width:18px;height:18px;min-height:0;flex:0 0 auto;margin-top:3px;accent-color:var(--action)}
.field--check label{font:var(--type-body);font-size:var(--fs-sm);color:var(--text-body);text-transform:none;letter-spacing:0}

/* honeypot - skriveno polje, nikad vidljivo korisniku */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* poruka o uspehu/grešci ispod forme - bez alert() */
.form__status{padding:var(--sp-4) var(--sp-5);border-radius:var(--r-card);font:var(--type-body);font-size:var(--fs-sm)}
.form__status[hidden]{display:none}
.form__status--ok{background:var(--status-ok-bg);color:var(--status-ok-fg);border:1px solid var(--status-ok-border)}
.form__status--err{background:var(--status-error-bg);color:var(--status-error-fg);border:1px solid var(--status-error-border)}

/* ============================================================
   Ostalo
   ============================================================ */
/* statistika: 20 godina, 33+ premijere… */
.stat{border-top:var(--bw-strong) solid var(--border-strong);padding-top:var(--sp-3)}
.sc-stage .stat{border-top-color:var(--border-stage-strong)}
.stat__n{font:var(--fw-black) var(--fs-d2)/1 var(--font-display);letter-spacing:var(--ls-display);color:var(--text-strong)}
.sc-stage .stat__n{color:var(--text-stage-strong)}
.stat__l{margin-top:6px;font:var(--type-mono);color:var(--text-muted)}
.sc-stage .stat__l{color:var(--text-stage-muted)}

/* info blok (kontakt, detalji) - ista 2px linija kao naslov sekcije */
.info-block{border-top:var(--bw-strong) solid var(--border-strong);padding-top:var(--sp-4)}
.sc-stage .info-block{border-top-color:var(--border-stage-strong)}
.info-block__k{font:var(--type-mono);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--text-muted)}
.sc-stage .info-block__k{color:var(--text-stage-muted)}
.info-block__v{font:var(--type-body);color:var(--text-strong);margin-top:var(--sp-2);white-space:pre-line}
.sc-stage .info-block__v{color:var(--text-stage-strong)}

/* filteri na strani Predstave */
.filters{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-8)}
.filter{
  background:transparent;border:1px solid var(--border-stage-strong);border-radius:var(--r-button);
  padding:8px 14px;cursor:pointer;
  font:var(--type-mono);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
  color:var(--text-stage-body);transition:background-color var(--t-hover),color var(--t-hover),border-color var(--t-hover);
}
.filter:hover{border-color:var(--chalk-2);color:var(--text-stage-strong)}
.filter[aria-pressed="true"]{background:var(--action-stage);border-color:var(--action-stage);color:var(--coal-900)}

/* slika sa scene / programa */
.media{border:var(--frame-poster);border-radius:var(--r-media);overflow:hidden;background:var(--paper-2)}
.sc-stage .media{border:var(--frame-poster-stage);background:var(--coal-700)}
.media img{width:100%;display:block}

/* detalj predstave: plakat u okviru */
.show-hero{display:grid;grid-template-columns:minmax(240px,340px) minmax(0,1fr);gap:var(--sp-16);align-items:start}
@media (max-width:760px){.show-hero{grid-template-columns:1fr;gap:var(--sp-8)}}
.show-hero__poster{border:var(--frame-poster-stage);padding:var(--sp-3)}
.show-hero__meta{display:flex;gap:var(--sp-6);flex-wrap:wrap;font:var(--type-mono);color:var(--text-stage-muted);margin-top:var(--sp-5)}

/* ============================================================
   Hero sa fotografijom
   Design system definiše --scrim-bottom kao „protection gradient
   for text over stage photography", ali ga nijedna komponenta
   nije koristila. Ovde se konačno koristi.
   ============================================================ */
.hero-photo{
  position:relative;
  background:var(--surface-stage);
  min-height:clamp(420px,62vh,640px);
  display:flex;align-items:flex-end;
  overflow:hidden;
}
.hero-photo__media{position:absolute;inset:0}
.hero-photo__media img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
/* Zaštitni gradijent - ne poluprovidna kapsula.
   --scrim-bottom je providan pri vrhu, a hero tekst se penje u tu zonu,
   pa ispod njega ide i --scrim-flat kao ravna osnova. Oba su iz design systema. */
.hero-photo__media::after{
  content:"";position:absolute;inset:0;
  background-color:var(--scrim-flat);
  background-image:var(--scrim-bottom);
}
.hero-photo__body{position:relative;z-index:1;width:100%;padding:var(--section-y) 0 var(--sp-16)}
.hero-photo h1{color:var(--chalk-0)}
.hero-photo .t-lead{color:var(--text-stage-body)}
.hero-photo .eyebrow{color:var(--action-stage)}
/* probno: hero dugme u istoj zelenoj kao dugme u navigaciji */
.hero-photo .btn--primary{background:var(--action);border-color:var(--action);color:var(--text-onbrand)}
.hero-photo .btn--primary:hover{background:var(--action-hover);border-color:var(--action-hover);color:var(--text-onbrand)}

/* traka sa brojevima ispod heroja, na ugljenoj podlozi */
.hero-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--grid-gap);margin-top:var(--sp-10);
}

/* ============================================================
   Galerija fotografija sa scene
   ============================================================ */
.galerija{
  display:grid;
  /* Broj kolona prati broj fotografija, da poslednji red nikad ne ostane
     sa jednom slikom: 6 fotografija → 3+3, 4 fotografije → 2+2. */
  grid-template-columns:repeat(2,1fr);
  gap:var(--grid-gap);
}
@media (min-width:900px){
  .galerija{grid-template-columns:repeat(3,1fr)}
  .galerija--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .galerija{grid-template-columns:1fr}
}
.galerija figure{margin:0}
.galerija .media{
  aspect-ratio:3/2;overflow:hidden;
  transition:border-color var(--t-hover),transform var(--t-hover);
}
.galerija .media img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.94);
  transition:filter var(--t-hover),transform var(--t-reveal);
}
.galerija figure:hover .media{transform:translateY(-2px);border-color:var(--chalk-2)}
.galerija figure:hover .media img{filter:none;transform:scale(1.02)}
.galerija figcaption{
  margin-top:var(--sp-2);font:var(--type-mono);color:var(--text-muted);
}
.sc-stage .galerija figcaption{color:var(--text-stage-muted)}


/* ============================================================
   Puna traka fotografije (predah između svetlih sekcija)
   ============================================================ */
.foto-traka{
  position:relative;
  min-height:clamp(260px,38vh,420px);
  overflow:hidden;
  background:var(--surface-stage);
  display:flex;align-items:flex-end;
}
.foto-traka img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.foto-traka::after{content:"";position:absolute;inset:0;background-color:var(--scrim-flat);background-image:var(--scrim-bottom)}
/* z-index je obavezan: ::after sa scrimom je poslednje dete kontejnera,
   pa bi se bez ovoga crtao PREKO teksta i gutao ga. */
.foto-traka__body{position:relative;z-index:1;width:100%;padding:var(--sp-10) 0}
.foto-traka__body p{color:var(--chalk-0);font:var(--fw-bold) var(--fs-h1)/var(--lh-heading) var(--font-display);letter-spacing:var(--ls-heading);max-width:28ch}
.foto-traka__body .eyebrow{color:var(--action-stage);display:block;margin-bottom:var(--sp-3)}


/* ============================================================
   Popravke rasporeda
   ============================================================ */

/* Pet kartica u auto-fit mreži ostavljaju siroče u drugom redu.
   Na širokim ekranima: 3 u prvom redu, 2 centrirana u drugom. */
@media (min-width:940px){
  .grid--5{grid-template-columns:repeat(6,1fr)}
  .grid--5 > *{grid-column:span 2}
  .grid--5 > *:nth-child(4){grid-column:2 / span 2}
  .grid--5 > *:nth-child(5){grid-column:4 / span 2}
}

/* Arhiva: 9 naslova - tri kolone daju tri puna reda, bez siročeta.
   Lakši tretman od info-block: hairline umesto 2px linije. */
.grid--arhiva{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.arhiva-stavka{
  border-top:1px solid var(--border-stage);
  padding-top:var(--sp-3);
}
.arhiva-stavka p{font:var(--type-body);font-size:var(--fs-sm);color:var(--text-stage-body)}

/* Plakat koji nije uspravan: prikazuje se ceo, u okviru, umesto da se seče.
   „Deca na internetu 2" je horizontalan i u 3:4 isečku gubi naslov. */
.show-card__frame--wide img{object-fit:contain;background:var(--coal-800)}
.sc-stage .show-card__frame--wide{background:var(--coal-800)}
.show-card__frame--wide{background:var(--paper-2)}

/* Partneri: logo je bio presitan i preblede da bi se video. */
.partners__list img{height:52px;filter:grayscale(1)}
.sc-stage .partners__list img{filter:grayscale(1) invert(1) opacity(.85)}

/* Kraći hero za podstranice */
.hero-photo--kratak{min-height:clamp(300px,42vh,440px)}

/* Figura sa potpisom van galerije */
.media-figure{margin:0}
.media-figure figcaption{margin-top:var(--sp-2);font:var(--type-mono);color:var(--text-muted)}
.sc-stage .media-figure figcaption{color:var(--text-stage-muted)}

/* Sekcije programa imaju dugačku listu levo i jednu sliku desno.
   Bez ovoga slika ostane na vrhu, a pored nje zjapi prazna kolona.
   Lepljiva slika prati čitanje i rupa nestaje. */
@media (min-width:900px){
  .grid--halves > .media{position:sticky;top:96px}
}

/* ---- Siročad na tablet širini -------------------------------------
   Auto-fit mreže se na ~768px prelome u dve kolone, pa neparan broj
   stavki ostavi poslednji red sa jednom. Svaka dobija svoje pravilo. */
@media (min-width:620px) and (max-width:939px){
  /* 5 kartica u dve kolone → peta preko obe */
  .grid--5 > *:nth-child(5){grid-column:span 2}
  /* 4 člana tima → 2+2 umesto 3+1 */
  .grid--team{grid-template-columns:repeat(2,1fr)}
  /* 9 naslova arhive → tri pune kolone */
  .grid--arhiva{grid-template-columns:repeat(3,1fr)}
  /* tri fotografije scene → jedan red */
  .grid--3{grid-template-columns:repeat(3,1fr)}
}

/* Mreža sa tačno četiri stavke: na srednjim širinama auto-fit da tri kolone
   i ostavi siroče. Dve kolone daju 2+2. */
@media (min-width:880px) and (max-width:1199px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
}
/* Biografije su dugačak tekst, dve kolone su čitljive na svakoj širini.
   grid--4 važi samo do 1199px, pa bi iznad toga bile tri kolone i siroče. */
@media (min-width:880px){
  .grid--bio{grid-template-columns:repeat(2,1fr)}
}

/* Plakati su izuzetak: red od četiri je bolji nego dva prevelika. */
@media (min-width:880px){
  .grid--cards.grid--4{grid-template-columns:repeat(4,1fr)}
}


/* ============================================================
   Novi sadržaj: padajući meni, mreža od 6 plakata, galerija bez
   sečenja, fotografija-zamena za člana tima
   ============================================================ */
.dropdown{position:relative;display:inline-flex}
.dropdown__toggle{gap:var(--sp-2)}
.dropdown__caret{
  width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid currentColor;transition:transform var(--t-hover);
}
.dropdown__toggle[aria-expanded="true"] .dropdown__caret{transform:rotate(180deg)}
.dropdown__menu{
  position:absolute;top:calc(100% + var(--sp-2));left:0;z-index:40;
  min-width:100%;width:max-content;max-width:calc(100vw - 2 * var(--gutter));
  display:flex;flex-direction:column;padding:var(--sp-2);
  background:var(--paper-0);border:var(--border-card);border-radius:var(--r-card);
  box-shadow:var(--shadow-overlay);
}
.dropdown__menu[hidden]{display:none}
.dropdown__menu a{
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r-2);white-space:nowrap;
  font:var(--fw-semibold) var(--fs-body)/1.3 var(--font-display);
  color:var(--text-strong);text-decoration:none;
}
.dropdown__menu a:hover,.dropdown__menu a:focus-visible{background:var(--green-50);color:var(--green-800)}

/* Šest plakata: 3 + 3 na desktopu, 2 + 2 + 2 na tabletu, jedna kolona na telefonu */
@media (min-width:560px){
  .grid--cards.grid--3{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .grid--cards.grid--3{grid-template-columns:repeat(3,1fr)}
}

/* Galerija u prirodnom odnosu stranica: uspravne fotografije se ne seku */
.galerija--masonry{display:block;column-count:2;column-gap:var(--grid-gap)}
@media (min-width:900px){.galerija--masonry{column-count:3}}
.galerija--masonry figure{break-inside:avoid;margin:0 0 var(--grid-gap)}
.galerija--masonry .media{aspect-ratio:auto}
.galerija--masonry .media img{height:auto;object-fit:initial}

/* Član tima bez fotografije: inicijali na zelenoj podlozi */
.team-card__photo--placeholder{
  display:flex;align-items:center;justify-content:center;
  background:var(--green-100);color:var(--green-800);
}
.sc-stage .team-card__photo--placeholder{background:var(--coal-700);color:var(--stage-green)}
.team-card__photo--placeholder span{font:var(--fw-black) var(--fs-d1)/1 var(--font-display);letter-spacing:var(--ls-display)}

/* ============================================================
   Baner za kolačiće
   Tamna traka pri dnu, u istim tokenima kao scenske sekcije.
   Prikazuje je js/kolacici.js, samo dok posetilac nije odlučio.
   ============================================================ */
.kolacici{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:var(--surface-stage);color:var(--text-stage-body);
  border-top:1px solid var(--border-stage);
  box-shadow:var(--shadow-overlay);
  padding:var(--sp-5) var(--gutter);
  display:flex;align-items:center;gap:var(--sp-6);flex-wrap:wrap;
  justify-content:center;
}
.kolacici__tekst{
  font:var(--type-body);font-size:var(--fs-sm);
  color:var(--text-stage-body);max-width:68ch;margin:0;
}
.kolacici__tekst a{color:var(--action-stage)}
.kolacici__tekst a:hover{color:var(--chalk-0)}
.kolacici__dugmad{display:flex;gap:var(--sp-3);flex:0 0 auto}

/* dugmad na tamnoj podlozi prate scenske boje */
.kolacici .btn--primary{background:var(--action-stage);border-color:var(--action-stage);color:var(--coal-900)}
.kolacici .btn--primary:hover{background:var(--action-stage-hover);border-color:var(--action-stage-hover);color:var(--coal-900)}
.kolacici .btn--secondary{border-color:var(--border-stage-strong);color:var(--text-stage-strong)}
.kolacici .btn--secondary:hover{background:var(--coal-600);border-color:var(--chalk-2);color:var(--text-stage-strong)}
.kolacici :focus-visible{outline-color:var(--focus-ring-stage)}

@media (max-width:700px){
  .kolacici{flex-direction:column;align-items:stretch;gap:var(--sp-4);padding:var(--sp-4) var(--gutter)}
  .kolacici__dugmad{justify-content:stretch}
  .kolacici__dugmad .btn{flex:1 1 0}
}

/* ============================================================
   Pravne strane (Uslovi korišćenja, Politika privatnosti)
   ============================================================ */
.pravni-tekst{max-width:76ch;display:grid;gap:var(--sp-8)}
.pravni-tekst section{display:grid;gap:var(--sp-3)}
.pravni-tekst h2{
  font:var(--fw-bold) var(--fs-h2)/var(--lh-heading) var(--font-display);
  letter-spacing:var(--ls-heading);
  border-top:var(--bw-strong) solid var(--border-strong);
  padding-top:var(--sp-4);
}
.pravni-tekst p{font:var(--type-body);color:var(--text-body)}
.pravni-tekst strong{color:var(--text-strong)}
.pravni-napomena{
  font:var(--type-meta);font-size:var(--fs-sm);color:var(--text-muted);
  border-top:1px solid var(--border-hairline);padding-top:var(--sp-5);
}

/* kredit NRT Digital u donjoj traci podnožja */
.footer-credit{color:var(--text-stage-muted)}
.footer-credit a{color:var(--text-stage-body);text-decoration:none;font-weight:var(--fw-semibold)}
.footer-credit a:hover{color:var(--action-stage);text-decoration:underline}