/* ── v4 brand kit — light theme only ───────────────────────────────────── */

@font-face {
  font-family: "Engebrechtre";
  src: url("assets/fonts/Engebrechtre-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

:root {
  /* Official palette */
  --krom-zelena:    #37422F;
  --prusko-plava:   #003442;
  --cadjavo-crna:   #0E0E10;
  --prljavo-bijela: #F1ECE1;
  --anticka-mesinga:#CEA34D;

  --font-display: "Engebrechtre", "Arial Black", sans-serif;
  --font-body:    "Rubik", Helvetica, Arial, sans-serif;

  --frame: 2rem;

  /* Light theme tokens (the only theme in v4) */
  --bg:             var(--prljavo-bijela);
  --ink:            var(--cadjavo-crna);
  --ink-deep:       var(--cadjavo-crna);
  --line-active:    var(--krom-zelena);
  --line-settled:   var(--cadjavo-crna);
  --line-gallery:   var(--prusko-plava);
  --accent:         var(--anticka-mesinga);
  --card-bg:        var(--prljavo-bijela);
  --card-border:    var(--prusko-plava);
  --muted:          rgba(14, 14, 16, 0.55);
  --pin-fill:       var(--prljavo-bijela);
  --pin-ring:       var(--cadjavo-crna);
  --pin-active:     var(--anticka-mesinga);
  --label-color:    var(--cadjavo-crna);
  --label-halo:     var(--prljavo-bijela);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg); overflow: hidden;
  font-family: var(--font-body);
  color: var(--ink-deep);
  -webkit-font-smoothing: antialiased;
}

#stage {
  position: fixed; inset: 0;
  background: var(--bg);
  overflow: hidden;
}

/* ── Map ───────────────────────────────────────────────────────────────── */

.map-pane {
  position: absolute; inset: var(--frame);
  z-index: 1;
}
.map-fill { width: 100%; height: 100%; }

.maplibregl-canvas { outline: none; }
.maplibregl-ctrl-attrib { display: none !important; }

/* ── SVG overlay ───────────────────────────────────────────────────────── */

#overlay {
  position: absolute;
  top: var(--frame); left: var(--frame);
  width: calc(100% - 2 * var(--frame));
  height: calc(100% - 2 * var(--frame));
  z-index: 2;
  pointer-events: none;
}
#overlay .city-hit { pointer-events: auto; cursor: pointer; }
.hit-area { fill: transparent; }

/* Rail lines */
.rail-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rail-line.current  { stroke: var(--line-active);  stroke-width: 5.5; }
.rail-line.settled  { stroke: var(--line-settled); stroke-width: 3.5; opacity: 0.95; }
.rail-line.gallery  { stroke: var(--line-gallery); stroke-width: 4; opacity: 0.92; }

/* ── City pins + labels ────────────────────────────────────────────────── */

.city-pin {
  fill: var(--pin-fill);
  stroke: var(--pin-ring);
  stroke-width: 2.5;
  opacity: 0;
  transition: opacity 600ms ease, fill 250ms ease, stroke 250ms ease;
}
.city-pin.visible { opacity: 1; }
.city-hit:hover .city-pin,
.city-pin.active { fill: var(--pin-active); stroke: var(--pin-ring); }

.city-label {
  font-family: var(--font-display);
  font-weight: 700;
  fill: var(--label-color);
  paint-order: stroke fill;
  stroke: var(--label-halo);
  stroke-width: 4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 700ms ease, fill 250ms ease;
  user-select: none;
}
.city-label.tier-1 { font-size: 22px; }
.city-label.tier-2 { font-size: 18px; }
.city-label.tier-3 { font-size: 14px; }
.city-label.visible { opacity: 1; }
.city-label.foreign  {
  font-style: italic;
  fill: rgba(14, 14, 16, 0.45);
  stroke-width: 3;
  stroke-opacity: 0.6;
}
/* Foreign cities (outside Croatian borders) stay hidden until their event
   reveals them, then read clearly subordinate to domestic stations. */
