/* ============================================================
   base.css
   ============================================================ */
/* ==========================================================================
   CK Ribnjak — bazni stilovi (tokeni, header, menu overlay, footer, gumbi)
   Dijeli se između preview stranica i WP teme.
   ========================================================================== */

/* ---- Fontovi -------------------------------------------------------------
   Attila (KOMETA) — SLUŽBENI kupljeni brand/display font (woff2).
   Rezovi: Light (100–399), Medium (400–599), Semibold (600–1000) + italici.
   Rangevi namjerno: „bold"/700 display elementi sjedaju na Semibold BEZ
   sintetskog boldanja; naslijeđeni 400 → Medium (kao i prije). Light + italici
   sada DOSTUPNI (prije ih placeholder font nije imao). EULA: kometatype.com/eula
---------------------------------------------------------------------------- */
/* Fontovi se učitavaju preko wp_enqueue_style('ckr-fonts') u functions.php (s preconnectom) —
   uklonjen render-blocking @import koji je duplo dohvaćao iste obitelji (audit perf P1). */

/* Poppins eksplicitno (statički woff2, uspravni rez) — Google CSS je znao
poslužiti krivi/ukošeni rez u nekim preglednicima */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/pxiByp8kv8JHgFVrLGT9Z1xlFd2JQEk.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/pxiByp8kv8JHgFVrLEj6Z1xlFd2JQEk.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/pxiByp8kv8JHgFVrLCz7Z1xlFd2JQEk.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Attila — KOMETA (službeni). Light / Medium / Semibold + italici (woff2).
   METRIC-OVERRIDE: novi font ima veće ascent/descent (950/250‰) od placeholdera (710/200‰),
   pa bi s line-height:1 baseline sjeo ~9.5% niže → display naslovi (pillari/toggle) gurani
   dolje i rezani. Override-amo line-box metrike na STARE vrijednosti (ascent 71% / descent 20% /
   line-gap 0%) → baseline identičan starom; glifovi su ionako isti (capH 700, size-adjust netreba).
   Time SVI display elementi sjednu pixel-perfect kao prije. */
@font-face {
  font-family: 'Attila';
  src: url('../fonts/KAttila-40Light.woff2') format('woff2');
  font-weight: 100 399; font-style: normal; font-display: swap;
  ascent-override: 71%; descent-override: 20%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Attila';
  src: url('../fonts/KAttila-45LightItalic.woff2') format('woff2');
  font-weight: 100 399; font-style: italic; font-display: swap;
  ascent-override: 71%; descent-override: 20%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Attila';
  src: url('../fonts/KAttila-60Medium.woff2') format('woff2');
  font-weight: 400 599; font-style: normal; font-display: swap;
  ascent-override: 71%; descent-override: 20%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Attila';
  src: url('../fonts/KAttila-65MediumItalic.woff2') format('woff2');
  font-weight: 400 599; font-style: italic; font-display: swap;
  ascent-override: 71%; descent-override: 20%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Attila';
  src: url('../fonts/KAttila-70Semibold.woff2') format('woff2');
  font-weight: 600 1000; font-style: normal; font-display: swap;
  ascent-override: 71%; descent-override: 20%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Attila';
  src: url('../fonts/KAttila-75SemiboldItalic.woff2') format('woff2');
  font-weight: 600 1000; font-style: italic; font-display: swap;
  ascent-override: 71%; descent-override: 20%; line-gap-override: 0%;
}

:root {
  /* Boje */
  --c-black: #000000;
  --c-white: #ffffff;
  --c-offwhite: #F6F6F6;
  --c-ink: #1D1D1B;
  --c-green: #00653E;
  --c-terracotta: #B3431E;
  --c-gold: #B39B73;
  --c-sand: #DACA9C;
  --c-orange: #FFA74F;
  --c-orange-deep: #CC6701;
  --c-teal: #019C9F;
  --c-rose: #B7425B;
  --c-grey: #BFBFBF;
  --c-text-soft: #454545;

  /* Fontovi */
  --f-display: 'Attila', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --f-ui: 'Poppins', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --f-serif: 'Literata', Georgia, 'Times New Roman', serif;
  --f-grotesk: 'Schibsted Grotesk', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Layout */
  --page-pad: clamp(20px, 2.92vw, 56px);   /* 56px na 1920 */
  --header-h: clamp(60px, 3.9vw, 75px);

  /* ============================================================
     BOJE I VIZUALI SEKCIJA — JEDAN IZVOR ISTINE
     U WP temi svaka od ovih vrijednosti = globalna postavka CPT-a
     (scena / studio / zajednica): color picker + image.
     Mijenjaš ovdje na jednom mjestu → primjenjuje se na:
       • hover/expand riječi na naslovnici (pillars)
       • veliku riječ na landing stranici sekcije
       • hero band na singleu (predstava/program/zajednica)
       • redak rasporeda preko povezane predstave
       • boju u izborniku
     ============================================================ */
  --c-scena: #B3431E;        /* terakota */
  --c-studio: #B39B73;       /* zlatna */
  --c-zajednica: #E38B33;    /* narančasta */

  /* potkategorije scene (boja retka u rasporedu / oznaka) */
  --c-kazaliste: #B7425B;
  --c-film: #015E73;
  --c-glazba: #019C9F;
  --c-knjizevnost: #113D37;
  --c-festivali: #F1541C;

  /* globalni vizuali sekcija (WP: image polje po CPT-u) */
  --viz-scena: url('../img/scena-vizual.webp');
  --viz-studio: url('../img/home-studio-expand.webp');
  --viz-zajednica: url('../img/zajednica-hero-zlatna.webp');

  /* Konfigurabilno kroz Customizer / Tweaks */
  --menu-bg: #000000;
  --menu-fg: #ffffff;
  --menu-bg-image: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-black);
  font-family: var(--f-serif);
  font-size: 18px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; padding: 0; }

/* ---- Pristupačnost: skip-link + vidljiv fokus ---- */
.skip-link {
  position: absolute; left: 8px; top: -64px; z-index: 1000;
  background: var(--c-black, #1D1D1B); color: #fff;
  padding: 10px 18px; border-radius: 0 0 8px 8px;
  font-family: var(--f-ui); font-weight: 700; text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 0; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px;
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---- Gumbi --------------------------------------------------------------- */
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border: 2px solid currentColor;
  padding: 13px 22px 17px 20px;        /* +2px dolje: tekst optički centriran (serif sjeda nisko) */
  font-family: var(--f-serif); font-weight: 500;
  font-size: clamp(17px, 1.05vw, 20px); line-height: 1;
  color: var(--c-black);
  transition: background-color .25s ease, color .25s ease;
}
.btn-outline .arrow { transition: transform .25s ease; }
.btn-outline:hover { background: var(--btn-hover, var(--c-black)); border-color: var(--btn-hover, var(--c-black)); color: var(--c-white); }
.btn-outline:hover .arrow { transform: translateX(4px); }
.btn-outline--light { color: var(--c-white); }
.btn-outline--light:hover { background: var(--btn-hover, var(--c-white)); border-color: var(--btn-hover, var(--c-white)); color: var(--c-black); }

.btn-solid {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--c-green); color: var(--c-white);
  padding: 21px 20px;
  font-family: var(--f-ui); font-weight: 700;
  font-size: 17px; letter-spacing: .1em; line-height: 1;
  transition: background-color .25s ease;
}
.btn-solid:hover { background: #00502f; }

.arrow { display: inline-block; flex: none; width: 22px; height: 20px; }
.btn-outline, .btn-solid { white-space: nowrap; }

/* ---- Header / ticker ------------------------------------------------------ */
.site-header {
  position: sticky;           /* uvijek vidljiv pri skrolanju (globalno) */
  top: 0;
  z-index: 60;
  height: var(--header-h);
  background: var(--c-white);
  display: flex; align-items: center;
}
.site-header__ticker {
  flex: 1; min-width: 0;
  text-align: center;
  font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(12px, 1.05vw, 20px);
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
  padding: 0 clamp(64px, 6vw, 120px);   /* desktop: centrirano (tekst stane, ne dolazi do ikona). Tablet/mobitel ↓ marquee + rezerviran prostor. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.site-header__ticker a { text-decoration: none; }
.site-header__ticker .ticker-more {
  text-transform: none; font-weight: 600; margin-left: 1.2em;
  text-decoration: underline;                /* Figma: uvijek podcrtano */
  text-underline-offset: 3px;
}
.site-header__ticker .ticker-more:hover { text-decoration-thickness: 2px; }

.menu-toggle {
  position: absolute;
  right: var(--page-pad);
  top: 50%; transform: translateY(-50%);
  width: 53px; height: 38px;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.menu-toggle span {
  display: block; height: 4px; width: 100%;
  background: var(--c-black);
  transition: transform .3s ease, opacity .3s ease;
}

/* tamna varijanta headera (podstranice, npr. Scena) */
.site-header--dark { background: var(--c-black); }
.site-header--dark .site-header__ticker { color: var(--c-white); }
.site-header--dark .menu-toggle span { background: var(--c-white); }
.site-header--dark .header-search { color: var(--c-white); }

/* search gumb u headeru (lijevo od hamburgera) */
.header-search {
  position: absolute;
  right: calc(var(--page-pad) + 53px + 49px);   /* Figma: razmak 49px do hamburgera */
  display: grid; place-items: center;
  top: 50%; transform: translateY(-50%);
  width: 33px; height: 33px;
  color: var(--c-black);
  transition: transform .2s ease;
}
.header-search svg { width: 100%; height: 100%; display: block; }
.header-search:hover { transform: translateY(-50%) scale(1.12); }

/* Tablet i niže: promo-traka PUTUJE (marquee) ako ne stane; desno rezerviran prostor za search+hamburger
   (margin-right) + overflow:hidden → tekst NIKAD ne ide preko/ispod ikona. Isto kao na mobitelu. */
@keyframes ckr-ticker { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (max-width: 1024px) {
  .site-header__ticker {
    text-align: left;
    padding: 0 0 0 var(--page-pad);
    margin-right: calc(var(--page-pad) + 145px);   /* rezervira icon-zonu (page-pad+135) → tekst klipan prije ikona */
    overflow: hidden;
  }
  .site-header__ticker .ticker-rotator { display: inline-block; white-space: nowrap; padding-left: 100%; animation: ckr-ticker 16s linear infinite; }
  .site-header__ticker .ticker-dots, .site-header__ticker .ticker-more { display: none; }
}
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
  .site-header__ticker .ticker-rotator { animation: none; }
}

/* search panel — Figma home-2: bijeli panel 326px ispod headera */
.icon-mask {
  display: inline-block;
  flex: none;                 /* nikad ne stiskati u flex gumbu */
  background: currentColor;
}
.icon-mask--search {
  width: 29px; height: 28px;          /* točno kao Figma */
  -webkit-mask: url('../svg/icon-search.svg') center / contain no-repeat;
  mask: url('../svg/icon-search.svg') center / contain no-repeat;
}
.icon-mask--search-sm {
  width: 19px; height: 18px;          /* točno kao Figma (19×18) */
  -webkit-mask: url('../svg/icon-search-small.svg') center / contain no-repeat;
  mask: url('../svg/icon-search-small.svg') center / contain no-repeat;
}
.search-bar {
  position: fixed;
  left: 0; right: 0; top: var(--header-h);
  height: 16.98vw;                          /* 326 */
  background: var(--c-white);
  z-index: 50;                              /* ispod headera (60) i hero loga */
  transform: translateY(-105%);
  opacity: 0;
  transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .35s ease;
  pointer-events: none;
}
.search-bar.is-open { transform: none; opacity: 1; pointer-events: auto; }
.search-bar form { position: relative; height: 100%; margin: 0; }
.search-bar__logo {
  position: absolute;
  left: 5.03vw; top: 9.11vw;                /* Figma: tekst loga @96.5,250 abs */
  width: 8.75vw; min-width: 110px;          /* 168 */
  height: auto;
}
.search-bar input {
  position: absolute;
  left: 30.16vw;
  top: 8.18vw; height: 3.02vw; min-height: 48px;   /* identično gumbu — donji rubovi u ravnini na piksel */
  box-sizing: border-box;
  width: 39.69vw;                           /* 762 */
  border: none; border-bottom: 1px solid var(--c-black);
  background: transparent;
  font-family: var(--f-serif);
  font-size: clamp(18px, 1.3vw, 25px);
  letter-spacing: .01em;
  padding: 0 2px 10px;
  outline: none;
}
.search-bar input:focus { border-bottom-width: 2px; }
.search-bar__go {
  position: absolute;
  left: 71.72vw; top: 8.18vw;               /* 1377, 232 abs */
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: auto; min-width: 7.4vw; height: 3.02vw; min-height: 48px;    /* 142×58 — raste sa sadržajem */
  padding: 0 17px;
  border: 2px solid var(--c-black);
  font-family: var(--f-serif); font-weight: 500;
  font-size: clamp(16px, 1.04vw, 20px); line-height: 1;
  color: var(--c-black);
  transition: background-color .25s ease, color .25s ease;
  box-sizing: border-box;
}
.search-bar__go:hover { background: var(--c-black); color: var(--c-white); }
@media (max-width: 760px) {
  .header-search { right: calc(var(--page-pad) + 40px + 30px); width: 23px; height: 23px; }
  /* mobilni: iz apsolutnog vw-rasporeda u normalan stupac (gumb više ne izlazi izvan ekrana) */
  .search-bar { height: auto; padding: 76px var(--page-pad) 28px; }
  .search-bar form { max-width: none; display: flex; flex-direction: column; gap: 16px; height: auto; }
  .search-bar__logo { display: none; } /* mobilni: tekst-logo nepotreban u search baru */
  .search-bar input { position: static; left: auto; top: auto; width: 100%; height: auto; min-height: 44px; padding: 0 2px 8px; }
  .search-bar__go { position: static; left: auto; top: auto; align-self: flex-start; width: auto; }
}

/* Logo blob (oblak/R oblik) */
.logo-blob { display: block; position: relative; }
.logo-blob svg { display: block; width: 100%; height: auto; }

/* ---- Menu overlay (Figma menu - v2: stanja root/program/scena/studio/zajednica/onama) ----- */
.menu-overlay {
  position: fixed; inset: 0;
  z-index: 100;
  display: flex; flex-direction: column;
  visibility: hidden; opacity: 0;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.menu-overlay.is-open {
  visibility: visible; opacity: 1;
  transition: opacity .35s ease;
}
.menu-overlay__bar {
  height: var(--header-h);
  background: var(--c-white);
  flex: none;
  position: relative;
}
.menu-overlay__close {
  position: absolute; right: var(--page-pad); top: 50%;
  transform: translateY(-50%);
  width: 39px; height: 39px;
  display: grid; place-items: center;
  transition: transform .3s ease;
}
.menu-overlay__close svg { width: 100%; height: 100%; }
.menu-overlay__close:hover { transform: translateY(-50%) rotate(90deg); }

.menu-overlay__panel {
  flex: 1;
  position: relative;
  background-color: var(--menu-bg, #000);
  color: var(--menu-fg, #fff);
  overflow: hidden;
  transition: background-color .5s ease, color .5s ease;
}
.menu-overlay__watermark {
  position: absolute;
  left: 46.77vw; top: min(2.3vw, 4vh);    /* vrh ilustracije ~11% (kao dizajn #24); kriza na 16:9, kapira po visini */
  width: min(40vw, 71.1vh);               /* 768×902@1920; >16:9 → veličina po visini (ne prelijeva, „ruka" na dnu ostaje vidljiva) */
  opacity: .2;
  pointer-events: none;
}
.menu-overlay__watermark img { width: 100%; height: auto; }
.menu-overlay__logo {
  position: absolute;
  left: var(--page-pad); bottom: 3.7vw;   /* 56,924 (h1159) */
  width: 6.36vw; min-width: 64px;         /* 122×164 */
  transition: color .5s ease;
  color: var(--menu-fg, #fff);
}
.menu-overlay__logo svg { width: 100%; height: auto; display: block; }
/* logo kao maska: oblik = Figma SVG datoteka (logo-blob-small.svg), boja prati kontrast pozadine */
.menu-overlay__logo .logo-mask {
  display: block;
  width: 100%;
  aspect-ratio: 122.181 / 164;
  background: var(--menu-fg, #ffffff);
  -webkit-mask: url('../svg/logo-blob-small.svg') center / contain no-repeat;
  mask: url('../svg/logo-blob-small.svg') center / contain no-repeat;
}

/* red 1: program / raspored / o nama */
.menu-nav__row {
  position: absolute;
  left: 20.36vw; width: 59.22vw;          /* 391, 1137 */
  top: min(22vw, 39vh);                   /* tekst ~50% visine (dizajn #28 — „raspored" tik ispod trupa ptice). Kriza ~16:9, kapira po visini. */
  display: flex; justify-content: space-between; align-items: center;
  margin: 0; padding: 0; list-style: none;
  transition: top .55s cubic-bezier(.65,0,.35,1);
}
.menu-overlay__panel.is-expanded .menu-nav__row { top: min(15vw, 26.7vh); }   /* 288px@1920 */
.menu-nav__row a {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(24px, 2.08vw, 40px);   /* 40 */
  letter-spacing: .05em; line-height: 1;
  color: inherit;
}
.menu-nav__row a:hover { text-decoration: underline; text-underline-offset: 10px; text-decoration-thickness: 3px; }

/* debela crtica aktivne sekcije + tanka linija pune širine */
.menu-nav__bar {
  position: absolute;
  top: min(18.49vw, 32.9vh);              /* 355px@1920 */
  left: 19.11vw;                          /* 367 (program) */
  width: 12.92vw; height: 0.31vw;         /* 248×6 */
  min-height: 4px;
  background: var(--menu-line, currentColor);
  opacity: 0;
  transition: left .5s cubic-bezier(.65,0,.35,1), opacity .35s ease;
}
.menu-nav__rule {
  position: absolute;
  top: min(18.8vw, 33.4vh);               /* 361px@1920 */
  left: 15.99vw; width: 68.02vw;          /* 307, 1306 */
  height: 1px;
  border: none; margin: 0;
  background: var(--menu-line, currentColor);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s cubic-bezier(.65,0,.35,1);
  opacity: .9;
}
.menu-overlay__panel.is-expanded .menu-nav__bar { opacity: 1; }
.menu-overlay__panel.is-expanded .menu-nav__rule { transform: scaleX(1); }
/* položaj i širina debele crtice postavlja JS (positionBar) — prati stvarni aktivni link */

/* sadržajni blokovi */
.menu-content {
  position: absolute;
  left: 20.36vw; right: 4vw;
  top: 26.67vw;                           /* 587-75=512 */
}
.menu-block { display: none; }
.menu-block.is-active { display: block; }

/* PROGRAM: 3 stupca s naslovima i stavkama */
.menu-block--program { display: none; grid-template-columns: repeat(3, minmax(0, auto)); gap: 0 8.5vw; justify-content: start; }
.menu-block--program.is-active { display: grid; }
.menu-col__title {
  display: inline-block;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(24px, 2.08vw, 40px);
  letter-spacing: .05em; line-height: 1;
  color: inherit;
  margin-bottom: 2.2vw;
}
.menu-col__title:hover { text-decoration: underline; text-underline-offset: 10px; text-decoration-thickness: 3px; }
.menu-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.94vw; }
.menu-col li a {
  font-family: var(--f-serif);
  font-size: clamp(17px, 1.3vw, 25px); line-height: 1.2;
  letter-spacing: .01em;
  color: inherit;
}
.menu-col li a:hover { text-decoration: underline; text-underline-offset: 6px; }

/* SCENA/STUDIO/ZAJEDNICA: 2 stupca — lijevo naslovi, desno stavke odabranog */
.menu-block--sub { display: none; }
.menu-block--sub.is-active { display: block; }
.menu-sub2__titles {
  position: absolute; left: 0; top: 0;
  display: flex; flex-direction: column; gap: 2.08vw;   /* 40 */
  margin: 0; padding: 0; list-style: none;
}
.menu-sub2__titles a {
  font-family: var(--f-serif); font-weight: 400;     /* Literata 35, ls .05 (Figma) */
  font-size: clamp(22px, 1.82vw, 35px);
  letter-spacing: .05em; line-height: 1;
  color: inherit;
}
.menu-sub2__titles li.is-current a { font-weight: 700; }
.menu-sub2__titles a:hover { font-weight: 700; }
.menu-sub2__items {
  position: absolute; left: 16.1vw; top: 0.1vw;          /* 700-391 */
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 1.15vw;    /* 22 (Figma blok 238/5) */
}
.menu-sub2__items a {
  font-family: var(--f-serif);
  font-size: clamp(17px, 1.3vw, 25px); line-height: 1.2;
  letter-spacing: .01em;
  color: inherit;
}
.menu-sub2__items a:hover { text-decoration: underline; text-underline-offset: 6px; }

/* O NAMA */
.menu-block--onama ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1.46vw; }
.menu-block--onama a {
  font-family: var(--f-serif); font-weight: 500;
  font-size: clamp(22px, 1.82vw, 35px); line-height: 1;
  letter-spacing: .05em;
  color: inherit;
}
.menu-block--onama a:hover { text-decoration: underline; text-underline-offset: 8px; }

/* animacija pojave stavki */
@media (prefers-reduced-motion: no-preference) {
  .menu-block.is-active .menu-anim {
    animation: ck-menu-in .45s cubic-bezier(.22,1,.36,1) backwards;
  }
}
@keyframes ck-menu-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Footer ---------------------------------------------------------------- */
.site-footer { position: relative; }
.site-footer__scenery {
  position: relative;
  height: 12.86vw;
  margin-top: 9.9vw;       /* bjelina iznad ilustracije — 190px na 1920 po Figmi */
  margin-bottom: -2px;
}
.site-footer__scenery img { position: absolute; width: auto; }
.site-footer__scenery .sc-tree    { left: 56.98vw; top: 1.77vw;  height: 11.15vw; }
.site-footer__scenery .sc-bench   { left: 64.27vw; top: 8.59vw;  height: 3.96vw; }
.site-footer__scenery .sc-lamp    { left: 74.22vw; top: 0;       height: 12.86vw; }
.site-footer__scenery .sc-bicycle { left: 77.16vw; top: 7.4vw;   height: 5.89vw; transform: rotate(2.75deg); transform-origin: left top; }

.site-footer__main {
  background: var(--c-black);
  color: var(--c-white);
  padding: clamp(36px, 3vw, 56px) var(--page-pad) clamp(24px, 2vw, 36px);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(120px, 250px) 1fr minmax(180px, 211px);
  gap: clamp(28px, 4vw, 90px);
}
.site-footer__logo { width: clamp(64px, 5.1vw, 98px); }
.site-footer__logo img { width: 100%; height: auto; }

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 218px));
  gap: clamp(24px, 5.2vw, 100px);
  font-family: var(--f-display);
}
.site-footer__nav h2 {
  margin: 0 0 20px;
  font-size: 18px; font-weight: 700;
  letter-spacing: .05em; line-height: 25px;
}
.site-footer__nav ul { margin: 0; padding: 0; list-style: none; }
.site-footer__nav li a {
  display: inline-block;
  font-weight: 500; font-size: 18px; line-height: 25px;
  letter-spacing: .01em;
}
.site-footer__nav li a:hover { text-decoration: underline; text-underline-offset: 4px; }

.site-footer__desc {
  max-width: 718px;
  font-family: var(--f-serif);
  font-size: 18px; line-height: 30px; letter-spacing: .01em;
  margin: clamp(40px, 4vw, 76px) 0 0;
}

.newsletter { margin-top: clamp(32px, 3.4vw, 64px); max-width: 604px; }
.newsletter h2 {
  margin: 0 0 8px;
  font-family: var(--f-ui); font-weight: 700;
  font-size: 20px; letter-spacing: .02em;
}
.newsletter form {
  display: flex; align-items: flex-end; gap: 34px; flex-wrap: wrap;
}
.newsletter input[type="email"] {
  flex: 1 1 240px;
  background: transparent; border: none;
  border-bottom: 1px solid var(--c-white);
  color: var(--c-white);
  font-family: var(--f-ui); font-size: 18px; letter-spacing: .01em;
  padding: 8px 0 10px;
  outline: none;
}
.newsletter input[type="email"]::placeholder { color: var(--c-text-soft); }
.newsletter .btn-solid { min-width: 200px; }

/* Newsletter preko CF7 (footer): underline e-mail (naslijeđen) + zeleni „Pošalji →" + GDPR privola s CUSTOM checkboxom (identičan .poziv-cats na „Javi nam se", ne CF7 default) */
.newsletter .wpcf7 { margin: 0; }
.newsletter .wpcf7-form { display: block; }                                   /* poništi .newsletter form flex */
.newsletter .news-cf7__row { display: flex; align-items: flex-end; gap: 34px; flex-wrap: wrap; }
.newsletter .news-cf7__row .wpcf7-form-control-wrap { flex: 0 1 370px; max-width: 100%; display: block; }   /* Figma: linija/e-mail = 370px (370 + 34 gap + 200 gumb = 604 max-width) */
.newsletter .news-cf7__row input[type="email"] { width: 100%; box-sizing: border-box; }
/* Gumb „Pošalji →": ENABLED (privola ✓) = mrvicu svjetlije; DISABLED (privola nije ✓) = #00653E (Figma default) */
.newsletter .wpcf7-submit { flex: 0 0 auto; border: none; cursor: pointer; background: #00754A; }
.newsletter .wpcf7-submit:hover { background: #008153; }
.newsletter .wpcf7-submit:disabled { background: var(--c-green); opacity: 1; cursor: not-allowed; }   /* #00653E dok privola nije označena */
.newsletter .wpcf7-acceptance { display: block; margin-top: 20px; }
.newsletter .wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.newsletter .wpcf7-acceptance label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; margin: 0; }
.newsletter .wpcf7-acceptance input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 26px; height: 26px; margin: 4px 0 0;        /* gornji rub kućice poravnat s gornjim rubom prvog reda teksta */
  border: 1px solid var(--c-black); border-radius: 0; background: #fff; cursor: pointer;
}
.newsletter .wpcf7-acceptance input[type="checkbox"]:checked {
  background-image: url("../svg/checkbox-check.svg");
  background-size: 58% 58%; background-repeat: no-repeat; background-position: center;
}
.newsletter .wpcf7-list-item-label { color: var(--c-white); font-size: 12px; line-height: 1.5; opacity: .88; }
.newsletter .wpcf7-not-valid-tip { color: #ff9b8a; font-size: 13px; margin-top: 6px; }
/* Validacijske poruke (npr. „Ovo polje je obavezno") tek NAKON pokušaja slanja — ne na promjenu checkboxa. JS doda .ckr-tried na submit. */
.newsletter .wpcf7-form:not(.ckr-tried) .wpcf7-not-valid-tip { display: none !important; }

/* CF7 loading spinner: izvan toka (position:absolute) ISPOD GDPR teksta → ne gura layout (bez skakanja). On-brand bijeli prsten. */
.newsletter .wpcf7-form { position: relative; }
.newsletter .wpcf7-spinner {
  position: absolute; left: 0; top: 100%; margin: 14px 0 0;
  width: 22px; height: 22px; padding: 0;
  background: transparent; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%;
  opacity: 1; visibility: hidden;
}
.newsletter .wpcf7-spinner::before { display: none; }                            /* makni CF7 default točkicu */
.newsletter .wpcf7-form.submitting .wpcf7-spinner { visibility: visible; animation: ckr-spin .7s linear infinite; }
@keyframes ckr-spin { to { transform: rotate(360deg); } }

/* CF7 poruke nakon slanja — on-brand (umjesto plavog/žutog/crvenog CF7 okvira); skroman razmak da ne „skoči" jako. */
.newsletter .wpcf7-form .wpcf7-response-output {
  margin: 18px 0 0 !important; padding: 11px 15px;
  font-family: var(--f-ui); font-size: 13px; line-height: 1.45; letter-spacing: .01em;
  color: var(--c-white); background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.45); border-radius: 0;
}
.newsletter .wpcf7-form.sent .wpcf7-response-output { color: #dff5ea; background: rgba(79,178,134,.16); border-color: #4FB286; }   /* uspjeh = zeleno */
.newsletter .wpcf7-form.invalid .wpcf7-response-output,
.newsletter .wpcf7-form.unaccepted .wpcf7-response-output,
.newsletter .wpcf7-form.failed .wpcf7-response-output,
.newsletter .wpcf7-form.aborted .wpcf7-response-output,
.newsletter .wpcf7-form.spam .wpcf7-response-output { color: #ffd9d0; background: rgba(255,155,138,.12); border-color: #ff9b8a; }   /* greška = meko crveno */

.bubble-link {
  position: relative;
  display: grid; place-items: start;
  width: clamp(170px, 11vw, 211px);
  aspect-ratio: 210.744 / 133;
  padding: 16px 22px;
  font-family: var(--f-serif); font-weight: 700;
  font-size: clamp(20px, 1.35vw, 26px); line-height: 1.05;
  color: var(--c-white);
}
.bubble-link img {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.bubble-link span { position: relative; max-width: 7em; }
.bubble-link:hover span { text-decoration: underline; text-underline-offset: 4px; }

.site-footer__bottom {
  margin-top: clamp(40px, 5vw, 96px);
  display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap;
}
.site-footer__social { display: flex; gap: 8px; align-items: center; }
.site-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }   /* hit-area 44 (touch), ikona ostaje 30 */
.site-footer__social img { width: 30px; height: 30px; }
.site-footer__social a:hover { opacity: .7; }

/* Paginacija (arhive/pretraga) — bila NESTILIZIRANA (sićušni 9px linkovi); upotrebljivi tap-targeti + razmak */
.ckr-pagination .nav-links, nav.pagination .nav-links, .pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }
.page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 5px; text-decoration: none; line-height: 1; }
.page-numbers.current { font-weight: 700; background: rgba(0,0,0,.08); }
.page-numbers:hover:not(.current) { background: rgba(0,0,0,.05); }
.site-footer__colophon { margin: 0 auto 0 28px; }
.site-footer__copy {
  font-family: var(--f-ui); font-size: 15px; line-height: 1.5;
  letter-spacing: .01em; margin: 0;
}
.site-footer__credit {
  margin: 8px 0 0;
  font-family: var(--f-ui); font-size: 13px; letter-spacing: .01em;
  opacity: .75;
}
.site-footer__credit a:hover { text-decoration: underline; }
.site-footer__credit img { height: 16px; width: auto; display: inline-block; vertical-align: middle; }
.site-footer__legal {
  display: flex; gap: clamp(28px, 3.9vw, 75px);
  font-family: var(--f-ui); font-size: 15px;
}
.site-footer__legal a:hover { text-decoration: underline; }

/* ---- Responsive: footer / menu -------------------------------------------- */
@media (max-width: 1100px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: clamp(40px, 7vw, 90px); }   /* #10: više zraka oko „Pričaj mi o Ribnjaku" bublea (iznad) */
  .bubble-link { margin: 8px 0 20px; }   /* #10: razmak ispod bublea do social ikona */
  .site-footer__nav { grid-template-columns: repeat(2, 1fr); }
  /* Overlay izbornik (kao desktop): WATERMARK apsolutno = UVIJEK vidljiv, točno vertikalna sredina, dekorativno IZA.
     Stavke (program/raspored/o nama) fiksirane flex-start-om → NE skaču kad se otvore podstavke; podstavke teku ispod njih. Mijenja se samo boja. */
  .menu-overlay__panel { position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: calc(var(--header-h) + clamp(40px, 17vh, 220px)) var(--page-pad) 36px; }
  .menu-overlay__panel::-webkit-scrollbar { display: none; }   /* skrij scrollbar (touch/wheel skrol i dalje radi) */
  .menu-nav { position: relative; z-index: 1; width: 100%; }
  .menu-nav__row { position: static; flex-direction: column; align-items: center; text-align: center; gap: clamp(16px, 3vw, 30px); padding: 0; width: 100%; }
  .menu-overlay__watermark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0; width: min(80vw, 540px, 56vh); opacity: .22; margin: 0; pointer-events: none; }   /* UVIJEK vidljiv, vertikalna sredina */
  .menu-nav__bar, .menu-nav__rule { display: none; }
  .menu-content { position: static; padding: 24px var(--page-pad) 0; text-align: center; }
  .menu-block--program.is-active { display: flex; flex-direction: column; gap: 28px; }
  .menu-sub2__titles { position: static; }
  .menu-sub2__items { position: static; margin-top: clamp(36px, 6.5vh, 72px); }   /* veći razmak 3. razine od naslova iznad (tablet/mobitel) */
}
/* NISKI ekrani (landscape tablet, mali mobitel ≤820px visine): expanded meni mora STATI bez rezanja
   („Festivali & manifestacije" je izlazio izvan ekrana). Kompresija vertikalnog ritma. */
