/* ============================================================
   GALLERY LIGHTBOX
   Shared by index.html (the preview grid) and gallery.html (the rooms).
   The grid photos are links (see assets/js/gallery.js); this is the album
   they open into. Full-bleed dark ground so the photo is the only thing in
   the room, with the room label, caption and counter under it.

   Moved out of home.css 2026-09-05 so gallery.html does not have to load
   the whole home stylesheet for one overlay.
   ============================================================ */
.gal-link {
  display: block; width: 100%; height: 100%;
  cursor: zoom-in; -webkit-tap-highlight-color: transparent;
}
.gal-link:focus-visible { outline: 3px solid var(--gold-200); outline-offset: 3px; }

.lb {
  position: fixed; inset: 0; z-index: 100050;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 14, 12, 0.94);
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, visibility 0s linear .22s;
  /* iOS: dvh so the browser chrome sliding away doesn't crop the photo */
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
}
.lb.is-open { opacity: 1; visibility: visible; transition: opacity .22s ease; }
body.lb-open { overflow: hidden; }

.lb-stage {
  margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px;
  max-width: min(1400px, 100%); max-height: 100%;
}
.lb-img {
  max-width: 100%; max-height: calc(100dvh - 170px);
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--r-md, 14px);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.9);
  background: rgba(255,255,255,0.04);
}
.lb-cap {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  justify-content: center; text-align: center;
  font-family: var(--body); font-size: 15px; color: var(--cream);
}
/* "Santa on the Job · Visits" — the room name travels with the photo. */
.lb-where {
  flex-basis: 100%;
  font-family: var(--mono, monospace); font-size: 11px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--gold);
}
.lb-where[hidden] { display: none; }
.lb-count {
  font-family: var(--mono, monospace); font-size: 13px; letter-spacing: .08em;
  color: var(--gold-200); opacity: .85;
}

.lb-close, .lb-nav {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(246,239,223,0.26);
  background: rgba(20,28,24,0.72); color: var(--cream);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: filter .18s ease, transform .05s ease;
}
.lb-close { top: max(14px, env(safe-area-inset-top)); right: 16px; width: 46px; height: 46px; font-size: 19px; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 30px; line-height: 1; }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
@media (hover: hover) and (pointer: fine) {
  .lb-close:hover, .lb-nav:hover { filter: brightness(1.5); }
}
.lb-close:active, .lb-nav:active { transform: scale(0.94); }
.lb-nav:active { transform: translateY(-50%) scale(0.94); }
.lb-close:focus-visible, .lb-nav:focus-visible { outline: 2px solid var(--gold-200); outline-offset: 3px; }

@media (max-width: 620px) {
  .lb { padding-left: 10px; padding-right: 10px; }
  .lb-img { max-height: calc(100dvh - 190px); }
  .lb-nav { width: 46px; height: 46px; font-size: 26px; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
  .lb-cap { font-size: 14px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .lb { transition: none; }
  .lb-close, .lb-nav { transition: none; }
}