/* ============================================================
   components/lightbox.css
   The shared gallery lightbox: the clickable photo link (rfi-glb), used
   in every gallery, and the full-screen overlay (rfi-glbx) that
   assets/js/lightbox.js opens on top of the page. Colours come from the
   scrim + inverse tokens; nothing here carries a colour of its own.
   ============================================================ */

/* The photo link inside any gallery. It signals that it enlarges, and in the company
   grid it fills the fixed 3:2 box so the image can crop to the box, not the link. */
.rfi-glb { display: block; cursor: zoom-in; }
.rfi-co-gallery__item .rfi-glb { width: 100%; height: 100%; }
.rfi-article__gallery .rfi-glb { flex: none; }

/* The overlay. Display:none until the script adds is-open, so it can never show
   without JavaScript (the anchors then just 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, no chip, so they carry no
   colour beyond the inverse token; opacity gives the resting/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; }