@media (max-width: 1100px) and (max-height: 820px) {
  .menu-overlay__panel { padding-top: calc(var(--header-h) + clamp(8px, 2.5vh, 24px)); padding-bottom: 18px; }
  .menu-nav__row { gap: clamp(8px, 1.6vh, 16px); }
  .menu-block--program.is-active { gap: clamp(10px, 2.2vh, 22px); }
  .menu-sub2__items { margin-top: clamp(12px, 2.8vh, 32px); }
  .menu-content { padding-top: 12px; }
}
@media (max-width: 640px) {
  .site-footer__nav { grid-template-columns: 1fr 1fr; gap: 28px; }
  .site-footer__copy { margin-left: 0; }
  .site-footer__colophon { margin-left: 0; }
  .newsletter form { gap: 20px; }
  /* ticker marquee/padding za mobitel je niže (blok „MOBITEL ≤640") */
  .menu-toggle { width: 40px; }
}

/* ============================================================
   home.css
   ============================================================ */
/* ==========================================================================
   CK Ribnjak — naslovnica
   ========================================================================== */

/* ---- Hero harmonika slider ------------------------------------------------ */
.hero {
  position: relative;
  padding: 0 0 0 var(--page-pad);
  height: max(480px, min(56.5vw, 1084px, calc(100vh - 2 * var(--header-h))));
  margin-bottom: var(--header-h);   /* donji razmak = visina headera (kao gore) */
}
.hero__track {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  top: 0; height: 100%;
  left: 0; width: 13.84%;
  overflow: hidden;
  cursor: pointer;
  transition: left .6s cubic-bezier(.65,0,.35,1), width .6s cubic-bezier(.65,0,.35,1);
}
.hero-slide.no-trans { transition: none; }
.hero-slide.is-active { cursor: default; }
.hero-slide__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.hero-slide__overlay {
  position: absolute; inset: 0;
  background: var(--slide-color, #000);
  opacity: var(--hero-ov-closed, .9);       /* konfigurabilno (Tweaks / WP postavke slidera) */
  transition: opacity .6s ease;
}
.hero-slide__overlay::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(228.5deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.8) 99.5%);
  opacity: 0;
  transition: opacity .6s ease;
}
.hero-slide.is-active .hero-slide__overlay {
  opacity: 1;
  background: transparent;
}
.hero-slide.is-active .hero-slide__overlay::before {
  content: ""; position: absolute; inset: 0;
  background: var(--slide-color, #000);
  opacity: var(--hero-ov-active, .2);       /* aktivna kartica: znatno manja prozirnost overlay boje */
  transition: opacity .35s ease;
}
/* hover na aktivnu karticu: overlay jo\u0161 prozirniji \u2014 slika se jasnije vidi */
.hero-slide.is-active:hover .hero-slide__overlay::before {
  opacity: calc(var(--hero-ov-active, .2) * 0.4);
}
.hero-slide.is-active .hero-slide__overlay::after { opacity: 1; }
.hero-slide__content {
  position: absolute; left: 0; right: 0; bottom: clamp(24px, 4.5vw, 86px);
  display: flex; align-items: flex-end; gap: clamp(16px, 1.6vw, 30px);
  padding: 0 clamp(18px, 5.2vw, 100px);
  color: var(--c-white);
}
.hero-slide__date { flex: none; }
.hero-slide__day {
  display: block;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(44px, 4.7vw, 90px); line-height: 1;
  letter-spacing: -.01em;
}
.hero-slide__month {
  display: block;
  font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(14px, 1.15vw, 22px); line-height: 1.25;
  letter-spacing: -.01em;
}
.hero-slide__info {
  opacity: 0; transform: translateY(12px);
  transition: opacity .4s ease .25s, transform .4s ease .25s;
  min-width: 0;
}
.hero-slide.is-active .hero-slide__info { opacity: 1; transform: none; }
.hero-slide__org {
  display: block;
  font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(13px, 1.05vw, 20px);
  letter-spacing: .03em; line-height: 1;   /* Figma: 3% letter-spacing */
  text-transform: uppercase;            /* nadnaslov slidera UVIJEK velikim slovima (desktop+mobitel) */
  margin-bottom: clamp(8px, .8vw, 16px);
}
.hero-slide__title {
  margin: 0;
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(26px, 3.4vw, 65px); line-height: 1.08;
  letter-spacing: -.03em;
  max-width: 800px;
}
.hero-slide__title a:hover { text-decoration: underline; text-underline-offset: 6px; }

/* sklopljeni slide: datum dolje-lijevo */
.hero-slide:not(.is-active) .hero-slide__content {
  padding: 0 clamp(10px, 1.7vw, 33px);
  bottom: clamp(16px, 1.6vw, 31px);
}
.hero-slide:not(.is-active) .hero-slide__info { display: none; }

.hero__logo {
  position: absolute;
  left: var(--page-pad); top: calc(clamp(6px, .5vw, 10px) * -1);
  width: clamp(110px, 13vw, 249px);
  z-index: 5;
  color: var(--c-white);
}
.hero__logo img { width: 100%; height: auto; display: block; }

/* CTA „zadnja kućica" slidera → cijeli raspored: uvijek puna boja, bez slike/datuma.
   Pokriva i .is-active (inače .hero-slide.is-active overlay postane transparent → prazno). */
.hero-slide--cta .hero-slide__overlay,
.hero-slide--cta.is-active .hero-slide__overlay { opacity: 1; background: var(--slide-color, var(--c-scena)); }
.hero-slide--cta .hero-slide__overlay::before,
.hero-slide--cta .hero-slide__overlay::after,
.hero-slide--cta.is-active .hero-slide__overlay::before,
.hero-slide--cta.is-active .hero-slide__overlay::after { display: none; }
.hero-slide__cta {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  color: var(--c-white, #fff); text-decoration: none;
  font-family: var(--f-display); font-weight: 600;
  text-transform: uppercase; letter-spacing: -.01em;
}
/* uska traka (neaktivna): strelica → iznad (veća, podignuta na razinu brojke ostalih traka),
   „RASPORED" ispod (na razini mjeseca), dolje-lijevo */
.hero-slide__cta-strip {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(10px, 1vw, 16px);
  padding: 0 clamp(10px, 1.7vw, 33px) calc(clamp(16px, 1.6vw, 31px) + 18px);   /* „raspored" baseline TOČNO na liniji „srpnja" — 1.6vw krivulja + baseline 18px */
}
.hero-slide__cta-strip .arrow { width: clamp(30px, 2.5vw, 48px); height: auto; margin-bottom: calc(0.78vw - 1.5px); }   /* sredina strelice = optička sredina brojke datuma (između cap-height i bounding sredine — brojka „19." ima točku na baseline koja povlači percipiranu sredinu niže); pomak raste s veličinom brojke (vw) */
/* „Raspored" — IDENTIČAN stil kao naziv mjeseca (.hero-slide__month): Poppins 700, ista veličina/line-height/spacing */
.hero-slide__cta-striptext {
  font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(14px, 1.15vw, 22px); line-height: 1.25;
  letter-spacing: -.01em; text-transform: lowercase;   /* „raspored" — sve malim slovima */
}
/* aktivna (široka): strelica GORE, „pogledaj cijeli raspored" ISPOD — malim slovima, dolje-lijevo (dosljedno neaktivnoj traci) */
.hero-slide__cta-full {
  display: none;
  flex-direction: column; align-items: flex-start; gap: clamp(10px, 1vw, 16px);
  padding: 0 clamp(18px, 5.2vw, 100px) clamp(30px, 4.1vw, 77px);
  font-size: clamp(18px, 1.7vw, 34px); line-height: 1.1; text-transform: lowercase;   /* „pogledaj cijeli raspored" sve malim slovima */
}
.hero-slide__cta .arrow { width: clamp(28px, 2vw, 42px); height: auto; }
.hero-slide__cta-full .arrow { width: clamp(30px, 2.5vw, 48px); }   /* strelica iznad teksta, kao na neaktivnoj traci */
.hero-slide--cta.is-active .hero-slide__cta-strip { display: none; }
.hero-slide--cta.is-active .hero-slide__cta-full { display: flex; }
/* link je SAMO naslov (ne cijela kartica); bez underlinea — pojavi se tek na hover */
/* nowrap: tijekom širenja slidea tekst NE prelama u 3 reda pa skače u 1 — ostaje 1 red, otkriva se slijeva-nadesno */
.hero-slide__cta-link { color: inherit; text-decoration: none; white-space: nowrap; }
.hero-slide__cta-link:hover { text-decoration: underline; text-underline-offset: 6px; }

/* na rubu (bez loopa) — strelica se SAKRIJE (prva kućica: nema lijeve; zadnja: nema desne) */
.hero__arrow.is-disabled { display: none !important; }

.hero__arrow {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: clamp(56px, 5.3vw, 102px); height: clamp(56px, 5.3vw, 102px);
  border-radius: 50%;
  background: var(--c-white);
  box-shadow: 0 0 30px rgba(0,0,0,.3);
  display: grid; place-items: center;
  transition: transform .25s ease, opacity .3s ease;
  opacity: 0;                       /* strelica se pokazuje tek na hover lijeve/desne polovice */
  pointer-events: none;
}
.hero.show-prev .hero__arrow--prev,
.hero.show-next .hero__arrow--next { opacity: 1; pointer-events: auto; }
.hero__arrow svg { width: clamp(10px, .8vw, 15px); height: auto; }
.hero__arrow--prev { left: calc(var(--page-pad) + clamp(30px, 5.57vw, 107px)); }
.hero__arrow--next { right: clamp(24px, 4.58vw, 88px); }
.hero__arrow:hover { transform: translateY(-50%) scale(1.08); }


/* animacija datuma pri izmjeni slajda */
@keyframes ck-date-in {
  0% { opacity: 0; transform: translateY(38px); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-slide.is-active .hero-slide__day {
    animation: ck-date-in .55s cubic-bezier(.22,1,.36,1) .12s backwards;
  }
  .hero-slide.is-active .hero-slide__month {
    animation: ck-date-in .55s cubic-bezier(.22,1,.36,1) .22s backwards;
  }
  .hero-slide.is-leaving .hero-slide__date {
    animation: ck-date-in .45s cubic-bezier(.22,1,.36,1) backwards;
  }
}

/* ---- "Pogledaj cijeli raspored" traka -------------------------------------- */
.mid-zone { position: relative; margin-top: clamp(40px, 5vw, 100px); }   /* cijeli blok (traka + feather) malo niže */
.mid-zone__watermark {
  position: absolute;
  top: -6.35vw; right: 0;
  width: 45.26vw;
  opacity: .2;           /* Figma: efektivno 20% (dva preklopljena 10% feather sloja) */
  pointer-events: none;
  z-index: 0;
}
.schedule-band {
  margin: clamp(56px, 9.4vw, 220px) 4.01vw 0 3.96vw;   /* 1340; 76 lijevo, 77 desno */
  border-top: 1px solid var(--c-black);
  border-bottom: 1px solid var(--c-black);
  position: relative; z-index: 1;
  background: transparent;                     /* prozirno: pero se vidi u razmaku iznad/ispod trake */
  padding: clamp(14px, 1.51vw, 29px) 0;        /* 29px razmak iznad/ispod trake (Figma 29/157/99) */
}
.schedule-band a {
  display: flex; align-items: center; justify-content: center;
  gap: 22px;
  height: clamp(56px, 5.16vw, 99px);           /* 99px tekst blok */
  background: var(--c-white);                  /* bijela ispuna ispod teksta */
  font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(17px, 1.56vw, 30px);
  letter-spacing: .1em; line-height: 1;
  text-transform: uppercase;
  transition: background-color .25s ease, color .25s ease;
}
.schedule-band a:hover { background: var(--c-black); color: var(--c-white); }
.schedule-band .arrow { width: clamp(16px, 1.1vw, 21px); height: auto; }

/* ---- IZDVOJENO ------------------------------------------------------------- */
.featured {
  position: relative;
  z-index: 1;
  margin: clamp(56px, 9.3vw, 178px) 4.01vw 0;          /* 1675; 77 */
}
.featured__chip {
  display: inline-block;
  background: var(--c-black); color: var(--c-white);
  font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(16px, 1.3vw, 25px);
  letter-spacing: .1em; line-height: 1;
  padding: clamp(12px, .94vw, 18px) clamp(40px, 5.2vw, 100px);
  text-transform: uppercase;
}
.featured__grid {
  margin-top: clamp(32px, 3vw, 58px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 2.6vw, 50px);
}
.news-card { display: flex; flex-direction: column; }
.news-card__media {
  position: relative;
  aspect-ratio: 404 / 298;
  overflow: hidden;
  background: var(--c-offwhite);
}
.news-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.news-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(0,0,0,.2);
}
.news-card:hover .news-card__media img { transform: scale(1.04); }
.news-card__cat {
  display: block;
  margin-top: clamp(20px, 1.4vw, 26px);   /* #11: više zraka ispod slike do kategorije/naslova */
  font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(14px, .9vw, 17px);
  letter-spacing: .3em; line-height: 1;
  text-transform: uppercase;
}
.news-card__title {
  margin: clamp(14px, 1.09vw, 21px) 0 0;       /* ~21px razmak ispod kategorije (SCENA) do naslova */
  font-family: var(--f-display); font-weight: 600;     /* Attila Semibold */
  font-size: clamp(22px, 1.67vw, 32px); line-height: 1;   /* 32 / 32 */
  letter-spacing: -.01em;
}
.news-card__excerpt {
  margin: clamp(6px, .5vw, 10px) 0 0;
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(15px, .94vw, 18px); line-height: 1.389;   /* 18 / 25 */
  letter-spacing: 0;
}
.news-card .btn-outline {
  margin-top: clamp(18px, 1.56vw, 30px); align-self: flex-start;
  width: clamp(150px, 9.32vw, 179px); height: clamp(48px, 3.02vw, 58px);   /* Figma 179×58 */
  padding: 0 0 2px 0; justify-content: center;   /* +2px dolje za optičko centriranje teksta */
}
a.news-card__cat:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---- scena / studio / zajednica mega linkovi ------------------------------- */
.pillars { margin-top: clamp(64px, 9.3vw, 178px); position: relative; z-index: 1; overflow: hidden; }   /* granične linije iznad teaser fotografije; klije riječi unutar bloka */
.pillar {
  position: relative;
  display: block;
  --btn-hover: var(--pillar-color);   /* hover gumba u expandu = boja sekcije */
}
.pillar:first-child { border-top: none; }   /* nema gornje linije iznad 'scena' (Figma) */
.pillar__head {
  position: relative;
  display: block; width: 100%;
  height: clamp(96px, 16.35vw, 314px);
  overflow: hidden;            /* reže dio riječi ispod linije (Figma) */
  border-bottom: 1px solid var(--c-black);   /* DONJI RUB = LINIJA ispod naslova + razdjelnik sekcija */
  text-align: left;
  cursor: pointer;
  pointer-events: none;        /* klik/hover hvata samo naslov + strelica, ne cijeli prazni red */
  transition: height .6s cubic-bezier(.65,0,.35,1), border-bottom-color .15s ease;   /* zatvaranje: linija se brzo vrati i reže glif dok klizi gore */
}
.pillar__word, .pillar__arrow { pointer-events: auto; }
.pillar__word {
  position: absolute;
  left: var(--page-pad); bottom: auto;
  /* baseline UVIJEK 8% font-size ispod linije na SVIM rezolucijama: top = headHeight − 0.675×fontSize
     (0.675 = 0.755 baseline-offset − 0.08 željeni klip). Neovisno o clampovima/breakpointima. Meta = Figma (#74/#75). */
  top: calc(clamp(96px, 16.35vw, 314px) - 0.675 * clamp(92px, 15.63vw, 300px));
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(92px, 15.63vw, 300px);
  line-height: 1; letter-spacing: -.03em;             /* Figma 100% */
  color: var(--c-black);                      /* Figma: crna; boja kategorije na hover/expand */
  transform-origin: left bottom;
  transition: transform .45s cubic-bezier(.22,1,.36,1), color .35s ease;
}
.pillar__head:hover .pillar__word { transform: scale(1.045); color: var(--pillar-color, var(--c-terracotta)); }
.pillar.is-open .pillar__word { color: var(--pillar-color, var(--c-terracotta)); }
/* Mali mobiteli: floor 92px je prevelik za „zajednica" (9 slova) → reže se na ≤375px. Smanji da stane. */
@media (max-width: 600px) {
  /* isti 8%-ispod-linije klip i na mobitelu (font koristi drugi clamp pa top mora pratiti) */
  .pillar__word { font-size: clamp(46px, 18.5vw, 92px); top: calc(clamp(96px, 16.35vw, 314px) - 0.675 * clamp(46px, 18.5vw, 92px)); }
  /* strelica ↓ na mobitelu: vertikalno na sredinu reda + bliže desnom rubu (#87). Veća specifičnost (.pillar .pillar__arrow) jer base pravilo dolazi kasnije u fajlu. */
  .pillar .pillar__arrow { top: 50%; right: var(--page-pad); width: 30px; }
  /* expand: tekst PUNE širine (base 50.57vw = ~197px → 10 redaka, nakaradno) + desni padding; visinu panela računa JS (scrollHeight) pa se gumb UVIJEK vidi (#101/#102).
     NB: .pillar prefiks za veću specifičnost — base pravila (width:50.57vw itd.) dolaze KASNIJE u fajlu pa bi inače pobijedila po source-orderu. */
  .pillar .pillar__expand-inner { padding: 4vw var(--page-pad) 13vw var(--page-pad); }
  .pillar .pillar__text { width: auto; max-width: none; font-size: 17px; line-height: 1.7; }
  .pillar .pillar__expand .btn-outline { margin-top: 20px; }
  .pillar .pillar__img { height: 22vw; top: 1vw; right: -1vw; max-width: 56vw; }   /* vizual gore-desno uz riječ, ne tjera tekst u uski stupac */
}
.pillar__arrow {
  position: absolute;
  right: clamp(24px, 7.76vw, 149px); top: clamp(44px, 11.51vw, 221px);   /* centrirano na vidljivi dio riječi (~5px više) */
  transform: translateY(-50%);
  width: clamp(28px, 2.8vw, 54px);
  transition: transform .3s ease, opacity .5s ease .3s;   /* collapse: 0.3s odgoda pa 0.5s fade-in (skrivanje instant — .is-open) */
}
.pillar__head:hover .pillar__arrow { transform: translateY(-40%); }
.pillar.is-open .pillar__arrow { opacity: 0; visibility: hidden; transition: none; }   /* skrivena odmah na klik (bez animacije) */
.pillar.is-open .pillar__head { height: clamp(140px, 22vw, 422px); border-bottom-color: transparent; transition: height .6s cubic-bezier(.65,0,.35,1), border-bottom-color .5s ease 0s; }   /* otvoreno: glava naraste; linija nestane fade-out 0.5s */
.pillar__arrow svg { width: 100%; height: auto; display: block; }

/* expand sadržaj (Figma home-3): glava OSTAJE fiksna, sadržaj se širi ISPOD nje */
.pillar__expand {
  overflow: hidden;
  max-height: 0;
  transition: max-height .6s cubic-bezier(.65,0,.35,1);
}
.pillar.is-open .pillar__expand { max-height: 46vw; }
.pillar__expand-inner {
  position: relative;
  padding: 3vw 0 11.5vw calc(var(--page-pad) + 1.1vw);   /* tekst odmah ispod linije; KONSTANTAN razmak ispod gumba (Figma studio) */
  pointer-events: none;                        /* prazni dio ne presreće klik na naslov */
}
.pillar__text, .pillar__expand-inner .btn-outline { pointer-events: auto; }
.pillar__text {
  margin: 0;
  width: 50.57vw; max-width: 971px;            /* Figma 971, Literata 25/45 */
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.3vw, 25px);
  line-height: 1.8;
  letter-spacing: -.03em;
}
.pillar__expand .btn-outline { margin-top: 1.7vw; }
.pillar__img {
  position: absolute;
  right: -4vw; left: auto; top: 1.5vw;          /* vizual visoko, odmah ispod linije; izlazi preko desnog ruba */
  height: 24vw;
  width: auto; max-width: 62vw;
  object-fit: contain; object-position: right top;
  opacity: 0;
  transition: opacity .45s ease .15s;
  pointer-events: none;
  z-index: 1;
}
.pillar.is-open .pillar__img { opacity: 1; }

/* ---- Pričaj mi o Ribnjaku (Figma home-2: portret slika lijevo, sadržaj desno preko nje) ---- */
.blog-teaser {
  position: relative;
  margin-top: -0.5vw;                       /* slika @3459, pillars kraj @3468 */
  min-height: 77.03vw;
}
.blog-teaser__media {
  position: absolute;
  left: 9.43vw; top: 0;                     /* 181 */
  width: 50.05vw;                           /* 961×1479 */
  aspect-ratio: 961 / 1479;
  overflow: hidden;
}
.blog-teaser__media img {
  width: 107.5%; height: 100%;              /* Figma fill: 107.457% 100%, pomak desno */
  object-fit: cover;
  margin-left: -7.5%;
}
.blog-teaser__body {
  position: absolute;
  left: 47.4vw; top: 19.32vw;               /* 910, 3830 */
  width: 44.16vw;                           /* 848 */
}
.blog-teaser__bubble {
  position: relative;
  width: 17.97vw;                           /* 345×217.8 */
  aspect-ratio: 345.047 / 217.758;
  background: var(--c-green);
  clip-path: polygon(0 0, 100% 0, 100% 73.4%, 16.2% 73.4%, 0 100%);
  color: var(--c-white);
  padding: clamp(12px, 1.25vw, 24px) clamp(14px, 1.95vw, 37px);
}
.blog-teaser__bubble span {
  display: block;
  font-family: var(--f-serif); font-weight: 700;
  font-size: clamp(24px, 2.45vw, 47px); line-height: 1.07;
  max-width: 6.5em;
}
.blog-teaser__text {
  margin: 1.88vw 0 0;                       /* 4084-4048=36 */
  font-family: var(--f-serif);
  font-size: clamp(26px, 3.13vw, 60px); line-height: 1.25;
  letter-spacing: -.02em;
  max-width: 848px;
}
.blog-teaser .btn-outline { margin-top: 3.9vw; }   /* 4384-4309=75 */

/* ---- CTA banner ------------------------------------------------------------- */
.cta-banner {
  position: relative;
  margin: clamp(72px, 10.9vw, 210px) var(--page-pad) 0;
  min-height: clamp(420px, 37.7vw, 724px);
  background-size: cover; background-position: center;
  color: var(--c-white);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(40px, 3.6vw, 70px) clamp(24px, 4.2vw, 81px) clamp(40px, 5.2vw, 100px);
}
.cta-banner::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(0,0,0,.6);
}
.cta-banner > * { position: relative; }
.cta-banner__eyebrow {
  position: absolute; top: clamp(40px, 3.6vw, 70px); left: clamp(24px, 4.2vw, 81px);
  margin: 0;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(18px, 1.56vw, 30px); line-height: 1;
  letter-spacing: .07em;
}
.cta-banner__badge {
  position: absolute; top: clamp(40px, 3.6vw, 68px); right: clamp(24px, 4.2vw, 90px);
  margin: 0;
  font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(13px, 1.05vw, 20px); line-height: 1.25;
  letter-spacing: .05em;
  max-width: 8em;
  text-align: left;
}
.cta-banner__title {
  margin: 0 0 clamp(24px, 2.2vw, 41px);
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(26px, 2.35vw, 45px); line-height: 1.11;
  letter-spacing: .03em;
  max-width: 728px;
}
/* uski mobitel: eyebrow (gore-lijevo) i badge (gore-desno) su oba absolute na istoj liniji → preklapaju se ≤385px.
   Spusti badge ISPOD eyebrowa, lijevo poravnat. */