.city-label.foreign.visible { opacity: 0.6; }
.city-label.collided { opacity: 0 !important; transition: opacity 250ms ease; }
.city-hit:hover .city-label { fill: var(--accent); }

/* Gallery pins are always visible while in gallery view */
#stage[data-view="gallery"] #layer-gallery-pins .city-pin,
#stage[data-view="gallery"] #layer-gallery-labels .city-label {
  opacity: 1;
}

/* Engine layers (settled/current/pulse/main pins/labels) only render in map view */
#stage:not([data-view="map"]) #layer-pins,
#stage:not([data-view="map"]) #layer-labels,
#stage:not([data-view="map"]) #layer-lines-settled,
#stage:not([data-view="map"]) #layer-lines-current,
#stage:not([data-view="map"]) #layer-pulse { display: none; }

/* Gallery layers only render in gallery view */
#stage:not([data-view="gallery"]) #layer-gallery-pins,
#stage:not([data-view="gallery"]) #layer-gallery-labels,
#stage:not([data-view="gallery"]) #layer-gallery-lines { display: none; }

/* In map view, suppress pin/label cursor (no station card available) */
#stage[data-view="map"] #layer-pins .city-hit,
#stage[data-view="map"] #layer-labels .city-hit { cursor: default; pointer-events: none; }

/* ── Top info banner (map mode only) ───────────────────────────────────── */

#event-info {
  position: absolute;
  top: 0.6rem; left: var(--frame); right: var(--frame);
  z-index: 4;
  padding: 0.5rem 4vw 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bg) 96%, transparent) 0%,
    color-mix(in srgb, var(--bg) 78%, transparent) 60%,
    transparent 100%
  );
  pointer-events: none;
  transition: opacity 400ms ease;
  text-align: center;
}
#event-info:has(#year-text:empty) { display: none; }
#stage:not([data-view="map"]) #event-info { display: none; }

#year-text {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 44px);
  line-height: 1;
  color: var(--ink-deep);
  letter-spacing: 0.06em;
  transition: opacity 500ms ease;
  flex: 0 0 auto;
}

/* Thin vertical separator between the year and the corridor title. */
.event-sep {
  width: 2px;
  align-self: stretch;
  background: currentColor;
  opacity: 0.5;
  flex: 0 0 auto;
  margin: 0.15em 0;
}
#year-text:empty ~ .event-sep { display: none; }

.event-text-wrap {
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: min(70vw, 1300px);
  flex: 0 1 auto;
}

#title-text {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 44px);
  color: var(--ink-deep);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: opacity 500ms ease;
  line-height: 1.15;
}
/* Foreign cities (outside Croatian borders) named in the title text read
   visually subordinate to the domestic stops — same treatment as the
   foreign labels on the map. */
#title-text .title-city.foreign {
  color: rgba(14, 14, 16, 0.45);
  font-style: italic;
  font-weight: 500;
}
#title-text .title-sep {
  color: var(--accent);
  margin: 0 0.15em;
}

#context-text {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.1vw, 22px);
  color: var(--muted);
  margin-top: 0.3rem;
  letter-spacing: 0.02em;
  transition: opacity 500ms ease;
}

#year-text.swap, #title-text.swap, #context-text.swap { opacity: 0; }

#stage[data-state="intro"] #event-info { display: none; }

/* ── Station card ──────────────────────────────────────────────────────── */

#station-card {
  position: absolute;
  z-index: 5;
  display: none;
  width: clamp(360px, 34vw, 640px);
  background: var(--prljavo-bijela);
  color: var(--cadjavo-crna);
  border: 2px solid var(--accent);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  left: 0; top: 0;
  transform-origin: top left;
}
#stage[data-station-open] #station-card { display: block; }

