/*
 * Carousel lightbox (#rfnLightbox) — shared by the portfolio and the
 * entertainment galleries. Companion to assets/js/gallery-lightbox.js; the
 * markup is emitted on wp_footer by refinery_gallery_lightbox_markup().
 *
 * Deliberately its own classes rather than the static build's
 * .keyart-lightbox: script.js still contains the frozen single-image lightbox
 * code, and sharing class names with a component another script thinks it owns
 * is how two lightboxes end up fighting over one overlay.
 */

.rfn-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.rfn-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.rfn-lightbox-figure {
  margin: 0;
  /* No max-width: the stage is a full-bleed clipping viewport now and the
     neighbours are SUPPOSED to reach the screen edges. Capping the figure
     would inset the whole track and leave a strip of backdrop down each
     side, which is exactly the floating-thumbnail look this replaced. */
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

/*
 * THE STAGE IS A SLIDING TRACK (2026-08-21, Kay).
 *
 * It used to be three free-standing boxes with a gap: a big centre flanked by
 * two small floating thumbnails at 14vw, and stepping rebuilt the DOM so the
 * art hard-cut from one piece to the next. Now the neighbours are FULL HEIGHT,
 * butted straight against the centre with no gap, darkened rather than shrunk,
 * and an arrow slides the whole track one slide along.
 *
 * HOW THE GEOMETRY WORKS, because none of it is arbitrary:
 *
 * - Every slide is `height: var(--rfn-stage-h)` with `width: auto`, so they all
 *   share one height and their real aspect ratios set their widths. Equal
 *   heights are what lets them touch — a gap of 0 only reads as "joined" if the
 *   edges line up.
 * - --rfn-stage-h is set PER SLIDE by the JS, not fixed here: a wide landscape
 *   piece at 74vh would be wider than the viewport, so the JS shortens the
 *   stage until the centre fits. Shortening the stage shortens the neighbours
 *   with it, so they stay flush.
 * - The viewport clips. Neighbours are meant to run off both edges — that
 *   overflow IS the effect, not a bug to fix.
 * - The track is centred by `left: 50%` plus a JS-computed translateX that
 *   subtracts the current slide's own centre. Slides have different widths, so
 *   there is no fixed step size to animate; every position is measured.
 */
.rfn-lightbox-viewport {
  width: 100vw;
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
}

.rfn-lightbox-stage {
  --rfn-stage-h: 74vh;

  position: relative;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 200px;
  will-change: transform;
}

/* Added by the JS only for the duration of a step, so the initial render and
   the re-centre after a step never animate. */
.rfn-lightbox-stage.is-sliding {
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

.rfn-lightbox-slide {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rfn-lightbox-media {
  display: block;
  height: var(--rfn-stage-h);
  width: auto;
  max-width: none;
  max-height: none;
}

.rfn-lightbox-slide--current .rfn-lightbox-media {
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);

  /*
   * A FLOOR UNDER fitStage(), not a second opinion about width.
   *
   * gallery-lightbox.js already caps this: it measures the centre's ratio
   * and shrinks --rfn-stage-h until the slide fits min(70vw, 1200px), which
   * is why a 10:1 banner renders WHOLE at about 1008x100 rather than running
   * off both edges. `max-width: none` above is deliberate and right for the
   * neighbours, which are supposed to bleed.
   *
   * But that cap lives only in JS, and fitStage() returns early when the
   * image has not decoded (`if (!nw || !nh) return`). If the load handler
   * that re-runs it never fires, the stage keeps the stylesheet's 74vh with
   * nothing bounding width — at 10:1 that is a 9,500px slide. This bounds
   * that case at the same figure the JS uses.
   *
   * `contain` is what makes the clamp safe: with a fixed height and a capped
   * width the box stops matching the image's ratio, and without it the art
   * would stretch instead of letterboxing.
   */
  max-width: min(70vw, 1200px);
  object-fit: contain;
}

/*
 * Darkened, not faded. `opacity` would let the backdrop show through and the
 * neighbour would read as translucent; brightness keeps it a solid image that
 * is simply not lit. Same reason the centre needs an explicit brightness(1) —
 * it inherits nothing, but stating it makes the pair obvious.
 */
.rfn-lightbox-slide--prev,
.rfn-lightbox-slide--next {
  cursor: pointer;
  filter: brightness(0.3);
  transition: filter 0.25s ease;
}

.rfn-lightbox-slide--current {
  filter: brightness(1);
}

.rfn-lightbox-slide--prev:hover,
.rfn-lightbox-slide--prev:focus-visible,
.rfn-lightbox-slide--next:hover,
.rfn-lightbox-slide--next:focus-visible {
  filter: brightness(0.55);
  outline: none;
}

/* The outermost pair exist only so a step never slides in from emptiness.
   They are always past the viewport edge; hiding them from the a11y tree
   keeps a screen reader from meeting the same piece three times. */
.rfn-lightbox-slide--far {
  filter: brightness(0.3);
}

/* Peeks are a large-screen luxury. Below this the centre needs the room, and
   the arrows + counter already say the carousel continues. */
/* Peeks are a large-screen luxury. Below this the centre needs the room, and
   the arrows + counter already say the carousel continues.

   They are kept in the DOM and simply moved out of sight (opacity 0), NOT
   `display:none` — the track's centring maths measures slide widths, and
   removing boxes mid-track would put the current slide off-centre. */
@media (max-width: 1023px) {
  .rfn-lightbox-slide:not(.rfn-lightbox-slide--current) {
    opacity: 0;
    pointer-events: none;
  }
}

.rfn-lightbox-caption {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

.rfn-lightbox-title {
  color: var(--white);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.rfn-lightbox-type {
  color: var(--chartreuse);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rfn-lightbox-counter {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.rfn-lightbox-close,
.rfn-lightbox-arrow {
  position: fixed;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.rfn-lightbox-close:hover,
.rfn-lightbox-close:focus-visible,
.rfn-lightbox-arrow:hover,
.rfn-lightbox-arrow:focus-visible {
  background: var(--chartreuse);
  color: var(--dark);
}

.rfn-lightbox-close {
  top: 1.25rem;
  right: 1.25rem;
  font-size: 1.6rem;
  line-height: 1;
}

.rfn-lightbox-arrow {
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  line-height: 1;
}

.rfn-lightbox-arrow--prev { left: 1.25rem; }
.rfn-lightbox-arrow--next { right: 1.25rem; }

@media (max-width: 640px) {
  /* Arrows drop below the art rather than covering it on a narrow screen. */
  .rfn-lightbox-arrow {
    top: auto;
    bottom: 1.1rem;
    transform: none;
    width: 42px;
    height: 42px;
  }

  .rfn-lightbox-arrow--prev { left: calc(50% - 58px); }
  .rfn-lightbox-arrow--next { right: calc(50% - 58px); }
}

@media (prefers-reduced-motion: reduce) {
  .rfn-lightbox {
    transition: none;
  }

  /* The JS also skips its slide animation under this preference; this is the
     belt to that braces, so a step is an instant change either way. */
  .rfn-lightbox-stage,
  .rfn-lightbox-stage.is-sliding {
    transition: none;
  }
}