@media (max-width: 400px) {
  .cta-banner__badge { top: 68px; left: clamp(24px, 4.2vw, 81px); right: auto; max-width: calc(100% - 2 * var(--page-pad)); }
}

/* ---- Responsive ------------------------------------------------------------- */
@media (max-width: 1100px) {
  .featured__grid { grid-template-columns: 1fr 1fr; }
  .blog-teaser { min-height: 0; }
  .blog-teaser__media { position: static; width: 86vw; margin: 0 auto; }
  .blog-teaser__body { position: static; width: auto; padding: 32px var(--page-pad) 0; }
  .blog-teaser__bubble { width: 200px; }
}
@media (max-width: 760px) {
  .hero { height: auto; padding: 0 var(--page-pad); }
  .hero__track { height: auto; overflow: visible; }
  .hero-slide {
    position: relative !important;
    left: auto !important; width: auto !important;
    height: 100px;   /* niži zatvoreni slideovi (bili 120px), pa malo vraćeno */
    transition: height .5s ease;
  }
  .hero-slide.is-active { height: clamp(380px, 104vw, 500px); }   /* #2: malo niža otvorena kartica */
  .hero-slide__content { align-items: flex-end; }
  /* #1: datum (5. srpnja) je centriran u contentu (flex quirk) → gurni dno na ravninu s naslovom */
  .hero-slide:not(.is-active) .hero-slide__date { align-self: flex-end; transform: translateY(18px); }
  .hero-slide:not(.is-active) .hero-slide__info {
    display: block; opacity: 1; transform: none;
  }
  .hero-slide:not(.is-active) .hero-slide__title { font-size: 20px; }   /* malo veći naslovi zatvorenih kartica */
  .hero-slide:not(.is-active) .hero-slide__org { display: none; }
  .hero-slide:not(.is-active) .hero-slide__day { font-size: 34px; }
  .hero__arrow { display: none; }
  .hero__logo { width: 96px; }
  .featured__grid { grid-template-columns: 1fr; gap: 56px; }   /* #3: znatno više zraka između izdvojenih itema (ispod „Saznaj više") */
  .news-card__media { aspect-ratio: 16 / 10; }
  /* zadnji „raspored" slide: strelica LIJEVO (kao datum), „raspored" DESNO (kao naziv predstave) — isti red, ista veličina/stil */
  .hero-slide--cta .hero-slide__cta { justify-content: center; }
  .hero-slide__cta-strip { flex-direction: row; align-items: center; gap: 24px; padding: 0 clamp(10px, 1.7vw, 33px); }
  .hero-slide__cta-strip .arrow { width: 40px; flex: none; margin-bottom: 0; }   /* mobitel: row layout, bez vertikalnog pomaka */
  .hero-slide__cta-striptext { font-size: 20px; }   /* ista veličina/stil/pozicija kao .hero-slide__title (20px, display 600) na zatvorenim slideovima */
}

/* ============================================================
   scena.css
   ============================================================ */
/* ==========================================================================
   CK Ribnjak — Scena (landing + podstranice)
   Sve mjere su 1:1 prema Figmi na 1920px (vw = px/19.2).
   ========================================================================== */

/* ---- Hero: veliki naslov + ilustracija + logo ------------------------------ */
.scena-hero {
  position: relative;
  height: 39.27vw;            /* od dna headera (75) do intro teksta (829) */
  overflow-x: clip;           /* riječ izlazi desno bez scrollbara… */
  overflow-y: visible;        /* …a vizual smije ispod ruba heroja (Figma: 189+839=1028) */
}
.scena-hero__logo {
  position: absolute;
  left: var(--page-pad); top: 2.69vw;     /* 56, 126.7 */
  width: 10.57vw;                          /* 203 */
  z-index: 3;
}
.scena-hero__logo img { width: 100%; height: auto; display: block; }

