/* APE-426 in-page photo viewer, shared by the homepage (Past Events, Photos)
   and the /events/:slug page (APE-427). Rules keep their original order from
   styles.css, mobile.css and past-events.css; load this file after them. */
.lightbox{border:0;border-radius:18px;padding:0;background:#0d1510;color:#fff;max-width:min(92vw,1000px);width:100%;box-shadow:0 30px 90px rgba(0,0,0,.45)}
.lightbox::backdrop{background:rgba(0,0,0,.78)}
.lightbox img{width:100%;max-height:78vh;object-fit:contain;background:#08100a}
.lightbox-caption{padding:16px 20px;font-size:14px;color:#d8dfd9}
.lightbox-close{position:absolute;right:14px;top:12px;width:42px;height:42px;border-radius:50%;border:0;background:rgba(0,0,0,.58);color:#fff;font-size:28px;cursor:pointer}
@media(max-width:600px){
  .lightbox{width:100vw;max-width:100vw;border-radius:0;margin:0}
  .lightbox img{max-height:75vh}
  .lightbox-caption{padding:14px 16px}
}
.lightbox-event-link{display:block;margin:0 20px 18px;color:#b2e3a9;font-size:14px;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.lightbox-event-link[hidden]{display:none}
.lightbox[open]{
  display:flex;flex-direction:column;margin:auto;
  width:min(96vw,1100px);max-width:1100px;
  max-height:calc(100dvh - 24px);overflow:hidden
}
.lightbox-header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;background:#101b13}
.lightbox-header strong{display:block;font-size:15px;font-weight:800;color:#fff}
.lightbox-counter{display:block;font-size:12px;color:#cee0ce}
.lightbox .lightbox-close{position:static;flex:0 0 42px}
.lightbox-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;flex:1 1 auto;background:#08100a}
.lightbox .lightbox-image{display:block;width:100%;height:auto;max-height:calc(100dvh - 215px);object-fit:contain;background:#08100a}
.lightbox .lightbox-image[hidden],.lightbox-error[hidden]{display:none}
.lightbox-error{padding:24px;text-align:center;color:#fff}
.lightbox-prev,.lightbox-next{
  position:absolute;z-index:2;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;min-width:46px;min-height:52px;
  border:0;border-radius:12px;background:rgba(0,0,0,.65);color:#fff;
  font-size:38px;line-height:1;cursor:pointer
}
.lightbox-prev{left:10px}.lightbox-next{right:10px}
.lightbox-prev[hidden],.lightbox-next[hidden],.lightbox-filmstrip[hidden]{display:none!important}
.lightbox-caption{flex:0 0 auto;min-height:0;padding:6px 16px;color:#d8e5dc;max-height:11vh;overflow-y:auto}
.lightbox-filmstrip{
  flex:0 0 auto;display:flex;gap:8px;min-height:0;padding:9px 16px 12px;
  overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;
  background:#101b13
}
.lightbox-filmstrip-item{
  flex:0 0 72px;width:72px;height:60px;display:block;overflow:hidden;
  padding:0;border:2px solid transparent;border-radius:6px;
  background:#263729;cursor:pointer;opacity:.8
}
.lightbox-filmstrip-item[aria-current="true"]{border-color:#a7eb9a;opacity:1}
.lightbox-filmstrip .lightbox-filmstrip-item img{
  display:block;width:100%;height:100%;max-height:none;object-fit:cover;background:transparent
}
.lightbox .lightbox-event-link{margin:0;padding:5px 16px 12px;flex:0 0 auto}
.lightbox :is(button,a):focus-visible{outline:3px solid #a7eb9a;outline-offset:2px}
@media(max-width:600px){
  .lightbox[open]{width:100vw;max-width:100vw;max-height:100dvh;border-radius:0}
  .lightbox-header{padding:8px 12px}
  .lightbox-stage{min-height:0}
  .lightbox .lightbox-image{max-height:calc(100dvh - 195px)}
  .lightbox-prev,.lightbox-next{min-width:40px;min-height:48px;font-size:32px}
  .lightbox-filmstrip{padding:8px 12px calc(10px + env(safe-area-inset-bottom))}
  .lightbox-filmstrip-item{flex-basis:62px;width:62px;height:54px}
  .lightbox-caption{padding:6px 12px}
}

/* APE-426: Size the image to the actual flexible stage rather than the
   viewport. A long caption/source link can consume space in landscape. */
.lightbox[open]{
  --gallery-safe-left:env(safe-area-inset-left, 0px);
  --gallery-safe-right:env(safe-area-inset-right, 0px);
  height:min(820px,calc(100dvh - 24px))
}
.lightbox-stage{
  overflow:hidden;
  padding-inline:var(--gallery-safe-left) var(--gallery-safe-right)
}
.lightbox .lightbox-image{
  width:100%;height:100%;min-height:0;max-height:100%;object-fit:contain
}
/* Landscape phones can be wider than 600px. Protect navigation, close,
   captions, and thumbnails against either left or right screen cutouts. */
.lightbox-header{
  padding-inline:max(16px,calc(var(--gallery-safe-left) + 12px))
                 max(16px,calc(var(--gallery-safe-right) + 12px))
}
.lightbox-prev{left:max(10px,calc(var(--gallery-safe-left) + 10px))}
.lightbox-next{right:max(10px,calc(var(--gallery-safe-right) + 10px))}
.lightbox-caption,.lightbox .lightbox-event-link{
  padding-left:max(12px,calc(var(--gallery-safe-left) + 12px));
  padding-right:max(12px,calc(var(--gallery-safe-right) + 12px))
}
/* Safe-area gutters must be OUTSIDE the scrollable filmstrip: padding inside
   overflow-x:auto scrolls away and allows thumbnails under the notch. */
.lightbox-filmstrip{
  margin-inline:var(--gallery-safe-left) var(--gallery-safe-right);
  padding-inline:12px;
  /* The horizontal scroller itself clips: no scrolled thumbnail may paint
     or take a pointer hit through the exterior safe-area gutters. */
  clip-path:inset(0)
}
@media(max-width:600px){.lightbox[open]{height:100dvh}}