/* =====================================================
   PHOTO LIGHTBOX — js/lightbox.css
   ---------------------------------------------------
   Opens when a photo in .event-photos-grid is tapped.
   - Scrim: dark dim layer behind everything
   - Photo: 8px from screen walls, capped at viewport,
            preserves aspect ratio, 8px rounded corners
   - Close icon: 12px below the photo (visual cue;
                 also a real tap target)
   - Tap outside the photo closes the lightbox.
   - Browser back also closes.
   - Native pinch-zoom enabled on the photo itself.
   ===================================================== */

#lightbox {
  position: fixed;
  inset: 0;
  z-index: 11000;          /* above bottom nav */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  gap: 12px;

  background: rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);

  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

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

#lightbox[hidden] {
  display: none;
}

/* ── Photo ──────────────────────────────────────────── */
.lightbox-img {
  display: block;
  max-width: 100%;
  /* Subtract the gap (12px) and the close icon (40px) so the
     photo + cue + gap together fit the viewport without scroll. */
  max-height: calc(100dvh - 16px - 12px - 40px);
  object-fit: contain;
  border-radius: 8px;

  /* Native pinch-zoom — and don't let the browser turn taps
     into double-tap-to-zoom that conflicts with our close logic. */
  touch-action: pinch-zoom;
  user-select: none;
  -webkit-user-drag: none;

  /* Subtle entrance */
  transform: scale(0.96);
  transition: transform 200ms ease;
}

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

/* ── Close icon (visual cue + tap target) ──────────── */
.lightbox-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition: background 150ms ease, transform 120ms ease;

  /* Re-enable pointer events; the parent scrim catches them
     for outside-taps to close. */
  pointer-events: auto;
  flex: 0 0 auto;
}

.lightbox-close:hover  { background: rgba(255, 255, 255, 0.18); }
.lightbox-close:active { transform: scale(0.92); }

.lightbox-close svg {
  width: 18px;
  height: 18px;
  stroke: #FFFFFF;
  stroke-width: 2.4;
  fill: none;
  stroke-linecap: round;
}

/* ── Body lock when open ────────────────────────────── */
body.lightbox-open {
  overflow: hidden;
  /* Prevent iOS rubber-band scroll under the lightbox */
  touch-action: none;
}

/* ── Cursor hint on grid photos ─────────────────────── */
.event-photos-grid img {
  cursor: zoom-in;
}