/* =========================================================
   viewer.css — the lightbox, shared by the gallery and the 3D page
   =========================================================
   These rules used to live in style.css, where only the gallery could reach them. The 3D
   page (/web3DInteractive/) is a separate CRA build and cannot import that sheet, so the
   viewer's styles were lifted out here and js/viewer.js injects this file itself. Both
   front-ends therefore render the same lightbox from one source — change it once.

   Colour and type come from the gallery's tokens where they exist. The fallbacks are
   style.css's own values: the 3D page has no :root of ours, and a lightbox with an
   unresolved var() renders as an unstyled box.
   --------------------------------------------------------- */
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(4,2,10,0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(6px);
  /* A magnified work is wider than the viewport it sits in, and this element is a fixed box
     the size of the screen: without this the picture spills past the overlay's own edge onto
     the page behind it. Nothing else clips it — the overlay has no scroll and the body's own
     overflow is set by the viewer only while it is open. */
  overflow: hidden;
  /* The gesture is the lightbox's, not the browser's. A pinch that the browser has claimed as a
     page zoom never reaches the touch handler, and by the time a `touchmove` arrives there is no
     reliable way to cancel it — `touch-action` is the one that decides, before the gesture
     starts, so it has to be here in the sheet rather than written from the handler. Nothing is
     scrollable inside a fixed inset:0 overlay, so no pan is lost by refusing it. */
  touch-action: none;
}

#lightbox.open {
  opacity: 1;
  pointer-events: all;
}

#lightbox.open #lb-img {
  transform: scale(1);
}

#lb-img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 30px 100px rgba(0,0,0,0.8);
  transform: scale(0.96);
  transition: transform 0.3s ease;
}

/* Was an inline style on the <video> in index.html; the size belongs with the rest of the
   viewer's layout. Which of the two elements is shown is the viewer's business, not CSS's. */
#lb-video {
  max-width: 90vw;
  max-height: 82vh;
}

#lb-close {
  position: absolute;
  top: 20px;
  left: 24px;
  background: var(--glass2, rgba(8, 5, 18, 0.88));
  border: 1px solid var(--border2, rgba(192, 40, 42, 0.35));
  color: var(--text, #e8ddd0);
  font-size: 1.4rem;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  font-family: var(--font-ui, 'Barlow Condensed', system-ui, sans-serif);
  font-weight: 700;
  /* Explicit for the same reason as the pseudo-elements below: the 3D page's buttons.css
     gives every <button> a glow, and nothing here was overriding it. The :hover rule is a
     pseudo-class and so still outranks this. */
  box-shadow: none;
}

/* This button is ours end to end, and both front-ends have a sheet that dresses a bare
   <button> for furniture of its own. The 3D page's buttons.css is the one that showed: it
   gives every button a 3.5em ::before and an ::after, so the close button drew a black
   rounded lozenge standing over its square, and took the same rule's glow. An element's own
   rules do not reach its pseudo-elements — #lb-close setting width and border-radius leaves
   the ::before's untouched — so the button has to say it has none. The id outranks the
   element selector whichever sheet the page loaded first, and content: none generates
   neither box. Measured on the 3D page before this: ::before computed 21x78 over 44x44. */
#lb-close::before,
#lb-close::after {
  content: none;
}

#lb-close:hover {
  background: rgba(192,40,42,0.35);
  border-color: var(--red, #c0282a);
  box-shadow: var(--glow-red, 0 0 24px rgba(192,40,42,0.5));
}

.lb-title {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-ui, 'Barlow Condensed', system-ui, sans-serif);
  font-size: 0.95rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted, #8a7a6a);
  white-space: nowrap;
}

/* These two came from the gallery's own max-width:900px block. They travel with the viewer
   so the lightbox is the same size on a phone in both front-ends. */
@media (max-width: 900px) {
  #lb-img { max-height: 80vh; }
  .lb-title { font-size: 0.85rem; }
}