/* ==========================================================================
   site.css — komponente ove stranice. Dolazi nakon temelja (type, color,
   brand, layout, image), prije finish.css.

   Nacelo: stranica mora biti gotova i lijepa BEZ JavaScripta. Sva pocetna
   stanja animacija vezana su na `html.js`, pa bez skripte nista nije
   sakriveno, a s `prefers-reduced-motion` sve stoji na kraju puta.
   ========================================================================== */

/* --- osnova --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; overflow-x: clip; }
img, video, svg { max-width: 100%; display: block; }
img, video { height: auto; }
a { color: inherit; }
::selection { background: var(--water-600); color: var(--stone-50); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink-900); color: var(--stone-50);
  padding: var(--space-xs) var(--space-m); font-size: var(--type-n1);
}
.skip:focus { left: 0; }

/* --- navigacija -----------------------------------------------------------
   Prozirna i tamna nad maketom, dobiva podlogu tek kad hub prode.                    */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-m);
  padding: clamp(14px, 2vw, 22px) var(--gutter);
  color: var(--ink-900);
  transition: background-color 400ms var(--ease-out), color 400ms var(--ease-out),
              border-color 400ms var(--ease-out);
  border-bottom: 1px solid transparent;
}
/* Izbornik je proziran nad hubom: prazan dio propusta klik na oznake ispod
   (inace su oznake uz gornji rub bile nedostizne), poveznice ga hvataju. */
.nav:not(.is-solid) { pointer-events: none; }
.nav:not(.is-solid) a { pointer-events: auto; }
.nav__mark {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--type-1); letter-spacing: 0.22em; text-decoration: none;
  padding-inline-end: 0.22em;                      /* tracking ne jede zadnje slovo */
}
.nav__links { display: flex; gap: clamp(14px, 2vw, 30px); }
.nav__links a, .nav__lang {
  font-size: var(--t-micro); letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; font-weight: 500;
  padding-block: 6px; min-height: 44px; display: inline-flex; align-items: center;
}
/* Podcrta uz tekst, ne na dnu 44 px dodirne mete. */
.nav__links a, .nav__lang { text-decoration-thickness: 1px; text-underline-offset: 7px; }
.nav__links a:hover, .nav__lang { text-decoration-line: underline; }
.nav.is-solid {
  background: color-mix(in oklab, var(--stone-50) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--ink-900); border-bottom-color: var(--stone-200);
}
@media (max-width: 640px) { .nav__links { display: none; } }
/* Siroki zasloni (21:9): cover reze sliku odozgo i krov dolazi pod izbornik.
   Meka svijetla podloga koja se gubi prema dolje, bez ruba i bez blura. */
@media (min-aspect-ratio: 17 / 9) {
  .nav:not(.is-solid) {
    background: linear-gradient(to bottom,
      color-mix(in oklab, var(--stone-50) 84%, transparent) 0%,
      color-mix(in oklab, var(--stone-50) 60%, transparent) 55%,
      color-mix(in oklab, var(--stone-50) 0%, transparent) 100%);
    padding-bottom: clamp(26px, 3vw, 40px);
    background-origin: border-box;                 /* inace se gradijent ponovi u 1 px rubu */
  }
}

/* --- S0 hub ---------------------------------------------------------------
   Maketa imanja na pijesku. Pozadine zapravo nema: rubovi slike se produze
   van okvira gradijentima izmjerenim iz same slike (--hub-t/b/l, iz
   _build/maketa-edges.json), a rubovi slike se u njih stope perom. Zato
   nema sava ni u jednom omjeru, i na mobitelu gdje slika stoji u sredini.
   .hub__frame drzi 16:9: oznake su u postocima slike i ne klize ni u jednoj
   velicini. Mjeri se kontejnerom (cqw/cqh), ne viewportom, pa vrijedi i uz
   min-height pozornice.                                                     */
