/* =========================================================
   Virtuelna galerija — stilovi stranice
   Samo var(--...) tokeni. Bez sjenki, bez gradijenata,
   bez radiusa preko 2px.
   ========================================================= */

/* ---------------------------------------------------------
   Korijen i prebacivanje stanja
   data-stanje: ulaz | ucitavanje | soba | 2d
   data-razlog: webgl | fajl | cdn | podaci | json | prazno
   (smanjeno kretanje NIJE razlog za 2D — sala radi i tada)
   --------------------------------------------------------- */

/* Uvod stranice: razmak ispod naslova (silazni potezi slova H1 su
   dodirivali uvodni pasus) i bez ~220 px praznine do sale — sala je
   nastavak uvoda, ne nova sekcija. Ovdje, a ne .mt-* klasama, jer
   pravila komponenti u strane.css nadjačavaju pomoćne klase. */
.galerija-uvod .naslov-1 + .uvodni { margin-top: var(--s-4); }
.galerija-uvod { padding-bottom: 0; }
.galerija-uvod + .sekcija { padding-top: var(--s-6); }

.galerija {
  margin-top: var(--s-6);

  /* Mjere okna, na jednom mjestu. Medija upiti na dnu mijenjaju samo
     ove promjenljive, a HUD i panel ih čitaju — pa se dugmad i panel
     nikad ne preklapaju, ma koja da je širina.
     --visina-sale   visina okna (ulaz, platno)
     --sirina-panela panel sa desne strane (desktop, tablet, telefon položeno)
     --visina-panela panel odozdo (uspravni telefon)
     --hud-odmak     razmak dugmadi od ivice okna */
  --visina-sale:   min(72vh, 680px);
  --sirina-panela: min(30rem, 86%);
  --visina-panela: 40%;
  --hud-odmak:     var(--s-4);
}

/* Tamna soba (ulaz + platno) — skrivena kad se ide na 2D, i prije nego
   JS postavi data-stanje (bez JS-a, ili bez podrške za ES module,
   dugme "Uđi u salu" ne bi radilo) */
.galerija:not([data-stanje]) .galerija-scena,
.galerija[data-stanje="2d"] .galerija-scena { display: none; }

/* 2D mreža — vidljiva u stanju 2d i dok stanja još nema */
.galerija-2d { display: none; }
.galerija:not([data-stanje]) .galerija-2d,
.galerija[data-stanje="2d"] .galerija-2d { display: block; }

/* JS radi (js/rano.js postavi <html data-js>), ali galerija.js još nije
   postavio stanje: mreža ostaje skrivena — inače bi se njene lijene
   slike preuzimale ni za koga. Umjesto nje se drži mjesto za salu, da
   stranica ne poskoči. Bez JS-a i u stanju 2d (nema WebGL-a, greška)
   mreža se vidi kao i prije. */
html[data-js] .galerija:not([data-stanje]) .galerija-2d { display: none; }
html[data-js] .galerija:not([data-stanje]) .galerija-scena { display: block; }

/* Objašnjenje za slučaj bez JavaScripta — samo dok stanja nema */
.galerija[data-stanje] .galerija-2d__razlog--js { display: none; }
.galerija:not([data-stanje]) .galerija-2d__razlog--js { display: block; }

/* ---------------------------------------------------------
   Scena — tamna ploča koja drži ulaz, platno, HUD i panel
   --------------------------------------------------------- */

.galerija-scena {
  position: relative;
  overflow: hidden;
  min-height: var(--visina-sale);
  background-color: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink);
}

/* ---------------------------------------------------------
   Ulazni ekran
   --------------------------------------------------------- */

.galerija-ulaz {
  display: none;
  position: relative;
  min-height: var(--visina-sale);
  box-sizing: border-box;
  padding: var(--s-7) var(--gutter);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--s-4);
  max-width: 54ch;
}

.galerija[data-stanje="ulaz"] .galerija-ulaz { display: flex; }

/* Tiha šrafura u donjem desnom uglu ploče — potpis sajta.
   Stoji na .galerija-scena, ne na .galerija-ulaz: ulaz je sužen na 54ch
   pa bi šrafura završila nasred ploče. Token --hatch je crn (za svijetli
   papir), pa se na tamnoj ploči obrće u svijetle linije — boja se ne
   izmišlja, samo se obrće. Maska uklanja tvrdu ivicu pravougaonika. */
.galerija[data-stanje="ulaz"] .galerija-scena::after {
  content: "";
  position: absolute;
  inset: auto 0 0 auto;
  width: min(34rem, 46%);
  height: min(22rem, 58%);
  background-image: var(--hatch);
  filter: invert(1);
  opacity: 0.11;
  pointer-events: none;
  /* Maska uzima samo alfu, boja stopa je nebitna — zato stoji token, a ne
     hex: pravilo "nijedan hex u komponenti" važi i ovdje. */
  -webkit-mask-image: radial-gradient(120% 120% at 100% 100%, var(--ink) 30%, transparent 72%);
  mask-image: radial-gradient(120% 120% at 100% 100%, var(--ink) 30%, transparent 72%);
}

/* Ukras ulaza: jedno djelo (Kastro), iskošeno kao da visi na zidu
   koji odmiče udesno, pod svjetlom reflektora.
   - Računar i tablet (> 720px): u desnom dijelu ploče, pored teksta (ulaz je 54ch).
   - Telefon: na vrhu ploče, u sredini, iznad teksta. Dok se blok skroluje u kadar, slika se polako
     okreće ka posjetiocu (samo gdje pregledač zna animation-timeline
     i nije uključeno smanjeno kretanje; inače stoji pod istim uglom). */
.galerija-ulaz-slika { display: none; }

.galerija[data-stanje="ulaz"] .galerija-ulaz-slika {
  display: block;
  position: relative;
  z-index: 1;               /* iznad šrafure (::after scene) */
  margin: 0;
  pointer-events: none;
}

/* Svjetlo reflektora na zidu — mrlja iznad i iza slike. */
.galerija-ulaz-slika::before {
  content: "";
  position: absolute;
  inset: -45% -40% -25%;
  z-index: -1;
  background: radial-gradient(50% 55% at 50% 35%,
    color-mix(in srgb, var(--ink) 13%, transparent),
    transparent 75%);
}

.galerija-ulaz-slika img {
  display: block;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  border: clamp(5px, 0.6vw, 9px) solid black;
  outline: 1px solid var(--rule-strong);
  box-shadow:
    1.4rem 1.6rem 2.4rem color-mix(in srgb, black 60%, transparent),
    0.3rem 0.4rem 0.6rem color-mix(in srgb, black 45%, transparent);
}

@media (min-width: 721px) {
  .galerija[data-stanje="ulaz"] .galerija-ulaz-slika {
    position: absolute;
    top: 50%;
    right: clamp(2rem, 8%, 7rem);
    width: min(32%, 26rem);
    transform: translateY(-50%) perspective(1200px) rotateY(-27deg);
  }
}

/* Uži tablet: tekst zauzima više od pola ploče, slika se privija uz desnu ivicu. */
@media (min-width: 721px) and (max-width: 959px) {
  .galerija[data-stanje="ulaz"] .galerija-ulaz-slika { right: 4%; width: 28%; }
}

@media (max-width: 720px) {
  /* Telefon: slika je prva stvar u bloku — kao prvi pogled kroz vrata
     sale. Stoji na vrhu, u sredini, okrenuta kao da visi na zidu koji
     odmiče udesno; ispod nje tekst preko cijele širine, pa se naslov
     ne lomi i ništa ne mora da se provlači pored slike. */
  .galerija[data-stanje="ulaz"] .galerija-ulaz-slika {
    width: min(56%, 15.5rem);
    margin: var(--s-7) auto 0;
    transform: perspective(800px) rotateY(-24deg);
    pointer-events: auto;                /* dodir vodi u salu, kao dugme */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .galerija[data-stanje="ulaz"] .galerija-ulaz { padding-top: var(--s-6); }

  /* Svjetlo pada odozgo, uži snop nego na računaru. */
  .galerija-ulaz-slika::before {
    inset: -35% -30% -15%;
    background: radial-gradient(45% 55% at 50% 30%,
      color-mix(in srgb, var(--ink) 15%, transparent),
      transparent 75%);
  }
}

@keyframes galerija-kastro-okret {
  from { transform: perspective(800px) rotateY(-34deg); }
  to   { transform: perspective(800px) rotateY(-18deg); }
}

@supports (animation-timeline: view()) {
  @media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
    .galerija[data-stanje="ulaz"] .galerija-ulaz-slika {
      animation: galerija-kastro-okret linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 60%;
    }
  }
}

.galerija-ulaz__oznaka {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-xwide);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.galerija-ulaz__naslov {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 500;
  line-height: var(--leading-tight);
  color: var(--ink);
}

