/* ===== NAVIGACIJA: pill u sredini + kartice po grupi, Book desno =====
   Dijeli se medju svim stranicama (nav.css + nav.js). Logo ostaje u header.nav svake stranice.
   Skala: okvir kartice 8, tekst 16 od ruba, redovi 21/23 visine 35, kicker 11/13 verzal,
   fotka 96 visoka koliko i blok redova; radijusi 10 kartica, 8 pill i gumb, 6 unutarnji elementi. */
:root{--navw:400px}

.nx .dimx{position:fixed;z-index:1180;inset:0;background:rgba(0,0,0,.14);opacity:0;visibility:hidden;transition:opacity .22s,visibility 0s .22s}
.nx.open .dimx{opacity:1;visibility:visible;transition-delay:0s}
.nx .tg-bar{position:fixed;z-index:1200;top:10px;left:50%;transform:translateX(-50%);display:flex;gap:2px;padding:4px;border-radius:var(--r2);width:var(--navw);box-sizing:border-box;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(24px) saturate(1.2);backdrop-filter:blur(24px) saturate(1.2);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 8px 30px rgba(0,0,0,.12)}
.nx .tg{all:unset;cursor:pointer;font:inherit;color:#000;padding:7px 14px;border-radius:var(--r3);font-size:13px;line-height:15px;letter-spacing:0.004em;white-space:nowrap;flex:1 1 0;text-align:center;box-sizing:border-box;transition:background .15s,color .15s;position:relative}
.nx .tg:hover{background:rgba(0,0,0,.08)}
.nx .tg.on{background:#000;color:#fff}
/* trenutna sekcija: tocka 4 px ispod teksta linka */
.nx .tg.cur::after{content:"";position:absolute;left:50%;bottom:3px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
.nx .tg:focus-visible,.nx .pc a:focus-visible{outline:2px solid #000;outline-offset:2px}
.nx .pc{position:fixed;z-index:1190;left:50%;transform:translateX(-50%) translateY(-6px);opacity:0;visibility:hidden;transition:opacity .2s ease,transform .22s cubic-bezier(.2,.8,.2,1),visibility 0s .22s;box-sizing:border-box}
.nx.open .pc{opacity:1;visibility:visible;transform:translateX(-50%);transition-delay:0s}
.nx .pn{display:none}
.nx .pn.on{display:block}
.nx .k{display:block;font-size:13px;line-height:15px;letter-spacing:0.004em;color:rgba(0,0,0,.5)}
.nx .st{display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:15px;letter-spacing:0.004em}
.nx .dot{width:6px;height:6px;border-radius:50%;background:#1FB955;display:inline-block}
.nx .dot.off{background:#C8C8C8}
.nx .hrs{font-size:13px;line-height:15px;letter-spacing:0.004em;color:rgba(0,0,0,.5)}

/* ---- E2: tri pilla (logo, navigacija, status + Book), ispod dvije naslagane sive kartice ---- */
/* Pill je apsolutno centriran na ekran (isto kao kartice ispod), logo lijevo i status + Book desno stoje na rubovima. */
.n2 .bar{position:fixed;z-index:1200;top:10px;left:var(--pad);right:var(--pad);height:37px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.n2 .bar>*{pointer-events:auto}
.n2 .tg-bar{position:absolute;top:0;left:50%;transform:translateX(-50%)}
.n2 .lg{display:flex;align-items:center;height:37px}
.n2 .lg img{display:block;height:10px;width:auto;filter:invert(1);transition:opacity .15s}
header.nav.on-light ~ .n2 .lg img{filter:none}
.n2 .lg:hover img{opacity:.6}
.n2 .bk{display:inline-flex;align-items:center;height:37px;box-sizing:border-box;padding:0 14px;border-radius:var(--r2);background:#000;color:#fff;font-size:13px;line-height:15px;letter-spacing:0.004em;white-space:nowrap;box-shadow:0 8px 30px rgba(0,0,0,.12)}
.n2 .bk:hover{background:var(--yellow);color:#000}
.n2 .bk .b-short{display:none}
/* ===== Sustav razmaka E2, jedna logika za sve varijante =====
   Kartica ima okvir --cp (kao stara kartica: 8). Sve PLOHE (hover redova, fotka) sjede na --cp
   od ruba kartice. Sav TEKST (kicker, linkovi, sati) sjedi na --cp + --lph od ruba, jer je
   tekst unutar reda uvucen za --lph. Fotka je visoka tocno koliko i blok redova: gornji rub
   fotke = gornji rub prvog hovera, donji rub = donji rub zadnjeg hovera. Donji rub zadnjeg
   hovera je --cp od dna kartice, a tekst (sati, datum) --cp + --lph. */
.n2{--r1:10px;--r2:8px;--r3:6px;--r4:4px;--cp:8px;--lph:8px;--lp:6px;--kf:6px;--lf:21px;--ll:23px;--ls:-0.007em;--rg:0px;--iw:96px;--cg:10px;--kc:rgba(0,0,0,.5)}
/* E: razmaci kao B, kicker u verzalu 11/13 s +0.06em (sitni, kao oznake na Rose primjeru) */
.n2 .pc{top:57px;width:var(--navw);display:flex;flex-direction:column;gap:var(--cg)}
.n2 .pn.on{display:flex;flex-direction:column;gap:var(--cg)}
.n2 .cA,.n2 .cB{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;border-radius:var(--r1);padding:var(--cp);box-sizing:border-box;-webkit-backdrop-filter:blur(28px) saturate(1.2);backdrop-filter:blur(28px) saturate(1.2);box-shadow:0 14px 40px rgba(0,0,0,.10);color:#000}
/* Boje: kartice su svjetlije od sive pozadine stranice i gotovo neprozirne, da tekst ostane citljiv i preko tamnih sekcija.
   Hover je jedan za sve redove, blag (6% crne), vidljiv i na tamnijoj i na svjetlijoj kartici. */
.n2 .cA{background:rgba(236,236,236,.74);grid-template-columns:minmax(0,1fr) var(--iw);column-gap:var(--cp)}
.n2 .cB{background:rgba(250,250,250,.82)}
/* kicker: tekst na --cp + --lph od lijevog ruba i --cp + --lph od vrha */
.n2 .k{grid-column:1 / -1;margin:0;padding:var(--lph) var(--lph) var(--kf);color:var(--kc)}
.n2 .k .dot{margin:0 6px 1px 0;vertical-align:middle}
.n2 .li{grid-column:1;display:flex;flex-direction:column;gap:var(--rg);margin:0;min-width:0}
.n2 .li a{display:block;font-size:var(--lf);line-height:var(--ll);letter-spacing:var(--ls);padding:var(--lp) var(--lph);margin:0;border-radius:var(--r3);transition:background .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.n2 .li a:hover{background:rgba(0,0,0,.06)}
/* fotka: desni stupac, visina = blok redova */
.n2 .im{grid-column:2;grid-row:2;align-self:stretch;border-radius:var(--r3);overflow:hidden;background:#ddd;display:block;position:relative;min-height:0}
.n2 .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .28s ease,transform .4s ease}
.n2 .im img.b{opacity:0}
.n2 .im.sw img.b{opacity:1}
.n2 .im:hover img{transform:scale(1.04)}
/* sati i datum: tekst, pa --lph uvlaka i --lph do dna (ukupno --cp + --lph od ruba) */
.n2 .hrs{grid-column:1 / -1;margin:0;padding:var(--kf) var(--lph) var(--lph)}
/* istaknuta objava (What's on): cijela kartica je link; naslov i datum kao jedan blok s paddingom reda */
/* Istaknuta objava: cover 3:4 pocinje ispod kickera (kao fotke u drugim karticama) i zavrsava na donjem okviru.
   Lijevo: datum na dnu u liniji s donjim rubom covera, naslov centriran izmedju kickera i datuma s jednakim razmakom do oba. */
.n2 .hl .im{grid-column:2;grid-row:2;aspect-ratio:3 / 4;align-self:start}
.n2 .hl .li{grid-column:1;grid-row:2;display:flex;flex-direction:column;margin-top:calc(-1 * var(--kf));padding:0 var(--lph) var(--lph);min-height:0}
.n2 .hl .li b{display:block;margin:auto 0;font-weight:500;font-size:var(--lf);line-height:var(--ll);letter-spacing:var(--ls)}
.n2 .hl .li .d{display:block;flex:0 0 auto;font-size:13px;line-height:15px;color:var(--kc)}
.n2 .hl:hover{background:rgba(226,226,226,.8)}

/* ---- Mobitel: svi primjeri na isti nacin, pill na dnu, panel kao donja ploca ---- */
@media(max-width:900px){
  .nx .tg-bar{top:auto;bottom:max(16px,env(safe-area-inset-bottom));padding:5px;width:calc(100vw - 2*var(--pad))}
  .nx .tg{padding:10px 14px;font-size:12px;line-height:14px}
  .nx .pc{top:auto;bottom:63px;left:var(--pad);right:var(--pad);width:auto;transform:translateY(10px);max-height:calc(100vh - 160px);overflow:auto}
  .nx.open .pc{transform:none}
  .n2 .bar{left:var(--pad);right:var(--pad);justify-content:space-between}
  .n2 .bar .tg-bar{position:fixed;top:auto;left:50%;transform:translateX(-50%)}
  .n2 .lg img{height:9px}
  .n2 .bk .b-long{display:none}
  .n2 .bk .b-short{display:inline}
}


/* Kickeri (VISIT, RENT, THE BAR, LATEST...) i datum u verzalu 11/13 */
.n2 .k,.n2 .hl .li .d{font-size:11px;line-height:13px;text-transform:uppercase;letter-spacing:0.06em}
.n2{--kf:8px}
/* Logo u headeru: svg 10 px, bijel (invert) jer je crn u datoteci; na stranicama bez difference blenda crni se preko .on-light */
/* Logo blok: visok 37 kao pill i Book, gornji rub na 10 (header ima padding 20, pa -10), sredina na 28.5 kao Book.
   Horizontalni padding/margina 14 su klik zona iz postojecih stranica. */
header.nav .brand{display:inline-flex;align-items:center;box-sizing:border-box;height:37px;padding:0 14px;margin:-10px -14px 0}
header.nav .brand .brand-logo{display:block;height:10px;width:auto;filter:invert(1)}
header.nav.on-light:not(.blend) .brand-logo{filter:none}
/* Mobitel: stranice headeru daju razlicite visine, pa logo blok stoji fiksno na istoj geometriji kao Book (top 10, visina 37). */
@media(max-width:760px){header.nav .brand .brand-logo{height:9px}header.nav .brand{position:fixed;top:10px;left:var(--pad,10px);height:37px !important;margin:0 !important;padding:0 !important;box-sizing:border-box}}
/* Mobitel: header ima padding 10, logo blok visok 37 kao Book gumb i traka na top 10, pa su logo i Book na istoj osi (sredina 28.5). */
@media(max-width:900px){
  .n2 .bar{top:10px;height:37px}
  /* donji pill ne smije prekriti podnozje: footer dobiva prostor ispod (pill 37 + 16 od dna + 16 zraka) */
  body > footer,footer{padding-bottom:calc(14px + 69px) !important}
  /* dok je cookie traka prikazana, pill i kartica se podizu iznad nje (nav.js mjeri visinu trake u --navlift) */
  .nx .tg-bar{bottom:calc(max(16px,env(safe-area-inset-bottom)) + var(--navlift,0px))}
  /* pill na mobitelu je 44 visok (5 + 34 + 5): 16 od dna + 44 + 10 razmaka = 70, isti razmak kao izmedju kartica */
  .nx .pc{bottom:calc(70px + var(--navlift,0px));max-height:calc(100dvh - 160px)}
  /* polozeni mobitel: malo visine, pa kartice idu bez fotke da stanu bez skrolanja */
  @media(max-height:520px){.n2 .im{display:none}.n2 .cA{grid-template-columns:minmax(0,1fr)}}
}
/* Pill navigacije je potpuno zaobljen (i aktivni link i hover u njemu); kartice i Book zadrzavaju svoje radijuse */
.nx .tg-bar{border-radius:999px}
.nx .tg{border-radius:999px}
/* Book the Space: bijeli gumb s difference blendom, pa se sam okrece prema pozadini (crn na svijetlom, bijel na tamnom), kao stari header.
   Radius 999 kao svi gumbi na webu (See our menu, cookie gumbi, pill navigacije). */
.n2 .bk{position:fixed;top:10px;right:var(--pad);z-index:1200;background:#fff;color:#000;mix-blend-mode:difference;box-shadow:none;border-radius:999px;transition:opacity .15s}
@media(max-width:900px){.n2 .bk{top:10px}}
.n2 .bk:hover{background:#fff;color:#000;opacity:.72}
/* Preglednici bez backdrop-filtera (stari Safari/Firefox): plohe gotovo neprozirne da tekst ostane citljiv */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nx .tg-bar{background:rgba(255,255,255,.94)}.n2 .cA{background:rgba(236,236,236,.97)}.n2 .cB{background:rgba(250,250,250,.98)}}
/* skrol unutar kartice na mobitelu ne smije povuci stranicu */
.nx .pc{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* Logo je u headeru, pa u traci ostaje samo Book, desno */
.n2 .bar{justify-content:flex-end}