.scena-hero__word {
  position: absolute;
  margin: 0;
  left: 2.86vw; top: 5.68vw;               /* 55, 184 */
  font-family: var(--f-display); font-weight: 500;
  font-size: 33.85vw;                      /* 650 — točno po Figmi (pravi Attila) */
  line-height: 1;                          /* Figma 100% */
  letter-spacing: -.03em;
  color: var(--pillar-color, #B3431E);
  white-space: nowrap;
  z-index: 1;
}
.scena-hero__art {
  position: absolute;
  left: 58.5vw; top: 1vw;                   /* malo niže i desno (Figma) */
  width: 40vw;
  pointer-events: none;
  z-index: 0;                               /* IZA teksta — crvena slova su na vrhu (Figma) */
}
.scena-hero__art img { width: 100%; height: auto; display: block; }


/* ---- Intro + pro\u0161irivi opis ------------------------------------------------ */
.scena-intro {
  margin: 0 var(--page-pad);
  max-width: 53.4vw;                       /* 1025 */
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(20px, 1.82vw, 35px);
  line-height: 1.29;                       /* 45/35 */
  color: var(--c-black);
}
.scena-toggle {
  margin: 2.65vw var(--page-pad) 0;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-serif); font-weight: 500;
  font-size: clamp(16px, 1.05vw, 20px); line-height: 1;
  cursor: pointer;
}
.scena-toggle:hover { text-decoration: underline; text-underline-offset: 4px; }
.scena-toggle .chev { transition: transform .3s ease; transform: rotate(180deg); }
.scena-toggle[aria-expanded="true"] .chev { transform: none; }

.scena-detail {
  margin: 0 var(--page-pad);
  padding-top: 4.64vw;                     /* 1269-1180=89 — unutar collapse visine */
  max-width: 74.8vw;                       /* 1436 */
  overflow: hidden;
  max-height: 0;
  transition: max-height .6s cubic-bezier(.65,0,.35,1);
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(17px, 1.3vw, 25px);
  line-height: 1.4;                        /* 35/25 */
}
/* collapse animacijom umjesto hidden atributa */
.scena-detail p { margin: 0 0 1.4em; }
.scena-detail .team { margin: clamp(36px, 3.6vw, 68px) 0 0; }
.scena-detail .team b, .scena-detail .team strong { font-weight: 600; }

/* ---- Kategorije (akordeon / linkovi) ---------------------------------------- */
.scena-cats {
  margin-top: 6vw;                          /* landing: odmak od intro/više */
}
.scena-cats--gap { margin-top: 13vw; }      /* kazalište/kategorije: veći odmak od tab sadržaja */
.scena-cats--above { margin-top: 6vw; }     /* Figma glazba: zatvoreni redovi odmah ispod "više" */
.scena-cats--above + .scena-sub__title { margin-top: 6.5vw; }
.scena-cat {
  position: relative;
  display: block;
  height: 8.16vw;                           /* 156.7 */
  overflow: hidden;                         /* reže donji dio riječi na liniji (Figma) */
  border-bottom: 1px solid var(--c-black);
  cursor: pointer;
}
.scena-cat__word {
  position: absolute;
  left: var(--page-pad); top: 3.7vw;        /* baseline tik ispod linije (Figma #64; korisnik: mrvicu niže od 3.4) */
  font-family: var(--f-display); font-weight: 500;
  font-size: 6.25vw;                        /* 120 */
  line-height: 1; letter-spacing: -.03em;
  color: var(--c-black);
  white-space: nowrap;
  transform-origin: left bottom;
  transition: color .3s ease, transform .35s cubic-bezier(.22,1,.36,1);
}
.scena-cat__arrow {
  position: absolute;
  right: 2.97vw; top: 3.6vw;                 /* poravnat s vidljivim dijelom riječi */
  width: 2.4vw; min-width: 30px;
  color: var(--c-black);
  transition: transform .35s ease, color .3s ease;
}
.scena-cat__arrow svg { width: 100%; height: auto; display: block; transform: rotate(-90deg); }  /* homepage strelica (↓) rotirana DESNO (→) */
.scena-cat:hover .scena-cat__word { color: var(--pillar-color, #B3431E); transform: scale(1.015); }
.scena-cat:hover .scena-cat__arrow { transform: translateX(6px); color: var(--pillar-color, #B3431E); }

/* ---- Podstranica kategorije (kazalište&ples, glazba...) -------------------- */
.scena-sub__title {
  margin: 6vw var(--page-pad) 0;             /* manji razmak od "više" do naslova kategorije */
  font-family: var(--f-display); font-weight: 500;
  font-size: 6.25vw;                        /* 120 */
  line-height: .92; letter-spacing: -.03em;
  color: var(--c-black);
}

.scena-tabs {
  position: relative;
  margin: 8.5vw var(--page-pad) 0;          /* 1632 */
  height: 6.35vw; min-height: 56px;         /* 122 */
}
.scena-tabs::after {                        /* baseline pune širine (panel gornji rub) */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--c-black); z-index: 0;
}
.scena-tab {
  position: absolute; top: 0; bottom: 0;
  display: flex; align-items: center;
  padding: 0 7vw;                           /* više lijevo/desno razmaka u aktivnom boxu */
  background: transparent; border: none;    /* neaktivni: proziran — baseline se vidi ispod */
  font-family: var(--f-display); font-weight: 500;
  font-size: 2.6vw;                         /* 50 */
  line-height: 1; letter-spacing: -.03em;
  color: var(--c-black);
  cursor: pointer; z-index: 1;
  transition: color .25s ease, opacity .15s ease;
}
.scena-tab--1 { left: 14.46vw; }            /* box oko 'predstave' (label @412) */
.scena-tab--2 { left: 44.72vw; }            /* box oko 'umjetnička istraživanja' (label @993) */
.scena-tab.is-active {
  border: 1px solid var(--c-black);
  border-bottom: none;                      /* aktivni: gore+lijevo+desno, otvoren dolje */
  background: var(--c-white);               /* prekida baseline samo ispod sebe */
  z-index: 2;
}
.scena-tab:not(.is-active):hover { opacity: .7; }   /* tab hover: lagano posvijetli, BEZ underlinea */

/* ---- Grid umjetnika / predstava --------------------------------------------- */
.artist-grid {
  margin: 10.16vw 2.86vw 0;                 /* 1949; left 55 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.6vw;                               /* 50 */
}
.artist-grid[hidden] { display: none; }
.artist-card {
  position: relative;
  aspect-ratio: 1 / 1;
  background-size: cover; background-position: center;
  overflow: hidden;
  color: var(--c-white);
  display: block;
}
.artist-card::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(0,0,0,.2);
  transition: background-color .35s ease;
}
.artist-card:hover::before { background: rgba(0,0,0,.5); }
.artist-card__info {
  position: absolute; left: 7.2%; right: 7.2%; bottom: 6.1%;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.artist-card__name {
  display: block;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(18px, 1.56vw, 30px);     /* 30 */
  line-height: 1.4;                          /* više zraka (~40 na 30px) */
  margin-bottom: .6vw;                       /* suptilan odmak autora od naslova */
}
.artist-card__extra {
  display: block;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(18px, 1.56vw, 30px);
  line-height: 1.4;                          /* naslov + podnaslov, ravnomjeran ritam */
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .35s ease, opacity .35s ease;
}
.artist-card__btn {
  display: block;                            /* inline ne prima margin-top — zato razmak nije radio! */
  margin-top: 1.8vw;                         /* razmak tekst → gumb (konstantan, i bez podnaslova) */
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .35s ease, opacity .35s ease;
}
.artist-card:hover .artist-card__info { transform: translateY(-18%); }
.artist-card:hover .artist-card__name { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.artist-card:hover .artist-card__extra,
.artist-card:hover .artist-card__btn { max-height: 200px; opacity: 1; }
.artist-card--solid { background: var(--c-ink); }

/* ---- Glazba: programske sekcije (chip + vrpca termina) ---------------------- */
.program-section { position: relative; margin-top: 9.95vw; }      /* 191 između sekcija */
.program-section:first-of-type { margin-top: 9vw; }
.program-section__decor {
  position: absolute;
  left: 35.8vw; top: -1.5vw;            /* 687, uz naslov */
  width: 47vw;                           /* 904 */
  opacity: .05;
  pointer-events: none;
  z-index: -1;
}
.program-section__head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 4vw 0 var(--page-pad);
}
.program-section__chip {
  display: inline-block;
  background: var(--c-black); color: var(--c-white);
  font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(16px, 1.3vw, 25px);
  letter-spacing: .1em; line-height: 1;
  text-transform: uppercase;            /* crna chip traka uvijek velika slova */
  padding: clamp(10px, .94vw, 18px) clamp(32px, 3.18vw, 61px);
  white-space: nowrap;
}
.program-section__arrows { display: flex; gap: 3.1vw; align-items: center; }
.program-section__arrows button {
  width: 15px; display: grid; place-items: center;
  transition: transform .2s ease;
}
.program-section__arrows button:hover { transform: scale(1.25); }
.program-section__arrows svg { width: 15px; height: 30px; }
/* uski mobitel: dugačak chip-naslov („SEKCIJA SLOBODNE GLAZBE") gura carousel strelice van ekrana (#glazba @360).
   Drži strelice (flex-shrink:0), pusti chip da se skuplja/lomi pa obje strelice ostaju na ekranu. */
@media (max-width: 480px) {
  .program-section__head { margin-right: var(--page-pad); gap: 12px; }
  .program-section__chip { white-space: normal; min-width: 0; padding-left: 18px; padding-right: 18px; }
  .program-section__arrows { flex-shrink: 0; gap: 16px; }
}

.program-strip {
  margin: 3.13vw 0 0 var(--page-pad);    /* 2248-2188=60 ≈ 3.13vw od chipa */
  display: flex; gap: 2.6vw;             /* 50 */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-right: 4vw;
}
.program-strip::-webkit-scrollbar { display: none; }
.event-card {
  flex: 0 0 23.44vw;                     /* 450 */
  min-width: 240px;
  aspect-ratio: 450 / 659;
  background: var(--c-grey);
  background-size: cover; background-position: center;
  color: var(--c-white);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 1.1vw 2.34vw 2.14vw;        /* 41 lijevo, 45 dolje */
  scroll-snap-align: start;
  position: relative;
}
.event-card:hover .event-card__title { text-decoration: underline; text-underline-offset: 4px; }
.event-card__date {
  font-family: var(--f-ui); font-weight: 600;            /* Poppins Semibold (ne Bold) */
  font-size: clamp(14px, 1.05vw, 20px); line-height: 1.5;
  letter-spacing: .01em;
  margin: 0 0 1.05vw;
}
.event-card__title {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(18px, 1.56vw, 30px); line-height: 1.17;
  margin: 0;
  max-width: 18vw;
}

@media (max-width: 900px) {
  .program-section { margin-top: 56px; }
  .program-section__head { margin-right: var(--page-pad); }
  .program-strip { gap: 16px; margin-top: 20px; }
  .event-card { flex-basis: 70vw; padding: 0 16px 20px 16px; }
  .event-card__title { max-width: none; font-size: 22px; }
  .event-card__date { font-size: 15px; }
}

/* ---- Predstave tab: sekcije s chipom + grid kartica 570×746 -------------------- */
.show-section { margin: 0 var(--page-pad); }
.show-section:first-of-type { margin-top: 9.6vw; }   /* chip @1938, tabovi kraj 1754 */
.show-section + .show-section { margin-top: 11vw; }
.show-section__chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 29.5vw;                    /* 566 */
  height: 3.02vw; min-height: 44px;     /* 58 */
  background: var(--c-black); color: var(--c-white);
  font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(15px, 1.3vw, 25px); line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;            /* crna chip traka uvijek velika slova */
  padding: 0 3.1vw;
  margin: 0;
}
.show-grid {
  margin-top: 2.6vw;                   /* chip bliže karticama ispod (Figma) */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5vw 2.5vw;                      /* veći razmak između redova (col 48) */
}
.show-card { display: block; min-width: 0; }
.show-card__media {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  background-size: cover; background-position: center;
  overflow: hidden;
}
.show-card__media::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(0,0,0,.7);
  opacity: 0;
  transition: opacity .3s ease;
}
.show-card__info {
  position: absolute; left: 6.1%; top: 6%; right: 8%;
  display: block;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(15px, 1.15vw, 22px); line-height: 1.36;   /* 22/30 */
  color: var(--c-white);
  white-space: pre-line;
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
}
.show-card:hover .show-card__media::before,
.show-card:focus-visible .show-card__media::before { opacity: 1; }
.show-card:hover .show-card__info,
.show-card:focus-visible .show-card__info { opacity: 1; transform: none; }
.show-card__label {
  display: block;
  margin: clamp(14px, 1.35vw, 26px) 0 0;   /* #11: zraka ispod slike do nadnaslova (na mobitelu 1.35vw je bio ~5px) */
  font-family: var(--f-serif);
  font-size: clamp(15px, 1.3vw, 25px); line-height: 1;
  color: #50515D;
}
.show-card__title {
  margin: clamp(14px, 1.35vw, 26px) 0 0;   /* #11: zraka ispod slike do naslova */
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(22px, 2.6vw, 50px); line-height: 1.1;     /* 50/55 */
  color: var(--c-black);
}
.show-card__label + .show-card__title { margin-top: clamp(10px, 1.04vw, 20px); }  /* #7: razmak nadnaslov→naslov (na mobitelu 1.04vw je bio ~4px) */
.show-card:hover .show-card__title { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 3px; }

.show-more {
  margin: 7vw auto 0;                   /* još veći razmak iznad 'učitaj više' */
  display: flex; align-items: center; gap: 10px;
  white-space: nowrap;
  font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(15px, 1.04vw, 20px); line-height: 1;
  letter-spacing: .1em;
}
.show-more svg { width: 15px; height: 15px; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.show-more:hover svg { transform: rotate(180deg); }
.show-more:hover { text-decoration: underline; text-underline-offset: 5px; }

@media (max-width: 900px) {
  .show-grid { grid-template-columns: 1fr; gap: 32px; }
  .show-section__chip { min-width: 0; width: 100%; font-size: 16px; }
  .show-card__title { font-size: 26px; }
  .show-card__label { font-size: 16px; }
  .show-card__info { font-size: 16px; }
  .show-more { margin-top: 28px; }
}

/* ---- Responsive -------------------------------------------------------------- */
@media (max-width: 900px) {
  .scena-hero { height: 46vw; }
  .scena-hero__logo { width: 16vw; top: 4vw; }
  .scena-intro { max-width: none !important; font-size: 20px; }   /* !important nadjača inline max-width:43.1vw (single-program) → intro puna širina na mobitelu/tabletu (#88) */
  .scena-detail { max-width: none; font-size: 17px; }
  .scena-cat { height: 64px; }
  /* najduži naziv „festivali & manifestacije" mora STATI prije strelice na svim mobitelima/tabletima
     (mjereno: ~11.8px/font-px, avail≈iw−67 → clamp(18,6.5vw,44) stane od 320px naviše); centriraj jer manji font inače „pluta" visoko */
  .scena-cat__word { font-size: clamp(18px, 6.5vw, 44px); top: 50%; transform: translateY(-50%); }
  .scena-cat:hover .scena-cat__word { transform: translateY(-50%) scale(1.015); }
  .scena-cat__arrow { width: 26px; top: 50%; transform: translateY(-50%); }
  .scena-cat:hover .scena-cat__arrow { transform: translateY(-50%) translateX(5px); }
  .scena-cats { margin-top: 64px; }
  .scena-toggle { margin-top: 24px; }
  .scena-detail { margin-top: 32px; }
  .scena-sub__title { font-size: 44px; margin-top: 64px; }
  .scena-tabs { height: 56px; margin-top: 40px; display: flex; }
  .scena-tab { position: static; flex: 1 1 50%; justify-content: center; padding: 0 8px; font-size: clamp(13px, 3.4vw, 17px); letter-spacing: 0; }
  .scena-tab--1, .scena-tab--2 { left: auto; }
  .show-grid, .show-grid[style] { grid-template-columns: 1fr 1fr !important; gap: 28px 18px; margin-top: 28px; }
  .show-section__chip { width: 100%; min-width: 0; height: 48px; font-size: 14px; }
  .show-section + .show-section { margin-top: 56px; }
  .show-card__title { font-size: 22px; }
  .show-more { margin-top: 40px; }
  .artist-grid { grid-template-columns: 1fr; gap: 20px; margin: 40px var(--page-pad) 0; }
  .artist-card__name, .artist-card__extra { font-size: 22px; }
}
@media (max-width: 600px) {
  .scena-hero { height: 60vw; }
  .scena-cat { height: 56px; }   /* font scena-cat__word koristi clamp iz ≤900 (stane i centriran je) */
  .show-grid, .show-grid[style] { grid-template-columns: 1fr !important; gap: 48px !important; }   /* #7: više zraka između kartica na mobitelu */
  .scena-tab { font-size: 13px; }
  .scena-sub__title { font-size: 34px; }
}


/* eksplicitno: Figma — opisi Literata 25/35, credits/team blokovi 25/45 */
.scena-detail, .scena-detail p { line-height: 1.4 !important; }
.scena-detail .team, .scena-detail .team p { line-height: 1.8 !important; }

/* ---- Jednostavna rubrika (film / književnost / festivali): tekst + galerija ---- */
.scena-body {
  margin: 6vw var(--page-pad) 0;
  max-width: 53.4vw;                        /* 1025 — kao intro */
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(17px, 1.3vw, 25px);
  line-height: 1.8;                         /* 45/25 */
  letter-spacing: -.01em;
  color: var(--c-black);
}
.scena-body p { margin: 0 0 1.4em; }
.scena-gallery {
  margin: 6vw var(--page-pad) 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: clamp(14px, 1.8vw, 32px);
}
/* Omjer je na ĆELIJI (figure), slika je UVIJEK ispuni → nema sivih rupa ni izduženja. */
.scena-gallery figure { margin: 0; }
.scena-gallery img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  background: var(--c-offwhite);
}

/* GRID (2/3/4 slike): N KVADRATNIH stupaca, CENTRIRANO (max-width = stupci×ćelija → margin auto centrira; #103). */
.scena-gallery[data-layout="grid"] {
  margin: 6vw auto 0;
  max-width: min(calc(100% - 2 * var(--page-pad)), calc(var(--cols, 3) * clamp(240px, 24vw, 400px) + (var(--cols, 3) - 1) * clamp(14px, 1.8vw, 32px)));
}
.scena-gallery[data-layout="grid"] figure { aspect-ratio: 1 / 1; height: auto; }
.scena-gallery[data-layout="grid"] img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }

/* ---- Layout varijante (WP: izbor po sekciji preko data-layout + --cols) ---- */
/* MASONRY — zadržava prirodni omjer slike, idealno za miješane orijentacije */
.scena-gallery[data-layout="masonry"] {
  display: block;
  column-count: var(--cols, 3);
  column-gap: 2.6vw;
}
.scena-gallery[data-layout="masonry"] figure { aspect-ratio: auto; break-inside: avoid; margin-bottom: 2.6vw; }
.scena-gallery[data-layout="masonry"] img { aspect-ratio: auto; height: auto; }

/* JUSTIFIED (static height) — redovi fiksne visine, širine prema omjeru (JS postavlja --ar) */
/* JUSTIFIED: širina ćelije ∝ omjeru slike (flex-grow), a aspect-ratio = omjer →
   sve ćelije u redu imaju ISTU visinu, slika prirodna (bez rezanja), red ispuni širinu. */
.scena-gallery[data-layout="justified"] {
  display: flex; flex-wrap: wrap;
  grid-template-columns: none;
  gap: clamp(12px, 1.4vw, 26px);
  align-items: flex-start;
}
.scena-gallery[data-layout="justified"] figure {
  flex: var(--ar, 1.5) 1 0;
  aspect-ratio: var(--ar, 1.5);
  max-height: clamp(360px, 46vw, 560px);    /* limit za vrlo visoke (portreti) */
}
.scena-gallery[data-layout="justified"] img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }

