/* ==========================================================
   LIGHTBOX — click a gallery image to see it full size.

   The gallery crops to fill its rows; this is where an image is finally
   shown whole, so the frame here is `contain`, never `cover`.
   ========================================================== */

/* The affordance is deliberately NOT `cursor: zoom-in`. The site hides the
   native cursor (body { cursor: none }) and draws its own dot, so setting
   a cursor here would put the system arrow back on screen alongside it,
   two pointers at once. Instead js/lightbox.js grows the custom dot over
   a gallery image, the same response links already give, and the image
   lifts very slightly. */
.project-gallery img{
  transition: filter .3s var(--ease), opacity .3s var(--ease);
}
.project-gallery img:hover{
  filter: brightness(1.04);
}
/* keyboard users get a visible target too */
.project-gallery img:focus-visible{
  outline: 2px solid var(--pink);
  outline-offset: 3px;
}

.lightbox{
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  /* near-solid so nothing of the page bleeds through and competes with
     the picture; still the palette black rather than a new colour */
  background: color-mix(in srgb, var(--black) 97%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
body.lightbox-open .lightbox{
  opacity: 1;
  visibility: visible;
}
body.lightbox-open{ overflow: hidden; }

.lightbox-figure{
  margin: 0;
  max-width: 92vw;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.lightbox-figure img{
  max-width: 92vw;
  max-height: 78vh;
  width: auto;
  height: auto;
  /* whole image, never cropped — the opposite of the gallery's cover */
  object-fit: contain;
  display: block;
  /* a slight rise as it appears, so it reads as coming forward */
  transform: scale(.98);
  opacity: 0;
  transition: transform .35s var(--ease), opacity .3s var(--ease);
}
body.lightbox-open .lightbox-figure img{
  transform: scale(1);
  opacity: 1;
}

.lightbox-caption{
  max-width: min(70ch, 90vw);
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
  color: var(--grey);
}

/* ---------- click zones ----------
   Three invisible full-height columns: back, close, forward. They sit above
   the picture so clicking the left of an image steps back, rather than the
   arrows being the only target.

   Not equal thirds. Stepping through is the common action and closing is the
   rare one, so the close column is deliberately narrow: someone who barely
   moves the pointer off centre still lands on next or previous, which is
   almost always what they meant. 16% is still around 230px on a laptop, a
   generous target for something you do once per gallery. */
.lightbox-zone{
  position: absolute;
  top: 0; bottom: 0;
  z-index: 2;
}
.lightbox-zone--prev{ left: 0;  width: 42%; }
.lightbox-zone--mid { left: 42%; width: 16%; }
.lightbox-zone--next{ right: 0; width: 42%; }

/* the picture sits under the zones, the buttons stay above them */
.lightbox-figure{ position: relative; z-index: 1; }

/* The cursor dot is --fg, which on a project page is black, so over this
   near-black overlay it disappeared. White while the viewer is open. */
body.lightbox-open .cursor-dot{ background: var(--white); }

/* ...and in a zone it becomes the control itself, carrying the glyph for
   what a click there will do. Set by js/lightbox.js, which also blanks it at
   the first and last image so a dead end never looks clickable. */
.cursor-dot.cursor-glyph{
  width: 54px; height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 26px;
  line-height: 1;
  padding-bottom: 3px; /* optical centring: the glyphs sit high in the em */
}
/* White rather than pink: this thing follows the pointer the entire time the
   viewer is open, and pink kept pulling the eye off the picture. White reads
   as part of the interface and lets the photograph stay the loudest thing on
   screen. */
body.lightbox-open .cursor-dot.cursor-glyph{
  background: var(--white);
  color: var(--black);
}

/* ---------- controls ---------- */
.lightbox button{
  position: absolute;
  z-index: 3;
  background: none;
  border: none;
  padding: 10px;
  color: var(--white);
  cursor: pointer;
  line-height: 1;
  transition: color .25s ease, transform .25s var(--ease), opacity .25s ease;
}
.lightbox button:hover{ color: var(--pink); }
.lightbox button[disabled]{ opacity: .25; cursor: default; }
.lightbox button[disabled]:hover{ color: var(--white); }

.lightbox-close{
  top: clamp(12px, 2.5vh, 26px);
  right: clamp(12px, 3vw, 30px);
  font-size: 26px;
}
.lightbox-prev,
.lightbox-next{
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
}
.lightbox-prev{ left: clamp(4px, 2vw, 26px); }
.lightbox-next{ right: clamp(4px, 2vw, 26px); }
.lightbox-prev:hover{ transform: translateY(-50%) translateX(-3px); }
.lightbox-next:hover{ transform: translateY(-50%) translateX(3px); }

.lightbox-count{
  position: absolute;
  top: clamp(14px, 2.8vh, 28px);
  left: clamp(14px, 3vw, 30px);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--grey);
}

@media (max-width: 700px){
  /* arrows sit low and out of the way of the picture on a phone; swiping
     is the primary way through */
  .lightbox-prev,
  .lightbox-next{
    top: auto;
    bottom: clamp(14px, 3vh, 26px);
    transform: none;
    font-size: 26px;
  }
  .lightbox-prev:hover{ transform: none; }
  .lightbox-next:hover{ transform: none; }
  .lightbox-figure img{ max-height: 68vh; }
}

@media (prefers-reduced-motion: reduce){
  .lightbox,
  .lightbox-figure img{ transition-duration: .01ms; }
}