.station-inner {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.4rem 1.6rem 1.6rem;
}
.station-photo {
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  display: block;
  background: color-mix(in srgb, var(--card-bg) 85%, var(--cadjavo-crna) 8%);
  opacity: 0;
  transition: opacity 180ms ease;
}
.station-photo.loaded { opacity: 1; }
.station-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 1.7vw, 34px);
  color: var(--cadjavo-crna);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 0.2rem;
}
.station-desc {
  font-family: var(--font-body);
  font-size: clamp(12px, 0.95vw, 17px);
  color: rgba(14, 14, 16, 0.85);
  line-height: 1.45;
  margin: 0;
}
#station-card[data-variant="image-only"] .station-desc { display: none; }
.station-close {
  position: absolute;
  top: 0; right: 0;
  width: 2.4rem; height: 2.4rem;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--cadjavo-crna);
  cursor: pointer;
  z-index: 2;
  display: grid;
  place-items: center;
}
.station-close .material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: normal;
  font-size: 1.4rem;
  line-height: 1;
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.station-close:hover { color: var(--accent); }

/* ── Gallery side drawer ───────────────────────────────────────────────── */

#gallery-drawer {
  position: absolute;
  top: var(--frame);
  right: var(--frame);
  bottom: var(--frame);
  width: clamp(320px, 26vw, 420px);
  z-index: 9;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  transform: translateX(calc(100% + var(--frame) + 1rem));
  transition: transform 260ms ease;
  color: var(--cadjavo-crna);
}
#gallery-drawer.open { transform: translateX(0); }
#gallery-drawer[hidden] { display: none; }

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.2rem;
  border-bottom: 2px solid var(--card-border);
}
.drawer-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 1.6vw, 32px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.drawer-close {
  width: 2.4rem; height: 2.4rem;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--cadjavo-crna);
  cursor: pointer;
  display: grid; place-items: center;
}
.drawer-close .material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-style: normal; font-weight: normal;
  font-size: 1.5rem; line-height: 1;
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.drawer-close:hover { color: var(--accent); }

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.4rem 0.4rem 1rem;
}

.segment { border-bottom: 1px solid color-mix(in srgb, var(--card-border) 40%, transparent); }
.segment[open] { padding-bottom: 0.4rem; }
.segment-summary {
  list-style: none;
  cursor: pointer;
  padding: 0.7rem 0.8rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  user-select: none;
}
.segment-summary::-webkit-details-marker { display: none; }
.segment-summary::before {
  content: "▸";
  font-family: var(--font-body);
  color: var(--accent);
  font-size: 0.9em;
  margin-right: 0.4rem;
  transition: transform 180ms ease;
  display: inline-block;
}
.segment[open] > .segment-summary::before { transform: rotate(90deg); }
.segment-name { flex: 1; }
.segment-count {
  font-family: var(--font-body);
  font-size: 0.8em;
  color: var(--muted);
  letter-spacing: 0.05em;
  text-transform: none;
  white-space: nowrap;
}

.segment-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
/* Rail-line indicator left of each station name: a vertical brass line
   threads through the whole segment, with a hollow circle on each station. */
.segment-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem 0.5rem 2.6rem;
  min-height: 2.2rem;
  cursor: pointer;
  transition: background 150ms ease;
}
.segment-item:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
/* Vertical line — full height by default, half-height on first/last items. */
.segment-item::before {
  content: "";
  position: absolute;
  left: 1.3rem;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
}
.segment-item:first-child::before { top: 50%; }
.segment-item:last-child::before  { bottom: 50%; }
.segment-list > .segment-item:only-child::before { display: none; }
/* Circle marker centred on the line at row mid-height. */
.segment-item::after {
  content: "";
  position: absolute;
  left: calc(1.3rem - 5px);
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--card-bg);
  border: 2px solid var(--accent);
  box-sizing: border-box;
}
.segment-station-name {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--cadjavo-crna);
  letter-spacing: 0.02em;
}

/* Drawer toggle button — brass-fill pulse to draw attention while the visitor
   hasn't opened the drawer yet (mirrors the play button's pulse). */
