/* ==========================================================================
   Atla — Lightbox (window.Atla.Lightbox)
   The full-screen pop-up image viewer used by the DSLR map and mobile tiles.

   All styling lives here (strict CSP: no inline styles, no <style> blocks).
   JS toggles classes and sets a handful of CSS custom properties via the CSSOM:
     --lb-accent   : tint colour (from opts.accent) for the backdrop/accents
     --lb-scale    : current zoom scale (1 = fit)
     --lb-tx/--lb-ty : pan/drag translation in px
     --lb-drag-x   : horizontal swipe-nav offset in px
     --lb-dismiss-y: vertical swipe-to-dismiss offset in px
     --lb-backdrop : backdrop opacity (0..1) during swipe-to-dismiss

   Cascade: tokens -> root overlay -> stage/picture -> blur-up/spinner
            -> chrome (top bar/buttons/caption/counter) -> META panel
            -> filmstrip -> view-transition -> motion/responsive.

   Depends on assets/css/styles.css being linked FIRST for the design tokens
   (--bg, --ink, --ink-dim, --ink-mute, --font-sans/--sans, --font-mono, --dur,
   --ease, etc.) and on the inline icon sprite (icons.svg) being present in the
   host page so <use href="#i-NAME"> resolves with currentColor.
   ========================================================================== */

/* ---- Local tokens ------------------------------------------------------- */
.atla-lb {
  --lb-accent: #a0572c;          /* tint, overridden by opts.accent via CSSOM */
  --lb-scale: 1;
  --lb-tx: 0px;
  --lb-ty: 0px;
  --lb-drag-x: 0px;
  --lb-dismiss-y: 0px;
  --lb-backdrop: 1;
  --lb-chrome: clamp(0.7rem, 0.4rem + 1.2vw, 1.4rem);
  --lb-strip-h: 5.4rem;
  /* Display + UI families: prefer the site tokens added by styles.css, else
     fall back to the self-hosted families directly, then to system stacks. */
  --lb-serif: var(--font-serif, "Fraunces", Georgia, "Times New Roman", serif);
  --lb-sans: var(--font-sans, "Inter", system-ui, sans-serif);
  --lb-line: rgb(236 229 216 / 0.12);
  --lb-line-strong: rgb(236 229 216 / 0.22);
  --lb-panel: rgb(14 14 18 / 0.94);
}

/* Sprite-driven icons inside the lightbox. The host page inlines the secure
   sprite and styles.css supplies the base `.sprite` + `.icon` rules; this
   override just tunes the lightbox icon sizing/stroke. */
.atla-lb .icon {
  width: 1.4rem;
  height: 1.4rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  flex: none;
  pointer-events: none;
}

/* ---- Overlay root (a <dialog>) ---------------------------------------- */
/* The dialog supplies the top-layer + ::backdrop; we also style our own
   tinted backdrop layer so we can fade it during swipe-to-dismiss. */
dialog.atla-lb {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;       /* real backdrop is .atla-lb__backdrop */
  color: var(--ink);
  overflow: hidden;
  overscroll-behavior: contain;
  /* containment for compositing */
  contain: layout paint style;
}
dialog.atla-lb::backdrop { background: transparent; }
dialog.atla-lb:not([open]) { display: none; }

/* Lock the page behind an open dialog without layout shift. */
:root:has(dialog.atla-lb[open]) { overflow: hidden; scrollbar-gutter: stable; }