.galerija-uputstvo {
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-3);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  line-height: var(--leading-snug);
  color: var(--ink-soft);
}

.galerija-uputstvo li {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}

.galerija-uputstvo__opis { flex: 1 1 auto; }

.galerija-uputstvo__tipka {
  flex: 0 0 auto;
  min-width: 6.5em;
  padding: var(--s-1) var(--s-2);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-muted);
}

.galerija-uputstvo em {
  font-style: normal;
  color: var(--ink);
}

.galerija-ulaz__dugme {
  margin-top: var(--s-3);
  min-height: 44px;          /* dodirna meta */
}

.galerija-ulaz__napomena {
  margin: 0;
  max-width: var(--measure);
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  line-height: var(--leading-body);
  color: var(--ink-muted);
}

/* Napomena o smanjenom kretanju — vidljiva SAMO onima koji su ga
   uključili. Sala u tom slučaju radi (kamera skače umjesto da klizi),
   pa ovo nije poruka o grešci nego najava ponašanja. Tanka linija
   lijevo, bez akcenta — akcenat na ekranu nosi dugme "Uđi u salu". */
.galerija-ulaz__napomena--kretanje {
  display: none;
  padding-left: var(--s-4);
  border-left: 1px solid var(--rule-strong);
}

@media (prefers-reduced-motion: reduce) {
  .galerija-ulaz__napomena--kretanje { display: block; }
}

/* ---------------------------------------------------------
   Platno
   --------------------------------------------------------- */

.galerija-platno {
  display: none;
  width: 100%;
  height: var(--visina-sale);
}

.galerija[data-stanje="ucitavanje"] .galerija-platno,
.galerija[data-stanje="soba"] .galerija-platno { display: block; }

/* Kamera centrira izabrano djelo u kadru, a panel pokriva desni dio
   okna — pa bi pola slike bilo pod panelom. Zato se cijelo platno
   pomjeri ulijevo za pola širine panela: djelo staje u sredinu
   VIDLJIVOG dijela. Lijeva ivica sale ode van okna (overflow: hidden),
   desna je ionako pod panelom. Procenat u translate se računa od
   širine samog platna, koja je jednaka širini okna — isto kao širina
   panela. Pogađanje djela klikom radi i dalje: js/galerija.js čita
   getBoundingClientRect(), koji pomjeraj uračunava. */
.galerija-platno {
  transition: transform var(--dur-slow) var(--ease);
}

.galerija[data-izabrano][data-panel="otvoren"] .galerija-platno {
  transform: translateX(calc(var(--sirina-panela) / -2));
}

.galerija-platno canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  /* U pregledu sobe prevlačenje LIJEVO-DESNO okreće pogled (js/galerija.js),
     a gore-dolje i dalje pripada stranici: `pan-y` pušta prst da skroluje
     stranicu preko platna, a vodoravni pokret predaje skriptu. `none` bi
     ovdje zarobio prst nad salom. Dvoklik-zum je ugašen i ovim, pa tap
     na platno odmah bira djelo. */
  touch-action: pan-y;
  cursor: pointer;             /* klik bira djelo */
  outline: none;
}

/* Pred izabranim djelom svaki pokret pripada sali: jedan prst kruži oko
   platna, dva prsta približavaju. Stranica se tada ne skroluje preko
   okna — izlaz je Esc, „Pregled“ ili tap pored djela. */
.galerija[data-izabrano] .galerija-platno canvas {
  touch-action: none;
  cursor: grab;
}

.galerija[data-izabrano] .galerija-platno canvas:active { cursor: grabbing; }

/* Platno dobija fokus kad se uđe u salu (tabindex u js/galerija.js), pa
   fokus mora biti vidljiv — unutrašnji outline, da ga ivica ploče ne reže. */
.galerija-platno canvas:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

/* Poruka tokom preuzimanja */
.galerija-ucitavanje {
  display: none;
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  letter-spacing: var(--track-wide);
  color: var(--ink-muted);
}

.galerija[data-stanje="ucitavanje"] .galerija-ucitavanje { display: block; }

/* ---------------------------------------------------------
   HUD — izlaz, FPS, kretanje na dodir
   --------------------------------------------------------- */

.galerija-hud { display: none; }

/* HUD je providan sloj preko DIJELA okna koji panel ne pokriva: desna
   (ili donja) ivica mu se pomjera za širinu (visinu) panela dok je panel
   otvoren. Dugmad su ćelije jedne mreže, pa ne mogu jedno preko drugog,
   a nijedno ne može pod panel. Sam sloj ne hvata pokazivač
   (pointer-events: none) — prevlačenje po praznom dijelu ide na platno. */
.galerija[data-stanje="soba"] .galerija-hud {
  position: absolute;
  inset: var(--hud-odmak);
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto auto;
  grid-template-areas:
    "traka"
    "."
    "ugao"
    "kretanje";
  justify-items: start;
  gap: var(--s-2);
  pointer-events: none;
}

.galerija[data-stanje="soba"][data-panel="otvoren"] .galerija-hud {
  right: calc(var(--sirina-panela) + var(--hud-odmak));
}

.galerija-hud__traka,
.galerija-kretanje,
.galerija-ugao { pointer-events: auto; }

/* Dugmad stoje LIJEVO, a ne desno, i to je mjereno a ne stvar ukusa:
   panel sa podacima zauzima desnu stranu okna (min(30rem, 86%), cijela
   visina). Kad je bio u desnom uglu, panel ga je prekrivao i „Izađi“,
   „Pregled“ i strelice su postajali neklikabilni dok je panel otvoren —
   a panel se sada otvara sam, pri svakom izboru djela. Lijeva traka
   nikad nije pod panelom, pa ništa ne mora da skače pri otvaranju. */