#stage[data-view="gallery"] #drawer-toggle[data-pristine] {
  background: var(--accent);
  color: var(--cadjavo-crna);
  border-color: var(--accent);
  animation: play-pulse 1.6s ease-in-out infinite;
}
#stage[data-view="gallery"] #drawer-toggle[data-pristine] .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
#drawer-toggle[aria-expanded="true"] {
  background: var(--accent);
  color: var(--cadjavo-crna);
  border-color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  #stage[data-view="gallery"] #drawer-toggle[data-pristine] { animation: none; }
}

/* ── Splash overlay ────────────────────────────────────────────────────── */

.overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 800ms ease;
  z-index: 8;
  background: rgba(14, 14, 16, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.overlay.visible { opacity: 1; pointer-events: auto; }

.splash-inner, .intro-inner {
  text-align: center;
  padding: 3.5rem 5rem;
  max-width: min(78vw, 1100px);
  background: color-mix(in srgb, var(--card-bg) 95%, transparent);
  border: 2px solid var(--card-border);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--card-bg) 35%, transparent),
              0 30px 80px rgba(0, 0, 0, 0.45);
  color: var(--cadjavo-crna);
}
.intro-logo {
  width: clamp(110px, 11vw, 200px);
  height: auto;
  margin: 0 auto 1.5rem;
  display: block;
}
.intro-eyebrow {
  font-family: var(--font-body);
  font-size: clamp(20px, 1.5vw, 36px);
  color: var(--muted);
  letter-spacing: 0.4em;
  margin-bottom: 0.8rem;
  text-transform: uppercase;
}
.intro-title {
  font-family: var(--font-display);
  font-size: clamp(50px, 5vw, 130px);
  color: var(--ink-deep);
  margin: 0; line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.intro-rule {
  width: 50%; height: 2px;
  background: var(--accent);
  margin: 1.5rem auto;
}
.intro-subtitle {
  font-family: var(--font-body);
  font-size: clamp(20px, 1.8vw, 40px);
  color: var(--ink); margin: 0 0 2rem;
}

.splash-choice {
  display: flex;
  gap: 2rem;
  justify-content: center;
  margin-top: 1rem;
}
.splash-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: clamp(160px, 15vw, 220px);
  height: clamp(160px, 15vw, 220px);
  padding: 1.2rem 0.8rem;
  background: var(--prljavo-bijela);
  border: 2px solid var(--cadjavo-crna);
  color: var(--cadjavo-crna);
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.splash-btn:hover {
  background: var(--accent);
  color: var(--cadjavo-crna);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.25);
}
.splash-icon {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: normal;
  font-size: clamp(56px, 5vw, 88px);
  line-height: 1;
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;
}
.splash-label {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.4vw, 28px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.1;
}

/* When splash is hidden, the overlay should not block underlying interactions */
#splash:not(.visible) { pointer-events: none; }

/* ── Scrubber (map mode only) ──────────────────────────────────────────── */

#scrubber {
  position: absolute;
  left: var(--frame); right: var(--frame); bottom: var(--frame);
  height: 7vh;
  padding: 0 4vw;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--bg) 92%, transparent) 0%,
    color-mix(in srgb, var(--bg) 65%, transparent) 70%,
    transparent 100%
  );
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
  z-index: 6;
}
#stage:not([data-view="map"]) #scrubber { display: none; }

.scrubber-hint {
  position: absolute;
  left: 0.8vw;
  bottom: 0.4vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.7vw;
  line-height: 1.05;
  color: var(--accent);
  pointer-events: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
}
.scrubber-hint .hint-icon {
  width: 1.1vw;
  height: 1.1vw;
  min-width: 20px; min-height: 20px;
  flex: 0 0 auto;
  color: var(--accent);
  display: block;
  animation: hint-pulse 2s ease-in-out infinite;
}
@keyframes hint-pulse {
  0%, 100% { transform: translateY(-2px); opacity: 0.75; }
  50%      { transform: translateY(2px); opacity: 1; }
}
#scrubber[data-hint-dismissed] .scrubber-hint { opacity: 0; transition: opacity 600ms ease; }