/* CAROUSEL — SCROLL-based track (JS koristi scrollLeft/scrollBy; restOffset daje peek prve+sljedeće slike na otvaranju) */
.scena-gallery[data-layout="carousel"] {
  display: flex; grid-template-columns: none;
  gap: 1.56vw;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;   /* NEMA scroll-behavior:smooth — JS scrollBy koristi behavior:'smooth' eksplicitno; applyRest (peek init) mora biti INSTANT */
}
.scena-gallery[data-layout="carousel"]::-webkit-scrollbar { display: none; }
.scena-gallery[data-layout="carousel"] figure {
  aspect-ratio: auto;
  flex: 0 0 calc((100% - (var(--cols, 3) - 1) * 1.56vw) / var(--cols, 3));
  height: clamp(300px, 30vw, 460px);          /* jednolika, prirodna visina — ne previsoko */
}
.scena-gallery[data-layout="carousel"] img {
  width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover;  /* popuni okvir bez izobličenja */
}
.gallery-carousel { position: relative; overflow: hidden; }
.gallery-carousel__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--c-white); color: var(--c-black);
  display: grid; place-items: center;
  box-shadow: 0 0 24px rgba(0,0,0,.22); z-index: 3;
  opacity: 0; pointer-events: none;          /* skrivene; pojave se na hover polovice */
  transition: transform .25s ease, opacity .3s ease;
}
.gallery-carousel.show-prev .gallery-carousel__btn--prev,
.gallery-carousel.show-next .gallery-carousel__btn--next { opacity: 1; pointer-events: auto; }
.gallery-carousel__btn:hover { transform: translateY(-50%) scale(1.08); }
.gallery-carousel__btn svg { width: 14px; height: 14px; }
.gallery-carousel__btn--prev { left: 18px; }
.gallery-carousel__btn--next { right: 18px; }
.gallery-carousel__dots {
  display: flex; justify-content: center; align-items: center; gap: 12px;
  margin-top: 1.8vw;
}
.gallery-carousel__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(29,29,27,.25);
  transition: background-color .3s ease, width .3s ease;
}
.gallery-carousel__dot.is-active { width: 30px; border-radius: 5px; background: var(--c-black); }
/* JEDNA slika: CENTRIRANA, NE puna širina (#103), prirodne proporcije. */
.show-single { margin: 0 auto; max-width: min(calc(100% - 2 * var(--page-pad)), 720px); cursor: pointer; }
.show-single img { width: 100%; height: auto; display: block; }

/* .show-gallery / .show-gallery--bleed (contained vs bleed) → vidi blocks.css (učitava se zadnji = autoritet) */
.scena-gallery[data-layout="peek"] {
  --g: clamp(10px, 1.04vw, 18px);
  display: flex; grid-template-columns: none; gap: var(--g);
  overflow-x: auto; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0;
}
.scena-gallery[data-layout="peek"]::-webkit-scrollbar { display: none; }
.scena-gallery[data-layout="peek"] figure {
  /* 100% = container širina: u bleed kontekstu (single-predstava .show-gallery--bleed = 100vw) ostaje 100vw; u sadržaju (sekcija-body) skalira na stupac */
  flex: 0 0 calc((100% - 3 * var(--g)) / 3.5); margin: 0; aspect-ratio: 1 / 1; height: auto;
}
.scena-gallery[data-layout="peek"] img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1 / 1; display: block; }
@media (max-width: 700px) {
  /* mobitel: 1/4 + 1 CIJELA + 1/4 = 1,5 pločice u viewportu */
  .scena-gallery[data-layout="peek"] figure { flex-basis: calc((100% - 2 * var(--g)) / 1.5); }
}
/* peek galerija u SADRŽAJU (predstava/program): do ruba containera (bez L/R margine koju base .scena-gallery dodaje) + veći razmak gore/dolje */
:is(.show-desc,.sekcija-body) .scena-gallery[data-layout="peek"],
:is(.show-desc,.sekcija-body) .gallery-peek { margin-left: 0; margin-right: 0; }
:is(.show-desc,.sekcija-body) .gallery-peek { margin-top: clamp(40px, 6vw, 80px); margin-bottom: clamp(40px, 6vw, 80px); }
:is(.show-desc,.sekcija-body) .gallery-peek .scena-gallery[data-layout="peek"] { margin-top: 0; margin-bottom: 0; }

/* Peek galerija: wrap + strelice (single predstava) — ista logika kao hero slider */
.gallery-peek { position: relative; }
.gallery-peek__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--c-white); color: var(--c-black);
  display: grid; place-items: center;
  box-shadow: 0 0 24px rgba(0,0,0,.22); z-index: 3;
  opacity: 0; pointer-events: none;          /* skrivene; pojave se na hover polovice (desktop) */
  transition: transform .25s ease, opacity .3s ease;
  border: 0; cursor: pointer;
}
.gallery-peek.show-prev .gallery-peek__btn--prev,
.gallery-peek.show-next .gallery-peek__btn--next { opacity: 1; pointer-events: auto; }
.gallery-peek__btn:hover { transform: translateY(-50%) scale(1.08); }
.gallery-peek__btn.is-disabled { opacity: 0 !important; pointer-events: none !important; }
.gallery-peek__btn:focus-visible { opacity: 1; pointer-events: auto; outline: 2px solid var(--c-black); outline-offset: 2px; }
.gallery-peek__btn svg { width: 14px; height: 14px; }
.gallery-peek__btn--prev { left: 18px; }
.gallery-peek__btn--next { right: 18px; }
@media (max-width: 700px) {
  /* strelice MANJE i STALNO vidljive na mobitelu */
  .gallery-peek__btn { width: 38px; height: 38px; opacity: .92; pointer-events: auto; }
  .gallery-peek__btn svg { width: 11px; height: 11px; }
  .gallery-peek__btn--prev { left: 10px; }
  .gallery-peek__btn--next { right: 10px; }
  .gallery-peek__btn.is-disabled { opacity: .32 !important; } /* rubni: prigušen, ali vidljiv */
}

.show-single img { display: block; width: 100%; height: auto; }

.scena-gallery figcaption {
  margin-top: 12px;
  font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(13px, .9vw, 17px);
  letter-spacing: .1em; text-transform: uppercase;
}
@media (max-width: 1100px) {
  .scena-body { max-width: none; }
  .scena-gallery { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .scena-gallery[data-layout="masonry"] { column-count: 2; }
  .scena-gallery[data-layout="justified"] { --row: 32vw; }
  .scena-gallery[data-layout="carousel"] figure { flex-basis: 46%; }
}
@media (max-width: 640px) {
  .scena-gallery { grid-template-columns: 1fr; }
  .scena-gallery[data-layout="masonry"] { column-count: 1; }
  /* justified na mobilnom → jedan stupac, svaka slika prirodnog omjera (bez rezanja) */
  .scena-gallery[data-layout="justified"] { flex-direction: column; }
  .scena-gallery[data-layout="justified"] figure { height: auto; flex: 0 0 auto; width: 100%; }
  .scena-gallery[data-layout="justified"] img { height: auto; }
  .scena-gallery[data-layout="carousel"] figure { flex-basis: 84%; }
}

/* ---- Galerija: hover efekt (vrijedi i za jednu sliku .show-single) ---- */
.scena-gallery figure,
.show-single {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.scena-gallery figure img,
.show-single img { transition: transform .6s cubic-bezier(.22,1,.36,1); }
.scena-gallery figure:hover img,
.show-single:hover img { transform: scale(1.06); }
.scena-gallery figure::after,
.show-single::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(29,29,27,.36);
  opacity: 0;
  transition: opacity .4s ease;
}
.scena-gallery figure:hover::after,
.show-single:hover::after { opacity: 1; }
.scena-gallery figure .zoom,
.show-single .zoom {
  position: absolute; left: 50%; top: 50%;
  width: 64px; height: 64px;
  transform: translate(-50%,-50%) scale(.7);
  opacity: 0;
  display: grid; place-items: center;
  border: 2px solid var(--c-white); border-radius: 50%;
  color: var(--c-white);
  transition: opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1);
  z-index: 2; pointer-events: none;
}
.scena-gallery figure:hover .zoom,
.show-single:hover .zoom { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.scena-gallery figure .zoom svg,
.show-single .zoom svg { width: 26px; height: 26px; }

/* ---- Lightbox ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10,10,10,.94);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.lightbox__stage { position: relative; width: 86vw; height: 84vh; display: flex; align-items: center; justify-content: center; }
.lightbox__img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  transform: scale(.94); opacity: 0;
  transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.lightbox.is-open .lightbox__img { transform: scale(1); opacity: 1; }
.lightbox__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--c-white); color: var(--c-black);
  display: grid; place-items: center;
  box-shadow: 0 0 30px rgba(0,0,0,.35);
  transition: transform .25s ease, opacity .3s ease;
  z-index: 3;
  opacity: 0; pointer-events: none;          /* skrivene; pojave se na hover polovice */
}
.lightbox.show-prev .lightbox__btn--prev,
.lightbox.show-next .lightbox__btn--next { opacity: 1; pointer-events: auto; }
.lightbox__btn:hover { transform: translateY(-50%) scale(1.08); }
.lightbox__btn--prev { left: clamp(12px, 3vw, 48px); }
.lightbox__btn--next { right: clamp(12px, 3vw, 48px); }
.lightbox__btn svg { width: 16px; height: 16px; }
.lightbox__close {
  position: absolute; top: clamp(16px, 2.5vw, 40px); right: clamp(16px, 2.5vw, 40px);
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--c-white); border: 1.5px solid rgba(255,255,255,.5);
  transition: transform .3s ease, border-color .25s ease; z-index: 4;
}
.lightbox__close:hover { transform: rotate(90deg); border-color: var(--c-white); }
.lightbox__close svg { width: 18px; height: 18px; }
.lightbox__count {
  position: absolute; left: 50%; bottom: clamp(14px, 3vh, 34px);
  transform: translateX(-50%);
  font-family: var(--f-ui); font-weight: 700; font-size: 15px;
  letter-spacing: .1em; color: var(--c-white);
}
@media (max-width: 640px) {
  .lightbox__btn { width: 48px; height: 48px; }
}

/* ============================================================
   podstranice.css
   ============================================================ */
/* CK Ribnjak — Zajednica + Studio + Javi nam se (podstranice) */

/* ---- Zajednica (Figma studio3 / 961:368, 1920×5453) ---- */
.zaj-hero { position: relative; overflow: hidden; min-height: 44.2vw; }
.zaj-hero__logo {
  position: absolute;
  left: var(--page-pad); top: 2.69vw;          /* 56,126.7 */
  width: 10.57vw;                               /* 203 */
  z-index: 2;
}
.zaj-hero__logo img { width: 100%; height: auto; display: block; }
.zaj-hero__word {
  margin: 0;
  position: absolute;
  left: 4.22vw; top: 8.65vw;                    /* 81, 241-75 — točno po Figmi (pravi Attila) */
  font-family: var(--f-display); font-weight: 500;
  font-size: 21.88vw;                           /* 420 — širina 2005 → 'a' izlazi desno */
  line-height: .91; letter-spacing: -.03em;
  color: #E38B33;
  white-space: nowrap;
}
.zaj-hero__art {
  position: absolute;
  left: 44.32vw; top: 7.14vw;                   /* 851, 212-75 */
  width: 52.4vw;                                /* 1006×711 */
  aspect-ratio: 1006 / 711;
  z-index: 1;
}
.zaj-hero__art img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* peach pravokutnik iz Figme = greška u dizajnu — namjerno bez overlaya */
.zaj-hero__quote {
  position: absolute;
  left: var(--page-pad); top: 38.8vw;           /* 56, 820-75 */
  width: 43.1vw;                                /* 828 */
  margin: 0;
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(16px, 1.3vw, 25px);
  line-height: 1.4;                             /* 35/25 */
  color: var(--c-black);
  z-index: 2;
}
.zaj-cards {
  position: relative; z-index: 1;
  margin: 13.2vw var(--page-pad) 0;             /* cards @1177 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.14vw;                                  /* 41 */
}
.zaj-card {
  position: relative;
  aspect-ratio: 574 / 798;                      /* portret! */
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 2vw;
  color: var(--c-white);
  overflow: hidden;
}
.zaj-card::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.5); transition: background-color .3s ease; }
.zaj-card:hover::before { background: rgba(227,139,51,.55); }
.zaj-card h2 {
  position: relative; margin: 0;
  font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(20px, 2.08vw, 40px);         /* 40/50 centriran */
  line-height: 1.25; letter-spacing: .01em;
  max-width: 9em;                               /* 312 */
}
.zaj-chip-row { display: flex; justify-content: center; margin-top: 7.45vw; position: relative; z-index: 1; }   /* @2118 */
.zaj-chip {
  background: var(--c-black); color: var(--c-white);
  font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(16px, 1.3vw, 25px);          /* 25 */
  letter-spacing: .1em; line-height: 1.5;
  padding: 0.52vw 3.13vw;                       /* 10 60 → 404×58 */
  text-transform: uppercase;
}
.zaj-cta {
  position: relative; z-index: 1;
  margin: 6.8vw var(--page-pad) 0;              /* @2249 */
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.zaj-cta__panel {
  background: #E38B33;
  aspect-ratio: 902 / 724;
  padding: 3.65vw 5.68vw 5.2vw 4.11vw;          /* 70 109 100 79 */
  display: flex; flex-direction: column; justify-content: space-between;
  box-sizing: border-box;
}
.zaj-cta__eyebrow {
  margin: 0;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(18px, 1.56vw, 30px);         /* 30 */
  letter-spacing: .07em; line-height: 1;
  color: var(--c-black);
}
.zaj-cta__bottom { display: flex; flex-direction: column; gap: 2.14vw; align-items: flex-start; }   /* 41 */
.zaj-cta__title {
  margin: 0;
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(22px, 2.34vw, 45px);         /* 45/50 */
  line-height: 1.11; letter-spacing: .03em;
  color: var(--c-black);
  max-width: 37.2vw;                            /* 714 */
}
.zaj-cta__img { background-size: cover; background-position: center; }
/* drvo uklonjeno — nova Figma verzija ima X-figuru kroz cijelu pozadinu */
.zaj-figura {
  position: absolute;
  left: 0.1vw; top: 31.25vw;                /* Figma Rectangle 215: X2 Y675 (−75 header) */
  width: 99.74vw;                           /* 1915×3100 */
  aspect-ratio: 1915 / 3100;
  pointer-events: none;
  z-index: 0;                               /* najdonji sloj: bijela pozadina → figura → svi elementi iznad */
}
.zaj-figura img { width: 100%; height: 100%; display: block; }

.zaj-rule {
  border: none;                                /* bez horizontalne linije (Figma) */
  margin: 19vw var(--page-pad) 0;              /* kraći razmak: stopala figure tik iznad scenerije */
  position: relative; z-index: 1;
}

/* ---- Single sekcija/program (Figma studio5 / 933:898, 1920×4424) ---- */
.sekcija-layout {
  margin: 10.3vw var(--page-pad) 0;             /* naslov @~1404, UPISI do 1206 */
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21.72vw;  /* sadržaj | 417 sidebar @1447 */
  gap: 0 7.9vw;
  align-items: start;
}
.sekcija-kicker {   /* nadnaslov/eyebrow iznad naslova programa (npr. „podcast") */
  margin: 0 0 .6em;
  font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(14px, 1.04vw, 20px); line-height: 1;
  letter-spacing: .04em; text-transform: uppercase;
}
.sekcija-title {
  margin: 0 0 2.3vw;
  font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(24px, 2.08vw, 40px);
  line-height: 1.25;
}
.sekcija-body {
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.04vw, 20px);         /* Literata 20 */
  line-height: 1.5; letter-spacing: .01em;      /* zračnije, kao Figma */
}
.sekcija-body p { margin: 0 0 1.5em; }
.sekcija-body ul { margin: 0 0 3.6em; padding-left: 1.15em; }
.sekcija-body li { margin-bottom: .1em; }
.sekcija-body strong { font-weight: 700; }
.sekcija-meta { margin: 0 0 1.5em; }
.sekcija-meta:first-of-type { margin-top: .5em; }
.sekcija-aside h2 {
  margin: 0 0 clamp(30px, 2.5vw, 44px);          /* #4: veći razmak ispod naslova „NAŠI PROJEKTI" */
  font-family: var(--f-ui); font-weight: 600;   /* Poppins Semibold (Figma) */
  font-size: clamp(30px, 2.5vw, 46px);          /* #4: znatno veći „NAŠI PROJEKTI" (bilo 16px na mobitelu, ~duplo) */
  letter-spacing: .04em; line-height: 1.15;
  text-transform: uppercase;
}
.projekt-card { display: block; margin-bottom: 3.39vw; }   /* gap 65 */
.projekt-card__img {
  position: relative;
  aspect-ratio: 417 / 276.6;
  overflow: hidden;
  background: var(--c-offwhite);
}
.projekt-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.projekt-card__img::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.2); }
/* projekti nemaju single — bez hover efekta */
.projekt-card__text {
  display: block;
  margin: clamp(18px, 1.04vw, 22px) 0 0;        /* #11: zraka ispod slike do teksta (na mobitelu je 1.04vw bilo ~4px) */
  font-family: var(--f-grotesk);
  font-size: clamp(15px, 1.04vw, 20px);         /* Schibsted 20/30 */
  line-height: 1.5; letter-spacing: .05em;
  color: var(--c-black);
}
.projekt-card__text strong {
  display: block;
  font-family: var(--f-display); font-weight: 600;   /* Attila Semibold */
  font-size: clamp(22px, 1.67vw, 32px);               /* 32 */
  line-height: 1; letter-spacing: 0;
  margin-bottom: .94vw;                                /* veći prored naslov → opis (Figma) */
}


/* ---- Studio: lista programa unutar kategorije ---- */
.studio-groups { margin-top: 6vw; }
.studio-group__head {
  margin: 0 var(--page-pad);
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(34px, 6.25vw, 120px);
  line-height: 1; letter-spacing: -.03em;
}
.studio-group + .studio-group { margin-top: 6vw; }

/* ---- Javi nam se ---- */
.contact-hero { position: relative; }
.contact-hero__logo {
  position: absolute;
  left: var(--page-pad); top: 2.69vw;     /* 56,126.7 */
  width: 10.57vw;                          /* 203 */
}
.contact-hero__logo img { width: 100%; height: auto; display: block; }
.contact-hero__word {
  margin: 0;
  padding: 10.8vw 0 0 var(--page-pad);    /* glifovi počinju odmah ispod loga (logo dno @399) */
  font-family: var(--f-display); font-weight: 500;
  font-size: 15.6vw;                       /* 300 — točno po Figmi (pravi Attila, širina 1639) */
  line-height: .91; letter-spacing: -.03em;
  color: #D9D9D9;
  white-space: nowrap;
}
.contact-hero__img {
  position: absolute;
  left: 68.33vw; top: 7.76vw;               /* 1312, 224 abs */
  width: 29.11vw;                           /* 559×566 */
  aspect-ratio: 559 / 566;
  object-fit: cover;
}

/* tabovi 1359×80 — folder stil: linija po dnu, aktivni = okvir otvoren prema dolje */
.contact-tabs {
  margin: 13.7vw auto 0;
  width: 70.78vw;                          /* 1359 */
  min-width: min(92vw, 680px);
  display: flex;
  position: relative; z-index: 3;
}
.contact-tabs::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--c-black);
  z-index: 0;
}
.contact-tab {
  flex: 1;
  position: relative; z-index: 1;
  height: 4.17vw; min-height: 56px;        /* 80 */
  display: grid; place-items: center;
  font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(15px, 1.56vw, 30px); line-height: 1;
  letter-spacing: .02em;
  background: transparent; color: var(--c-black);
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom: none;
  transition: opacity .15s ease;
}
.contact-tab.is-active {
  z-index: 2;
  background: var(--c-white);
  border-color: var(--c-black);            /* otvoren prema dolje — prekriva liniju */
}
.contact-tab:not(.is-active):hover { opacity: .7; }   /* tab hover: lagano posvijetli, BEZ underlinea */