.hub { position: relative; }
.hub__stage {
  position: relative; height: 100svh; min-height: 520px;
  overflow: hidden; container-type: size;
  background: var(--hub-mean, #BEB4A9);
  color: var(--ink-900);
}
/* Polozeno: slika pokriva pozornicu (cover), pomaknuta 6 % udesno da lijevi
   donji kut pijeska ostane slobodan za naslov. Lijevi rub slike se stapa s
   pozadinom (boje rubova su izmjerene, razlika je par jedinica). */
.hub__frame {
  position: absolute; left: 50%; top: 50%;
  width: max(100cqw, 100cqh * 16 / 9); aspect-ratio: 16 / 9;
  translate: -44% -50%;
}
.hub__img, .hub__img img { display: block; width: 100%; height: 100%; }
/* Pero: lijevo 6 %, gore 6 %, dolje 8 %. Produzeci ulaze u okvir tocno
   toliko, pa slika u zoni pera prelazi u boju vlastitog ruba. */
.hub__img {
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%),
                      linear-gradient(to bottom, transparent, #000 6%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 6%),
                      linear-gradient(to bottom, transparent, #000 6%, #000 92%, transparent);
          mask-composite: intersect;
}
.hub__ext { position: absolute; pointer-events: none; }
.hub__ext--t { left: 0; right: 0; bottom: 94%; height: 100cqh; background: var(--hub-t); }
.hub__ext--b { left: 0; right: 0; top: 92%;    height: 100cqh; background: var(--hub-b); }
.hub__ext--l { top: 0; bottom: 0; right: 94%;  width: 100cqw;  background: var(--hub-l); }
/* Desni rub ekrana reze sliku (cover), cesto kroz sjenu kuce. Uz scrollbar
   slika se kroz uski pojas stapa u pijesak TOCNO iste boje kao traka
   scrollbara: ravna boja, jer gradijent na korijenu Chrome u traku ne crta. */
.hub__edge-r {
  position: absolute; z-index: 1; top: 0; bottom: 0; right: 0;
  width: clamp(28px, 4cqw, 80px); pointer-events: none;
  background: var(--hub-track);
  -webkit-mask-image: linear-gradient(to right, transparent, #000);
          mask-image: linear-gradient(to right, transparent, #000);
}
/* Dok je hub na ekranu, traka scrollbara (i rezervirani prostor uz nju)
   ima boju pijeska. Mijenja se samo boja, ne sirina, pa nema pomaka. */
html.at-hub {
  background: var(--hub-track);
  scrollbar-color: color-mix(in oklab, var(--hub-track) 70%, #3C3F34) var(--hub-track);
}
.hub__img img { object-fit: cover; }

/* Naslov: suzdrzan, u praznom pijesku dolje lijevo, bez scrima (tamna
   slova na svijetlom pijesku imaju ~10:1). */
.hub__type {
  position: absolute; z-index: 2; left: var(--gutter);
  bottom: clamp(72px, 13cqh, 150px);
  pointer-events: none;
}
.hub__h {
  margin: 0; color: inherit;
  font-size: clamp(1.9rem, 3.3vw, 3.5rem); line-height: 1.02;
}
.hub__h .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hub__h .line > span { display: block; white-space: nowrap; }
.hub__sub {
  margin: var(--space-s) 0 0; max-width: 30ch;
  font-size: var(--type-0); line-height: 1.5; color: var(--ink-600);
}
.hub__cue {
  position: absolute; z-index: 2; left: var(--gutter); bottom: clamp(22px, 4cqh, 40px);
  color: var(--ink-600); margin: 0;
}
.hub__cue::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 34px; height: 1px; margin-inline-start: 12px; background: currentColor;
}

/* Uspravno i usko: maketa gore, tekst ispod. Okvir je siri od zaslona
   (150 %), rusevina i dogradnja blago izlaze preko ruba; gornji i donji
   rub slike stapaju se s pozadinom. */
/* U toku stupca: maketa i naslov su jedna skupina (naslov krece odmah ispod
   makete), slobodan prostor ide iznad makete i ispred poziva na dnu. Donjih
   ~11 % slike je prazan pijesak, pa naslov ulazi u njega (--fw = sirina). */
.hub__col { display: contents; }
@container (max-aspect-ratio: 13 / 9) {
  .hub__col {
    --fw: min(150cqw, 58cqh * 16 / 9);
    display: flex; flex-direction: column; height: 100%;
    padding: 64px 0 clamp(20px, 4cqh, 40px);
  }
  .hub__frame {
    order: -1;                                   /* maketa iznad naslova */
    position: relative; left: 50%; top: auto; flex: none; margin-top: auto;
    translate: -51% 0;                           /* sredina kuce, ne slike */
    width: var(--fw);
  }
  .hub__type, .hub__cue { position: static; padding-inline: var(--gutter); }
  .hub__type { margin-top: calc(var(--fw) * 9 / 16 * -0.07); }
  .hub__cue.micro { margin-top: auto; padding-top: var(--space-l); }  /* .micro kasnije nulira margine */
  .hub__h { font-size: clamp(2.3rem, 10.6cqw, 3.6rem); }
  .hub__edge-r { display: none; }                /* mobitel nema traku scrollbara */
}

/* --- oznake ---------------------------------------------------------------
   Meta je 44 px, tocka 12 px. Puls je prsten koji se siri i gasi, jedan
   transform. Natpis se pokaze na hover/fokus; na dodir stoji stalno.        */
.hub__spots { position: absolute; inset: 0; z-index: 1; }
.spot {
  position: absolute; left: var(--x); top: var(--y);
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  display: grid; place-items: center;
  color: var(--ink-900); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
/* Oznake kata (na presjeku) vide se tek kad se krov digne; bez JS-a nikad,
   jer ih zamjenjuje poveznica "Prvi kat" na popis. */
html:not(.js) .spot[data-img="presjek"] { display: none; }
.spot__dot {
  position: relative; width: 12px; height: 12px; border-radius: 50%;
  background: var(--stone-50);
  box-shadow: 0 0 0 2px var(--water-600), 0 1px 6px rgba(21, 23, 15, .35);
  transition: scale 300ms var(--ease-out);
}
.spot__dot::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 1px solid var(--stone-50);
  animation: spot-pulse 2.8s var(--ease-out) infinite;
  animation-delay: calc(var(--i, 0) * 0.35s);
}
@keyframes spot-pulse {
  0% { scale: 1; opacity: .9; }
  70%, 100% { scale: 2.6; opacity: 0; }
}
/* Natpisi stoje uvijek (publika je starija, nista ne smije biti skriveno).
   Polozaj racuna JS (hub: place()): strana s mjestom, pa pomak gore/dolje dok
   ne prestane prekrivati druge natpise i tocke; kad se odmakne, tanka crta
   (spot__ln) vodi do tocke. Natpis je dio poveznice, pa je i on meta dodira. */
.spot__t {
  position: absolute; left: 0; top: 0;
  transform: translate(var(--lx, 36px), var(--ly, 11px));
  padding: 5px 9px;
  background: color-mix(in oklab, var(--stone-50) 94%, transparent);
  box-shadow: 0 1px 3px rgba(21, 23, 15, .18);
  font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 600; white-space: nowrap; color: var(--ink-900);
  transition: background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.spot__ln {
  position: absolute; left: 22px; top: 22px; height: 1.5px; margin-top: -.75px; width: var(--ll, 0px);
  background: color-mix(in oklab, var(--ink-900) 75%, transparent);
  transform-origin: 0 50%; transform: rotate(var(--la, 0deg)); pointer-events: none;
}
.spot:hover .spot__t, .spot:focus-visible .spot__t { background: var(--water-600); color: var(--stone-50); }
.spot:hover .spot__dot, .spot:focus-visible .spot__dot { scale: 1.25; }
.spot:focus-visible { outline: none; }
.spot:focus-visible .spot__dot { box-shadow: 0 0 0 2px var(--water-600), 0 0 0 5px var(--stone-50), 0 0 0 7px var(--water-600); }
@media (hover: none) { .spot__t { padding: 4px 7px; font-size: 0.6875rem; } }
/* Uska pozornica (mobitel): kratko ime, da sedam natpisa stane oko kuce. */
.spot__short { display: none; }
@container (max-width: 699px) { .spot__full { display: none; } .spot__short { display: inline; } }

/* Uputa na hubu: jasna recenica, ne sitni natpis. Dodir ili klik prema uredaju. */
.hub__hint {
  display: flex; align-items: center; gap: 10px;
  margin: var(--space-s) 0 0; font-size: var(--type-0); font-weight: 500; color: var(--ink-900);
}
.hub__hint svg { flex: none; width: 26px; height: 26px; color: var(--water-600); }
.hub__hint [data-hint-pointer] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .hub__hint [data-hint-pointer] { display: inline; }
  .hub__hint [data-hint-touch] { display: none; }
}

/* Oznake se pojave tek kad je slika ucitana (JS doda .is-ready), jedna za
   drugom. Bez JS-a stoje odmah. */
html.js .hub .spot { opacity: 0; visibility: hidden; transition: opacity 500ms var(--ease-out), visibility 0s 500ms; }
html.js .hub.is-ready .spot {
  opacity: 1; visibility: visible;
  transition: opacity 600ms var(--ease-out) calc(200ms + var(--i, 0) * 70ms), visibility 0s;
}
/* Krov: prizemne oznake se povuku, oznake kata dodu kad je krov gore. */
html.js .hub.is-ready .spot[data-img="presjek"],
html.js .hub.is-ready.is-upper .spot[data-img="maketa"] {
  opacity: 0; visibility: hidden; transition: opacity 300ms var(--ease-out), visibility 0s 300ms;
}
html.js .hub.is-ready.is-upper .spot[data-img="presjek"] {
  opacity: 1; visibility: visible;
  transition: opacity 500ms var(--ease-out) calc(700ms + var(--i, 0) * 80ms), visibility 0s;
}
/* Bez "disanja" slike (1,00 -> 1,02): brief ga dopusta, ali animirana skala
   velikog maskiranog sloja ispod platna rusi fly-in. Izmjereno: s disanjem
   tri kadra od 80-200 ms usred leta u svakoj varijanti (pauza, zamrzavanje,
   will-change); bez njega 200 kadrova, najdulji 17 ms.                    */

/* Ulaz naslova po linijama iza maske. */
html.js .hub__h .line > span { transform: translateY(106%); }
html.js .hub__sub, html.js .hub__cue { opacity: 0; }
html.js .hub.is-in .hub__h .line > span { transform: none; transition: transform var(--dur-reveal) var(--ease-out); }
html.js .hub.is-in .hub__h .line:nth-child(2) > span { transition-delay: 90ms; }
html.js .hub.is-in .hub__h .line:nth-child(3) > span { transition-delay: 180ms; }
html.js .hub.is-in .hub__sub, html.js .hub.is-in .hub__cue { opacity: 1; transition: opacity 900ms var(--ease-out) 380ms; }

/* --- skrol u dvoriste --------------------------------------------------------
   S JS-om (i bez reduced-motion) hub naraste na tri ekrana, pozornica se
   prilijepi, a platno po skrolu vrti bazen-flyin: maketa -> dvoriste. Zadnjih
   ~12 % puta slika stoji na dvoristu, onda stranica ide dalje. Naslov, oznake
   i poziv nestanu cim skrol krene, vrate se na vrhu. */
.hub.has-scrub { height: 300svh; }
.hub.has-scrub .hub__stage { position: sticky; top: 0; }
.hub__cv {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  pointer-events: none; opacity: 0;
}
.hub__cv.is-on { opacity: 1; }
html.js .hub.is-scrolled .hub__type,
html.js .hub.is-scrolled .hub__cue,
html.js .hub.is-ready.is-scrolled .hub__spots .spot {
  opacity: 0 !important; visibility: hidden; transition: opacity 280ms var(--ease-out), visibility 0s 280ms !important;
}
.hub__cue { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.hub__cue:hover { color: var(--ink-900); }
.hub__cue:focus-visible { outline: 2px solid var(--water-600); outline-offset: 4px; }

/* --- /?debug: namjestanje oznaka ------------------------------------------ */
.hub.is-debug .spot { opacity: 1 !important; visibility: visible !important; cursor: grab; touch-action: none; }
.hub.is-debug .spot[data-img="presjek"] { display: grid; }
.hub.is-debug .spot[data-img="presjek"] .spot__dot { background: #F2C14E; }
.hub.is-debug .spot__dot::after { animation: none; }
.hub.is-debug .hub__type, .hub.is-debug .hub__cue { opacity: .25; }
.hub__grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    repeating-linear-gradient(to right, rgba(21,23,15,.18) 0 1px, transparent 1px 10%),
    repeating-linear-gradient(to bottom, rgba(21,23,15,.18) 0 1px, transparent 1px 10%);
}
.hub__presjek { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.hub.is-presjek .hub__presjek { opacity: 1; }
.hub__dbg {
  position: fixed; right: 12px; bottom: 12px; z-index: 60; max-width: 380px;
  background: var(--ink-900); color: var(--stone-50);
  font: 12px/1.45 ui-monospace, Consolas, monospace; padding: 10px 12px;
}
.hub__dbg pre { margin: 6px 0; white-space: pre; max-height: 40vh; overflow: auto; }
.hub__dbg button {
  font: inherit; color: inherit; background: none; border: 1px solid currentColor;
  padding: 2px 8px; margin-right: 6px; cursor: pointer;
}

/* --- sekcije --------------------------------------------------------------- */
.sec {
  position: relative;
  padding-block: clamp(84px, 13vh, 190px);
  padding-inline: var(--gutter);
}
.sec__head, .plan__head { max-width: 62ch; }
.sec h2 { margin: 0.35em 0 0; }
.lede {
  margin: var(--space-m) 0 0; max-width: 58ch;
  font-size: var(--type-1); line-height: 1.62; color: var(--ink-600);
}
.micro { margin: 0; }

/* Ulazi: samo kad ima JS-a i kad korisnik nije trazio manje gibanja. */
html.js [data-reveal] { opacity: 0; transform: translateY(18px); }
html.js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}

/* Slike se otkrivaju maskom odozdo uz smirivanje mjerila, nikad golim fadeom. */
.sec--layers .layer__img, .pool__media, .film__frame, .where__map {
  clip-path: inset(0 0 0 0);
}
html.js .layer__img picture img,
html.js .sec__film video { transform: scale(1.05); transform-origin: center; }
html.js [data-reveal].is-in .layer__img picture img,
html.js [data-reveal].is-in video { transform: none; transition: transform 1400ms var(--ease-out); }
html.js .layer__img, html.js .sec__film figure, html.js .sec__film {
  --wipe: 100%;
}
html.js [data-reveal] .layer__img { clip-path: inset(0 0 100% 0); }
html.js [data-reveal].is-in .layer__img {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1250ms var(--ease-out);
}

/* --- S1 tri sloja vremena -------------------------------------------------
   Nije 3 jednake kartice u gridu. Tri kadra razlicitih sirina i visina,
   svaki na svojoj visini — oko ih cita kao tri trenutka, ne kao izbornik.  */
.layers {
  list-style: none; margin: clamp(48px, 8vh, 110px) 0 0; padding: 0;
  display: grid; gap: clamp(40px, 6vw, 90px);
  grid-template-columns: 1fr;
  align-items: start;
}
.layer { margin: 0; }
.layer__when {
  margin: var(--space-m) 0 0;
  font-size: var(--type-2); color: var(--ink-400); font-weight: 300;
  font-variant-numeric: oldstyle-nums;
}
.layer__t { margin: var(--space-3xs) 0 0; font-size: var(--type-2); }
.layer__d { margin: var(--space-2xs) 0 0; max-width: 34ch; color: var(--ink-600); }
.layer__img img { width: 100%; }

@media (min-width: 900px) {
  .layers { grid-template-columns: repeat(12, 1fr); }
  .layer--1 { grid-column: 1 / span 4; }
  .layer--2 { grid-column: 6 / span 5; margin-block-start: clamp(60px, 9vw, 150px); }
  .layer--3 { grid-column: 2 / span 4; margin-block-start: clamp(30px, 5vw, 80px); }
  .layer--1 .layer__img { aspect-ratio: 3 / 4; }
  .layer--2 .layer__img { aspect-ratio: 4 / 3; }
  .layer--3 .layer__img { aspect-ratio: 1 / 1; }
  .layer__img { overflow: hidden; }
  .layer__img img { width: 100%; height: 100%; object-fit: cover; }
}

/* Setnja kroz dvoriste. Kadar je gotovo kvadrat (1488x1388): sirina se racuna
   iz visine ekrana ispod izbornika, pa se uvijek vidi cijeli, bez rezanja.
   Na mobitelu ide od ruba do ruba, da bude trenutak, a ne slicica. */
.sec__film { margin: clamp(56px, 9vh, 130px) 0 0; display: grid; gap: var(--space-s); }
.film__frame {
  position: relative; overflow: hidden; background: var(--stone-200);
  width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter));
}
.sec__film video { display: block; width: 100%; height: auto; }
.film__cap { margin: var(--space-xs) 0 0; color: var(--ink-600); font-size: var(--type-n1); line-height: 1.5; max-width: 46ch; }
@media (min-width: 900px) {
  .sec__film { grid-template-columns: repeat(12, 1fr); gap: var(--space-l); align-items: end; }
  .film__frame {
    grid-column: 5 / -1; justify-self: end; margin-inline: 0;
    width: min(100%, calc((100svh - 81px - 2 * var(--space-l)) * 1488 / 1388));
  }
  .sec__film .film__cap {
    grid-column: 1 / span 4; grid-row: 1; margin: 0; max-width: 18ch;
    font-family: var(--font-display); font-weight: 300; color: var(--ink-900);
    font-size: var(--type-2); line-height: 1.2; letter-spacing: -0.01em;
  }
}

/* --- S2 bazen: pun format, parallax ---------------------------------------- */
.sec--pool { padding-inline: 0; padding-block: 0; }
.pool__media { position: relative; height: clamp(420px, 78vh, 900px); overflow: hidden; }
.pool__media picture, .pool__media img { width: 100%; height: 100%; object-fit: cover; }
/* Uski zaslon rezuje sa strane: fokus na bazen i luk ruševine, ne na šljunak. */
@media (max-aspect-ratio: 1/1) {
  .pool__media { height: clamp(360px, 58svh, 640px); }
  .pool__media img { object-position: 58% 50%; }
}

.pool__type {
  position: relative; margin-top: -1px;
  padding: clamp(40px, 7vh, 96px) var(--gutter) clamp(84px, 13vh, 190px);
  background: var(--bg);
}
.pool__type h2, .pool__type .lede { max-width: 26ch; }
.pool__type .lede { max-width: 54ch; }

@media (min-width: 1100px) {
  .sec--pool { display: grid; grid-template-columns: 1fr; }
  .pool__type {
    display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-l);
  }
  .pool__type > .micro { grid-column: 1 / span 2; padding-top: 0.6em; }
  .pool__type > h2 { grid-column: 3 / span 6; margin: 0; }
  .pool__type > .lede { grid-column: 3 / span 5; }
}

/* --- S3 noc: jedina tamna sekcija. Ne omeksava se. ------------------------- */
.sec--night {
  background: var(--night-900); color: var(--stone-200);
  padding-inline: 0;
  padding-block: clamp(84px, 13vh, 190px);
}
.sec--night h2 { color: var(--stone-50); }
.sec--night .lede { color: color-mix(in oklab, var(--stone-200) 82%, transparent); }
.sec--night .micro { color: var(--water-400); }
.night__media {
  max-width: 1400px; margin-inline: auto;
  padding-inline: var(--gutter);
}
.night__media video,
.night__media img { display: block; width: 100%; height: auto; background: var(--night-800); }
.night__type {
  max-width: 1400px; margin-inline: auto;
  padding: clamp(36px, 6vh, 78px) var(--gutter) 0;
}
@media (min-width: 1100px) {
  .night__type { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-l); align-items: end; }
  .night__type > * { grid-row: 1; }
  .night__type > .micro { grid-column: 1 / span 2; align-self: start; padding-top: 0.6em; }
  .night__type > h2 { grid-column: 3 / span 5; margin: 0; }
  .night__type > .lede { grid-column: 9 / span 4; margin: 0; }
}

/* ==========================================================================
   S4 — PROSTORI (indeks; sobe se otvaraju na pozornici ili u foto-panelu)
   ========================================================================== */
.sec--plan { background: var(--bg-subtle); }

/* --- prostori: jedan element, dvije uloge ---------------------------------
   Bez skripte je ovo puni popis s galerijama — jedini nacin da se fotke vide.
   Sa skriptom galerije se povlace u preglednik, a na stranici ostaje zbijen
   indeks: tekst svakog prostora i dalje je u dokumentu (trazilice i citaci
   ekrana dobivaju cijeli raspored kuce), ali stranica ne naraste za 82 slike.
   -------------------------------------------------------------------------- */
.rooms { max-width: 1180px; margin: clamp(48px, 8vh, 110px) auto 0; }
.rooms__h { color: var(--ink-400); margin-bottom: var(--space-m); }
.rooms__lvl { margin-top: var(--space-l); }
.rooms__lvlh {
  color: var(--ink-400); padding-bottom: var(--space-2xs);
  border-bottom: var(--rule); margin-bottom: 0;
}
.room { padding-block: clamp(22px, 3vh, 36px); scroll-margin-top: 84px; }
.room + .room { border-top: var(--rule); }
.room__lvl { display: none; }                 /* razina je vec naslov skupine */
.room__t { margin: 0; font-size: var(--type-2); }
.room__link {
  text-decoration: none; min-height: 44px;
  display: inline-flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: border-color 260ms var(--ease-out), color 260ms var(--ease-out);
}
.room__link:hover { color: var(--water-600); border-bottom-color: var(--water-600); }
.room__d { margin: var(--space-2xs) 0 0; max-width: 58ch; color: var(--ink-600); }
.room__facts {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m);
  margin: var(--space-xs) 0 0; padding: 0;
  font-size: var(--type-n1); color: var(--ink-400);
}
.room__facts li { position: relative; padding-inline-start: 14px; }
.room__facts li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 1px; background: var(--ink-400);
}
.room__view { margin-top: var(--space-m); }
html.js .rooms .room__view { display: none; }        /* fotke zive u pregledniku */