.scrubber-track {
  position: relative; width: 92%; height: 100%;
  display: flex; align-items: center;
}
.scrubber-track::before {
  content: "";
  position: absolute; top: 50%; left: 0; right: 0;
  height: 2px;
  background: var(--ink); opacity: 0.5;
  transform: translateY(-50%);
}
.scrubber-progress {
  position: absolute; top: 50%; left: 0;
  height: 4px; background: var(--accent);
  transform: translateY(-50%);
  transition: width 100ms linear;
  pointer-events: none;
}
.scrubber-ticks { position: absolute; inset: 0; pointer-events: none; }
.scrubber-ticks .tick {
  position: absolute; top: 50%;
  width: 9px; height: 9px;
  background: var(--bg);
  border: 2px solid var(--ink-deep);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.9;
}
.scrubber-ticks .tick.major {
  width: 14px; height: 14px;
  opacity: 1;
}
.scrubber-ticks .tick-label {
  position: absolute; top: 78%; transform: translateX(-50%);
  font-family: var(--font-body); font-size: 0.85vw; color: var(--muted);
  white-space: nowrap;
}
.scrubber-thumb {
  position: absolute; top: 50%; left: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: flex; flex-direction: column; align-items: center;
}
.thumb-year {
  font-family: var(--font-display);
  font-size: 2vw;
  color: var(--ink-deep);
  background: var(--bg);
  padding: 0.1em 0.55em;
  border: 2px solid var(--ink-deep);
  margin-bottom: 0.3em;
  transform: translateY(-30%);
}
.thumb-pin {
  width: 2px;
  height: clamp(16px, 1.6vh, 24px);
  background: var(--ink-deep);
  margin-top: 0.25em;
}
.thumb-icon {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: clamp(28px, 2.6vw, 44px);
  color: var(--ink-deep);
  display: block;
  margin-top: 0.1em;
}

/* ── Header logo (top-left) ────────────────────────────────────────────── */

#header-logo {
  position: absolute;
  top: var(--frame); left: var(--frame);
  height: clamp(56px, 6vh, 110px);
  width: auto;
  z-index: 8;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}
#stage[data-view="splash"] #header-logo { opacity: 0; transition: opacity 400ms ease; }
#stage:not([data-view="splash"]) #header-logo { opacity: 1; transition: opacity 600ms ease 200ms; }

/* ── Bottom-right controls ─────────────────────────────────────────────── */

#controls {
  position: absolute;
  right: var(--frame);
  bottom: calc(var(--frame) + 7vh + 1.5vh);
  z-index: 7;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
#stage[data-view="splash"] #controls { display: none; }
/* In gallery view the timeline is hidden, so bring controls down */
#stage[data-view="gallery"] #controls { bottom: var(--frame); }
/* In gallery mode hide play/pause (no timeline) */
#stage[data-view="gallery"] #play-pause { display: none; }
/* Drawer toggle is only meaningful in gallery view */
#stage:not([data-view="gallery"]) #drawer-toggle { display: none; }

#controls button {
  width: 3.4vw; height: 3.4vw;
  min-width: 52px; min-height: 52px;
  border-radius: 50%;
  border: 2px solid var(--ink-deep);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  color: var(--ink-deep);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background 200ms ease, color 200ms ease;
}
#controls button:hover { background: var(--accent); color: var(--bg); }

#controls .material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: normal;
  font-size: 1.8vw;
  line-height: 1;
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

#stage[data-state="manualPause"] #play-pause .icon-pause { display: none; }
#stage:not([data-state="manualPause"]) #play-pause .icon-play  { display: none; }

#stage[data-state="manualPause"][data-view="map"] #play-pause {
  background: var(--accent);
  color: var(--cadjavo-crna);
  border-color: var(--accent);
  animation: play-pulse 1.6s ease-in-out infinite;
  transition: background 200ms ease, color 200ms ease;
}
#stage[data-state="manualPause"][data-view="map"] #play-pause .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