.contact-panel {
  margin: 4.95vw auto 0;                   /* sadržaj @1055; tabovi kraj 960 */
  width: 70.78vw;
  min-width: min(92vw, 680px);
  padding-left: 0.52vw;
}
.contact-panel[hidden] { display: none; }

/* ---- O Centru: prostori / dvorane (kartice + galerija, razdvojeno linijama) ---- */
.prostori { margin-top: 1vw; }
.prostor { padding: clamp(28px, 3.6vw, 72px) 0; }
.prostor:first-child { padding-top: 0; }
.prostor + .prostor { border-top: 1px solid rgba(28,27,31,.16); }
.prostor--media { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 3.2vw, 72px); align-items: start; }
.prostor__naziv { margin: 0 0 1.1rem; font-family: var(--f-display); font-weight: 700; font-size: clamp(26px, 2.5vw, 48px); line-height: 1.05; letter-spacing: -.02em; }
.prostor__namjene { list-style: none; margin: 0; padding: 0; }
.prostor__namjene li { padding: .72em 0; font-family: var(--f-serif); font-size: clamp(16px, 1.04vw, 20px); line-height: 1.4; border-top: 1px solid rgba(28,27,31,.1); }
.prostor__namjene li:first-child { border-top: none; padding-top: 0; }
.prostor__media .show-single,
.prostor__media .scena-gallery { margin: 0; }
@media (max-width: 768px) {
  .prostor--media { grid-template-columns: 1fr; gap: 18px; }
  .prostor__namjene { margin-bottom: 6px; }
}