/* Palac: prva fotka prostora nad naslovom. Samo sa skriptom (bez nje galerija
   stoji u clanku) i nikad u foto-panelu, gdje je cijela galerija. */
.room__thumb { display: none; }
html.js .rooms .room__thumb {
  display: block; aspect-ratio: 4 / 3; overflow: hidden;
  margin-bottom: var(--space-s); background: var(--stone-200);
}
.room__thumb picture, .room__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.room__thumb img { transition: transform 900ms var(--ease-out); }
.room:hover .room__thumb img { transform: scale(1.035); }
.panel .room__thumb { display: none !important; }
@media (prefers-reduced-motion: reduce) { .room:hover .room__thumb img { transform: none; } }

/* Sa skriptom prostori stanu u dva stupca: indeks, ne beskrajan niz. */
html.js .rooms__set {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-l) var(--space-s);
  padding-top: var(--space-m);
}
html.js .rooms__set .room { border-top: 0; padding-block: 0; }
@media (max-width: 859px) {
  html.js .rooms .room__d { font-size: var(--type-n1); }
  html.js .rooms .room__facts { display: none; }
  html.js .rooms .room__t { font-size: var(--type-1); }
}
@media (min-width: 860px) {
  html.js .rooms__set { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl) var(--space-l); }
}