@keyframes play-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(206, 163, 77, 0.65); }
  70%  { box-shadow: 0 0 0 22px rgba(206, 163, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(206, 163, 77, 0); }
}

@media (prefers-reduced-motion: reduce) {
  #stage[data-state="manualPause"] #play-pause { animation: none; }
  .scrubber-hint .hint-icon { animation: none; }
}

/* ── Photos gallery view (Galerija fotografija) ───────────────────────── */

#photos-view {
  position: absolute;
  inset: var(--frame);
  z-index: 7;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--cadjavo-crna);
  visibility: hidden;
  opacity: 0;
  transition: opacity 260ms ease;
}
#photos-view[aria-hidden="false"] { visibility: visible; opacity: 1; }
#stage:not([data-view="photos"]) #photos-view { display: none; }
#stage[data-view="photos"] #controls { bottom: var(--frame); }
#stage[data-view="photos"] #event-info,
#stage[data-view="photos"] #scrubber,
#stage[data-view="photos"] #header-logo,
#stage[data-view="photos"] #zoom-in,
#stage[data-view="photos"] #zoom-out,
#stage[data-view="photos"] #play-pause,
#stage[data-view="photos"] #drawer-toggle { display: none; }

.photos-header {
  padding: 1.1rem 1.4rem 0.6rem;
  border-bottom: 2px solid var(--card-border);
  flex: 0 0 auto;
}
.photos-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}
.photos-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 1.8vw, 36px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.photos-slideshow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  background: var(--accent);
  border: 2px solid var(--accent);
  color: var(--cadjavo-crna);
  font-family: var(--font-display);
  font-size: clamp(13px, 1vw, 17px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
}
.photos-slideshow:hover { transform: translateY(-1px); }
.photos-slideshow .material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-style: normal; font-weight: normal;
  font-size: 1.2rem; line-height: 1;
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.photos-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.photos-tab {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  background: transparent;
  border: 2px solid var(--cadjavo-crna);
  color: var(--cadjavo-crna);
  font-family: var(--font-display);
  font-size: clamp(13px, 1vw, 17px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.photos-tab:hover { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.photos-tab.active {
  background: var(--cadjavo-crna);
  color: var(--prljavo-bijela);
  border-color: var(--cadjavo-crna);
}
.photos-tab .tab-count {
  font-family: var(--font-body);
  font-size: 0.8em;
  opacity: 0.6;
}
.photos-tab.active .tab-count { opacity: 0.9; }

.photos-grid {
  flex: 1 1 auto;
  min-height: 0;                /* lets the flex child actually scroll */
  overflow-y: auto;
  padding: 1rem 1.4rem 1.6rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  /* No grid-auto-rows here — each tile's aspect-ratio determines its height
     and every tile shares the same width, so all tiles end up identical. */
  gap: 0.9rem;
  align-content: start;
}
.photos-tile {
  position: relative;
  padding: 0;
  background: color-mix(in srgb, var(--cadjavo-crna) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 40%, transparent);
  cursor: pointer;
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  display: flex;
  flex-direction: column;
  /* Fixed total height — every tile is identical regardless of caption length. */
  height: 200px;
}
.photos-tile:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}
.photos-thumb {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  object-fit: cover;
  display: block;
}
.photos-tile-caption {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--cadjavo-crna);
  padding: 0.4rem 0.6rem 0.5rem;
  line-height: 1.25;
  /* Fixed two-line strip so all tiles match height exactly. */
  height: 3rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Photos lightbox (full-screen viewer + autoplay) ─────────────────── */

#photos-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgba(14, 14, 16, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
}
#photos-lightbox[aria-hidden="false"] { display: flex; }

.lightbox-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 4vw 6vw 8vw;
  /* The stage sits visually under the close/prev/next/play buttons in the
     DOM order but covers the whole viewport. Disable pointer events here
     so clicks fall through to the lightbox backdrop (→ close on background
     click) and reach the buttons that need them. */
  pointer-events: none;
}
.lightbox-photo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 220ms ease;
  /* Ken-Burns base — applied only when autoplay is on, see .autoplay-on below */
  transform-origin: 50% 50%;
}
.lightbox-photo.loaded { opacity: 1; }

