/* ============================================================
   BYC 2026 - shared screenshot lightbox (byc-lightbox.js).
   Loaded last on every 2026 page so it supersedes the old per-
   template .lightbox blocks (byc-product / byc-speed / byc-shop).

   The overlay look matches the original single-image lightbox
   (near-black wash, hairline-bordered image, mono caption); this
   file adds the gallery chrome: prev/next arrows and the counter.
   ============================================================ */

/* lock page scroll while open */
html.lb-locked, html.lb-locked body { overflow: hidden; }

.lightbox#byc-lb {
  position: fixed; inset: 0; z-index: 20000;
  display: none; align-items: center; justify-content: center;
  padding: 4vw;
  background: rgba(5, 5, 6, .93);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: zoom-out;
}
.lightbox#byc-lb.open { display: flex; }

/* the image */
#byc-lb .lb-img {
  max-width: 100%; max-height: 86vh; display: block;
  border: 1px solid var(--line-strong); border-radius: 0;
  background: var(--bg);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
}

/* caption + counter (mono, centred under the image) */
#byc-lb .lb-meta {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-muted);
  max-width: 90vw; white-space: nowrap;
}
#byc-lb .lb-count { color: var(--text); font-variant-numeric: tabular-nums; }
#byc-lb .lb-cap {
  color: var(--text-muted); overflow: hidden; text-overflow: ellipsis;
  letter-spacing: .1em;
}
#byc-lb .lb-count:empty { display: none; }
#byc-lb .lb-count:empty + .lb-cap { letter-spacing: .14em; }

/* close affordance (top-right) */
#byc-lb .lb-close {
  position: absolute; top: 18px; right: 22px;
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-muted);
  padding: 6px 8px; transition: color .15s ease;
}
#byc-lb .lb-close:hover { color: var(--text); }

/* prev / next arrows */
#byc-lb .lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px; display: flex; align-items: center; justify-content: center;
  appearance: none; cursor: pointer;
  background: rgba(20, 20, 22, .6); border: 1px solid var(--line-strong);
  color: var(--text); font-size: 26px; line-height: 1;
  border-radius: 0; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
#byc-lb .lb-nav:hover { background: var(--bg-soft); border-color: var(--bracket, var(--line-strong)); color: var(--accent); }
#byc-lb .lb-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#byc-lb .lb-nav[hidden] { display: none; }
#byc-lb .lb-prev { left: max(2vw, 14px); }
#byc-lb .lb-next { right: max(2vw, 14px); }
#byc-lb .lb-nav svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* the zoom affordance on triggers (added by the JS) */
.lb-zoom { cursor: zoom-in; }

@media (max-width: 720px) {
  .lightbox#byc-lb { padding: 0; }
  #byc-lb .lb-img { max-height: 80vh; }
  #byc-lb .lb-nav { width: 44px; height: 44px; }
  #byc-lb .lb-prev { left: 8px; }
  #byc-lb .lb-next { right: 8px; }
  #byc-lb .lb-meta { bottom: 14px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  #byc-lb .lb-nav, #byc-lb .lb-close { transition: none; }
}