.room__track {
  display: flex; gap: var(--space-xs);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.room__track > .shot {
  flex: 0 0 min(92%, 640px); margin: 0; scroll-snap-align: start;
  aspect-ratio: 4 / 3; overflow: hidden; background: var(--stone-200);
}
.room__track picture, .room__track img { width: 100%; height: 100%; object-fit: cover; }
.shot__hint { display: none; }
.room__hint { margin-top: var(--space-xs); color: var(--ink-400); }
html.js .room__hint { display: none; }

/* --- S6 lokacija ----------------------------------------------------------- */
.sec--where { display: grid; gap: clamp(40px, 6vw, 90px); }
.where__air { grid-column: 1 / -1; margin: 0; }
.where__air video {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  max-height: 82svh; object-fit: cover; background: var(--stone-200);
}
.where__air figcaption { margin-top: var(--space-xs); color: var(--ink-400); }
@media (min-width: 980px) {
  .sec--where { grid-template-columns: 1.05fr 0.95fr; align-items: start; }
}
.dist { margin: clamp(32px, 5vh, 60px) 0 0; border-top: var(--rule); }
.dist > div {
  display: flex; justify-content: space-between; gap: var(--space-m);
  padding-block: 11px; border-bottom: var(--rule);
}
.dist dt { color: var(--ink-600); }
.dist dd { margin: 0; color: var(--ink-900); font-variant-numeric: oldstyle-nums; white-space: nowrap; }
/* Google karta. Okvir drzi omjer prije i poslije ucitavanja (CLS 0). */
.gmap { position: relative; aspect-ratio: 4 / 5; background: var(--stone-100); overflow: hidden; }
@media (max-width: 979px) { .gmap { aspect-ratio: 4 / 3; } }
.gmap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gmap__ph {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: start;
  gap: var(--space-s); padding: var(--space-l);
}
.gmap__addr { margin: 0; font-size: var(--type-2); line-height: 1.15; color: var(--ink-900); }
.gmap__note { margin: 0; max-width: 34ch; font-size: var(--type-n1); color: var(--ink-600); }
html:not(.js) .gmap__btn { display: none; }

/* --- traka za privolu -------------------------------------------------------
   Mala, u kutu, ispod pozornice i panela (z 40-55). Racunalo: dolje desno, da
   ne pokrije naslov huba (dolje lijevo). Mobitel: dolje preko sirine.        */
.consent {
  position: fixed; z-index: 45; right: var(--gutter); bottom: var(--gutter);
  width: min(400px, calc(100vw - 2 * var(--gutter)));
  padding: var(--space-m); display: grid; gap: var(--space-s);
  background: var(--stone-50); color: var(--ink-900);
  border: 1px solid var(--stone-300);
  box-shadow: 0 18px 40px -18px rgba(21, 23, 15, .35);
  opacity: 0; translate: 0 14px;
  transition: opacity 420ms var(--ease-out), translate 420ms var(--ease-out);
}
.consent[hidden] { display: none; }
.consent.is-in { opacity: 1; translate: 0 0; }
.consent__t { margin: 0; font-size: var(--type-n1); line-height: 1.55; color: var(--ink-600); }
.consent__t a { color: var(--water-600); }
.consent__b { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.consent__b .btn { flex: 1 1 0; min-width: max-content; }
html.is-staged .consent { opacity: 0; pointer-events: none; }
@media (max-width: 640px) {
  .consent { left: 12px; right: 12px; bottom: 12px; width: auto; padding: var(--space-s); }
}
@media (prefers-reduced-motion: reduce) { .consent { transition: none; translate: none; } }
.foot__btn {
  font: inherit; color: var(--ink-600); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px; min-height: 44px;
}
.where__note a { color: var(--water-600); display: inline-flex; align-items: center; min-height: 44px; }
.where__note { margin-top: var(--space-xs); color: var(--ink-600); font-size: var(--type-n1); }

/* --- S7 prakticno ---------------------------------------------------------
   Tipografski redak, ne kartice sa statistikom.                            */
.specs { margin: clamp(40px, 6vh, 80px) 0 0; border-top: var(--rule); }
.specs__row {
  display: grid; gap: 4px var(--space-l);
  padding-block: clamp(14px, 2vh, 20px); border-bottom: var(--rule);
}
@media (min-width: 720px) { .specs__row { grid-template-columns: 22ch 1fr; } }
.specs dt { color: var(--ink-400); font-size: var(--type-n1); letter-spacing: .04em; text-transform: uppercase; }
.specs dd { margin: 0; color: var(--ink-900); font-size: var(--type-1); }

/* --- S8 domacini ----------------------------------------------------------
   Nema fotografije obitelji i nece je biti. Sve nosi tipografija, pa mora
   biti dobro postavljena — inace se cita kao da nesto fali.                */
.sec--hosts { background: var(--bg-subtle); }
.hosts { margin: 0 auto; max-width: 1000px; text-align: left; }
.hosts__q {
  margin: var(--space-l) 0 0;
  font-size: var(--t-quote); line-height: 1.22; font-weight: 300;
  letter-spacing: -0.022em; color: var(--ink-900);
  text-indent: -0.42em;                       /* navodnik visi izvan bloka */
  hanging-punctuation: first;
}
.hosts__q::before { content: "\201C"; }
.hosts__q::after { content: "\201D"; }
.hosts__c {
  margin-top: clamp(28px, 4vh, 52px); padding-top: var(--space-m);
  border-top: var(--rule);
  display: grid; gap: var(--space-2xs);
}
.hosts__sign {
  font-family: var(--font-display); font-size: var(--type-2);
  color: var(--ink-900); font-weight: 400;
}
.hosts__note { color: var(--ink-400); max-width: 46ch; font-size: var(--type-n1); }

/* --- S9 upit --------------------------------------------------------------- */
.sec--book { display: grid; gap: clamp(40px, 6vw, 90px); }
@media (min-width: 980px) { .sec--book { grid-template-columns: 1fr 1fr; align-items: start; } }
.book__price {
  margin: clamp(28px, 4vh, 48px) 0 0; padding-top: var(--space-m);
  border-top: var(--rule);
  color: var(--ink-600); max-width: 48ch; font-size: var(--type-n1); line-height: 1.7;
}
.book__alt { margin-top: var(--space-l); display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.book__rating { flex-basis: 100%; color: var(--ink-400); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--space-m);
  font-size: var(--type-n1); font-weight: 500; letter-spacing: .04em;
  text-decoration: none; cursor: pointer; border: 1px solid var(--ink-900);
  background: transparent; color: var(--ink-900);
  transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out);
}
.btn--ghost:hover { background: var(--ink-900); color: var(--stone-50); }
.btn--solid {
  background: var(--ink-900); color: var(--stone-50);
  border-color: var(--ink-900);
  /* Jedini akcent na stranici, potrosen na jednom mjestu. */
  box-shadow: inset 0 -3px 0 var(--water-600);
}
.btn--solid:hover { background: var(--water-600); border-color: var(--water-600); }

.form { display: grid; gap: var(--space-s); grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: 6px; grid-column: 1 / -1; }
.field--half { grid-column: span 1; }
@media (max-width: 560px) { .field--half { grid-column: 1 / -1; } }
.field label { font-size: var(--type-n1); color: var(--ink-400); letter-spacing: .03em; }
.field input, .field textarea {
  font: inherit; font-size: var(--type-0); color: var(--ink-900);
  background: var(--bg); border: 1px solid var(--stone-300);
  padding: 12px 14px; min-height: 48px; width: 100%;
}
.field input:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--water-600); outline-offset: 1px; border-color: var(--water-600);
}
.field textarea { min-height: 120px; resize: vertical; }
.field__err, .form__state { margin: 0; font-size: var(--type-n1); }
.field__err { color: #8E2F22; grid-column: 1 / -1; }
.field__err:empty { display: none; }
.field.is-bad input { border-color: #8E2F22; }
.form__nights { grid-column: 1 / -1; color: var(--ink-400); }
.form__hp { position: absolute; left: -9999px; }
.form button[type=submit] { grid-column: 1 / -1; justify-self: start; }
.form__state { grid-column: 1 / -1; color: var(--water-600); }
.form__state.is-bad { color: #8E2F22; }
.form__fallback { grid-column: 1 / -1; margin: 0; color: var(--ink-600); font-size: var(--type-n1); }
.form__fallback a { color: var(--water-600); }

/* --- podnozje --------------------------------------------------------------- */
.foot {
  padding: clamp(48px, 7vh, 90px) var(--gutter);
  border-top: var(--rule);
  display: grid; gap: var(--space-s);
  font-size: var(--type-n1); color: var(--ink-400);
}
.foot a { color: var(--ink-600); }
.foot__links { display: flex; flex-wrap: wrap; gap: 0 var(--space-m); }
.foot__links a, .foot__addr a { display: inline-flex; align-items: center; min-height: 44px; }
.foot__addr { margin: 0; }
.foot__note { margin: 0; }

/* ==========================================================================
   POZORNICA — fly-in iz makete i pogled po sobi
   Platno preko cijelog ekrana. Na pocetku je prozirno i crta samo sliku
   makete tocno preko huba (isti pravokutnik, isto pero), pa klik izgleda kao
   da se maketa pokrene. Pozadina (--night-900) dolazi tek kako kamera ulazi:
   na mobitelu to su trake iznad i ispod 16:9 slike, i u njima stoji tekst.
   ========================================================================== */
.stage { position: fixed; inset: 0; z-index: 50; pointer-events: none; color: var(--stone-50); }
.stage[hidden] { display: none; }
.stage__bg { position: absolute; inset: 0; background: var(--night-900); opacity: 0; }
.stage__cv { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 300ms linear; }
.stage.is-on .stage__cv { opacity: 1; }
.stage__look {
  position: absolute; inset: 0; display: none;
  cursor: grab; touch-action: none; outline: none;
}
.stage.is-look .stage__look { display: block; pointer-events: auto; }
.stage__look.is-drag { cursor: grabbing; }

.stage__ui { position: absolute; inset: 0; opacity: 0; transition: opacity 420ms var(--ease-out); }
.stage.is-look .stage__ui { opacity: 1; }
.stage.is-look .stage__ui .stage__back { pointer-events: auto; }
/* Tekst nikad gol na fotografiji: meki scrim gore (gumb) i dolje (opis). */
.stage__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(8,10,7,.66) 0%, rgba(8,10,7,.22) 30%, rgba(8,10,7,0) 48%),
    linear-gradient(to bottom, rgba(8,10,7,.42) 0%, rgba(8,10,7,0) 18%);
}
.stage__back {
  position: absolute; top: clamp(12px, 2vw, 22px); left: calc(var(--gutter) - 10px);
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 10px;
  background: none; border: 0; color: inherit; cursor: pointer;
  font: 500 var(--t-micro)/1 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase;
}
.stage__back span { border-bottom: 1px solid transparent; padding-block: 4px; }
.stage__back:hover span { border-bottom-color: currentColor; }
.stage__back:focus-visible { outline: 2px solid var(--stone-50); outline-offset: 2px; }

.stage__info {
  position: absolute; left: var(--gutter); bottom: clamp(24px, 6vh, 64px);
  max-width: min(46ch, 70vw);
}
.stage__lvl { color: color-mix(in oklab, var(--stone-50) 72%, transparent); margin: 0 0 var(--space-2xs); }
.stage__t {
  margin: 0; color: inherit; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 3.4rem); line-height: 1.02;
}
.stage__d { margin: var(--space-xs) 0 0; font-size: var(--type-0); line-height: 1.5; color: color-mix(in oklab, var(--stone-50) 88%, transparent); }
.stage__facts {
  display: flex; flex-wrap: wrap; gap: 0 var(--space-s);
  margin: var(--space-s) 0 0; padding: 0; list-style: none;
  font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500;
}
.stage__facts li + li::before { content: "·"; margin-inline-end: var(--space-s); opacity: .6; }