.lightbox-close,
.lightbox-prev,
.lightbox-next,
.lightbox-play {
  position: absolute;
  z-index: 2;            /* above the stage / photo */
  background: rgba(241, 236, 225, 0.92);
  border: 2px solid var(--prljavo-bijela);
  color: var(--cadjavo-crna);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 180ms ease, transform 180ms ease;
}
.lightbox-close { top: 1.2rem; right: 1.2rem; width: 3rem; height: 3rem; border-radius: 50%; }
.lightbox-prev,
.lightbox-next { top: 50%; transform: translateY(-50%); width: 3.4rem; height: 3.4rem; border-radius: 50%; }
.lightbox-prev { left: 1.2rem; }
.lightbox-next { right: 1.2rem; }
.lightbox-play {
  bottom: 1.2rem; right: 1.2rem;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  display: grid; place-items: center;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover,
.lightbox-play:hover { background: var(--accent); }

.lightbox-close .material-symbols-outlined,
.lightbox-prev .material-symbols-outlined,
.lightbox-next .material-symbols-outlined,
.lightbox-play .material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-style: normal; font-weight: normal;
  font-size: 1.5rem; line-height: 1;
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Show the right play/pause glyph based on autoplay state. */
.lightbox-play[data-autoplay="off"] .icon-pause { display: none; }
.lightbox-play[data-autoplay="on"]  .icon-play  { display: none; }
.lightbox-play[data-autoplay="on"] {
  background: var(--accent);
  border-color: var(--accent);
}

.lightbox-meta {
  position: absolute;
  z-index: 2;
  left: 1.6rem;
  bottom: 1.4rem;
  max-width: min(70vw, 900px);
  color: var(--prljavo-bijela);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
.lightbox-caption {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 32px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.15;
  margin-bottom: 0.25rem;
}
.lightbox-attribution {
  font-family: var(--font-body);
  font-size: clamp(13px, 1vw, 18px);
  letter-spacing: 0.04em;
  opacity: 0.82;
}

/* Ken-Burns autoplay effect — slow pan/zoom over each slide. Four
   variants alternated via data-kb so consecutive slides don't drift the
   same way. Only active while autoplay is on. */
@keyframes kb-0 { from { transform: scale(1.00) translate(  0%,   0%); } to { transform: scale(1.08) translate(-2%, -1%); } }
@keyframes kb-1 { from { transform: scale(1.08) translate( 2%,  1%); } to { transform: scale(1.00) translate( 0%,  0%); } }
@keyframes kb-2 { from { transform: scale(1.00) translate(  0%,   0%); } to { transform: scale(1.08) translate( 2%, -1%); } }
@keyframes kb-3 { from { transform: scale(1.08) translate(-2%,  1%); } to { transform: scale(1.00) translate( 0%,  0%); } }

#photos-lightbox.autoplay-on .lightbox-photo[data-kb="0"].loaded { animation: kb-0 7000ms ease-out forwards; }
#photos-lightbox.autoplay-on .lightbox-photo[data-kb="1"].loaded { animation: kb-1 7000ms ease-out forwards; }
#photos-lightbox.autoplay-on .lightbox-photo[data-kb="2"].loaded { animation: kb-2 7000ms ease-out forwards; }
#photos-lightbox.autoplay-on .lightbox-photo[data-kb="3"].loaded { animation: kb-3 7000ms ease-out forwards; }

@media (prefers-reduced-motion: reduce) {
  #photos-lightbox.autoplay-on .lightbox-photo { animation: none !important; }
}