/* Frame lightbox: the full-screen <dialog class="lightbox"> on the film page (assets/js/site/lightbox.js).
   project.html only; requires tokens.css, base.css, site.css.
   The frame sits on black, letterboxed (object-fit: contain), never cropped, inside the safe areas: a
   56 px bar above it, 56 px below it (on phones the previous/next buttons take the foot). From 720 px the
   previous/next buttons stand beside the picture, never over it. The info panel is a strip over the foot
   of the frame, and from 1024 px a side panel (300–360 px) the picture steps aside for. The open and
   close fades, the settle and the counter roll are WAAPI in lightbox.js (skipped under reduced motion and
   Motion off). */

.lightbox {
  --lb-side: max(clamp(16px, 4vw, 64px), env(safe-area-inset-left), env(safe-area-inset-right));
  --lb-top: calc(56px + env(safe-area-inset-top));
  --lb-foot: calc(56px + env(safe-area-inset-bottom));
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden; overscroll-behavior: contain;
  background: #000; color: var(--paper);
}
.lightbox::backdrop { background: #000; }

.lightbox__bar {
  position: absolute; inset: 0 0 auto; z-index: 3; height: var(--lb-top);
  padding: env(safe-area-inset-top) max(var(--s4), env(safe-area-inset-right)) 0 max(var(--s4), env(safe-area-inset-left));
  display: flex; align-items: center; gap: var(--s4);
}
.lightbox__count {
  margin: 0; flex: none; display: flex; align-items: center; white-space: pre;
  font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.3; letter-spacing: var(--tracking-mono);
  font-variant-numeric: tabular-nums; color: var(--paper);
}
/* The frame number rolls a line on next / previous (lightbox.js): it is clipped to one line. */
.lightbox__roll { display: block; height: 1.3em; overflow: hidden; }
.lightbox__roll > span { display: block; }
.lightbox__of { color: var(--paper-3); }
.lightbox__set { flex: 1; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.72rem; }
.lightbox__tools { margin-left: auto; display: flex; gap: var(--s2); flex: none; }
.lightbox__btn {
  min-height: var(--target); padding: 0 var(--s4); display: inline-flex; align-items: center; gap: var(--s2);
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent; color: var(--paper-2);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: var(--tracking-mono); text-transform: uppercase;
  transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.lightbox__btn:hover, .lightbox__btn[aria-expanded="true"] { border-color: var(--tungsten); color: var(--tungsten); }

/* The stage takes its new box at once (Info open or closed): under reduced motion and Motion off base.css
   gives every property a 0.01 ms transition, which would leave the picture's tag placed for the old box. */
.lightbox__stage {
  position: absolute; z-index: 1; top: var(--lb-top); bottom: var(--lb-foot); left: var(--lb-side); right: var(--lb-side);
  touch-action: pinch-zoom; user-select: none; -webkit-user-select: none; transition: none;
}
.lightbox__img { width: 100%; height: 100%; object-fit: contain; -webkit-user-drag: none; }
.lightbox__img:not([src]) { visibility: hidden; }
/* The placeholder badge sits at the foot of the picture, like the lead frame's (lightbox.js places it). */
.lightbox__tag { position: absolute; left: var(--s3); bottom: var(--s3); background: rgb(7 8 10 / 0.85); }   /* on the picture: 4.5:1 on white too */

.lightbox__nav {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 50%; background: rgb(7 8 10 / 0.55); color: var(--paper);
  transition: border-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.lightbox__nav--prev { left: max(24px, env(safe-area-inset-left)); }
.lightbox__nav--next { right: max(24px, env(safe-area-inset-right)); }
.lightbox__nav:hover { border-color: var(--tungsten); color: var(--tungsten); }
/* At either end the button stays in the Tab order (aria-disabled): dimmed by its colours, never by its
   opacity, which would dim its focus ring too. */
.lightbox__nav[aria-disabled="true"], .lightbox__nav[aria-disabled="true"]:hover { border-color: var(--line); color: var(--paper-3); cursor: default; }

/* Info: the credit first (DP before director), then the frame's own lines. */
.lightbox__info {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; max-height: 30svh; overflow: auto;
  padding: var(--s4) var(--lb-side) calc(var(--s4) + env(safe-area-inset-bottom));
  display: grid; gap: var(--s2); align-content: start;
  background: rgb(7 8 10 / 0.9); border-top: 1px solid var(--line);
}
.lightbox__credit { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: var(--tracking-mono); color: var(--paper); text-wrap: balance; }
.lightbox__line { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--paper-2); }
.lightbox__caption { font-family: var(--font-display); font-style: italic; font-size: var(--step-1); line-height: 1.35; color: var(--paper); max-width: 60ch; }
.lightbox__badges { display: flex; flex-wrap: wrap; gap: var(--s2); }
.lightbox__badges:empty { display: none; }

/* Phones: the previous / next buttons at the foot, the frame above them, the info strip over its foot. */
@media (max-width: 719px) {
  .lightbox { --lb-foot: calc(104px + env(safe-area-inset-bottom)); }
  .lightbox__nav { top: auto; bottom: calc(24px + env(safe-area-inset-bottom)); transform: none; }
  .lightbox__set { display: none; }
  .lightbox__info { bottom: var(--lb-foot); padding-bottom: var(--s4); }
}
/* No keyboard hints where there is no keyboard to speak of. */
@media (hover: none) { .lightbox__btn kbd { display: none; } }

/* From 720 px the stage clears the previous/next buttons: their 24 px from the edge, their 56 px, a 16 px gap. */
@media (min-width: 720px) {
  .lightbox { --lb-side: calc(max(24px, env(safe-area-inset-left), env(safe-area-inset-right)) + 72px); }
}
/* From 1024 px the info is a column beside the frame (300–360 px), which steps aside for it. */
@media (min-width: 1024px) {
  .lightbox { --lb-info: clamp(300px, 26vw, 360px); }
  .lightbox__info {
    top: var(--lb-top); bottom: 0; left: auto; width: var(--lb-info); max-height: none;
    padding: var(--s6) var(--s6) calc(var(--s6) + env(safe-area-inset-bottom));
    border-top: 0; border-left: 1px solid var(--line); gap: var(--s4);
  }
  .lightbox.is-info .lightbox__stage { right: calc(var(--lb-info) + var(--lb-side)); }
  .lightbox.is-info .lightbox__nav--next { right: calc(var(--lb-info) + 24px); }
}

@media (forced-colors: active) {
  .lightbox__nav, .lightbox__btn { border-color: ButtonText; }
  .lightbox__nav[aria-disabled="true"] { border-color: GrayText; color: GrayText; }
}