/* ============================================================
   components/lightbox.css
   The gallery photo link (rfi-glb) and the full-screen overlay
   (rfi-glbx) that assets/js/lightbox.js opens on top of the page.

   Loaded ONLY on a singular view that actually renders a gallery
   (inc/lightbox.php, holod_lightbox_assets()), which is why it is
   not in holod_ds_components(): that list ships on every page.

   Colours come from the scrim and inverse tokens; nothing here
   carries a colour of its own.
   ============================================================ */

/* The photo link inside a gallery. cursor: zoom-in is the only affordance the strip has,
   so it is doing real work rather than decorating. */
.rfi-glb { display: block; cursor: zoom-in; }
.rfi-article__gallery .rfi-glb { flex: none; }

/* The overlay. display:none until the script adds is-open, so it can never appear without
   JavaScript; the anchors then simply open the full image on their own. */
.rfi-glbx { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; }
.rfi-glbx.is-open { display: flex; }
.rfi-glbx__scrim { position: absolute; inset: 0; background: var(--rfi-scrim); }
.rfi-glbx__stage { position: relative; margin: 0; padding: 0; max-width: 92vw; max-height: 92vh; display: flex; align-items: center; justify-content: center; }
.rfi-glbx__img { max-width: 92vw; max-height: 92vh; width: auto; height: auto; border-radius: var(--rfi-radius-sm); box-shadow: var(--rfi-shadow-up); }

/* Controls: white marks on the dimmed ground, icon only, so they carry no colour beyond the
   inverse token and opacity gives the resting and hover states. */
.rfi-glbx__close, .rfi-glbx__nav {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--rfi-inverse); cursor: pointer; opacity: .8; transition: opacity .15s;
}
.rfi-glbx__close:hover, .rfi-glbx__nav:hover { opacity: 1; }
.rfi-glbx__close { top: 16px; right: 16px; width: 44px; height: 44px; }
.rfi-glbx__nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.rfi-glbx__prev { left: 12px; }
.rfi-glbx__next { right: 12px; }
.rfi-glbx__nav[hidden] { display: none; }
.rfi-glbx__close svg { width: 26px; height: 26px; }
.rfi-glbx__nav svg { width: 30px; height: 30px; }
.rfi-glbx__close:focus-visible, .rfi-glbx__nav:focus-visible { outline: 2px solid var(--rfi-teal); outline-offset: 2px; }

/* Freeze the page behind the overlay while it is open. */
.rfi-glbx-lock { overflow: hidden; }