/* ============================================================
   lightbox.css — full-screen single-image viewer for project pages.

   Clicking a `.gallery` image opens this black-ground overlay showing
   that image large + a centred caption (title · year), with the signature
   logo + CLOSE in the corners. Move through the project's images by
   tapping the left/right third, swiping, or the arrow keys; Esc / CLOSE /
   logo dismiss. Markup + wiring: js/lightbox.js.

   Figma: "Single Image" (v2 page, nodes 112:476 / 112:734 / 112:757).
   Load AFTER base.css; pair with js/lightbox.js.
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;                 /* above the sticky site nav (60) */
  background: #000;             /* Lightbox 2.2: black ground (Figma 116:2523/2561/2587; was --placeholder grey) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;   /* stage fills the frame; the 20px padding sets the top/bottom margins */
  padding: 20px;        /* 20px above the image / below the caption (per client) */
  cursor: none;         /* the hand-drawn arrow (.lb-cursor) stands in for the OS cursor over the whole viewer */
  outline: none;        /* container is the on-open focus target (tabindex -1); no ring */
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--overlay-fade) var(--ease),
              visibility 0s linear var(--overlay-fade);
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--overlay-fade) var(--ease);
}

/* Lock the page behind the open viewer. */
body.lightbox-open { overflow: hidden; }

/* ---------- Tap zones: left half = previous, right half = next ----------
   Full-height hit areas split at the midline (no inert middle — direction
   switches the moment you cross halfway, matching the arrow cursor). They
   sit beneath the nav (z-index) so the x/logo stay clickable; the stage
   above them takes no pointer events, so taps over the image still reach
   the zone behind it (stories-style). */
.lb-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  border: 0;
  background: none;
  padding: 0;
  z-index: 1;
  cursor: none;          /* explicit: the <button> UA cursor must not override .lightbox's */
}
.lb-prev { left: 0; }
.lb-next { right: 0; }

/* ---------- Custom arrow cursor (prev/next zones) ----------
   A hand-drawn arrow (Figma "Arrows", node 116:1058) follows the pointer
   over the side thirds and points the way. White art + `difference` blend,
   so it reads near-black on paper and inverts to white over the image —
   same trick as the corner nav + the home VIEW PROJECT wheel. Mouse only;
   JS parks it offscreen and toggles `.is-visible`. */
.lb-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;                                  /* above the image + nav, but pointer-events:none */
  pointer-events: none;
  transform: translate3d(-200px, -200px, 0);   /* parked offscreen until tracked */
  will-change: transform;
  mix-blend-mode: difference;
}
.lb-cursor-arrow {
  display: block;
  width: 24px;                                 /* small — a cursor, not a badge */
  height: 15px;                                /* ~the arrows' 36:22 ratio; `meet` keeps art undistorted */
  transform: translate(-50%, -50%);            /* centre the arrow on the pointer; JS adds the tilt rotation */
  transform-origin: 50% 50%;
  opacity: 0;
  transition: opacity 0.18s var(--ease);
  filter: brightness(0) invert(1);             /* white mark — the blend inverts it */
}
.lb-cursor.is-visible .lb-cursor-arrow { opacity: 1; }

/* ---------- Image + caption (centred) ---------- */
.lb-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;              /* 20px between the image and the caption */
  margin: 0;
  flex: 1 1 auto;         /* fill the frame so the image can grow into the leftover height */
  width: 100%;
  min-height: 0;
  z-index: 1;
  pointer-events: none;   /* let taps fall through to the zones behind */
}
.lb-img {
  display: block;
  flex: 1 1 0;            /* expand to fill the height left by the margins, gap + caption */
  min-height: 0;          /* let the flex item shrink below its intrinsic height */
  max-width: 56vw;        /* ~Figma: image ≈ 55% of the frame width */
  width: 100%;
  object-fit: contain;    /* letterbox the photo within the filled box, keeping its aspect */
  border-radius: 2px;
}
/* Cross-dissolve ghost (js/lightbox.js): a clone of the OUTGOING photo, pinned
   over the new one at the same box, that fades + drifts out so slides
   cross-dissolve instead of hard-cutting. Caption fades on its own (see JS). */
.lb-ghost {
  position: fixed;
  z-index: 1;             /* over the stage image, under the nav (2) + cursor (3) */
  object-fit: contain;
  border-radius: 2px;
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--lb-cross) var(--ease),
              transform var(--lb-cross) var(--ease);
}
.lb-caption {
  transition: opacity var(--lb-cross) var(--ease);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  color: var(--type-inverse);   /* light caption on the black 2.2 ground */
}
.lb-title {
  font-weight: var(--fw-regular);
  font-size: var(--fs-p);
  line-height: var(--lh-p);
}
.lb-year {
  font-weight: var(--fw-regular);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

/* ---------- Corner nav (signature logo · CLOSE) ----------
   Same white + `difference` chrome as the site nav, so it reads near-black
   on the paper and inverts to white over the image. */
.lb-nav {
  position: absolute;
  top: 22px;
  left: 22px;
  right: 22px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  z-index: 2;
  mix-blend-mode: difference;
  cursor: none;          /* no OS cursor over the nav strip; the logo/x re-enable a pointer below */
}
.lb-logo { display: block; line-height: 0; cursor: pointer; }
.lb-logo-mark {
  display: block;
  width: 96px;                       /* Figma Single Image nav logo */
  height: auto;
  filter: brightness(0) invert(1);   /* white mark — the blend inverts it */
}
.lb-close {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  line-height: 0;                    /* no text baseline gap around the mark */
}
/* Handwritten x close mark — mirrors the nav's .nav-close-mark (Figma 2.1). */
.lb-close-mark {
  display: block;
  width: var(--x-mark-box);          /* 20px-tall glyph (shared --x-mark-box, matches the nav) */
  height: auto;
  filter: brightness(0) invert(1);   /* white mark — the .lb-nav difference blend inverts it */
}

@media (max-width: 1024px) {
  .lb-img { max-width: 72vw; }
}
@media (max-width: 640px) {
  /* Figma "Lightbox 640 2.1": 40px top/bottom, 20px sides. */
  .lightbox { padding: 40px 20px; }
  .lb-img { max-width: 86vw; }
  .lb-logo-mark { width: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox { transition-duration: 0.01s; }
  .lb-cursor-arrow { transition: none; }
}