/* Tinted, dimmable backdrop layer. */
.atla-lb__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(130% 130% at 50% 38%,
      color-mix(in oklab, var(--lb-accent) 26%, #000 74%) 0%,
      color-mix(in oklab, var(--lb-accent) 12%, #000 88%) 46%,
      #050506 100%);
  opacity: var(--lb-backdrop);
  cursor: zoom-out;
}
/* Solid fallback for browsers without color-mix(). */
@supports not (background: color-mix(in oklab, #000 50%, #fff)) {
  .atla-lb__backdrop { background: rgb(8 8 10 / 0.97); }
}

/* ---- Stage (the gesture-owning image area) ---------------------------- */
.atla-lb__stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  touch-action: none;            /* JS owns all gestures */
  overscroll-behavior: contain;
  cursor: zoom-in;
}
.atla-lb.is-zoomed .atla-lb__stage { cursor: grab; }
.atla-lb.is-panning .atla-lb__stage { cursor: grabbing; }

/* The moving frame: combines swipe-nav, swipe-dismiss, pan + zoom. */
.atla-lb__frame {
  position: relative;
  display: grid;
  place-items: center;
  max-width: 100%;
  max-height: 100%;
  transform:
    translate3d(calc(var(--lb-drag-x) + var(--lb-tx)),
                calc(var(--lb-dismiss-y) + var(--lb-ty)), 0)
    scale(var(--lb-scale));
  transform-origin: center center;
  transition: transform var(--dur) var(--ease);
  will-change: transform;
}
.atla-lb.is-interacting .atla-lb__frame { transition: none; }

/* ---- Picture + image -------------------------------------------------- */
.atla-lb__picture { display: block; max-width: 100vw; max-height: 100dvh; }
.atla-lb__img {
  display: block;
  max-width: 100vw;
  max-height: 100dvh;
  width: auto;
  height: auto;
  object-fit: contain;           /* show the FULL art-directed crop */
  user-select: none;
  -webkit-user-drag: none;
  background: rgb(0 0 0 / 0.2);
  border-radius: 4px;
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.55);
  /* Morph target for the View-Transition (see view-transition section). */
  view-transition-name: atla-lb-img;
}

/* Blur-up: the low-res thumb sits under the full image and blurs out. */
.atla-lb__blur {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: blur(22px) saturate(1.1);
  transform: scale(1.04);        /* hide blurred edge bleed */
  opacity: 1;
  transition: opacity var(--dur) var(--ease);
}
.atla-lb.is-loaded .atla-lb__blur { opacity: 0; }
.atla-lb.is-loaded .atla-lb__img { opacity: 1; }
.atla-lb__img { opacity: 0; transition: opacity var(--dur) var(--ease); }

/* ---- Loading spinner -------------------------------------------------- */
.atla-lb__spinner {
  position: absolute;
  z-index: 2;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: 2.6rem;
  height: 2.6rem;
  margin: -1.3rem 0 0 -1.3rem;
  border-radius: 50%;
  border: 3px solid rgb(236 229 216 / 0.25);
  border-block-start-color: var(--ink);
  animation: atla-lb-spin 0.8s linear infinite;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.atla-lb.is-loading .atla-lb__spinner { opacity: 1; }
@keyframes atla-lb-spin { to { transform: rotate(360deg); } }

/* ---- Chrome layer (top bar + edge nav + caption) ---------------------- */
.atla-lb__chrome {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;          /* clicks fall through to the stage */
}
.atla-lb__chrome > * { pointer-events: auto; }

/* Top bar: counter + title (left) and the toolbar (right). */
.atla-lb__top {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: var(--lb-chrome);
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.55), transparent);
}
.atla-lb__head {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  padding-block-start: 0.3rem;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.6);
}
.atla-lb__counter {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  color: var(--ink-dim);
  white-space: nowrap;
}
.atla-lb__counter b { color: var(--ink); font-weight: 600; }
.atla-lb__title {
  font-family: var(--lb-serif);
  font-weight: 500;
  font-optical-sizing: auto;
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  /* keep the title from crowding the toolbar */
  max-inline-size: min(60ch, 60vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.atla-lb__title:empty { display: none; }

/* Toolbar (info / zoom / strip / fullscreen / close). */
.atla-lb__tools {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
}

/* Shared button look. */
.atla-lb__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 2.7rem;
  height: 2.7rem;
  color: var(--ink-dim);
  background: rgb(10 10 11 / 0.5);
  border: 1px solid var(--lb-line);
  border-radius: 12px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              opacity var(--dur) var(--ease);
}
.atla-lb__btn:hover,
.atla-lb__btn:focus-visible {
  color: var(--ink);
  background: color-mix(in oklab, var(--lb-accent) 42%, #0a0a0b 58%);
  border-color: var(--lb-line-strong);
  transform: translateY(-1px);
}
.atla-lb__btn:active { transform: translateY(0) scale(0.96); }
.atla-lb__btn[disabled] { opacity: 0.32; cursor: default; }
.atla-lb__btn[aria-pressed="true"] {
  color: var(--ink);
  background: color-mix(in oklab, var(--lb-accent) 55%, #0a0a0b 45%);
  border-color: color-mix(in oklab, var(--lb-accent) 60%, #fff 40%);
}
.atla-lb__btn--close:hover,
.atla-lb__btn--close:focus-visible {
  background: rgb(126 53 81 / 0.7);   /* wine accent for destructive/close */
}

/* Edge navigation buttons (round, vertically centred). */
.atla-lb__nav {
  position: absolute;
  inset-block-start: 50%;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  transform: translateY(-50%);
}
.atla-lb__prev { inset-inline-start: var(--lb-chrome); }
.atla-lb__next { inset-inline-end: var(--lb-chrome); }
/* Slide the next button clear of the META panel when it is open (wide screens). */
@media (min-width: 700px) {
  .atla-lb.has-meta .atla-lb__next {
    inset-inline-end: calc(min(88vw, 340px) + var(--lb-chrome));
  }
}
.atla-lb__nav:hover,
.atla-lb__nav:focus-visible { transform: translateY(-50%) scale(1.06); }
.atla-lb__nav:active { transform: translateY(-50%) scale(0.97); }
.atla-lb__nav .icon { width: 1.6rem; height: 1.6rem; }

/* Bottom caption bar. */
.atla-lb__bar {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--lb-chrome) + 1.2rem) var(--lb-chrome) var(--lb-chrome);
  background: linear-gradient(to top, rgb(0 0 0 / 0.66), transparent);
  pointer-events: none;
}
.atla-lb__bar > * { pointer-events: auto; }
.atla-lb__caption {
  max-inline-size: 64ch;
  margin-inline: auto;
  font-family: var(--lb-sans);
  font-size: var(--step--1);
  line-height: 1.5;
  text-align: center;
  color: var(--ink-dim);
  text-shadow: 0 1px 6px rgb(0 0 0 / 0.6);
}
.atla-lb__caption:empty { display: none; }

/* When the filmstrip is open, lift the caption above it. */
.atla-lb.has-strip .atla-lb__bar { inset-block-end: var(--lb-strip-h); }

/* ---- META panel (slide-in info: title/place/date/caption/EXIF) -------- */
.atla-lb__meta {
  position: absolute;
  /* Start below the top bar so the toolbar (info/zoom/close) stays clickable
     while the panel is open; the panel is layered above the rest of the chrome. */
  inset-block-start: calc(var(--lb-chrome) + 3.6rem);
  inset-block-end: 0;
  inset-inline-end: 0;
  z-index: 4;
  width: min(88vw, 340px);
  padding: 1.4rem var(--lb-chrome) var(--lb-chrome);
  background: var(--lb-panel);
  border-start-start-radius: 14px;
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border-inline-start: 1px solid var(--lb-line-strong);
  box-shadow: -24px 0 60px rgb(0 0 0 / 0.5);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease);
}
.atla-lb.has-meta .atla-lb__meta { transform: none; }
.atla-lb__meta:focus { outline: none; }

.atla-lb__meta-title {
  font-family: var(--lb-serif);
  font-weight: 500;
  font-optical-sizing: auto;
  font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.7rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-block-end: 0.3rem;
}
.atla-lb__meta-place {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  margin-block-end: 1.2rem;
}
.atla-lb__meta-place .icon { width: 1.05rem; height: 1.05rem; color: var(--lb-accent); }
.atla-lb__meta-caption {
  font-family: var(--lb-sans);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-dim);
  margin-block-end: 1.4rem;
}
.atla-lb__meta-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem 1rem;
  align-items: baseline;
  font-size: var(--step--1);
  padding-block-start: 1.2rem;
  border-block-start: 1px solid var(--lb-line);
}
.atla-lb__meta-dl dt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ink-mute);
  font-family: var(--lb-sans);
}
.atla-lb__meta-dl dt .icon { width: 1.05rem; height: 1.05rem; color: var(--ink-dim); }
.atla-lb__meta-dl dd {
  text-align: end;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

/* ---- Filmstrip -------------------------------------------------------- */
.atla-lb__strip {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 3;
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem var(--lb-chrome);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  background: rgb(8 8 9 / 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-block-start: 1px solid var(--lb-line);
  transform: translateY(100%);
  transition: transform var(--dur) var(--ease);
  pointer-events: auto;
}
.atla-lb.has-strip .atla-lb__strip { transform: translateY(0); }
.atla-lb__thumb {
  flex: 0 0 auto;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: rgb(0 0 0 / 0.3);
  opacity: 0.55;
  scroll-snap-align: center;
  transition: opacity var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.atla-lb__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.atla-lb__thumb:hover,
.atla-lb__thumb:focus-visible { opacity: 0.9; }
.atla-lb__thumb[aria-current="true"] {
  opacity: 1;
  border-color: color-mix(in oklab, var(--lb-accent) 70%, #fff 30%);
  transform: scale(1.04);
}
@supports not (background: color-mix(in oklab, #000 50%, #fff)) {
  .atla-lb__thumb[aria-current="true"] { border-color: var(--lb-accent); }
}

/* ---- Accent-tinted focus ring (overrides global currentColor ring) ----- */
.atla-lb :focus-visible {
  outline: 3px solid color-mix(in oklab, var(--lb-accent) 60%, #fff 40%);
  outline-offset: 3px;
  border-radius: 8px;
}
@supports not (background: color-mix(in oklab, #000 50%, #fff)) {
  .atla-lb :focus-visible { outline-color: var(--ink); }
}

/* ---- Live region (screen-reader announcements) ------------------------ */
.atla-lb__live {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---- View-Transition morph (open / navigate) -------------------------- */
/* The morph is driven by document.startViewTransition() in JS (feature-checked
   with an instant fallback). The image carries a stable view-transition-name so
   the old/new frame snapshots cross-fade + morph; the chrome simply fades. */
::view-transition-group(atla-lb-img) {
  animation-duration: var(--dur);
  animation-timing-function: var(--ease);
}
::view-transition-old(atla-lb-img),
::view-transition-new(atla-lb-img) {
  /* keep aspect ratios honest while the group box morphs */
  height: 100%;
  object-fit: contain;
}

/* ---- Open transition (zoom-in feel; used when VT is unavailable) ------- */
.atla-lb__backdrop,
.atla-lb__chrome,
.atla-lb__meta,
.atla-lb__strip { transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.atla-lb.is-opening .atla-lb__frame { animation: atla-lb-pop var(--dur) var(--ease); }
@keyframes atla-lb-pop {
  from { opacity: 0; transform:
    translate3d(0,0,0) scale(0.92); }
  to   { opacity: 1; }
}

/* ---- Responsive: tighten chrome on small screens ---------------------- */
@media (max-width: 699.98px) {
  .atla-lb__btn { width: 2.6rem; height: 2.6rem; }
  .atla-lb__tools { gap: 0.3rem; }
  .atla-lb__nav {
    inset-block-start: auto;
    inset-block-end: calc(var(--lb-chrome) + 4.4rem);
    transform: none;
  }
  .atla-lb__nav:hover, .atla-lb__nav:focus-visible { transform: scale(1.06); }
  .atla-lb__nav:active { transform: scale(0.97); }
  .atla-lb.has-strip .atla-lb__nav {
    inset-block-end: calc(var(--lb-strip-h) + var(--lb-chrome) + 0.4rem);
  }
  .atla-lb__caption { max-inline-size: 100%; }
  .atla-lb__meta { width: 100%; }
  /* When the title would crowd a 6-button toolbar, let it wrap out of the bar. */
  .atla-lb__title { max-inline-size: 50vw; }
}

/* ---- Reduced motion: kill all transitions/animations ------------------- */
@media (prefers-reduced-motion: reduce) {
  .atla-lb,
  .atla-lb * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
  .atla-lb__spinner { animation: atla-lb-spin 0.8s linear infinite !important; }
  /* Disable the View-Transition morph entirely (JS also skips startViewTransition). */
  ::view-transition-group(atla-lb-img),
  ::view-transition-old(atla-lb-img),
  ::view-transition-new(atla-lb-img) { animation: none !important; }
}