/* /radovi/ — galerija: bordo zid, radovi u pozlaćenom okviru, pločica ispod.
   Okvir je fotografija Rijksmuseuma (SK-L-374, Louis XV, CC0), prerađena u
   vodoravni omjer; otvor mu je točno 16:10 kao i snimke naslovnica. */
:root {
  --wall: #4A0F1A;
  --wall-deep: #2E0810;
  --light: rgba(255, 222, 180, 0.16);
  --ink: #F6EEE4;
  --soft: rgba(246, 238, 228, 0.72);
  --plate: #F7F4EE;
  --plate-ink: #1E1714;
  --accent: #FF8A46;
  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  /* širina okvira: stane u ekran zajedno s naslovom i pločicom */
  --fw: min(62rem, 72vw, calc((100svh - 24rem) * 1.2877));
  --gap: clamp(1.5rem, 5vw, 5rem);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: auto 1fr auto;
  overflow-x: hidden;
  color: var(--ink); font-family: var(--sans);
  /* zid: svjetlo odozgo kao reflektor u dvorani, rubovi tamniji */
  background:
    radial-gradient(ellipse 55% 60% at 50% 18%, var(--light), transparent 72%),
    radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.35)),
    var(--wall);
}
/* zrno zida (tapeta), jedva vidljivo */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ——— zaglavlje (isto kao na 404) ——— */
.bar { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 1.1rem clamp(1.25rem, 4vw, 3rem); }
.bar__mark { color: #FFF; text-decoration: none; font-family: "Archivo", Arial, sans-serif; font-weight: 700; font-size: 1.25rem; }
.bar__mark span { color: var(--accent); }
.cta {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.45rem 0.45rem 0.45rem 1rem; border-radius: 0.6rem;
  background: #0B0B0A; color: #F4F1EA; border: 1px solid rgba(244, 241, 234, 0.22);
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.cta i { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1px solid rgba(244, 241, 234, 0.35); border-radius: 0.35rem; font-style: normal; }
.cta:hover { background: #1A1918; }

/* ——— dvorana ——— */
.hall { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.hall__head { text-align: center; padding: 0 clamp(1rem, 4vw, 3rem); }
h1 {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; letter-spacing: -0.015em;
}
.hall__head p { margin: 0.6rem auto 0; max-width: 44ch; font-size: clamp(0.95rem, 1.1vw, 1.05rem); line-height: 1.5; color: var(--soft); }

.gal { width: 100%; margin-top: clamp(1rem, 3.5vh, 2.25rem); }
.gal__view { overflow: hidden; touch-action: pan-y; }
/* radovi se mogu povući mišem ili prstom */
.gal-on .gal__view { cursor: grab; user-select: none; -webkit-user-select: none; }
.gal-on .gal__view[data-drag] { cursor: grabbing; }
.gal-on .gal__view img { -webkit-user-drag: none; }

.gal__track {
  list-style: none; margin: 0; padding: 0 calc(50vw - var(--fw) / 2);
  display: flex; gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory;   /* bez JS-a */
}
.gal-on .gal__track {
  padding: 0; overflow: visible; scroll-snap-type: none;
  will-change: transform;
  transition: transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
}
.gal-on .gal__track[data-still] { transition: none; }
.work { flex: 0 0 var(--fw); scroll-snap-align: center; }
.work figure { margin: 0; }

/* susjedi su u polusjeni, rad u sredini pod svjetlom */
.gal-on .work { opacity: 0.38; transition: opacity 750ms ease; }
.gal-on .work[data-on] { opacity: 1; }
.gal-on .gal__track[data-still] .work { transition: none; }

.work__frame { position: relative; display: block; aspect-ratio: 4320 / 3355; color: inherit; }
/* slika u okviru je poveznica na stranicu klijenta */
.work__shot { transition: filter 300ms ease; }
.gal-on .gal__view .work[data-on] .work__frame { cursor: pointer; }
.work[data-on] .work__frame:hover .work__shot { filter: brightness(1.08); }
.work__frame:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
/* snimka sjedi malo ispod unutarnjeg ruba okvira, pa nema procjepa */
.work__shot {
  position: absolute; left: 18.9%; top: 25.3%; width: 62.8%; height: 50.4%;
  object-fit: cover; object-position: top center;
  background: #1A1512;
}
.work__frame::after {
  /* sjena ruba okvira na slici */
  content: ""; position: absolute; left: 18.9%; right: 18.3%; top: 25.3%; bottom: 24.3%;
  box-shadow: inset 0 6px 14px rgba(0, 0, 0, 0.55), inset 0 0 3px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.work__okvir {
  position: relative; z-index: 1; display: block; width: 100%; height: auto;
  filter: drop-shadow(0 1.4rem 1.6rem rgba(20, 2, 6, 0.55));
  pointer-events: none; user-select: none;
}
.work__frame::after { z-index: 2; }

/* ——— pločica ——— */
figcaption { display: flex; justify-content: center; margin-top: clamp(0.9rem, 2.4vh, 1.5rem); }
.plate {
  position: relative; display: inline-flex; align-items: baseline; gap: 0.75rem;
  min-height: 2.75rem; padding: 0.6rem 1.1rem 0.55rem;
  background: linear-gradient(170deg, #FFFFFF 0%, var(--plate) 45%, #E9E4DA 100%);
  color: var(--plate-ink); text-decoration: none;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 -1px 0 rgba(0, 0, 0, 0.08) inset, 0 6px 14px rgba(15, 2, 5, 0.45);
}
/* dva vijka */
.plate::before, .plate::after {
  content: ""; position: absolute; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #D9D2C4, #8C8374);
}
.plate::before { left: 0.45rem; }
.plate::after { right: 0.45rem; }
.plate__name { font-family: var(--serif); font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.1; }
.plate__year { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.14em; color: #6B6258; }

/* ——— strelice ——— */
.gal__nav { display: flex; justify-content: center; align-items: center; gap: 1.25rem; margin-top: clamp(0.9rem, 2.6vh, 1.75rem); }
html:not(.gal-on) .gal__nav { display: none; }
.gal__btn {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border-radius: 50%; border: 1px solid rgba(246, 238, 228, 0.4);
  background: transparent; color: var(--ink); cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.gal__btn svg { width: 1.25rem; height: 1.25rem; }
.gal__btn:hover { background: rgba(246, 238, 228, 0.1); border-color: var(--ink); }

.bar__mark:focus-visible, .cta:focus-visible, .gal__btn:focus-visible, .foot a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ——— podnožje ——— */
.foot { position: relative; z-index: 1; padding: 1.5rem clamp(1.25rem, 4vw, 3rem) 1.25rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; font-size: 0.8125rem; color: var(--soft); }
.foot p { margin: 0; }
.foot a { color: inherit; }
.foot a:hover { color: var(--ink); }

@media (max-width: 720px) {
  :root { --fw: 92vw; --gap: 1rem; }
  .gal-on .work { opacity: 0.3; }
  .plate { gap: 0.6rem; padding-inline: 1rem; }
  .foot { font-size: 0.75rem; }
}
@media (max-width: 520px) { .cta span { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .gal-on .gal__track, .gal-on .work, .work__shot { transition: none; }
}
@media print {
  body { background: #FFF; color: #000; }
  body::before, .gal__nav, .cta { display: none; }
}