/* ============================================================
   LIGHTBOX — full-page photo preview, triggered by any
   [data-lightbox] image (see public/js/photo-lightbox.js).
   Single shared instance, markup in partials/footer.ejs.
   ============================================================ */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(23, 16, 13, .92);
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}
.lightbox.is-open { display: flex; }
body.lightbox-open { overflow: hidden; }

.lightbox-img {
  max-width: min(90vw, 900px);
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

.lightbox-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  line-height: 1;
  color: var(--color-paper);
  background: rgba(241, 231, 210, .12);
  border: 1px solid rgba(241, 231, 210, .3);
  cursor: pointer;
}
.lightbox-close:hover { background: rgba(241, 231, 210, .22); }

/* Real photos only get the pointer/zoom affordance - placeholder
   initial-blocks aren't wired to data-lightbox, so they keep their
   card's normal click-through-to-profile behavior. */
img[data-lightbox] { cursor: zoom-in; }

/* -- Program modal (homepage "View Schedule" button, see public/js/program-modal.js) --
   Shares .lightbox/.lightbox-close above. PDF mode needs a document-shaped
   frame (.pdf-modal-frame below); Image mode just reuses .lightbox-img as-is. */
.pdf-modal-frame {
  width: min(94vw, 900px);
  height: 88vh;
  background: var(--color-paper);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.pdf-modal-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Below tablet width, no inline iframe viewer - see the comment in
   pages/home.ejs. A cramped iframe PDF viewer inside an already-small
   modal is worse on a phone than just handing off to the OS's own PDF
   handling via a card (styled as .pdf-fallback-card, see
   components/cards.css). */
.pdf-modal-mobile { display: none; }
@media (max-width: 767px) {
  .pdf-modal-frame { height: auto; width: min(94vw, 420px); background: none; box-shadow: none; }
  .pdf-modal-frame iframe { display: none; }
  .pdf-modal-mobile { display: block; background: var(--color-paper); }
}