/* ---- Arhiva rasporeda (automatska, obrnuto kronološki) ---- */
.arhiva-rasp__year { margin: 1.8em 0 .3em; font-family: var(--f-display); font-weight: 700; font-size: clamp(22px, 2vw, 36px); }
.arhiva-rasp__list { list-style: none; margin: 0 0 1.5em; padding: 0; }
.arhiva-rasp__row { display: grid; grid-template-columns: 4.5em 1fr auto; gap: 1.2em; align-items: baseline; padding: .75em 0; border-top: 1px solid rgba(28,27,31,.1); }
.arhiva-rasp__date { font-family: var(--f-ui); font-weight: 700; }
.arhiva-rasp__title { font-family: var(--f-ui); font-weight: 600; color: inherit; text-decoration: none; }
.arhiva-rasp__title:hover { opacity: .7; }
.arhiva-rasp__meta { color: #646970; font-size: .9em; }
.arhiva-rasp__empty { color: #646970; }
@media (max-width: 768px) {
  .arhiva-rasp__row { grid-template-columns: 3.6em 1fr; }
  .arhiva-rasp__meta { grid-column: 2; }
}

/* ---- Blog: „Pričaj mi o Ribnjaku" (arhiva objava, V3 frame 1415:24) ---- */
.blog-archive { position: relative; padding-bottom: clamp(60px, 9vw, 173px); }
.blog-hero { position: relative; padding: 0 var(--page-pad); }
.blog-hero__logo { position: absolute; left: var(--page-pad); top: 2.69vw; width: 10.57vw; z-index: 3; }
.blog-hero__logo img, .blog-hero__logo svg { width: 100%; height: auto; display: block; }
.blog-hero__title { margin: 0; padding-top: 10.5vw; padding-left: 5vw; font-family: var(--f-display); font-weight: 500; font-size: 13.02vw; line-height: .94; letter-spacing: -.03em; color: var(--c-green); position: relative; z-index: 1; }
.blog-hero__art { position: absolute; left: 54.48vw; top: .99vw; width: 43.59vw; height: auto; pointer-events: none; mix-blend-mode: multiply; z-index: 2; }
.blog-hero__sub { position: relative; z-index: 3; margin: 4.53vw 0 0; max-width: 25.05vw; font-family: var(--f-serif); font-weight: 300; font-size: clamp(18px, 1.3vw, 25px); line-height: 1.4; color: var(--c-black); }
.blog-list { margin: clamp(48px, 9.4vw, 181px) auto 0; width: 55.68vw; max-width: 1069px; display: flex; flex-direction: column; gap: clamp(14px, 1.04vw, 20px); }
.blog-card { display: block; background: var(--c-offwhite); padding: 1.56vw 2.5vw; transition: background-color .25s ease; }
.blog-card:hover { background: #ededed; }
.blog-card__title { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(24px, 2.08vw, 40px); line-height: 1.25; letter-spacing: -.03em; color: var(--c-black); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.blog-card__author { margin: 1.04vw 0 0; font-family: var(--f-grotesk); font-weight: 400; font-size: clamp(15px, 1.04vw, 20px); line-height: 1.5; letter-spacing: .03em; color: var(--c-black); }
.blog-card__author strong { font-weight: 700; }
.blog-more { display: flex; align-items: center; justify-content: center; gap: 12px; margin: clamp(40px, 4.9vw, 95px) auto 0; font-family: var(--f-ui); font-weight: 600; font-size: clamp(16px, 1.04vw, 20px); letter-spacing: .1em; line-height: 1; text-transform: uppercase; color: var(--c-black); background: none; border: 0; cursor: pointer; }
.blog-more svg { width: clamp(13px, .78vw, 15px); height: auto; flex: none; }
.blog-more:hover { opacity: .65; }
.blog-archive .ckr-empty { text-align: center; margin: 6vw auto; font-family: var(--f-serif); font-size: clamp(18px, 1.3vw, 24px); }
/* Single priča: hero naslov manji (varijabilna duljina), sadržaj, „Sve priče učitane" + fade. */
.blog-single__head { margin: 0 0 clamp(20px, 2vw, 40px); }
.blog-single__title { margin: 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(28px, 3.65vw, 70px); line-height: 1.08; letter-spacing: -.02em; color: var(--c-black); }
.blog-single__author { margin: .8em 0 0; font-family: var(--f-grotesk); font-size: clamp(15px, 1.04vw, 20px); letter-spacing: .03em; }
.blog-single__author strong { font-weight: 700; }
.blog-body { width: 55.68vw; max-width: 1069px; margin: clamp(80px, 11vw, 210px) auto clamp(36px, 4vw, 64px); }
.blog-single__back { width: 55.68vw; max-width: 1069px; margin: clamp(50px, 6vw, 110px) auto clamp(70px, 10vw, 190px); font-family: var(--f-ui); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: clamp(14px, 1.04vw, 18px); }
.blog-single__back a { color: var(--c-black); text-decoration: none; }
.blog-single__back a:hover { opacity: .65; }
.blog-end { text-align: center; margin: clamp(40px, 4.9vw, 95px) auto 0; font-family: var(--f-ui); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: clamp(16px, 1.04vw, 20px); color: var(--c-green); transition: opacity .7s ease; }
.blog-end.is-fading { opacity: 0; }
@media (max-width: 1100px) {
  .blog-hero__title { font-size: 16vw; padding-left: 0; padding-top: 22vw; }
  .blog-hero__logo { width: 18vw; }
  .blog-hero__art { position: static; width: 70vw; margin: 2vw 0 0 auto; display: block; }
  .blog-hero__sub { max-width: 60vw; }
  .blog-list { width: auto; max-width: none; padding: 0 var(--page-pad); }
  .blog-body, .blog-single__back { width: auto; max-width: none; padding-left: var(--page-pad); padding-right: var(--page-pad); }
  .blog-single__title { font-size: clamp(26px, 7vw, 48px); }
}
@media (max-width: 640px) {
  .blog-hero__title { font-size: 18vw; padding-top: 26vw; }
  .blog-hero__sub { max-width: none; }
  .blog-card__title { font-size: 22px; }
}
.contact-panel h2 {
  margin: 3.13vw 0 0;                      /* jedan prazan 60px red između grupa */
  font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(16px, 1.3vw, 25px);
  letter-spacing: .02em; line-height: 2.4;
  text-transform: uppercase;
}
.contact-panel h2:first-child { margin-top: 0; }
.contact-panel ul { margin: 0; padding: 0; list-style: none; }
/* razmak IZMEĐU stavki popisa (i kad se prelome u više redaka) — popis DIŠE i ne stapa se (#2/#3, klijent voli razmake) */
.contact-panel li, .doc-list li { margin-bottom: clamp(16px, 1.2vw, 24px); }
.contact-panel li:last-child, .doc-list li:last-child { margin-bottom: 0; }
.contact-panel li a, .doc-list li a, .contact-panel p {
  font-family: var(--f-ui); font-weight: 500;
  font-size: clamp(16px, 1.3vw, 25px);
  line-height: 1.5;                        /* prije 2.4 → kod prelamanja se redak stapao sa sljedećom stavkom; razmak je sad na <li> */
  letter-spacing: .02em;
  margin: 0;
}
.contact-panel li a {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1.5px;
}
.contact-panel li a:hover { text-decoration-thickness: 3px; }
.contact-panel a { color: inherit; }

/* ---- Javni pozivi: toglovi (link → expand: uvodni tekst + prijavnica) ---- */
.poziv-list { list-style: none; margin: 0; padding: 0; }
.poziv-list li { margin: 0; }
.poziv-link { display: inline-block; }
.poziv-list li.is-open > .poziv-link { font-weight: 700; }
.poziv-expand {
  overflow: hidden;
  max-height: 0;
  transition: max-height .6s cubic-bezier(.65,0,.35,1);
}
.poziv-body { padding: 4.5vw 0 6.3vw; }       /* +razmak ispod gumba do sljedeće stavke (~40px+) */
.poziv-body .poziv-text { margin-bottom: 3.5vw; }

.poziv-title {
  margin: 0 0 1vw;
  font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(22px, 2.08vw, 40px);    /* 40/80 */
  letter-spacing: .02em; line-height: 2;
}
.poziv-text,
.contact-panel .poziv-text {
  margin: 0;
  max-width: 66.9vw;                        /* 1285 */
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.3vw, 25px); line-height: 1.6;   /* 40/25 */
  letter-spacing: .03em;
}
.poziv-nav { margin-top: 3.9vw; display: flex; gap: 1.5vw; }
.poziv-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 2px solid var(--c-black);
  min-width: 7.24vw;                        /* 139 */
  padding: 0.6vw 1vw;                       /* 58 visina */
  font-family: var(--f-serif); font-weight: 500;
  font-size: clamp(15px, 1.04vw, 20px); line-height: 1.5;
  justify-content: center;
  background: var(--c-white);
  transition: background-color .25s ease, color .25s ease;
}
.poziv-btn:hover { background: var(--c-black); color: var(--c-white); }
.poziv-btn--send:disabled {
  border-color: #C7C7C7; color: #C7C7C7;
  background: transparent; cursor: not-allowed;
}
.poziv-btn--send:disabled:hover { background: transparent; color: #C7C7C7; }
.poziv-btn .arrow { width: clamp(16px, 1.1vw, 21px); }

.poziv-form { max-width: 66.9vw; }
.poziv-field {
  display: grid;
  grid-template-columns: minmax(220px, 23.1vw) 1fr;   /* label @290 → input @733 */
  align-items: end;
  gap: 1vw;
  margin-bottom: 1.4vw;                                /* tješnji razmak između polja (Figma) */
}
.poziv-field span {
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.3vw, 25px); line-height: 1.6;
  letter-spacing: .03em;
}
.poziv-field input {
  width: 25.5vw; min-width: 220px;          /* 490 */
  border: none; border-bottom: 1px solid var(--c-black);
  background: transparent;
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.3vw, 25px);
  letter-spacing: .03em;
  text-align: center;
  padding: 4px 0 8px;
  outline: none;
}
.poziv-field input::placeholder { color: #D9D9D9; }
.poziv-field input:focus { border-bottom-width: 2px; }

.poziv-cats { border: none; margin: 3.6vw 0 0; padding: 0; }   /* veći razmak iznad 'Kategorija...' */
.poziv-cats legend { padding: 0; margin-bottom: 1.4vw; }
.poziv-cats legend {
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.3vw, 25px); letter-spacing: .03em;
  margin-bottom: 1.2vw; padding: 0;
}
.poziv-cats label {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 0.7vw;                       /* manji razmak između kućica */
  font-family: var(--f-serif);
  font-size: clamp(15px, 1.15vw, 22px); line-height: 1.9;
  letter-spacing: .03em;
}
.poziv-cats label.is-closed { color: #9a9a9a; }
.poziv-cats input {
  appearance: none; -webkit-appearance: none;
  flex: none;
  width: 1.61vw; min-width: 31px; height: 1.61vw; min-height: 31px;   /* Figma 31×31 */
  border: 1px solid var(--c-black); border-radius: 0;
  background: #fff; cursor: pointer;
}
.poziv-cats input:checked {
  background-image: url("../svg/checkbox-check.svg");
  background-size: 58% 58%; background-repeat: no-repeat; background-position: center;
}
.poziv-cats input:disabled { cursor: default; }

/* ---- Studio (studio4 frame): hero ilustracija, UPISI traka, sekcije s listom ---- */
.studio-hero__art {
  position: absolute;
  left: 46.2vw; top: 17.2vw;               /* 887,406 */
  width: 58.8vw;                            /* 1129×449, izlazi desno */
  pointer-events: none;
  z-index: 2;
}
.studio-hero__art img { width: 100%; height: auto; display: block; }

.studio-upisi {
  display: flex; align-items: center; justify-content: center;
  margin: 8.5vw 0 0 var(--page-pad);        /* @56,1124 */
  width: 43vw; min-width: min(92vw, 420px);
  min-height: 4.27vw;                        /* 82 */
  background: var(--c-black); color: var(--c-white);
  font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(17px, 1.56vw, 30px); line-height: 1;
  letter-spacing: .1em;
  padding: 1vw 2vw;
}
.studio-upisi a {
  color: #DACA9C;                          /* Figma: DACA9C */
  text-decoration: underline;
  text-underline-offset: 4px;
}
.studio-upisi a:hover { text-decoration-thickness: 2px; }

.studio-sekcija { margin-top: 6vw; }
.studio-sekcija:first-of-type { margin-top: 4.6vw; }
.studio-sekcija__head {
  position: relative;
  height: 8.16vw; min-height: 64px;          /* 156.7 */
  border-top: 1px solid var(--c-black);
  border-bottom: 1px solid var(--c-black);
  overflow: hidden;
}
.studio-sekcija__word {
  position: absolute;
  left: var(--page-pad); top: 3.7vw;         /* baseline ~4% ispod linije (K=0.714). Mobilni top u @media ≤900 */
  margin: 0;
  font-family: var(--f-display); font-weight: 500;
  font-size: 6.25vw;                         /* 120 */
  line-height: 1; letter-spacing: -.03em;
}
.studio-sekcija__plus {
  position: absolute;
  right: 2.97vw; top: 3.02vw;                /* V2: + 40×40 @1823,58 — gore-desno */
  width: 2.08vw; min-width: 30px; height: 2.08vw; min-height: 30px;
}
.studio-sekcija__plus svg { width: 100%; height: 100%; display: block; }
.studio-sekcija__plus .minus-bar { transition: transform .3s ease; transform-origin: center; }
.studio-sekcija__head { cursor: pointer; }
.studio-sekcija__head:hover .studio-sekcija__word { color: #B39B73; }
.studio-sekcija.is-open .studio-sekcija__plus .minus-bar { transform: rotate(90deg) scaleY(0); }
.studio-sekcija__collapse {
  overflow: hidden;
  max-height: 0;
  transition: max-height .55s cubic-bezier(.65,0,.35,1);
}
.studio-sekcija.is-open .studio-sekcija__collapse { max-height: 130vw; }

.studio-sekcija__body {
  margin: 0 var(--page-pad);
  padding: 10vw 0;                                 /* V2: sadržaj odmaknut od linije (196px gore) + jednako dolje */
  display: grid;
  grid-template-columns: 19.74vw minmax(0, 1fr);   /* 379 | 1316 */
  gap: 0 5.68vw;                                   /* 546-(58+379)=109 */
  align-items: stretch;
}
.studio-list {
  position: relative;
  margin: 0; padding: 0; list-style: none;
  align-self: start;
  height: 100%;
  box-sizing: border-box;
}
.studio-list li { margin: 0; border-right: 1px solid var(--c-black); }   /* vertikalna linija — po stavkama */
.studio-list li.is-active { border-right: none; }                        /* prekid linije na aktivnoj */
.studio-list button {
  display: flex; align-items: center;
  width: 100%;
  text-align: left;
  height: 3.65vw; min-height: 48px;          /* red 70 */
  padding: 0 0.73vw;                         /* tekst @70 (14 od ruba) */
  font-family: var(--f-ui); font-weight: 500;
  font-size: clamp(15px, 1.3vw, 25px); line-height: 1.1;
  transition: opacity .15s ease;
}
.studio-list li.is-active button {
  /* aktivni se ističe OKVIROM (kao u dizajnu), NE boldom — bold mijenja širinu pa tekst pada u novi red */
  border: 1px solid var(--c-black);
  border-right: none;                        /* aktivni: gore+lijevo+dolje, otvoren desno u panel */
  margin-right: -1.04vw;                      /* box prelazi liniju prema panelu (V2) */
  background: var(--c-white);
  position: relative; z-index: 2;
}
.studio-list li:not(.is-active) button:hover { opacity: .7; }   /* tab hover: lagano posvijetli, BEZ underlinea (bold/underline bi mijenjali širinu) */

.studio-stage {
  position: relative;
  display: block;
  align-self: start;                         /* NE razvlači po visini liste — inače aspect-ratio prelije širinu izvan stupca (curi van ekrana). Visina ide iz širine stupca. */
  aspect-ratio: 1316 / 560;                  /* Figma 1316×560 */
  min-height: 0;
  background-size: cover; background-position: center;
  overflow: hidden;
}
.studio-stage::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.studio-stage__inner {
  position: absolute;
  left: 2.55vw; top: 2.6vw;                  /* 595-546=49, 1697-1647=50 */
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 1.4vw;
}
.studio-stage:hover .studio-stage__more { background: var(--c-white); color: var(--c-black); }
.studio-stage__title {
  margin: 0;
  font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(22px, 2.08vw, 40px); line-height: 1.125;   /* 40/45 */
  color: var(--c-white);
  max-width: 13.1vw;                          /* 251 */
}

@media (max-width: 900px) {
  .studio-hero__art { left: 30vw; top: 22vw; width: 70vw; }
  .studio-upisi { width: auto; margin-right: var(--page-pad); font-size: 17px; }
}
/* TABLET (768–1024): zadrži DESKTOP tab-layout (lista + stage rame uz rame) — ima mjesta;
   samo proširi list-stupac da duga imena stanu (base 19.74vw je preusko na tabletu). */
@media (min-width: 768px) and (max-width: 1024px) {
  .studio-sekcija__body { grid-template-columns: minmax(190px, 30vw) minmax(0, 1fr); gap: 0 4vw; }
  .studio-list button { height: auto; min-height: 44px; padding: 8px 10px 8px 14px; font-size: 15px; line-height: 1.15; }   /* lijevi padding da tekst (i aktivni okvir) ne bude nabijen na border (#99) */
}
/* TELEFON (≤767): stack — lista = tappable program-linkovi (klik ODMAH otvara program), stage skriven */
@media (max-width: 767px) {
  .studio-sekcija__head { height: 64px; }
  .studio-sekcija__word { font-size: 44px; top: 32.1px; }   /* izjednačeno s desktopom (~4.8% ispod linije) */
  .studio-sekcija__plus { width: 24px; top: 50%; transform: translateY(-50%); }   /* +/− vertikalno na sredinu reda (#86) */
  .studio-sekcija.is-open .studio-sekcija__collapse { max-height: none; }   /* ne reži stacked sadržaj (#90) */
  .studio-sekcija__body { grid-template-columns: 1fr; gap: 22px; padding: 28px 0; }
  .studio-list { display: flex; flex-direction: column; }
  .studio-list li { margin: 0; border-right: none; border-bottom: 1px solid rgba(0,0,0,.14); }
  .studio-list li:last-child { border-bottom: none; }
  .studio-list button { min-height: 48px; height: auto; padding: 12px 0; font-size: 16px; }
  .studio-list li.is-active button { border: none; margin-right: 0; background: transparent; font-weight: 700; }
  .studio-stage { display: none; }   /* redundantan — klik na stavku odmah navigira na program */
}

@media (max-width: 900px) {
  .zaj-hero { min-height: 0; padding-bottom: 6vw; overflow: hidden; }   /* clip desni bleed riječi (bez horizontalnog scrolla) */
  .zaj-hero__logo { width: 16vw; z-index: 4; }   /* logo iznad riječi (kao desktop) */
  /* GORE + VEĆE (kao desktop #104): velika riječ visoko, preko logotipa, bleeda desno (zadnje slovo jedva vidljivo).
     z-index:1 → iznad .zaj-figura (z-0) ali ispod logotipa (z-4) da logo bude na vrhu kao na desktopu. */
  .zaj-hero__word { position: relative; z-index: 1; display: block; padding: 7vw var(--page-pad) 0; font-size: clamp(72px, 20.6vw, 150px); line-height: 1; white-space: nowrap; }   /* #4: ~pola zadnjeg „a" van/vidljivo */
  .zaj-hero__art { position: static; width: 86vw; margin: 4vw 0 0 auto; }
  .zaj-hero__quote { position: static; display: block; width: auto; margin: 6vw var(--page-pad) 0; font-size: 17px; line-height: 1.45; }
  /* #2: digni kartice ZNATNO GORE — preko vizuala (čovječuljka), vizual ostaje u pozadini (figura z-0, kartice z-1) */
  .zaj-cards {
  position: relative; z-index: 1; grid-template-columns: 1fr; gap: 16px; margin-top: -46vw; }
  .zaj-card { aspect-ratio: 4 / 3; }
  .zaj-card h2 { font-size: 24px; }
  /* „DAN KOJI SE PAMTI" chip: znatno više zraka gore I dolje (bilo nabijeno) */
  .zaj-chip-row { margin-top: 96px; margin-bottom: 88px; }
  .zaj-chip { font-size: 16px; padding: 10px 28px; }
  .zaj-cta {
  position: relative; z-index: 1; grid-template-columns: 1fr; margin-top: 32px; }
  .zaj-cta__panel { aspect-ratio: auto; padding: 28px 24px 32px; gap: 28px; }
  .zaj-cta__title { max-width: none; font-size: 24px; }
  .zaj-cta__img { min-height: 56vw; }
  .zaj-rule { margin-top: 64vw; }
  .sekcija-layout { grid-template-columns: 1fr; gap: 48px; margin-top: 56px; }
  .sekcija-body { font-size: 17px; line-height: 1.35; }
  .projekt-card { margin-bottom: 28px; }
  .contact-hero__logo { width: 16vw; }
  .contact-hero__img { position: static; display: block; width: calc(100% - 2 * var(--page-pad)); margin: 24px var(--page-pad) 0; }
  .contact-hero__word { font-size: 15vw; padding-top: 24vw; }
  .contact-tabs { width: auto; margin: 32px var(--page-pad) 0; flex-direction: column; }
  .contact-tabs::after { content: none; }
  .contact-tab { height: 56px; font-size: 17px; border-bottom: 1px solid var(--c-black); }
  .contact-tab.is-active { border-bottom: 1px solid var(--c-black); }   /* zatvori box aktivnog taba (donja linija) — mobitel/tablet (#105) */
  /* #8: tab IZNAD aktivnog sakrij donji divider (inače se preklapa s gornjim borderom box-a → dvostruka deblja linija) */
  .contact-tab:has(+ .contact-tab.is-active) { border-bottom-color: transparent; }
  .contact-panel { width: auto; margin: 32px var(--page-pad) 0; }
  .contact-panel p, .contact-panel h2 { line-height: 1.6; }   /* li a koristi base 1.5 + margin na <li> (#2/#3) */
}

/* TABLET (768–1024): kao desktop, NE mobilni stack (ima mjesta). Mora doći NAKON ≤900 bloka da nadjača (source order). */
@media (min-width: 768px) and (max-width: 1024px) {
  /* kontakt tabovi: horizontalni red (ne okomito naslagani) — #8 */
  .contact-tabs { flex-direction: row; width: auto; margin: 48px var(--page-pad) 0; }
  .contact-tabs::after { content: ""; }
  .contact-tab { height: 56px; border-bottom: none; font-size: clamp(13px, 1.7vw, 17px); padding: 0 6px; }
  .contact-tab.is-active { border-bottom: 1px solid var(--c-black); }   /* zatvori box aktivnog taba (donja linija) — mobitel/tablet (#105) */
  /* single program/zajednica: zadrži 2-stupčani sadržaj + „NAŠI PROJEKTI" sidebar (uži) — #9 */
  .sekcija-layout { grid-template-columns: minmax(0, 1fr) minmax(190px, 30vw); gap: 0 5vw; }
}

/* ============================================================
   raspored.css
   ============================================================ */
/* ==========================================================================
   CK Ribnjak — Raspored
   Mjere 1:1 prema Figmi (raspored - v2, 649:1475, 1920px; vw = px/19.2)
   ========================================================================== */

/* ---- Hero ------------------------------------------------------------------- */
.rasp-hero { position: relative; min-height: 46vw; }   /* blob 40.8vw + top 3.8vw — ne reže se */
.rasp-hero__logo {
  position: absolute;
  left: var(--page-pad); top: 2.69vw;   /* 56,126.7 */
  width: 10.57vw;                        /* 203 */
  z-index: 3;
}
.rasp-hero__logo img { width: 100%; height: auto; display: block; }
.rasp-hero__photo {
  position: absolute;
  right: 0; top: 3.8vw;                 /* @888,148 — 1032×784 do desnog ruba */
  width: 53.75vw;
  aspect-ratio: 1032 / 784;
  /* točan Figma vizual: SVG oblik (Vector-2) kao maska + fotografija kao fill —
     fotografija je običan background-image (u WP: Customizer „Raspored — hero“) */
  -webkit-mask: url('../svg/raspored-blob.svg') center / contain no-repeat;
  mask: url('../svg/raspored-blob.svg') center / contain no-repeat;
  background-position: 99.982% 75.864%;
  background-size: 100.888% 177.086%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.rasp-hero__ink {
  position: absolute;
  left: 58.65vw; top: 3.13vw;           /* 1126,135 — preklapa sliku */
  width: 11.72vw;                        /* 225×335 */
  pointer-events: none;
  z-index: 2;
}
.rasp-hero__title {
  margin: 0;
  padding: 27.8vw 0 0 3.18vw;           /* top 609-75=534 → 27.8vw; left 61 */
  font-family: var(--f-ui); font-weight: 700;
  font-size: 5.2vw;                     /* 100 */
  line-height: 1; letter-spacing: .02em;
  text-transform: uppercase;            /* RASPORED — Figma textCase */
  color: var(--c-black);
}

/* ---- Filteri ------------------------------------------------------------------ */
.rasp-filters {
  margin: 8.54vw 0 0 12.5vw;            /* top 969-75=894/19.2*... container @240,969 → 969-75=894 → 46.56vw? ne: 969 je apsolutno s headerom → 894px ispod headera; koristimo razmak od naslova: 969-709=260 → 13.54vw */
  margin-top: 13.54vw;
  display: flex; gap: 3.36vw;           /* 393.672-329=64.7 */
  flex-wrap: wrap;
  position: relative;
  z-index: 5;
}
.rasp-filter { position: relative; width: 17.14vw; min-width: 240px; }
.rasp-filter__box {
  position: relative;
  margin-top: 0.94vw;                   /* box top 17; label visina 36 → pola preko ruba */
  width: 100%; height: 3.96vw; min-height: 56px;  /* 76 */
  background: var(--c-white);
  border: 2px solid var(--c-black);
  display: flex; align-items: center;
  padding: 0 2.74vw 0 1.79vw;           /* value left 34; strelica 53 od desnog ruba */
  cursor: pointer;
  text-align: left;
}
.rasp-filter__label {
  position: absolute;
  top: 0; left: 1.27vw;                 /* chip @24.3 — sredina na rubu boxa */
  background: var(--c-white);
  padding: 8px 10px;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(14px, 1.04vw, 20px); line-height: 1;
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
}
.rasp-filter__value {
  flex: 1;
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.3vw, 25px);
  color: #50515D;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rasp-filter__box .chev {
  flex: none;
  width: auto; height: clamp(18px, 1.56vw, 30px);   /* rotiran: 30×15 */
  transform: rotate(90deg);
  transition: transform .25s ease;
}
.rasp-filter.is-open .rasp-filter__box .chev { transform: rotate(-90deg); }

.rasp-filter__menu {
  position: absolute;
  top: calc(100% + 2px); left: 0; right: 0;
  background: var(--c-white);
  border: 2px solid var(--c-black);
  display: none;
  flex-direction: column;
  max-height: 320px; overflow: auto;
  z-index: 10;
}
.rasp-filter.is-open .rasp-filter__menu { display: flex; }
.rasp-filter__menu button, .rasp-filter__menu a {
  display: block; color: inherit; text-decoration: none; background: none; cursor: pointer;
  text-align: left;
  font-family: var(--f-serif);
  font-size: clamp(16px, 1.15vw, 22px);
  padding: 12px 1.79vw;
  border-bottom: 1px solid rgba(0,0,0,.12);
}
.rasp-filter__menu button:last-child, .rasp-filter__menu a:last-child { border-bottom: none; }
.rasp-filter__menu button:hover, .rasp-filter__menu a:hover { background: var(--c-offwhite); }
.rasp-filter__menu button.is-selected, .rasp-filter__menu a.is-selected { font-weight: 700; }

/* ---- Lista termina -------------------------------------------------------------- */
.rasp-list {
  margin-top: 6.51vw;                   /* prvi red: bar @1188 − filteri kraj (1045) ≈ 143 → но рачунамо od фильтера: 1188-1045=143 → 7.45vw; vizualno 6.5 */
  padding-bottom: 5vw;
}
.rasp-row {
  position: relative;
  isolation: isolate;
  display: grid;
  /* 1920: 258 datum | 485 bar(10) | 527 meta(218) | 745 glavno(576) | 1321 znacka(65) | 1430 gumb(200) | kraj 1630, margina 290 */
  grid-template-columns: 13.44vw 11.82vw 0.52vw 1.67vw 11.35vw 1fr 3.39vw 2.29vw 10.42vw 15.1vw;
  min-height: 16.2vw;                   /* 311 */
  padding: 2.92vw 0 2vw;                /* datum 56 ispod vrha reda */
  box-sizing: border-box;
}
.rasp-row--manifestacija {
  background-image: linear-gradient(var(--c-offwhite), var(--c-offwhite));
  background-repeat: no-repeat;
  background-position: 12.5vw 0;        /* sivo 240..1680 */
  background-size: calc(100% - 25vw) calc(100% - 0.57vw);
}

.rasp-row__datecol { grid-column: 2; }
.rasp-row__date {
  margin: 0;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(28px, 3.39vw, 65px); line-height: 1;
  letter-spacing: -.05em;
}
.rasp-row__repeat {
  display: block;
  margin: 2.6vw 0 0 0.36vw;             /* @265, +144 od vrha datuma */
  width: 3.39vw; min-width: 36px;       /* 65×36 */
  height: auto;
}
.rasp-row__bar {
  grid-column: 3;
  width: 100%;
  height: 12.14vw; min-height: 120px;   /* 233 */
  background: var(--row-color, var(--c-rose));
  margin-top: -1.2vw;                   /* bar 23 iznad vrha datuma */
}
.rasp-row__meta {
  grid-column: 5;
  display: flex; flex-direction: column;
  font-family: var(--f-display);
}
.rasp-row__day {
  font-weight: 700;
  font-size: clamp(14px, 1.04vw, 20px);
  letter-spacing: .05em; line-height: 1;
  text-transform: uppercase;            /* Figma: PETAK */
}
.rasp-row__time {
  margin-top: 1.2vw;                    /* 1247-1212=35 */
  font-weight: 700;
  font-size: clamp(18px, 1.56vw, 30px); line-height: 1;
  letter-spacing: -.01em;
}
.rasp-row__venue {
  margin-top: 1.93vw;                   /* 1294-1247=47 */
  display: flex; align-items: center; gap: clamp(6px, 0.47vw, 9px);   /* #3: veći razmak pin↔naziv lokacije (bilo ~2px na mobitelu) */
  font-family: var(--f-serif); font-weight: 700;
  font-size: clamp(13px, .94vw, 18px); line-height: 1;
  white-space: nowrap;
}
.rasp-row__venue img { width: clamp(13px, .99vw, 19px); height: auto; }

.rasp-row__main { grid-column: 6; padding-right: 2vw; min-width: 0; }
.rasp-row__cat {
  margin: 0;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(14px, 1.04vw, 20px); line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.rasp-row__title {
  margin: 0.78vw 0 0;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(20px, 2.08vw, 40px); line-height: 1.125;
  max-width: 26.4vw;                    /* 507 */
}
.rasp-row__title a:hover { text-decoration: underline; text-underline-offset: 5px; }
.rasp-row__extra {
  margin: 1.3vw 0 0;
  font-family: var(--f-serif); font-weight: 400;   /* vrijednost regular, label bold */
  font-size: clamp(15px, 1.3vw, 25px); line-height: 1.28;
  color: var(--c-black);
}
.rasp-row__extra span { display: block; }
.rasp-row__extra strong { font-weight: 700; }   /* "Organizator:" / "Cijena:" labele bold */

.rasp-row__age {
  grid-column: 7;
  align-self: start;
  width: 3.39vw; height: 3.39vw;        /* 65 @1321 */
  min-width: 44px; min-height: 44px;
  border: 2px solid var(--c-black);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-ui);
  font-size: clamp(16px, 1.56vw, 30px);
  line-height: 1;
}
.rasp-row__action {
  grid-column: 9;
  align-self: start;
  display: flex; flex-direction: column; gap: 0.73vw;
}
.rasp-row__btn--cart { padding: 0 1.09vw; }
.rasp-row__btn--cart img { height: clamp(24px, 1.87vw, 36px); width: auto; margin: 0 auto; }  /* 35.4×35.9 iz Figme */

/* linija razdjelnika između bijelih redaka (Figma: 1440 @240, #BFBFBF) */
.rasp-row:not(.rasp-row--manifestacija) + .rasp-row:not(.rasp-row--manifestacija)::before {
  content: "";
  position: absolute;
  top: 0; left: 12.5vw; right: 12.5vw;
  height: 2px;
  background: var(--c-grey);
}
.rasp-row__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 10.42vw;                   /* 200 */
  height: 3.13vw; min-height: 48px;     /* točno 60 — oba gumba ista */
  box-sizing: border-box;
  background: var(--c-black); color: var(--c-white);
  padding: 0 1.09vw;
  font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(13px, .89vw, 17px); line-height: 1;
  letter-spacing: .1em;
  transition: background-color .25s ease;
}
.rasp-row__btn:hover { background: var(--row-color, #333); }
/* Status termina (otkazano / rasprodano): zamjenjuje gumb "kupi"; pozadina = boja kategorije (--row-color, kao vertikalne linije), pulsira (blic) preko color-mix. */
.rasp-row__btn--status { cursor: default; color: var(--c-white); background-color: var(--row-color, #333); text-transform: uppercase; animation: ckr-status-flash 1.15s ease-in-out infinite; }
.rasp-row__btn--status:hover { background: var(--row-color, #333); }
.show-info__status { display: inline-block; padding: 5px 22px; border-radius: 0; color: var(--c-white); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background-color: var(--row-color, #333); animation: ckr-status-flash 1.15s ease-in-out infinite; }
@keyframes ckr-status-flash { 0%, 100% { background-color: var(--row-color, #333); } 50% { background-color: color-mix(in srgb, var(--row-color, #333), #fff 30%); } }

.rasp-empty {
  margin: 4vw 12.5vw;
  font-family: var(--f-serif);
  font-size: clamp(18px, 1.56vw, 30px);
}
.rasp-row[hidden] { display: none; }
/* Klijentsko filtriranje rasporeda: crossfade liste + stagger redova (bez reloada). */
.rasp-list { transition: opacity .2s ease; }
.rasp-list.is-swapping { opacity: 0; }
.rasp-row--enter { animation: rasp-row-in .45s cubic-bezier(.2, .7, .3, 1) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes rasp-row-in { from { transform: translateY(12px); } to { transform: none; } }

/* ---- Responsive ------------------------------------------------------------------ */
@media (max-width: 1100px) {
  .rasp-hero { min-height: 0; }
  .rasp-hero__logo { width: 16vw; }
  .rasp-hero__title { padding-top: 46vw; font-size: 9vw; }
  /* #9: filteri u JEDAN red (pola-pola), ne stacked */
  .rasp-filters { margin: 13.54vw var(--page-pad) 0; gap: 12px; flex-wrap: nowrap; }
  .rasp-filter { width: auto; flex: 1 1 0; min-width: 0; }
  .rasp-filter__box { height: 56px; margin-top: 10px; padding: 0 12px; }
  .rasp-filter__label { top: -10px; left: 10px; font-size: 13px; padding: 5px 7px; }
  .rasp-filter__value { font-size: 15px; }
  /* #9: cijeli red u CONTAINERU (page-pad s obje strane) — ništa na rubu; čist stacked layout + tanki color accent uz lijevi rub */
  .rasp-row { display: block; position: relative; grid-template-columns: none; grid-template-rows: none;
    min-height: 0; padding: 32px var(--page-pad); }
  .rasp-row--manifestacija { background-position: 0 0; background-size: 100% 100%; }
  .rasp-row__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; height: auto; min-height: 0; margin: 0; }
  .rasp-row__datecol { display: block; }
  .rasp-row__date { font-size: 36px; }
  .rasp-row__repeat { margin: 6px 0 0; width: 34px; }
  .rasp-row__meta { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; margin-top: 8px; padding-left: 0; }
  .rasp-row__time, .rasp-row__venue { margin-top: 0; }
  .rasp-row__main { padding: 16px 0 0; }
  .rasp-row__title { max-width: none; font-size: 23px; }
  .rasp-row__extra { font-size: 16px; margin-top: 10px; }
  .rasp-row__age { margin: 18px 0 0; width: 48px; height: 48px; font-size: 18px; }
  .rasp-row__action { padding: 26px 0 2px; display: flex; flex-direction: row; gap: 12px; }   /* razmak iznad+ispod dugmadi */
  .rasp-row__btn--cart { padding: 14px 16px; }
  .rasp-row__btn--cart img { height: 20px; }
  .rasp-row__btn { min-width: 0; padding: 15px 22px; }
  /* divider u širini containera (ne 12.5vw) */
  .rasp-row:not(.rasp-row--manifestacija) + .rasp-row:not(.rasp-row--manifestacija)::before { left: var(--page-pad); right: var(--page-pad); }
  .rasp-empty { margin: 8vw var(--page-pad); }
}

/* ============================================================
   predstava.css
   ============================================================ */
/* ==========================================================================
   CK Ribnjak — single predstava / događanje
   Mjere 1:1 prema Figmi (scena - rezident, 1920px; vw = px/19.2)
   ========================================================================== */

/* ---- Hero band u boji kategorije -------------------------------------------- */
.show-hero {
  position: relative;
  height: 38.7vw;                       /* 743 */
  background: var(--show-color, #B3431E);
  overflow: hidden;
}
.show-hero__logo {
  position: absolute;
  left: var(--page-pad); top: 2.69vw;   /* 56, 126.7-75 */
  width: 10.57vw;
  z-index: 3;
}
.show-hero__logo img, .show-hero__logo svg { width: 100%; height: auto; display: block; }
.show-hero__art {
  position: absolute;
  right: 0; top: 4.48vw;                 /* 1920-1132..1920, y161 (abs) */
  width: 58.96vw;                        /* 1132×657, contain */
  height: auto;
  transform: scaleX(-1);                 /* zrcaljeno kao u Figmi */
  pointer-events: none;
}
.show-hero__cat {
  position: absolute;
  left: var(--page-pad); bottom: 1.93vw;
  margin: 0;
  font-family: var(--f-display); font-weight: 500;
  font-size: 5.2vw;                     /* 100 @56,677 */
  line-height: .91; letter-spacing: -.03em;
  color: var(--c-white);
}

/* ---- Naslov / organizator / podnaslov ---------------------------------------- */
/* margin-top na kontejneru → JEDNAK razmak od hero banda do naslova, neovisno ima li eyebrow */
.show-head { text-align: center; padding: 0 var(--page-pad); margin-top: 6.88vw; }
.show-head > :first-child { margin-top: 0; }   /* prvi element (eyebrow ili naslov) bez dodatnog razmaka */
.show-head__org {
  margin: 0;
  font-family: var(--f-ui); font-weight: 700;
  font-size: clamp(18px, 1.56vw, 30px); line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;            /* Figma: TEATAR POCO LOCO */
}
.show-head__title {
  margin: 2.5vw auto 0;                 /* 1048 */
  max-width: 54vw;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(40px, 5.2vw, 100px); line-height: 1;
  letter-spacing: -.03em;
}
.show-head__sub {
  margin: 2.7vw auto 0;                 /* 1300 */
  max-width: 48.5vw;
  font-family: var(--f-serif);
  font-size: clamp(18px, 1.56vw, 30px); line-height: 1.33;
  letter-spacing: -.03em;
}

/* ---- Info traka: datum | vremena | ulaznice ----------------------------------- */
.show-info {
  margin: 3.4vw auto 0;                 /* 1423 */
  display: flex; justify-content: center; align-items: stretch;
  gap: 0;
}
.show-info > * {
  font-family: var(--f-serif); font-weight: 700;
  font-size: clamp(20px, 2.08vw, 40px); line-height: 1.95;
  letter-spacing: -.03em;
  padding: 0 2.5vw;
  border-left: 1.5px solid var(--c-black);
  display: flex; align-items: center;
}
.show-info > *:first-child { border-left: none; }
.show-info a:hover { text-decoration: underline; text-underline-offset: 6px; }

/* ---- Velika fotografija + dobna značka ---------------------------------------- */
.show-photo {
  position: relative;
  margin: 4.7vw var(--page-pad) 0;      /* 1633 */
  height: 41.98vw;                      /* 806 */
  background-size: cover; background-position: center;
}
.show-photo__age {
  position: absolute;
  left: 3.13vw; top: 3.13vw;            /* 60,60 */
  width: 6.56vw; height: 6.56vw;        /* 126 */
  min-width: 64px; min-height: 64px;
  border: 3px solid var(--c-white);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-ui);
  font-size: clamp(24px, 3.13vw, 60px);
  color: var(--c-white);
}

/* ---- Opis + autorski tim ------------------------------------------------------ */
.show-desc {
  margin: 5.83vw auto 0;                /* 2553 */
  max-width: 54.4vw;                    /* 1044 */
  padding: 0 var(--page-pad);
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(17px, 1.3vw, 25px);
  line-height: 1.4;                     /* 35/25 — Figma */
  letter-spacing: normal;
}
.show-desc p { margin: 0 0 1.4em; }
.show-desc .credits { margin: clamp(48px, 6vw, 110px) 0 0; }
/* strong/bold EKSPLICITNO 700 (robusno bez obzira na težinu roditelja) */
.show-desc strong, .show-desc b, .show-desc .credits strong { font-weight: 700; }
.show-desc em, .show-desc i { font-style: italic; }

/* ---- Blog/članak: SVI Gutenberg blok-tipovi (da urednik može ubacivati sadržaj raznih oblika) ---- */
.show-desc > :first-child { margin-top: 0; }
.show-desc a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.show-desc a:hover { text-decoration-thickness: 2px; }
.show-desc h2, .show-desc h3, .show-desc h4 { font-family: var(--f-ui); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.show-desc h2 { font-size: clamp(26px, 2.2vw, 42px); margin: 1.6em 0 .5em; }
.show-desc h3 { font-size: clamp(22px, 1.7vw, 32px); margin: 1.4em 0 .45em; }
.show-desc h4 { font-size: clamp(19px, 1.3vw, 25px); margin: 1.3em 0 .4em; }
.show-desc ul, .show-desc ol { margin: 0 0 1.4em; padding-left: 1.3em; }
.show-desc li { margin: 0 0 .4em; }
.show-desc blockquote, .show-desc .wp-block-quote { margin: 1.8em 0; padding: .1em 0 .1em 1em; border-left: 3px solid currentColor; font-family: var(--f-display); font-size: clamp(22px, 1.8vw, 34px); line-height: 1.25; }
.show-desc blockquote cite, .show-desc .wp-block-quote cite { display: block; margin-top: .5em; font-family: var(--f-ui); font-style: normal; font-size: .5em; opacity: .7; }
.show-desc .wp-block-pullquote { border-top: 2px solid; border-bottom: 2px solid; padding: 1.2em 0; margin: 2em 0; text-align: center; }
.show-desc .wp-block-pullquote p { font-family: var(--f-display); font-size: clamp(24px, 2vw, 40px); line-height: 1.2; }
.show-desc figure { margin: 1.8em 0; }
.show-desc img { max-width: 100%; height: auto; }
.show-desc figcaption, .show-desc .wp-element-caption { margin-top: .6em; font-family: var(--f-ui); font-size: .7em; opacity: .7; text-align: center; }
.show-desc .wp-block-button { margin: 1.6em 0; }
.show-desc .wp-block-button__link { display: inline-flex; align-items: center; gap: .5em; padding: .7em 1.6em; background: var(--c-black); color: var(--c-white); font-family: var(--f-ui); font-weight: 700; text-decoration: none; }
.show-desc .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: inherit; border: 1px solid currentColor; }
.show-desc .wp-block-button__link:hover { opacity: .85; text-decoration: none; }
.show-desc .wp-block-table { margin: 1.8em 0; overflow-x: auto; }
.show-desc table { width: 100%; border-collapse: collapse; font-family: var(--f-ui); font-size: .8em; }
.show-desc th, .show-desc td { padding: .6em .8em; border: 1px solid rgba(28,27,31,.2); text-align: left; }
.show-desc th { font-weight: 700; }
.show-desc hr, .show-desc .wp-block-separator { border: none; border-top: 1px solid rgba(28,27,31,.25); margin: 2.4em auto; }
.show-desc .wp-block-embed, .show-desc .wp-block-video, .show-desc .wp-block-audio { margin: 1.8em 0; }
.show-desc .wp-block-embed iframe { width: 100%; aspect-ratio: 16/9; height: auto; border: 0; }
.show-desc .wp-block-audio audio { width: 100%; }
.show-desc .wp-block-columns { gap: clamp(20px, 2vw, 48px); margin: 1.8em 0; }
.show-desc pre, .show-desc .wp-block-code { background: rgba(28,27,31,.05); padding: 1em 1.2em; overflow-x: auto; font-size: .8em; border-radius: 4px; white-space: pre-wrap; }
.show-desc .scena-gallery, .show-desc .show-single { margin: 1.8em 0; }

/* ---- Prezentacijski media-text blokovi (slika + tekst, naizmjenično) — npr. SO DO / El Sistema sadržaj ---- */
:is(.show-desc,.sekcija-body) .wp-block-media-text {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  gap: clamp(28px, 3.5vw, 64px);
  margin: clamp(72px, 10vw, 160px) 0;   /* ZNATNO veći razmak između blokova (prije clamp 40-90) */
}
:is(.show-desc,.sekcija-body) .wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr 1fr; }
:is(.show-desc,.sekcija-body) .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 2; }
:is(.show-desc,.sekcija-body) .wp-block-media-text__media { margin: 0; }
:is(.show-desc,.sekcija-body) .wp-block-media-text__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 14px; aspect-ratio: 4 / 3;
}
:is(.show-desc,.sekcija-body) .wp-block-media-text__content { padding: 0; }
:is(.show-desc,.sekcija-body) .wp-block-media-text__content > :first-child { margin-top: 0; }
:is(.show-desc,.sekcija-body) .wp-block-media-text__content h2,
:is(.show-desc,.sekcija-body) .wp-block-media-text__content h3 { margin: 0 0 .5em; line-height: 1.15; }
:is(.show-desc,.sekcija-body) .wp-block-media-text__content p { margin: 0 0 1em; }
:is(.show-desc,.sekcija-body) .wp-block-media-text__content ul { margin: 1.4em 0 0; padding: 0; list-style: none; }
:is(.show-desc,.sekcija-body) .wp-block-media-text__content ul li {
  position: relative; padding-left: 46px; margin-bottom: 1.1em; line-height: 1.5;   /* veći razmak između stavki */
}
/* VEĆI krug u boji stranice (svijetla pozadina) + check u boji (kao so-do #158) */
:is(.show-desc,.sekcija-body) .wp-block-media-text__content ul li::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: color-mix(in srgb, var(--pillar-color, var(--c-studio, #B39B73)) 16%, #fff);
}
:is(.show-desc,.sekcija-body) .wp-block-media-text__content ul li::after {
  content: ""; position: absolute; left: 11px; top: 6px;
  width: 7px; height: 13px;
  border: solid var(--pillar-color, var(--c-studio, #B39B73)); border-width: 0 2.6px 2.6px 0;
  transform: rotate(45deg);   /* check u boji stranice */
}
@media (max-width: 900px) {
  :is(.show-desc,.sekcija-body) .wp-block-media-text,
  :is(.show-desc,.sekcija-body) .wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr; gap: 22px; margin: 64px 0; }   /* veći razmak između blokova (prije 40) */
  :is(.show-desc,.sekcija-body) .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 0; }   /* mobitel: slika UVIJEK gore */
}
.show-head__author { font-weight: 700; }

/* ---- Pod-izvedbe: toglovi / accordion (umjetnice s više radova) ---------------- */
.show-toggles {
  max-width: 54.4vw;                    /* = .show-desc / .show-gallery */
  margin: clamp(40px, 5vw, 96px) auto 0;
  padding: 0 var(--page-pad);
}
/* glava: VELIKI naslov (display 500). Naslov se LOMI u nove retke PRIJE strelice (cijeli vidljiv),
   a dno zadnjeg retka blago prelazi liniju (negativni margin, NE reže). Strelica gore uz prvi redak. */
.show-toggles .toggle { position: relative; }
.toggle__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: clamp(24px, 3vw, 64px);               /* razmak naslov ↔ strelica → naslov se lomi prije strelice */
  width: 100%;
  padding: clamp(26px, 2.8vw, 50px) 0 0;
  overflow: hidden;                          /* dio zadnjeg retka ISPOD linije se REŽE (kao scena-cat) */
  background: none; border: 0;
  border-bottom: 1.5px solid var(--c-black); /* linija ispod naslova */
  cursor: pointer; text-align: left;
  transition: border-bottom-color .3s ease;
}
/* OTVORENO: linija NESTANE + cijeli naslov se vidi (bez rezanja) */
.toggle__head[aria-expanded="true"] { border-bottom-color: transparent; overflow: visible; }
.toggle__title {
  flex: 1 1 auto; min-width: 0;              /* dopušta lomljenje umjesto prelaska preko strelice */
  margin: 0 0 -0.4em;                        /* dno zadnjeg retka PRELAZI liniju (reže se ~donja trećina) */
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(32px, 4vw, 72px); line-height: 1.04; letter-spacing: -.02em;
  color: var(--c-black);
  transition: color .3s ease;
}
.toggle__head:hover .toggle__title,
.toggle__head[aria-expanded="true"] .toggle__title { color: var(--show-color, var(--c-kazaliste)); }
.toggle__head[aria-expanded="true"] .toggle__title { margin-bottom: 0; }   /* otvoreno: naslov sjedne, cijeli vidljiv */
.toggle__icon {
  flex: 0 0 auto; margin-top: clamp(0px, .2vw, 4px);   /* VISOKO, uz vrh prvog retka */
  width: clamp(26px, 2.2vw, 42px); height: auto;
  color: var(--c-black);                     /* DEFAULT crna */
  transition: transform .3s ease, color .3s ease;
}
.toggle__icon svg { width: 100%; height: auto; display: block; }
.toggle__head:hover .toggle__icon,
.toggle__head[aria-expanded="true"] .toggle__icon { color: var(--show-color, var(--c-kazaliste)); }  /* hover/otvoreno → boja rubrike */
.toggle__head[aria-expanded="true"] .toggle__icon { transform: rotate(180deg); }
.toggle__panel { padding: clamp(20px, 2vw, 36px) 0 clamp(28px, 3vw, 52px); }
.toggle__panel[hidden] { display: none; }
.toggle__body {
  font-family: var(--f-serif); font-weight: 400;
  font-size: clamp(17px, 1.3vw, 25px); line-height: 1.4;
}
.toggle__body p { margin: 0 0 1.4em; }
.toggle__body > :last-child { margin-bottom: 0; }
.toggle__body strong, .toggle__body b { font-weight: 700; }
.toggle__body em, .toggle__body i { font-style: italic; }
.toggle__body h3 { font-family: var(--f-display); font-weight: 700; font-size: clamp(20px,1.6vw,30px); margin: 1.2em 0 .4em; }
/* video/galerija unutar toga: puna širina panela, bez vanjskih margina */
.toggle__panel .show-videos,
.toggle__panel .scena-gallery,
.toggle__panel .show-single { max-width: none; margin: clamp(18px, 2vw, 34px) 0 0; padding: 0; }

/* ---- Traka rasporeda ----------------------------------------------------------- */
.show-schedule-band { margin-top: 10.7vw; }   /* 3568-3363=205 */

@media (max-width: 900px) {
  .show-hero { height: 70vw; }
  .show-hero__logo { width: 16vw; top: 4vw; }
  .show-hero__img { width: 80vw; height: 52vw; }
  .show-hero__cat { font-size: 40px; bottom: 16px; }
  .show-head { margin-top: 40px; }   /* jednak razmak od banda i na mobilnom */
  .show-head__org { font-size: 18px; }
  .show-head__title { max-width: none; font-size: clamp(34px, 9vw, 48px); margin-top: 16px; }
  .show-head__sub { max-width: none; font-size: 18px; margin-top: 16px; }
  .show-info { flex-wrap: wrap; margin-top: 24px; }
  .show-info > * { font-size: 20px; padding: 0 16px; }
  .show-photo { height: 56vw; }
  .show-desc { max-width: none; font-size: 17px; margin-top: 40px; }
  .show-toggles { max-width: none; margin-top: 40px; }
  .toggle__head { padding-top: 26px; gap: 20px; }
  .toggle__title { font-size: clamp(26px, 7vw, 40px); }
  .toggle__icon { width: 24px; margin-top: 6px; }
  .show-schedule-band { margin-top: 64px; }
}


/* Figma: opisi Literata 25/35, credits blok 25/45 */
.show-desc, .show-desc p { line-height: 1.4; }
.show-desc .credits, .show-desc .credits p { line-height: 1.8 !important; } /* Figma 25/45 — razmak credit redaka */
.show-desc p { margin-bottom: 1.4em; }

/* ============================================================
   AUDIT POPRAVCI (18.6.2026.) — responsive, kontrast, a11y
   Dodano na kraj radi najviše specifičnosti (cascade).
   ============================================================ */

/* 1) Globalno: ubij horizontalni overflow (dekorativni hero-glifovi „bleedaju";
   bez ovoga se na mobitelu cijela stranica zoom-out smanji i hamburger ispadne van). */
html, body { overflow-x: clip; }

/* 2) Kontrast: glazba event-kartice — tamni scrim ispod bijelog teksta (WCAG AA). */
.event-card { position: relative; }
.event-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(0,0,0,.55)); pointer-events: none; z-index: 0; }
.event-card > * { position: relative; z-index: 1; }

/* 3) Hero strelice slidera vidljive i na fokus tipkovnicom (ne samo na hover). */
.hero__arrow:focus-visible { opacity: 1 !important; outline: 2px solid var(--c-white); outline-offset: 2px; }

/* 4) MOBITEL ≤640px — popravci layouta iz responsive audita */
@media (max-width: 640px) {
  /* Header na mobitelu: promo-traka OSTAJE kao MARQUEE (tekst putuje), skupljena lijevo,
     s rezerviranim prostorom desno za hamburger + search (uvijek dostupni). */
  .site-header__ticker { display: block; min-width: 0; overflow: hidden; padding: 0 0 0 16px; margin-right: 116px; font-size: var(--ticker-mob-size, 16px); text-align: left; }
  .site-header__ticker .ticker-rotator { display: inline-block; white-space: nowrap; padding-left: 100%; animation: ckr-ticker var(--ticker-mob-speed, 9s) linear infinite; }
  .site-header__ticker .ticker-dots, .site-header__ticker .ticker-more { display: none; }
  @keyframes ckr-ticker { from { transform: translateX(0); } to { transform: translateX(-100%); } }
  .header-search { right: calc(16px + 36px + 16px); width: 24px; height: 24px; z-index: 62; }
  .menu-toggle { right: 16px; width: 36px; height: 28px; z-index: 62; }

  /* Hamburger izbornik: stavke centrirane vertikalno + horizontalno na ekranu. */
  .menu-overlay__panel { justify-content: flex-start; }   /* mobitel: stavke fiksne (NE skaču na expand), watermark UVIJEK vidljiv iza (iz ≤1100) */
  .menu-overlay__watermark { display: block; width: min(85vw, 380px, 46vh); }   /* vizual UVIJEK vidljiv i na mobitelu (apsolutno centriran, iza) */
  .menu-nav__row { align-items: center; text-align: center; width: 100%; padding: 0 var(--page-pad); }
  .menu-content { text-align: center; }
  .menu-content ul, .menu-block--onama ul, .menu-col ul, .menu-sub2__titles, .menu-sub2__items { align-items: center; justify-content: center; }

  /* #5/#6: scena/studio hero = desktop look (logo preko početka, zadnje slovo bleeda van). Malo manje od base 33.85vw
     da „studio" zadnje „o" bude ~1/3 van (a ne ~40%); scena „a" ~1/4 van. Prazan na kategorijama → samo /scena/ i /studio/. */
  .scena-hero__word { font-size: 33.4vw; }
  .contact-hero__word { font-size: 13vw; }

  /* Predstava/program H1 — centriraj i stane unutar ekrana. */
  .show-head__title { text-align: center; max-width: calc(100vw - 2*var(--page-pad)); margin-left: auto; margin-right: auto; font-size: clamp(26px, 7.5vw, 42px); overflow-wrap: anywhere; }

  /* Tabovi (Dokumenti / O Centru / Javi nam se): dugi nazivi neka se lome, auto visina. */
  .contact-tab { height: auto; min-height: 48px; padding: 10px 8px; font-size: 14px; line-height: 1.2; white-space: normal; text-align: center; }
  .contact-panel li a, .doc-list a, .arhiva-rasp__title { overflow-wrap: anywhere; }

  /* Intro paragrafi sekcija unutar ekrana. */
  .scena-intro { max-width: 100%; padding-right: var(--page-pad); }
}

/* 5) Raspored redovi — na uskom ekranu stack umjesto prelijevanja. */
@media (max-width: 560px) {
  /* #9: cijeli red u CONTAINERU (page-pad obje strane) — datum više NIJE na rubu ekrana; tanki color accent uz lijevi rub */
  .rasp-row { display: block; position: relative; padding: 32px var(--page-pad); }
  .rasp-row__bar { display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; height: auto; min-height: 0; margin: 0; }
  .rasp-row__datecol, .rasp-row__meta, .rasp-row__main, .rasp-row__action { grid-column: auto !important; width: auto; }
  .rasp-row__datecol { margin: 0; }
  .rasp-row__meta { margin: 8px 0 0; }
  .rasp-row__main { margin: 16px 0 0; padding: 0; }
  .rasp-row__age { grid-column: auto !important; margin: 18px 0 0; width: 48px; height: 48px; }   /* krug, ne rastegnuta elipsa */
  .rasp-row__action { margin: 0; padding: 26px 0 2px; }
  .rasp-row__title { white-space: normal; overflow-wrap: anywhere; }
}
/* Marquee se zaustavlja (statičan tekst) za korisnike koji ne žele animacije. */
@media (prefers-reduced-motion: reduce) {
  .site-header__ticker .ticker-rotator { animation: none; padding-left: 0; }
  .rasp-list, .rasp-list.is-swapping { transition: none; opacity: 1; }
  .rasp-row--enter { animation: none; }
  .rasp-row__btn--status, .show-info__status { animation: none; background-color: var(--row-color); }
}