/* Luk polozaja u okretu: tanka linija, tocka putuje po njoj. */
.stage__arc {
  position: absolute; right: var(--gutter); bottom: clamp(24px, 6vh, 64px);
  width: clamp(96px, 9vw, 136px); height: auto; overflow: visible;
}
.stage__arc-on { stroke-dasharray: var(--arc, 0) 1; }
.stage__hint {
  position: absolute; left: 50%; bottom: clamp(24px, 6vh, 64px); translate: -50% 0;
  margin: 0; white-space: nowrap; color: color-mix(in oklab, var(--stone-50) 80%, transparent);
  transition: opacity 600ms var(--ease-out);
}
.stage.is-moved .stage__hint { opacity: 0; }
/* Uputa u sobi prema uredaju: prst na dodirnom zaslonu, mis/strelice na racunalu. */
.stage__hint [data-hint-pointer] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .stage__hint [data-hint-pointer] { display: inline; }
  .stage__hint [data-hint-touch] { display: none; }
}
/* Prvi pogled: soba se sama malo okrene tamo-amo, a ruka sa strelicama
   pokazuje da se okrece povlacenjem. Nestane na prvi dodir ili nakon ~3 s. */
.stage__demo {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 88px; height: 88px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(8, 10, 7, .45); color: var(--stone-50);
  opacity: 0; transition: opacity 400ms var(--ease-out); pointer-events: none;
}
.stage__demo svg { width: 60px; height: 60px; }
.stage.is-demo .stage__demo { opacity: 1; }
.stage.is-demo .stage__demo svg { animation: stage-demo 1.6s ease-in-out infinite; }
@keyframes stage-demo { 0%, 100% { translate: 0 0; } 50% { translate: 10px 0; } }
@media (max-aspect-ratio: 13 / 10) { .stage__demo { top: calc(32.5% + 30px); } }
@media (prefers-reduced-motion: reduce) { .stage.is-demo .stage__demo svg { animation: none; } }
.stage__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Dok je pozornica otvorena: stranica stoji, izbornik se povuce, hub stane. */
html.is-staged { overflow: hidden; }
html.is-staged.is-deep { background: var(--night-900); scrollbar-color: #3a4144 var(--night-900); }
html.is-staged .nav { opacity: 0; pointer-events: none; transition: opacity 300ms linear; }
.hub.is-away .hub__type, .hub.is-away .hub__cue, .hub.is-away .hub__spots {
  opacity: 0 !important; transition: opacity 300ms linear !important; pointer-events: none;
}

/* --- dizanje krova ---------------------------------------------------------
   Tri sloja preko makete (maske iz media.js):
   hub__roof  krov makete koji se dize 10 % visine slike i gasi;
   hub__hole  presjek ispod krova, odmah vidljiv (ispod je krov jos identican
              maketi), pa se kroz dizanje vide sobe, a ne dvostruki krov;
   hub__pres  presjek svuda gdje se slika stvarno mijenja, pretapa se 1 s.
   Izvan maske otkrivanja maketa stoji piksel u piksel. */
.hub__layer { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.hub__layer img { display: block; width: 100%; height: 100%; }
.hub__pres {
  -webkit-mask: url(../img/maketa/mask-reveal.png) 0 0 / 100% 100% no-repeat;
          mask: url(../img/maketa/mask-reveal.png) 0 0 / 100% 100% no-repeat;
  transition: opacity 1000ms var(--ease-scrub);
}
.hub__hole, .hub__roof {
  -webkit-mask: url(../img/maketa/mask-roof.png) 0 0 / 100% 100% no-repeat;
          mask: url(../img/maketa/mask-roof.png) 0 0 / 100% 100% no-repeat;
}
.hub.is-roofed .hub__hole, .hub.is-roofed .hub__roof { opacity: 1; }
.hub.is-upper .hub__pres { opacity: 1; }
/* Spustanje (is-lowering): krov se vraca i utapa. Pri dizanju nema prijelaza
   na ukljucivanju, krov se pojavi odmah (identican je maketi ispod). */
.hub.is-lowering .hub__roof { transition: translate 1000ms var(--ease-scrub), opacity 500ms linear; }
.hub.is-upper .hub__roof {
  translate: 0 -10%; opacity: 0;
  transition: translate 1000ms var(--ease-scrub), opacity 700ms linear 300ms;
}
/* "Vrati krov": iznad krova, natpis uvijek vidljiv. --ry ga spusti ispod izbornika
   kad bi mu mjesto na slici palo pod izbornik ili iznad ruba ekrana. */
.roofback {
  position: absolute; left: var(--x); top: calc(var(--y) + var(--ry, 0px));
  width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0;
  display: grid; place-items: center;
  background: none; border: 0; color: var(--ink-900); cursor: pointer;
  opacity: 0; visibility: hidden; transition: opacity 300ms var(--ease-out), visibility 0s 300ms;
}
html.js .hub.is-upper .roofback { opacity: 1; visibility: visible; transition: opacity 500ms var(--ease-out) 600ms, visibility 0s; }
html.js .hub.is-ready.is-scrolled .hub__spots .roofback { opacity: 0 !important; visibility: hidden; }
.roofback:hover .spot__t, .roofback:focus-visible .spot__t { background: var(--water-600); color: var(--stone-50); }
.roofback:focus-visible { outline: none; }
.roofback:focus-visible .spot__dot { box-shadow: 0 0 0 2px var(--water-600), 0 0 0 5px var(--stone-50), 0 0 0 7px var(--water-600); }
html:not(.js) .roofback { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hub__roof { display: none; }
  .hub.is-roofed .hub__hole { opacity: 0; }
  .hub.is-upper .hub__hole { opacity: 1; }
  .hub__hole, .hub__pres { transition: opacity 200ms linear; }
}

/* Ucitavanje: prsten oko tocke puni se kako stizu frameovi. */
.spot.is-loading .spot__dot::before {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  background: conic-gradient(var(--water-600) calc(var(--load, 0) * 1turn), rgba(241,241,234,.55) 0);
  -webkit-mask: radial-gradient(circle, transparent 9px, #000 9.5px);
          mask: radial-gradient(circle, transparent 9px, #000 9.5px);
}

/* Uspravno (isti prag kao u JS-u, 1,3): soba je okvir do 65 % visine, tekst
   odmah ispod na tamnom, luk desno uz naslov. Scrim samo gore, za gumb. */
@media (max-aspect-ratio: 13 / 10) {
  .stage__scrim { background: linear-gradient(to bottom, rgba(8,10,7,.42) 0%, rgba(8,10,7,0) 12%); }
  .stage__info { top: calc(65% + 22px); bottom: auto; right: calc(var(--gutter) + 92px); max-width: none; }
  .stage__arc { width: 80px; bottom: auto; top: calc(65% + 26px); }
  .stage__hint { bottom: clamp(18px, 3vh, 28px); white-space: normal; text-align: center; width: calc(100% - 2 * var(--gutter)); }
}

/* "Kroz luk": tekstualni gumb iznad luka polozaja, samo na kraju okreta. */
.stage__next {
  position: absolute; right: var(--gutter); bottom: calc(clamp(24px, 6vh, 64px) + 78px);
  min-height: 44px; padding: 0 16px;
  background: var(--stone-50); color: var(--ink-900); border: 0; cursor: pointer;
  font: 500 var(--t-micro)/1 var(--font-text); letter-spacing: 0.14em; text-transform: uppercase;
}
.stage__next[hidden] { display: none; }
.stage.is-look .stage__ui .stage__next { pointer-events: auto; }
.stage__next:hover { background: var(--stone-100); }
.stage__next:focus-visible { outline: 2px solid var(--stone-50); outline-offset: 3px; }
@media (max-aspect-ratio: 13 / 10) {
  .stage__next { bottom: auto; top: calc(65% - 60px); right: var(--gutter); }
}

/* ==========================================================================
   FOTO-PANEL — prostori bez videa
   List s desne strane preko stranice (hub ostaje vidljiv lijevo, pa je jasno
   gdje smo), na mobitelu preko cijelog ekrana. Jedan pokret: list uklizi.
   ========================================================================== */
.panel { position: fixed; inset: 0; z-index: 55; }
.panel[hidden] { display: none; }
.panel__back {
  position: absolute; inset: 0; background: rgba(11, 16, 18, .42);
  opacity: 0; transition: opacity 480ms var(--ease-out);
}
.panel.is-open .panel__back { opacity: 1; }
.panel__sheet {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(680px, 50vw);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--stone-50); color: var(--text-muted);
  padding: clamp(64px, 9vh, 96px) clamp(20px, 3vw, 44px) clamp(32px, 5vh, 56px);
  translate: 100% 0; transition: translate 480ms var(--ease-out);
  outline: none;
}
.panel.is-open .panel__sheet { translate: 0 0; }
.panel__x {
  position: absolute; top: clamp(12px, 2vh, 20px); right: clamp(8px, 1.5vw, 20px);
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 0; color: var(--ink-900); cursor: pointer;
}
.panel__x:hover { color: var(--water-600); }
.panel__x:focus-visible { outline: 2px solid var(--water-600); outline-offset: 2px; }
html.is-paneled { overflow: hidden; }

/* Clanak u panelu: razina se vidi, naslov je naslov, a ne poveznica. */
.panel .room { padding-block: 0; border: 0; }
.panel .room__lvl { display: block; margin: 0 0 var(--space-2xs); color: var(--ink-400); }
.panel .room__t { font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.04; }
.panel .room__link { pointer-events: none; border: 0; min-height: 0; color: var(--ink-900); }
.panel .room__d { font-size: var(--type-0); line-height: 1.55; margin-top: var(--space-xs); }
html.js .panel .room__view { display: block; margin-top: var(--space-l); }
.panel .room__hint, .panel .shot__hint { display: none; }
/* Mreza: uspravne 3:4 u dva stupca, prva preko cijelog reda, polozene isto. */
.panel .room__track {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  overflow: visible; scroll-snap-type: none;
}
.panel .room__track > .shot { flex: none; aspect-ratio: auto; background: var(--stone-200); }
.panel .room__track > .shot--wide { grid-column: 1 / -1; }
.panel .room__track picture, .panel .room__track img { display: block; width: 100%; height: auto; object-fit: initial; }

@media (max-width: 760px) {
  .panel__sheet { width: 100%; padding-inline: var(--gutter); }
  .panel__back { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .panel__sheet, .panel__back { transition: none; }
}

/* ==========================================================================
   prefers-reduced-motion — prava grana, ne naknadna misao.
   Nema scruba ni letova (pozornica pretapa), krov se ne dize, parallax staje.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.js .hub__h .line > span, html.js .hub__sub, html.js .hub__cue { transform: none; opacity: 1; }
  html.js [data-reveal] { opacity: 1; transform: none; clip-path: none; }
  html.js [data-reveal] .layer__img { clip-path: none; }
  html.js .layer__img picture img, html.js .sec__film video { transform: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* --- vrlo siroki ekrani ---------------------------------------------------
   Izvorne fotografije idu do 1800 px. Preko toga se medij ne rasteze nego
   se scena drzi u okviru — mekana slika izgleda gore od mirnog ruba.      */
@media (min-width: 2100px) {
  .sec { padding-inline: max(var(--gutter), calc((100vw - 1900px) / 2)); }
  .pool__media { height: min(78vh, 820px); }
  .foot { padding-inline: max(var(--gutter), calc((100vw - 1900px) / 2)); }
  .nav { padding-inline: max(var(--gutter), calc((100vw - 1900px) / 2)); }
  /* Naslov huba mora stajati na istoj okomici kao wordmark u navigaciji. */
  .hub__type, .hub__cue { left: max(var(--gutter), calc((100vw - 1900px) / 2)); }
  .night__media, .night__type { max-width: 1900px; }
}

/* Nocna fotka je s mobitela: uza od punog reda, poravnata sa stupcem naslova. */
@media (min-width: 1100px) {
  .night__media picture { display: block; width: calc(100% * 8 / 12); margin-left: calc(100% * 2 / 12); }
}

/* Uski mobitel: logo i tri poveznice (Upit, Cjenik, jezik) u jednom redu,
   i na engleskom (ENQUIRE / PRICES / HRVATSKI). Logo se nikad ne lomi. */
.nav__mark { white-space: nowrap; }
@media (max-width: 440px) {
  .nav { gap: 10px; }
  .nav__mark { letter-spacing: 0.16em; padding-inline-end: 0.16em; }
  .nav__links { gap: 14px; }
  .nav__links a, .nav__lang { letter-spacing: 0.08em; }
}

/* --- Cesta pitanja ---------------------------------------------------------
   Isti redak kao Prakticno: pitanje lijevo u serifu, odgovor desno.           */
.sec--faq { padding-top: 0; }
.faq { margin: clamp(40px, 6vh, 80px) 0 0; border-top: var(--rule); max-width: 1180px; }
.faq__row {
  display: grid; gap: 6px var(--space-l);
  padding-block: clamp(16px, 2.4vh, 24px); border-bottom: var(--rule);
}
@media (min-width: 820px) { .faq__row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.faq dt { font-family: var(--font-display); font-size: var(--type-1); line-height: 1.3; color: var(--ink-900); }
.faq dd { margin: 0; color: var(--ink-600); max-width: 60ch; }

.foot__made { margin: 0; }
.foot__made a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink-400); text-decoration: none; letter-spacing: .02em;
}
.foot__made a:hover { color: var(--ink-900); text-decoration: underline; text-underline-offset: 4px; }