/* flux-lightbox.css — archive photograph lightbox: centred and responsive at every size (2026-11-03).
   Loaded by explore.html AFTER /style.css, which it overrides only for the overlay. Kept separate because the
   Portal re-uploads its own copy of style.css on every catalog publish.
   Root cause it fixes:
     · ≤ 900 px the overlay was a bottom sheet (align-items:flex-end) with a fixed 52dvh image area → the photo sat
       low with a dead band of page above it (up to ~185 px below centre).
     · > 900 px the image area was a fixed 58vh inside a 92vh panel (vh ignores mobile browser bars) → on short
       windows / phones in landscape the controls overflowed and the panel scrolled; INFO pushed things out.
   Now: the image area takes the space left between the top bar and the controls (shrinking, never overflowing),
   the photograph is centred inside it, and heights use dynamic viewport units with vh fallbacks. */

#ar-overlay {
  height: 100vh;                         /* fallback */
  height: 100dvh;                        /* follows the visible viewport (mobile address bar) */
  padding: 1rem;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}
.ar-ov-panel {
  max-height: 100%;                      /* never taller than the visible viewport */
  overflow: hidden;                      /* the image area gives way instead of the panel scrolling */
}
.ar-ov-img-wrap {
  flex: 0 1 58vh;                        /* same size as before when there is room … */
  flex: 0 1 58dvh;
  height: auto;
  min-height: 7rem;                      /* … shrinking when there is not */
  box-sizing: border-box;
}
.ar-ov-img {                             /* the photograph itself is centred in the image area, whole, undistorted */
  position: absolute;
  top: 1.2rem; right: 1.2rem; bottom: 1.2rem; left: 1.2rem;   /* (not `inset`: older Safari) */
  margin: auto;
  max-width: calc(100% - 2.4rem);
  max-height: calc(100% - 2.4rem);
}
.ar-ov-info { max-height: 40vh; max-height: 40dvh; overflow-y: auto; }   /* INFO scrolls inside itself */

@media (max-width: 900px) {
  /* phones, small tablets, narrow windows: full screen instead of a bottom sheet */
  #ar-overlay {
    padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
    align-items: stretch;
  }
  .ar-ov-panel {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-top: none;
  }
  .ar-ov-img-wrap { flex: 1 1 auto; min-height: 6rem; padding: 0; }
  .ar-ov-img { top: 0.5rem; right: 0.5rem; bottom: 0.5rem; left: 0.5rem; max-width: calc(100% - 1rem); max-height: calc(100% - 1rem); }
  .ar-ov-info { max-height: 35vh; max-height: 35dvh; }
}