.galerija-hud__traka {
  grid-area: traka;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.galerija-hud__dugme {
  appearance: none;
  min-height: 44px;          /* dodirna meta */
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background-color: var(--paper-warm);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.galerija-hud__dugme:hover { color: var(--accent); border-color: var(--accent); }

.galerija-hud__dugme:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.galerija-hud__dugme[aria-pressed="false"] { color: var(--ink-faint); }

/* Sitan brojač FPS-a u uglu */
.galerija-fps {
  min-width: 5.5em;
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-wide);
  text-align: right;
  color: var(--ink-muted);
}

.galerija[data-fps="ne"] .galerija-fps { visibility: hidden; }

/* Kretanje među djelima: Pregled · ◀ · ▶
   Rade isto što i tastatura, pa i na telefonu gdje tastature nema. */
.galerija-kretanje {
  grid-area: kretanje;
  display: flex;
  gap: var(--s-2);
}

.galerija-kretanje__dugme {
  appearance: none;
  min-height: 44px;          /* dodirna meta */
  min-width: 5.5rem;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background-color: var(--paper-warm);
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

/* Strelice su uže od "Pregleda" — jedan znak ne traži 5.5rem */
.galerija-kretanje__dugme--strelica {
  min-width: 44px;
  padding: var(--s-3);
  font-size: var(--t-sm);
  letter-spacing: 0;
}

.galerija-kretanje__dugme:hover,
.galerija-kretanje__dugme:active { color: var(--accent); border-color: var(--accent); }

.galerija-kretanje__dugme:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* "Pregled" dok si već u pregledu: prigušen, ali ostaje u Tab redu
   (aria-disabled, ne disabled) i dalje reaguje — samo ne obećava promjenu. */
.galerija-kretanje__dugme[aria-disabled="true"] {
  color: var(--ink-faint);
  border-color: var(--rule);
}

.galerija-kretanje__dugme[aria-disabled="true"]:hover {
  color: var(--ink-faint);
  border-color: var(--rule);
}

/* Uglovi gledanja: Lijevo · Sprijeda · Desno · Izbliza · Bočno svjetlo.
   Postoje SAMO dok je djelo izabrano (data-izabrano postavlja JS);
   u pregledu sobe nemaju oko čega da kruže. Na širokom ekranu se
   prelamaju u dva reda ako ne stanu; na telefonu su jedan red koji
   se skroluje prstom (vidi medija upite). */
.galerija-ugao {
  grid-area: ugao;
  display: none;
  flex-wrap: wrap;
  gap: var(--s-2);
  max-width: 100%;
}

.galerija[data-stanje="soba"][data-izabrano] .galerija-ugao { display: flex; }

/* Natpisi su riječi, ne jedan znak — širina po sadržaju, ne fiksnih 5.5rem */
.galerija-ugao__dugme {
  flex: 0 0 auto;
  min-width: 44px;
  white-space: nowrap;
}

/* Prekidač bočnog svjetla: upaljen nosi akcenat, ugašen je običan.
   (Ugašeno dugme NE ide u --ink-faint kao FPS — ono mora ostati čitljivo
   i pozivati na klik.) */
.galerija-ugao__prekidac[aria-pressed="true"] {
  color: var(--accent);
  border-color: var(--accent);
  background-color: var(--paper-deep);
}

/* ---------------------------------------------------------
   Panel sa podacima o djelu
   Klizne sa desne strane na desktopu, odozdo na mobilnom.
   Pozadina --paper (unutar .soba-tamna je tamna), tanka linija, bez sjenke.

   Panel se otvara zajedno sa kretanjem kamere ka djelu i NE otima
   fokus (vidi js/galerija.js — role="region", ne "dialog"), pa je
   `visibility: hidden` ovdje bezbjedan: ništa fokusabilno u njemu
   se ne traži dok je sakriven.
   --------------------------------------------------------- */

.galerija-panel {
  position: absolute;
  inset: 0 0 auto auto;
  z-index: 2;
  box-sizing: border-box;
  width: var(--sirina-panela);
  height: 100%;
  overflow-y: auto;
  padding: var(--s-6) var(--s-6) var(--s-7);
  background-color: var(--paper);
  border-left: 1px solid var(--rule-strong);
  border-radius: 0;
  transform: translateX(101%);
  visibility: hidden;
  transition: transform var(--dur) var(--ease), visibility var(--dur) var(--ease);
}

.galerija[data-panel="otvoren"] .galerija-panel {
  transform: translateX(0);
  visibility: visible;
}

/* Panel prima fokus na klik (vidi js/galerija.js), ali nije stanica za
   Tab — okvir fokusa oko cijelog panela bi samo smetao. */
.galerija-panel:focus { outline: none; }

.galerija-panel__zatvori {
  appearance: none;
  position: absolute;
  inset: var(--s-4) var(--s-4) auto auto;
  width: 44px;               /* dodirna meta */
  height: 44px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background-color: transparent;
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: var(--t-md);
  line-height: 1;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.galerija-panel__zatvori:hover { color: var(--accent); border-color: var(--accent); }

.galerija-panel__zatvori:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Strelica koja izvlači i sklapa karticu — postoji samo na uspravnom
   telefonu, gdje je panel odozdo (upit niže). Pravi je js/galerija.js. */
.galerija-panel__vise { display: none; }

.galerija-panel__oznaka {
  margin: 0 0 var(--s-2);
  color: var(--ink-muted);
}

.galerija-panel__naziv {
  margin: 0 0 var(--s-5);
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 500;
  line-height: var(--leading-tight);
  color: var(--ink);
}

.galerija-panel__meta {
  margin: 0 0 var(--s-5);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: var(--s-2) var(--s-4);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
}

.galerija-panel__meta dt {
  margin: 0;
  font-size: var(--t-xs);
  letter-spacing: var(--track-xwide);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.galerija-panel__meta dd {
  margin: 0;
  color: var(--ink);
}

.galerija-panel__opis {
  margin: 0 0 var(--s-5);
  max-width: var(--measure);
  font-family: var(--font-ui);
  font-size: var(--t-base);
  line-height: var(--leading-body);
  color: var(--ink-soft);
}

.galerija-panel__link { display: inline-block; }

.galerija-panel__napomena {
  margin: var(--s-6) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  line-height: var(--leading-body);
  color: var(--ink-muted);
}

/* ---------------------------------------------------------
   2D zamjena — ista djela u običnoj mreži
   --------------------------------------------------------- */

.galerija-2d__poruka {
  max-width: var(--measure);
  margin-bottom: var(--s-7);
  padding-left: var(--s-5);
  border-left: 2px solid var(--accent);
}

.galerija-2d__poruka .naslov-3 { margin-top: 0; }

/* Razlog se otkriva prema data-razlog na .galerija */
.galerija-2d__razlog {
  display: none;
  margin: var(--s-3) 0 0;
  font-family: var(--font-ui);
  font-size: var(--t-base);
  line-height: var(--leading-body);
  color: var(--ink-soft);
}

.galerija[data-razlog="webgl"]  .galerija-2d__razlog[data-razlog="webgl"],
.galerija[data-razlog="fajl"]   .galerija-2d__razlog[data-razlog="fajl"],
.galerija[data-razlog="cdn"]    .galerija-2d__razlog[data-razlog="cdn"],
.galerija[data-razlog="podaci"] .galerija-2d__razlog[data-razlog="podaci"],
.galerija[data-razlog="json"]   .galerija-2d__razlog[data-razlog="json"],
.galerija[data-razlog="prazno"] .galerija-2d__razlog[data-razlog="prazno"] {
  display: block;
}

.galerija-2d__razlog code {
  font-size: 0.92em;
  color: var(--ink);
}

/* .mreza--3 iz base.css je auto-fit, pa u širokom omotu daje četiri kolone.
   Ovdje želimo najviše tri — sedam djela u tri mirna reda. */
.galerija-2d__mreza {
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-7) var(--s-6);
}

@media (max-width: 900px) {
  .galerija-2d__mreza { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .galerija-2d__mreza { grid-template-columns: 1fr; }
}

/* Djela su različitih proporcija, pa se potpisi poravnavaju tako što
   svaka ćelija ima istu visinu, a slika se u njoj centrira. */
.galerija-2d__mreza > li {
  display: flex;
  flex-direction: column;
}

.galerija-2d__djelo {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.galerija-2d__djelo > a { flex: 1 1 auto; }

.galerija-2d__okvir {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  box-sizing: border-box;
  padding: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background-color: var(--paper-warm);
}

.galerija-2d__djelo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 20rem;
  object-fit: contain;
  border-radius: 0;
}

.galerija-2d__djelo a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.galerija-2d__djelo a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.galerija-2d__djelo figcaption {
  display: grid;
  gap: var(--s-1);
  margin-top: var(--s-3);
}

.galerija-2d__naziv {
  font-family: var(--font-display);
  font-size: var(--t-md);
  line-height: var(--leading-snug);
  color: var(--ink);
}

.galerija-2d__meta {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  letter-spacing: var(--track-wide);
  color: var(--ink-muted);
}

.galerija-svi-radovi {
  max-width: var(--measure);
  margin: var(--s-6) 0 0;
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  line-height: var(--leading-body);
  color: var(--ink-muted);
}

/* ---------------------------------------------------------
   Sekcija "Šta ovdje još ne radi"
   --------------------------------------------------------- */

.galerija-nedostaci__uvod {
  max-width: var(--measure);
  font-family: var(--font-ui);
  font-size: var(--t-base);
  line-height: var(--leading-body);
  color: var(--ink-soft);
}

.galerija-nedostaci { margin-top: var(--s-6); }

.galerija-spisak {
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-4);
  max-width: var(--measure);
}

.galerija-spisak li {
  padding-left: var(--s-5);
  border-left: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  line-height: var(--leading-body);
  color: var(--ink-soft);
}

.galerija-spisak--ne li { border-left-color: var(--rule-strong); }

.galerija-spisak strong {
  display: block;
  font-weight: 500;
  color: var(--ink);
}

.galerija-spisak code {
  font-size: 0.92em;
  color: var(--ink);
}

/* ---------------------------------------------------------
   Prilagođavanje ekranu
   Laptop/desktop (> 1024px) je osnova iznad. Redom ispod:
   tablet (721–1024), telefon uspravno (≤ 720, panel odozdo),
   vrlo uski ekrani (≤ 380), telefon položeno (visina ≤ 500).
   Svuda važi: dugmad su ≥ 44px, HUD nikad ne ulazi pod panel.
   --------------------------------------------------------- */

/* Tablet: panel uži, da lijevo ostane mjesta za sliku i dugmad.
   Okno više — na uspravnom tabletu 680px je tek pola ekrana. */
@media (min-width: 721px) and (max-width: 1024px) {
  .galerija {
    --sirina-panela: min(21rem, 46%);
    --visina-sale:   min(72vh, 820px);
  }
  .galerija-panel { padding: var(--s-5) var(--s-5) var(--s-6); }
}

@media (max-width: 720px) {

  /* Okno skoro do dna ekrana, ispod ljepljivog zaglavlja: na telefonu
     se u sali radi prstom, pa je svaki piksel kadra bitan.
     `vh` je rezerva za pregledače bez `dvh`; `dvh` ne skače kad se
     traka sa adresom sakrije. */
  .galerija {
    --visina-sale:   max(26rem, calc(100vh - var(--h-zaglavlje) - var(--s-5)));
    --visina-panela: 40%;
    --hud-odmak:     var(--s-3);
  }

  @supports (height: 100dvh) {
    .galerija {
      --visina-sale: max(26rem, calc(100dvh - var(--h-zaglavlje) - var(--s-5)));
    }
  }

  /* Ulazni ekran nosi dosta teksta — ne treba mu cijeli ekran */
  .galerija-ulaz {
    min-height: 0;
    padding: var(--s-6) var(--s-5);
    max-width: none;
  }

  .galerija-scena { min-height: 0; }

  .galerija-uputstvo li {
    flex-direction: column;
    gap: var(--s-1);
  }

  .galerija-uputstvo__tipka {
    min-width: 0;
    align-self: flex-start;
  }

  /* Panel klizne odozdo, stalne visine (--visina-panela), a sadržaj se
     u njemu skroluje. Stalna visina, ne `auto`: HUD mora znati gdje
     panel počinje da bi red sa uglovima stao tačno iznad njega —
     a gornjih 60% okna ostaje za sliku oko koje se kruži. */
  .galerija-panel {
    inset: auto 0 0 0;
    width: 100%;
    height: var(--visina-panela);
    max-height: none;
    padding: var(--s-4) var(--s-5) var(--s-5);
    border-left: 0;
    border-top: 1px solid var(--rule-strong);
    transform: translateY(101%);
  }

  .galerija[data-panel="otvoren"] .galerija-panel { transform: translateY(0); }

  .galerija-panel__zatvori { inset: var(--s-2) var(--s-3) auto auto; }

  /* Panel je ovdje odozdo, pa se platno pomjera NAGORE: za pola visine
     panela, umanjeno za dvije gornje trake (≈ 2rem nazad), da djelo
     stane između „Pregled ◀ ▶“ i reda sa uglovima. */
  .galerija[data-izabrano][data-panel="otvoren"] .galerija-platno {
    transform: translateY(calc(var(--visina-panela) / -2 + 2rem));
  }

  /* Niži panel — razmaci se skupljaju da naziv, podaci i početak
     opisa stanu bez skrolovanja. */
  .galerija-panel__naziv {
    margin-bottom: var(--s-3);
    padding-right: calc(44px + var(--s-2));   /* ne ispod dugmeta × */
    font-size: var(--t-md);
  }
  .galerija-panel__meta {
    grid-template-columns: 6.5rem 1fr;
    padding: var(--s-3) 0;
    margin-bottom: var(--s-3);
  }
  .galerija-panel__opis {
    margin-bottom: var(--s-3);
    font-size: var(--t-sm);
  }
  .galerija-panel__napomena { margin-top: var(--s-4); }

  /* HUD: gore „Izađi · FPS“ pa „Pregled ◀ ▶“ — dvije trake jedna pod
     drugom, izvan domašaja panela. Red sa uglovima stoji dolje, odmah
     iznad panela. Dok je panel otvoren, HUD se završava tamo gdje
     panel počinje, pa nijedno dugme ne može pod njega. */
  .galerija[data-stanje="soba"] .galerija-hud {
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "traka"
      "kretanje"
      "."
      "ugao";
  }

  .galerija[data-stanje="soba"][data-panel="otvoren"] .galerija-hud {
    right: var(--hud-odmak);
    bottom: calc(var(--visina-panela) + var(--s-2));
  }

  .galerija-kretanje__dugme { min-width: 4.75rem; padding: var(--s-3); }
  .galerija-kretanje__dugme--strelica { min-width: 44px; }

  /* Uglovi: jedan red, prst ga skroluje vodoravno. `pan-x` da vodoravni
     pokret ne ode stranici, a `contain` da skrol ne pređe na stranicu
     kad se dođe do kraja reda. Unutrašnji odmak od 2px čuva okvir
     fokusa od sječenja; negativna margina vraća red na mjesto. */
  .galerija-ugao {
    flex-wrap: nowrap;
    justify-self: stretch;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    touch-action: pan-x;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 2px;
    padding: 2px;
    margin: -2px;
  }

  .galerija-ugao__dugme { scroll-snap-align: start; }

  .galerija-ugao::-webkit-scrollbar { display: none; }

  .galerija-ugao__dugme {
    min-width: 44px;
    padding: var(--s-3);
  }
}

/* Uspravni telefon: kartica djela odozdo je SKLOPLJENA — vide se samo
   serija i naziv, a slika ostaje slobodna. Strelica, dodir na karticu
   ili prevlačenje nagore je izvlači (js/galerija.js, data-kartica).
   Visinu kartice nosi --visina-panela, pa je platno, HUD i poruka
   prate same. Položen telefon ima panel sa strane i ovo ga ne dira. */
@media (max-width: 720px) and (orientation: portrait),
       (max-width: 720px) and (min-height: 501px) {
  .galerija { --visina-trake: 5.25rem; }
  .galerija[data-kartica="sklopljena"] { --visina-panela: var(--visina-trake); }
  .galerija[data-kartica="puna"]       { --visina-panela: 55%; }

  .galerija-panel {
    padding-top: var(--s-4);
    overflow: hidden;
    touch-action: none;        /* prevlačenje pomjera karticu, ne stranicu */
    transition: transform var(--dur) var(--ease), visibility var(--dur) var(--ease),
                height var(--dur) var(--ease);
  }
  .galerija[data-kartica="sklopljena"] .galerija-panel { cursor: pointer; }
  .galerija[data-kartica="puna"] .galerija-panel {
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;       /* opis se skroluje prstom */
  }

  /* Ručica na vrhu: znak da se kartica vuče */
  .galerija-panel::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    width: 2.5rem;
    height: 4px;
    margin-left: -1.25rem;
    border-radius: 2px;
    background-color: var(--rule-strong);
  }

  /* Desno dvije mete od 44px: strelica pa ×. Serija i naziv staju u
     jedan red, sa „…“ ako su duži. */
  .galerija-panel__zatvori { inset: var(--s-3) var(--s-3) auto auto; }
  .galerija-panel__vise {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: var(--s-3) calc(var(--s-3) + 44px + var(--s-2)) auto auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background-color: transparent;
    color: var(--ink-soft);
    cursor: pointer;
  }
  .galerija-panel__vise:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }
  .galerija-panel__vise svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--dur) var(--ease);
  }
  .galerija-panel__vise[aria-expanded="true"] svg { transform: rotate(180deg); }

  .galerija-panel__oznaka,
  .galerija-panel__naziv {
    padding-right: calc(88px + var(--s-3));
  }
  .galerija-panel__naziv { max-width: none; }
  .galerija-panel__oznaka {
    margin-bottom: var(--s-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .galerija[data-kartica="sklopljena"] .galerija-panel__naziv {
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Sklopljena: podaci, opis i veza su ispod ivice — i nevidljivi,
     da do njih ne dođe ni Tab ni čitač ekrana dok se ne izvuku. */
  .galerija[data-kartica="sklopljena"] .galerija-panel__meta,
  .galerija[data-kartica="sklopljena"] .galerija-panel__opis,
  .galerija[data-kartica="sklopljena"] .galerija-panel__link,
  .galerija[data-kartica="sklopljena"] .galerija-panel__napomena {
    visibility: hidden;
  }
}

@media (max-width: 720px) and (orientation: portrait) and (prefers-reduced-motion: reduce),
       (max-width: 720px) and (min-height: 501px) and (prefers-reduced-motion: reduce) {
  .galerija-panel,
  .galerija-panel__vise svg { transition: none; }
}

/* Vrlo uski ekrani (do 380px): gap i padding se skupljaju da trake ne
   guraju okno u horizontalni skrol — natpisi ostaju čitljivi, a dodirne
   mete ostaju 44px visoke. */
@media (max-width: 380px) {
  .galerija-kretanje,
  .galerija-ugao { gap: var(--s-1); }
  .galerija-kretanje__dugme { min-width: 4.25rem; padding: var(--s-2); }
  .galerija-kretanje__dugme--strelica { min-width: 44px; padding: var(--s-2); }
  .galerija-ugao__dugme { min-width: 44px; padding: var(--s-2); }
  .galerija-hud__traka { gap: var(--s-1); }
  .galerija-hud__dugme { padding: var(--s-2) var(--s-3); }
  .galerija-fps { min-width: 4.5em; }
}

/* Telefon položeno (i svaki nizak prozor): panel odozdo bi pojeo
   skoro cijelo okno, pa se vraća na desnu stranu, uži. Okno je visoko
   koliko ekran dozvoli ispod zaglavlja. Gore samo „Izađi · FPS“, a
   dolje u jednom redu „Pregled ◀ ▶“ i uglovi (koji se skroluju) —
   sredina kadra ostaje slici. Stoji POSLIJE upita za ≤ 720px, pa
   pobjeđuje i na položenim telefonima užim od 720px. */
@media (max-height: 500px) and (orientation: landscape) {
  .galerija {
    --visina-sale:   max(17.5rem, calc(100vh - var(--h-zaglavlje) - var(--s-2)));
    --sirina-panela: min(17rem, 40%);
    --hud-odmak:     var(--s-3);
  }

  @supports (height: 100dvh) {
    .galerija {
      --visina-sale: max(17.5rem, calc(100dvh - var(--h-zaglavlje) - var(--s-2)));
    }
  }

  .galerija-ulaz { min-height: 0; max-width: none; }
  .galerija-scena { min-height: 0; }

  .galerija-panel {
    inset: 0 0 auto auto;
    width: var(--sirina-panela);
    height: 100%;
    max-height: none;
    padding: var(--s-4) var(--s-4) var(--s-5);
    border-top: 0;
    border-left: 1px solid var(--rule-strong);
    transform: translateX(101%);
  }

  .galerija[data-panel="otvoren"] .galerija-panel { transform: translateX(0); }

  .galerija[data-izabrano][data-panel="otvoren"] .galerija-platno {
    transform: translateX(calc(var(--sirina-panela) / -2));
  }

  .galerija-panel__naziv {
    margin-bottom: var(--s-3);
    padding-right: calc(44px + var(--s-2));
    font-size: var(--t-md);
  }
  .galerija-panel__meta {
    grid-template-columns: 5.5rem 1fr;
    padding: var(--s-2) 0;
    margin-bottom: var(--s-3);
  }
  .galerija-panel__opis { font-size: var(--t-sm); margin-bottom: var(--s-3); }

  .galerija[data-stanje="soba"] .galerija-hud {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "traka    traka"
      ".        ."
      "kretanje ugao";
    column-gap: var(--s-3);
  }

  .galerija[data-stanje="soba"][data-panel="otvoren"] .galerija-hud {
    right: calc(var(--sirina-panela) + var(--hud-odmak));
    bottom: var(--hud-odmak);
  }

  .galerija-kretanje__dugme { min-width: 4.75rem; padding: var(--s-3); }
  .galerija-kretanje__dugme--strelica { min-width: 44px; }

  .galerija-ugao {
    flex-wrap: nowrap;
    justify-self: stretch;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    touch-action: pan-x;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 2px;
    padding: 2px;
    margin: -2px;
  }

  .galerija-ugao__dugme { scroll-snap-align: start; }

  .galerija-ugao::-webkit-scrollbar { display: none; }

  .galerija-ugao__dugme { padding: var(--s-3); }
}

/* ---------------------------------------------------------
   Smanjeno kretanje — panel se pojavljuje bez klizanja.
   Sala i dalje RADI: u js/galerija.js kamera u tom slučaju skače
   odmah na izabrano djelo i paralaksa je ugašena. Ovdje se gase
   samo CSS prelazi.
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .galerija-panel {
    transition: none;
    transform: none;
  }
  /* Platno se i dalje pomjera od panela (inače bi djelo bilo pod njim),
     samo odmah, bez klizanja. */
  .galerija-platno { transition: none; }
  .galerija-hud__dugme,
  .galerija-kretanje__dugme,
  .galerija-panel__zatvori { transition: none; }
}


/* ---------------------------------------------------------
   Traka ispod sale — kretanje i uglovi gledanja
   Dugmad su izvučena IZ okna, ispod slike, da ne zaklanjaju djelo.
   Ova pravila stoje na kraju fajla i namjerno poništavaju raniji
   raspored u HUD mreži (grid-area, vodoravni skrol na telefonu).
   --------------------------------------------------------- */

.galerija-alati { display: none; }

.galerija[data-stanje="soba"] .galerija-alati {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-2);
  padding: var(--s-3);
  background-color: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.galerija-alati .galerija-kretanje,
.galerija-alati .galerija-ugao {
  grid-area: auto;
  flex-wrap: wrap;
  overflow: visible;
  touch-action: manipulation;
  scroll-snap-type: none;
  padding: 0;
  margin: 0;
  gap: var(--s-2);
}

/* Na telefonu sala ustupa mjesto traci, da dugmad budu na ekranu
   bez skrolovanja. */
@media (max-width: 720px) {
  .galerija[data-stanje="soba"] {
    --visina-sale: max(20rem, calc(100vh - var(--h-zaglavlje) - 9rem));
  }
  @supports (height: 100dvh) {
    .galerija[data-stanje="soba"] {
      --visina-sale: max(20rem, calc(100dvh - var(--h-zaglavlje) - 9rem));
    }
  }
  .galerija[data-stanje="soba"] .galerija-alati { justify-content: flex-start; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .galerija[data-stanje="soba"] {
    --visina-sale: max(14rem, calc(100vh - var(--h-zaglavlje) - 4.5rem));
  }
  @supports (height: 100dvh) {
    .galerija[data-stanje="soba"] {
      --visina-sale: max(14rem, calc(100dvh - var(--h-zaglavlje) - 4.5rem));
    }
  }
  .galerija[data-stanje="soba"] .galerija-alati { flex-wrap: nowrap; overflow-x: auto; }
  .galerija-alati .galerija-ugao { flex-wrap: nowrap; }
}

/* ---------------------------------------------------------
   Lupa — krug koji uvećava dio djela (js/galerija.js, LUPA)
   Stoji u .galerija-platno, pa se pomjera zajedno sa njim kad
   panel gurne platno ulijevo. Ne hvata pokazivač: miš i prst
   prolaze kroz nju do 3D platna.
   --------------------------------------------------------- */

.galerija-platno { position: relative; }

.galerija-lupa {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  border: 3px solid #F3EEE4;
  box-shadow: 0 0 0 1px rgba(30, 26, 21, 0.5), 0 10px 30px rgba(0, 0, 0, 0.45);
  z-index: 1;
}

.galerija-lupa[hidden] { display: none; }

.galerija-lupa canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.galerija[data-izabrano] .galerija-platno canvas:has(~ .galerija-lupa:not([hidden])) { cursor: none; }

/* Natpis na prelaz miša — ista sadržina kao kartica na zidu */
.galerija-natpis {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 260px;
  padding: 12px 16px 13px;
  background: #F6F2EA;
  color: #1E1A15;
  border: 1px solid rgba(30, 26, 21, 0.18);
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.45;
  animation: galerija-natpis-ulaz 140ms ease-out;
}

.galerija-natpis[hidden] { display: none; }

.galerija-natpis__autor,
.galerija-natpis__serija {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6B6257;
}

.galerija-natpis__naziv {
  margin: 2px 0 3px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.15;
  color: #1E1A15;
}

.galerija-natpis__serija { margin-top: 6px; }
.galerija-natpis__serija:empty { display: none; }

@keyframes galerija-natpis-ulaz {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .galerija-natpis { animation: none; }
}

/* Izbliza — djelo preko cijelog ekrana, u najvećoj rezoluciji */
html.galerija-izbliza-otvoreno { overflow: hidden; }

.galerija-izbliza {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: #0E0C0A;
  color: #F3EEE4;
  animation: galerija-natpis-ulaz 180ms ease-out;
}

.galerija-izbliza__okno {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
  touch-action: none;
}

.galerija-izbliza__slika {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}

/* Puna veličina: 1 piksel fotografije = 1 piksel ekrana, kretanje po slici */
.galerija-izbliza.je-puna .galerija-izbliza__okno {
  display: block;
  overflow: auto;
  touch-action: pan-x pan-y;
  padding: 0;
  overscroll-behavior: contain;
}

.galerija-izbliza.je-puna .galerija-izbliza__slika {
  max-width: none;
  max-height: none;
  cursor: grab;
  box-shadow: none;
}

.galerija-izbliza.je-puna .galerija-izbliza__okno:active .galerija-izbliza__slika { cursor: grabbing; }

.galerija-izbliza__traka {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(243, 238, 228, 0.14);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.4;
}

.galerija-izbliza__opis {
  margin: 0;
  flex: 1 1 280px;
  min-width: 0;
}

.galerija-izbliza__opis strong {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: #F3EEE4;
}

.galerija-izbliza__opis span { color: rgba(243, 238, 228, 0.7); }

.galerija-izbliza__savjet {
  margin: 0;
  color: rgba(243, 238, 228, 0.55);
  font-size: 12px;
}

.galerija-izbliza__zatvori {
  min-height: 44px;
  padding: 0 18px;
  background: transparent;
  color: #F3EEE4;
  border: 1px solid rgba(243, 238, 228, 0.4);
  border-radius: 2px;
  font: inherit;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.galerija-izbliza__zatvori:hover { border-color: #F3EEE4; }
.galerija-izbliza__zatvori:focus-visible { border-color: #F3EEE4; outline: 2px solid #F3EEE4; outline-offset: 2px; }
/* Okno slike je fokusabilno (Enter = puna veličina, strelice skroluju) */
.galerija-izbliza__okno:focus-visible { outline: 2px solid #F3EEE4; outline-offset: -4px; }

@media (prefers-reduced-motion: reduce) {
  .galerija-izbliza { animation: none; }
}

/* =========================================================
   Vođena tura, mapa sale, savjeti, poruka, vinjeta
   ========================================================= */

/* Dugme „Obiđi izložbu“ je glavna radnja trake — oker okvir,
   a dok tura traje, tanka linija napretka po dnu dugmeta. */
.galerija-tura {
  position: relative;
  overflow: hidden;
  color: var(--accent);
  border-color: var(--accent);
}

.galerija-tura:hover,
.galerija-tura:focus-visible { color: var(--ink); border-color: var(--ink); }

.galerija[data-tura="radi"] .galerija-tura {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}

/* Mapa sale — gornji desni ugao okna, u istom redu kao traka */
.galerija-mapa {
  grid-area: traka;
  justify-self: end;
  align-self: start;
  pointer-events: auto;
  display: grid;
  justify-items: end;
  gap: 4px;
  width: 9.5rem;
}

.galerija-mapa:empty { display: none; }

.galerija-mapa__prekidac {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;          /* dodirna meta */
  padding: 0 12px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background-color: rgba(21, 18, 14, 0.72);
  color: var(--ink-soft);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  cursor: pointer;
}

.galerija-mapa__prekidac:hover { color: var(--accent); border-color: var(--accent); }
.galerija-mapa__prekidac:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.galerija-mapa__strelica {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(1px) rotate(-135deg);
  transition: transform var(--dur) var(--ease);
}

.galerija-mapa.je-skupljena .galerija-mapa__strelica { transform: translateY(-2px) rotate(45deg); }
.galerija-mapa.je-skupljena .galerija-mapa__crtez { display: none; }

.galerija-mapa__crtez {
  display: block;
  width: 100%;
  height: auto;
  padding: 6px;
  box-sizing: border-box;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background-color: rgba(21, 18, 14, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.galerija-mapa__pod { fill: rgba(176, 120, 72, 0.22); }

.galerija-mapa__zid {
  fill: none;
  stroke: #E9DFCF;
  stroke-width: 0.22;
  stroke-linecap: square;
}

.galerija-mapa__sala {
  fill: var(--ink-muted);   /* #8E8474 u .soba-tamna — 5:1 na tamnoj mapi (bilo je 1.89:1) */
  font-family: var(--font-ui);
  font-size: 1.05px;
  letter-spacing: 0.12px;
}

.galerija-mapa__djelo { cursor: pointer; outline: none; }
.galerija-mapa__meta { fill: transparent; }
/* Nevidljiva meta, ≥ 24 px na ekranu (poluprečnik računa js/galerija.js) */
.galerija-mapa__pogodak { fill: transparent; }
.galerija-mapa__tacka {
  fill: #E9DFCF;
  stroke: rgba(21, 18, 14, 0.9);
  stroke-width: 0.15;
  transition: fill 160ms ease;
}

.galerija-mapa__djelo:hover .galerija-mapa__tacka,
.galerija-mapa__djelo:focus-visible .galerija-mapa__tacka,
.galerija-mapa__djelo.je-izabrano .galerija-mapa__tacka { fill: #D9A441; }

.galerija-mapa__djelo:focus-visible .galerija-mapa__meta { fill: none; stroke: #D9A441; stroke-width: 0.18; }
.galerija-mapa__djelo.je-izabrano .galerija-mapa__tacka { r: 0.6; }

.galerija-mapa__pogled { fill: rgba(217, 164, 65, 0.32); }
.galerija-mapa__oko { fill: #D9A441; stroke: #15120E; stroke-width: 0.15; }

/* Dugme „?“ — kvadratno, jedan znak */
.galerija-hud__pomoc {
  min-width: 44px;
  padding-inline: 0;
  font-size: var(--t-sm);
  letter-spacing: 0;
}

/* Kratka poruka preko donjeg dijela sale */
.galerija-poruka {
  position: absolute;
  left: 50%;
  bottom: var(--s-5);
  z-index: 4;
  margin: 0;
  max-width: calc(100% - 2 * var(--s-5));
  padding: 10px 16px;
  border: 1px solid rgba(233, 223, 207, 0.25);
  border-radius: var(--radius);
  background-color: rgba(21, 18, 14, 0.82);
  color: #F3EEE4;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity 240ms ease, transform 240ms ease;
}

.galerija-poruka.je-vidljiva { opacity: 1; transform: translate(-50%, 0); }
.galerija:not([data-stanje="soba"]) .galerija-poruka { display: none; }
.galerija[data-panel="otvoren"] .galerija-poruka { left: calc((100% - var(--sirina-panela)) / 2); }

/* Savjeti pri svakom ulasku */
.galerija-savjeti {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: var(--s-5);
  overflow-y: auto;
  background-color: rgba(14, 12, 10, 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: galerija-natpis-ulaz 260ms ease-out;
}

.galerija-savjeti[hidden],
.galerija:not([data-stanje="soba"]) .galerija-savjeti { display: none; }

.galerija-savjeti__okvir {
  width: min(46rem, 100%);
  padding: clamp(var(--s-5), 4vw, var(--s-7));
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background-color: var(--paper);
  color: var(--ink-soft);
  text-align: center;
}

.galerija-savjeti__oznaka {
  margin: 0 0 var(--s-2);
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--accent);
}

.galerija-savjeti__naslov {
  margin: 0 0 var(--s-6);
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 400;
  color: var(--ink);
}

.galerija-savjeti__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
  margin: 0 0 var(--s-6);
  padding: 0;
  list-style: none;
}

.galerija-savjet {
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  font-family: var(--font-ui);
  font-size: var(--t-sm);
  line-height: 1.45;
}

.galerija-savjet__ikona {
  width: 56px;
  height: 56px;
  margin-bottom: var(--s-1);
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.galerija-savjet__ikona .ispuna { fill: var(--accent); stroke: none; }

.galerija-savjet__naslov { color: var(--ink); font-weight: 600; }
.galerija-savjet__opis { color: var(--ink-muted); }

.galerija-savjeti__akcije {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s-4) var(--s-6);
}

/* Tekst za miš ili za prst — po tome kako se uređaj stvarno koristi */
.samo-prst { display: none; }
@media (hover: none) and (pointer: coarse) {
  .samo-mis { display: none; }
  .samo-prst { display: inline; }
}

/* Blaga vinjeta: ivice kadra tonu, pogled ide ka sredini — kao oko u
   polumračnoj sali. Ne hvata pokazivač. */
.galerija-platno::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, transparent 58%, rgba(10, 8, 6, 0.38) 100%);
}

/* Kursor „ruka“ nad djelom */
.galerija[data-nad-djelom] .galerija-platno canvas { cursor: pointer; }

@media (max-width: 720px) {
  .galerija-mapa { width: 6.5rem; }
  .galerija-savjeti { place-items: start center; padding: var(--s-3); }
  .galerija-savjeti__okvir { padding: var(--s-5) var(--s-4); }
  .galerija-savjeti__naslov { margin-bottom: var(--s-4); font-size: var(--t-lg); }
  .galerija-savjeti__lista { grid-template-columns: 1fr; gap: var(--s-3); margin-bottom: var(--s-4); }
  .galerija-savjet {
    grid-template-columns: 44px 1fr;
    justify-items: start;
    text-align: left;
    column-gap: var(--s-3);
    row-gap: 0;
  }
  .galerija-savjet__ikona { grid-row: span 2; width: 40px; height: 40px; margin: 0; }
  .galerija[data-panel="otvoren"] .galerija-poruka { left: 50%; bottom: calc(var(--visina-panela) + var(--s-3)); }
}

@media (max-height: 500px) and (orientation: landscape) {
  .galerija-mapa { width: 5.5rem; }
  .galerija-savjeti { place-items: start center; padding: var(--s-2); }
  .galerija-savjeti__lista { gap: var(--s-3); margin-bottom: var(--s-3); }
  .galerija-savjeti__naslov { margin-bottom: var(--s-3); }
}

@media (prefers-reduced-motion: reduce) {
  .galerija-savjeti { animation: none; }
  .galerija-poruka { transition: none; }
}

/* Traka gore lijevo ostaje uz vrh i kad je mapa u istom redu viša od nje */
.galerija-hud__traka { align-self: start; }

/* Brojač slika u sekundi je alat za provjeru: dugme se ne prikazuje
   posjetiocima, a brojač se pali tipkom F u sali. */
#galerija-fps-prekidac { display: none; }

/* =========================================================
   Tekst stranice: ulaz, o izložbi, prečice, poziv
   ========================================================= */
.galerija-ulaz__uvod {
  max-width: 38ch;
  margin: 0 0 var(--s-6);
  color: var(--ink-soft);
}

.galerija-info { align-items: start; gap: clamp(var(--s-6), 5vw, var(--s-9)); }
.galerija-info .naslov-2 { margin-block: 0 var(--s-5); }
.galerija-info p { max-width: var(--measure); color: var(--ink-soft); }
.galerija-info a { color: inherit; }

.galerija-cinjenice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-7);
  margin: var(--s-6) 0 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}

.galerija-cinjenice dt {
  font-family: var(--font-ui);
  font-size: var(--t-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.galerija-cinjenice dd { margin: var(--s-1) 0 0; color: var(--ink); }

.galerija-nacini {
  display: grid;
  gap: var(--s-3);
  margin: 0 0 var(--s-6);
  padding: 0;
  list-style: none;
  color: var(--ink-soft);
}

.galerija-nacini strong { color: var(--ink); font-weight: 600; }

.galerija-precice {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: var(--t-sm);
}

.galerija-precice caption {
  margin-bottom: var(--s-3);
  text-align: left;
  font-size: var(--t-xs);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.galerija-precice th,
.galerija-precice td {
  padding: var(--s-2) 0;
  border-top: 1px solid var(--rule);
  text-align: left;
  vertical-align: baseline;
  font-weight: 400;
  color: var(--ink-soft);
}

.galerija-precice th { width: 6.5rem; padding-right: var(--s-4); white-space: nowrap; }

.galerija-precice kbd {
  display: inline-block;
  min-width: 1.9em;
  padding: 2px 6px;
  border: 1px solid var(--rule-strong);
  border-bottom-width: 2px;
  border-radius: 3px;
  background-color: var(--paper);
  font-family: var(--font-ui);
  font-size: 0.85em;
  text-align: center;
  color: var(--ink);
}

/* Na telefonu tastature nema — prečice se ne prikazuju */
@media (hover: none) and (pointer: coarse) {
  .galerija-precice { display: none; }
}

/* Traka „Zanima vas neko djelo…“ ne smije sjesti na donju liniju tabele prečica */
.galerija-info + .linija { margin-block: var(--s-8) var(--s-6); }

.galerija-poziv {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
}

.galerija-poziv__tekst {
  flex: 1 1 22rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-lg);
  line-height: 1.25;
  color: var(--ink);
}

/* Mapa u traci ispod sale: desno, uvijek otvorena, ne prekriva sliku */
.galerija-alati .galerija-mapa {
  grid-area: auto;
  justify-self: auto;
  align-self: center;
  margin-left: auto;
  width: 7.5rem;
}
.galerija-alati .galerija-mapa__prekidac { display: none; }
.galerija-alati .galerija-mapa.je-skupljena .galerija-mapa__crtez { display: block; }
.galerija-alati .galerija-mapa__crtez {
  padding: 4px;
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (max-width: 720px) {
  .galerija-alati .galerija-mapa { width: 6rem; }
}

/* Traka: dugmad lijevo (kretanje gore, uglovi ispod), mapa desno kroz oba reda */
.galerija[data-stanje="soba"] .galerija-alati {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--s-4);
}
.galerija-alati .galerija-kretanje,
.galerija-alati .galerija-ugao { grid-column: 1; justify-self: start; }
.galerija-alati .galerija-mapa { grid-column: 2; grid-row: 1 / span 2; margin-left: 0; }

/* Telefon: mapa samo pored reda za kretanje, uglovi ispod preko cijele širine */
@media (max-width: 720px) {
  .galerija-alati .galerija-mapa { grid-row: 1; align-self: start; }
  .galerija-alati .galerija-ugao { grid-column: 1 / -1; }
}

@media (pointer: coarse) {
  .galerija-savjeti__sam { min-height: 44px; }
  .galerija-panel__link { display: inline-flex; min-height: 44px; }
}

/* ---------------------------------------------------------
   Štampa: sala (3D, dugmad, savjeti, lupa, izbliza) nema smisla na
   papiru — štampa se 2D mreža istaknutih djela, bez poruke o razlogu.
   --------------------------------------------------------- */
@media print {
  .galerija-scena,
  .galerija-alati,
  .galerija-izbliza,
  .galerija-natpis,
  .galerija-lupa,
  .galerija-2d__poruka { display: none !important; }
  .galerija .galerija-2d { display: block !important; }
  .galerija-2d__djelo { break-inside: avoid; }
}

/* ---------------------------------------------------------
   Visok kontrast (forced-colors): mapa i uključena dugmad crtaju se
   sistemskim bojama — inače su zidovi, natpisi i tačke mape nevidljivi
   ili ~2:1, a „uključeno“ se ne razlikuje od „isključeno“.
   --------------------------------------------------------- */
@media (forced-colors: active) {
  .galerija-mapa__pod { fill: none; }
  .galerija-mapa__zid { stroke: CanvasText; }
  .galerija-mapa__sala { fill: CanvasText; }
  .galerija-mapa__tacka { fill: Canvas; stroke: CanvasText; transition: none; }
  .galerija-mapa__djelo:hover .galerija-mapa__tacka,
  .galerija-mapa__djelo:focus-visible .galerija-mapa__tacka,
  .galerija-mapa__djelo.je-izabrano .galerija-mapa__tacka { fill: Highlight; stroke: CanvasText; }
  .galerija-mapa__djelo:focus-visible .galerija-mapa__meta { stroke: Highlight; }
  .galerija-mapa__oko { fill: Highlight; stroke: CanvasText; }
  .galerija-mapa__pogled { fill: none; stroke: Highlight; stroke-width: 0.12; }
  .galerija .galerija-tura[aria-pressed="true"],
  .galerija[data-tura="radi"] .galerija-tura,
  .galerija .galerija-ugao__prekidac[aria-pressed="true"] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
    border-color: HighlightText;
  }
}

/* ---------------------------------------------------------
   TELEFON: sala preko cijelog ekrana, slika u centru
   html.galerija-uronjena postavlja js/galerija.js (osvjeziUronjeno)
   dok je sala otvorena na uskom ekranu ili položenom telefonu. Sala
   tada pokrije cijeli ekran (zaglavlje i stranica ostaju ispod), a od
   dugmadi ostaju dvije tanke, providne trake preko kadra. Sve ostale
   opcije su ista .galerija-alati traka, ovdje list odozdo na „Opcije“.
   Pravila su namjerno pod html.galerija-uronjena, pa pobjeđuju sve
   ranije telefonske rasporede bez diranja u njih.
   --------------------------------------------------------- */

.galerija-mob,
.galerija-alati__glava { display: none; }

html.galerija-uronjena,
html.galerija-uronjena body { overflow: hidden; }

html.galerija-uronjena .galerija {
  position: fixed;
  inset: 0;
  margin: 0;
  z-index: 900;                 /* iznad zaglavlja, ispod prikaza Izbliza (1000) */
  --visina-sale: 100vh;
  background-color: #0E0C0A;
}
@supports (height: 100dvh) {
  html.galerija-uronjena .galerija { --visina-sale: 100dvh; }
}
html.galerija-uronjena .galerija[data-stanje] { --visina-sale: 100vh; }
@supports (height: 100dvh) {
  html.galerija-uronjena .galerija[data-stanje] { --visina-sale: 100dvh; }
}

html.galerija-uronjena .galerija-scena {
  height: var(--visina-sale);
  border: 0;
  border-radius: 0;
}
html.galerija-uronjena .galerija-platno canvas { border-radius: 0; }

/* Stari HUD, strelica kartice i ručica su zamijenjeni trakama */
html.galerija-uronjena .galerija[data-stanje="soba"] .galerija-hud,
html.galerija-uronjena .galerija-panel__vise,
html.galerija-uronjena .galerija-panel::before { display: none; }

/* Platno se ne pomjera dok je kartica sklopljena — slika stoji u sredini */
html.galerija-uronjena .galerija[data-izabrano][data-panel="otvoren"] .galerija-platno { transform: none; }

/* --- Trake preko kadra --- */
html.galerija-uronjena .galerija[data-stanje="soba"] .galerija-mob {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;         /* prevlačenje po kadru ide na platno */
  color: #F3EEE4;
  font-family: var(--font-ui);
  transition: opacity var(--dur) var(--ease);
}

.galerija-mob__vrh,
.galerija-mob__dno {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3);
  pointer-events: none;
}
.galerija-mob__vrh {
  top: 0;
  justify-content: space-between;
  background: linear-gradient(rgba(14, 12, 10, 0.55), rgba(14, 12, 10, 0));
}
.galerija-mob__dno {
  bottom: 0;
  flex-direction: column;
  align-items: stretch;
  padding-bottom: max(var(--s-3), env(safe-area-inset-bottom));
  background: linear-gradient(rgba(14, 12, 10, 0), rgba(14, 12, 10, 0.6) 45%);
}
.galerija-mob__vrh > *,
.galerija-mob__dno > *,
.galerija-mob__red > * { pointer-events: auto; }
.galerija-mob__red { display: flex; align-items: center; gap: var(--s-2); }

.galerija-mob__dugme,
.galerija-mob__natpis,
.galerija-mob__tura {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 var(--s-3);
  border: 1px solid rgba(243, 238, 228, 0.18);
  border-radius: 22px;
  background-color: rgba(21, 18, 14, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: inherit;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.galerija-mob__dugme:focus-visible,
.galerija-mob__natpis:focus-visible,
.galerija-mob__tura:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.galerija-mob__dugme:active,
.galerija-mob__natpis:active { background-color: rgba(21, 18, 14, 0.8); }

.galerija-mob__dugme svg,
.galerija-mob__natpis svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.galerija-mob__krug,
.galerija-mob__strelica,
.galerija-mob__opcije { width: 44px; padding: 0; }
.galerija-mob__krug { font-size: 17px; }
.galerija-mob__izadji { padding-right: var(--s-4); }

.galerija-mob__gdje {
  font-size: 11px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: rgba(243, 238, 228, 0.75);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  pointer-events: none !important;
}

/* Natpis: naziv i godina · redni broj; dodir otvara karticu djela.
   U pregledu sale je to dugme za obilazak. */
.galerija-mob__natpis {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-start;
  padding: 6px var(--s-3) 6px var(--s-4);
  text-align: left;
}
.galerija-mob__tekst { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.galerija-mob__naziv,
.galerija-mob__meta {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.galerija-mob__naziv {
  font-family: var(--font-display, var(--font-serif, serif));
  font-size: 17px;
  letter-spacing: 0;
  line-height: 1.2;
}
.galerija-mob__meta { font-size: 11.5px; line-height: 1.3; color: rgba(243, 238, 228, 0.7); }
.galerija-mob__kreni,
.galerija-mob__info { display: inline-flex; flex: none; }
.galerija-mob__kreni svg { fill: var(--accent); stroke: none; }
.galerija[data-izabrano] .galerija-mob__kreni,
.galerija:not([data-izabrano]) .galerija-mob__info { display: none; }
.galerija:not([data-izabrano]) .galerija-mob__natpis { border-color: rgba(190, 139, 60, 0.6); }
.galerija:not([data-izabrano]) .galerija-mob__naziv {
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--accent);
}
.galerija[data-tura="radi"]:not([data-izabrano]) .galerija-mob__kreni { display: none; }

/* Obilazak u toku, pred djelom: mala pilula iznad reda (pauza/nastavak) */
.galerija-mob__tura {
  align-self: center;
  min-height: 36px;
  border-color: rgba(190, 139, 60, 0.6);
  color: var(--accent);
  font-size: 12px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.galerija-mob__tura[hidden] { display: none; }

.galerija-mob__opcije[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }

/* Samo slika: dodir na izabrano djelo sakrije trake */
html.galerija-uronjena .galerija[data-cisto="da"] .galerija-mob { opacity: 0; }
html.galerija-uronjena .galerija[data-cisto="da"] .galerija-mob * { pointer-events: none !important; }

/* Poruke stoje iznad donje trake, ne preko nje */
html.galerija-uronjena .galerija-poruka { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
html.galerija-uronjena .galerija[data-panel="otvoren"] .galerija-poruka { left: 50%; }
html.galerija-uronjena .galerija[data-cisto="da"] .galerija-poruka { bottom: var(--s-5); }

/* Zastor iza lista „Opcije“: dodir pored lista ga zatvara */
.galerija-mob__zastor {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(14, 12, 10, 0.35);
  pointer-events: auto;
}
html.galerija-uronjena .galerija[data-opcije] .galerija-mob__zastor { display: block; }

/* --- List „Opcije“ (ista .galerija-alati traka) --- */
html.galerija-uronjena .galerija[data-stanje="soba"] .galerija-alati {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--s-3) var(--s-4);
  max-height: 75%;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: var(--s-3) var(--s-4) max(var(--s-5), env(safe-area-inset-bottom));
  border: 0;
  border-top: 1px solid rgba(243, 238, 228, 0.16);
  border-radius: 14px 14px 0 0;
  background-color: #15120E;
  transform: translateY(101%);
  visibility: hidden;
  transition: transform var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
html.galerija-uronjena .galerija[data-opcije] .galerija-alati {
  transform: translateY(0);
  visibility: visible;
}
html.galerija-uronjena .galerija-alati__glava {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.galerija-alati__naslov {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.galerija-alati__glava .galerija-mob__krug { color: #F3EEE4; }

/* ◀ ▶ su već u donjoj traci */
html.galerija-uronjena .galerija-alati #galerija-prethodni,
html.galerija-uronjena .galerija-alati #galerija-sljedeci { display: none; }

html.galerija-uronjena .galerija-alati .galerija-kretanje { grid-column: 1; grid-row: 2; }
/* Mapa zauzima cijelu desnu polovinu, visoku koliko i dugmad lijevo */
html.galerija-uronjena .galerija[data-stanje="soba"] .galerija-alati { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
html.galerija-uronjena .galerija-alati .galerija-mapa {
  grid-column: 2;
  grid-row: 2;
  align-self: stretch;
  justify-items: stretch;
  width: auto;
  min-height: 0;
}
html.galerija-uronjena .galerija-alati .galerija-mapa__crtez {
  width: 100%;
  height: 100%;
  min-height: 9rem;
  padding: var(--s-3);         /* malo vazduha oko tlocrta */
}
html.galerija-uronjena .galerija-alati .galerija-ugao {
  grid-column: 1 / -1;
  grid-row: 3;
  flex-wrap: wrap;
  overflow: visible;
}
/* Naslov grupe uglova je njen aria-label — isti tekst na oba jezika */
html.galerija-uronjena .galerija-alati .galerija-ugao::before {
  content: attr(aria-label);
  flex: 0 0 100%;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
}
html.galerija-uronjena .galerija-alati .galerija-kretanje__dugme {
  flex: 1 1 auto;
  min-width: 0;
}
html.galerija-uronjena .galerija-alati .galerija-kretanje { flex-direction: column; align-items: stretch; }

/* --- Kartica djela: skrivena dok se ne dodirne naziv --- */
html.galerija-uronjena .galerija[data-stanje] .galerija-panel {
  z-index: 5;
  inset: auto 0 0 0;
  width: 100%;
  height: 55%;
  padding: var(--s-5) var(--s-5) max(var(--s-6), env(safe-area-inset-bottom));
  border-left: 0;
  border-top: 1px solid rgba(243, 238, 228, 0.16);
  border-radius: 14px 14px 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  transform: translateY(101%);
  visibility: hidden;
}
html.galerija-uronjena .galerija[data-stanje][data-panel="otvoren"][data-kartica="puna"] .galerija-panel {
  transform: translateY(0);
  visibility: visible;
}
html.galerija-uronjena .galerija[data-izabrano][data-panel="otvoren"][data-kartica="puna"] .galerija-platno {
  transform: translateY(-24%);
}
html.galerija-uronjena .galerija-panel__zatvori { inset: var(--s-3) var(--s-3) auto auto; }
html.galerija-uronjena .galerija-panel__oznaka,
html.galerija-uronjena .galerija-panel__naziv { padding-right: calc(44px + var(--s-3)); }
html.galerija-uronjena .galerija-panel__naziv { white-space: normal; }

/* Položen telefon: kartica i opcije sa desne strane, slika lijevo */
@media (orientation: landscape) and (max-height: 500px) {
  .galerija-mob__vrh { padding: var(--s-2) var(--s-3); }
  .galerija-mob__dno { padding: var(--s-2) var(--s-3); }
  .galerija-mob__red { width: min(34rem, 100%); align-self: center; }
  html.galerija-uronjena .galerija[data-stanje] .galerija-panel {
    inset: 0 0 0 auto;
    width: min(24rem, 50%);
    height: 100%;
    border-top: 0;
    border-left: 1px solid rgba(243, 238, 228, 0.16);
    border-radius: 0;
    transform: translateX(101%);
  }
  html.galerija-uronjena .galerija[data-stanje][data-panel="otvoren"][data-kartica="puna"] .galerija-panel { transform: translateX(0); }
  html.galerija-uronjena .galerija[data-izabrano][data-panel="otvoren"][data-kartica="puna"] .galerija-platno {
    transform: translateX(-25%);
  }
  html.galerija-uronjena .galerija[data-stanje="soba"] .galerija-alati {
    left: auto;
    top: 0;
    width: min(26rem, 60%);
    max-height: none;
    border-top: 0;
    border-left: 1px solid rgba(243, 238, 228, 0.16);
    border-radius: 0;
    transform: translateX(101%);
  }
  html.galerija-uronjena .galerija[data-opcije] .galerija-alati { transform: translateX(0); }
}

html.galerija-uronjena .galerija-savjeti { z-index: 9; }

@media (prefers-reduced-motion: reduce) {
  .galerija-mob,
  html.galerija-uronjena .galerija-alati,
  html.galerija-uronjena .galerija-panel { transition: none !important; }
}