/* ---------- Lightbox (js/lightbox.js) ----------
   Click any case study visual to view it full screen. Solid page
   background, image fit to the screen, Body/S caption in Neutral/Hairline, eyebrow
   counter, Neutral/Surface controls that turn Signal Orange on hover. */
.is-zoomable { cursor: zoom-in; }
.is-zoomable:focus-visible { outline: 2px solid var(--signal-orange); outline-offset: 4px; }

html.lightbox-open { overflow: hidden; }

.lightbox {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--neutral-bg); /* solid page background: the dialog fills the screen */
  color: var(--neutral-surface);
}
.lightbox::backdrop { background: transparent; }
.lightbox[open] { display: flex; align-items: center; justify-content: center; animation: lightbox-in 0.2s ease; }
@keyframes lightbox-in { from { opacity: 0; } }

.lightbox-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 72px 96px 56px;
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
  cursor: zoom-out;
}
.lightbox-img {
  display: block;
  max-width: 100%;
  max-height: calc(100dvh - 72px - 56px - 12px - 44px);
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: default;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.lightbox-img.is-loaded { opacity: 1; }
.lightbox-caption {
  max-width: 708px;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  color: var(--neutral-hairline);
}

.lightbox-count {
  position: absolute;
  top: 24px;
  left: 24px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 44px;
  letter-spacing: 1.08px;
  color: var(--neutral-hairline);
}

.lightbox-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target);
  height: var(--touch-target);
  padding: 0;
  border: 0.5px solid rgba(255, 74, 28, 0.5);
  border-radius: 4px;
  background: rgba(15, 5, 2, 0.6);
  color: var(--neutral-surface);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.lightbox-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lightbox-btn:hover,
.lightbox-btn:focus-visible {
  color: var(--signal-orange);
  border-color: var(--signal-orange);
  background: var(--signal-tint);
  outline: none;
}
.lightbox-close { top: 24px; right: 24px; }
.lightbox-prev,
.lightbox-next { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }

/* Phone: image runs edge to edge, arrows drop to the bottom corners */
@media (max-width: 640px) {
  .lightbox-figure { padding: 76px 0 84px; }
  .lightbox-img { max-height: calc(100dvh - 76px - 84px - 12px - 44px); }
  .lightbox-caption { padding: 0 var(--space-md); }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 24px; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox[open], .lightbox-img { animation: none; transition: none; }
}