/* Lightbox (Figma "ViewPortExample", node 143:97547): 35% dark scrim, centered
 * image, round prev/next arrows 48px from the edges, 8px pagination dots.
 * Markup is built by assets/js/lightbox.js; images opt in via [data-lightbox]
 * (+ optional data-lightbox-group / data-lightbox-full). */

[data-lightbox] { cursor: zoom-in; }

.udi-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 13, 13, .35);
  opacity: 0;
  transition: opacity .2s ease;
}
.udi-lightbox.is-open { opacity: 1; }
/* Closed: the hidden attribute must win over .udi-lightbox { display:flex },
   otherwise the transparent overlay keeps swallowing every click and hover. */
.udi-lightbox[hidden] { display: none; }

.udi-lightbox__img {
  display: block;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 128px);
  border-radius: var(--radius-s);
  object-fit: contain;
  background: var(--color-white);
}

/* Round control buttons (close + arrows). */
.udi-lightbox__btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-grey-900);
  cursor: pointer;
  transition: background-color .2s ease;
}
.udi-lightbox__btn:hover { background: var(--color-grey-200); }
.udi-lightbox__btn:focus-visible { outline: 2px solid var(--color-white); outline-offset: 2px; }
.udi-lightbox__btn svg { width: 24px; height: 24px; }

.udi-lightbox__close { top: 24px; right: 24px; }
.udi-lightbox__prev,
.udi-lightbox__next { top: 50%; transform: translateY(-50%); }
.udi-lightbox__prev { left: 48px; }
.udi-lightbox__next { right: 48px; }
.udi-lightbox__prev svg { transform: rotate(180deg); }

/* Pagination dots (8px, current #272727, rest #CECECE, both 40%). */
.udi-lightbox__dots {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-2x);
}
.udi-lightbox__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #cecece;
  opacity: .4;
  cursor: pointer;
}
.udi-lightbox__dot.is-active { background: #272727; }

/* Single image: no navigation chrome. */
.udi-lightbox--single .udi-lightbox__prev,
.udi-lightbox--single .udi-lightbox__next,
.udi-lightbox--single .udi-lightbox__dots { display: none; }

@media (max-width: 600px) {
  /* Smaller arrows hugging the edges so they cover as little of the image
     as possible; the close button keeps its 44px tap target. */
  .udi-lightbox__prev,
  .udi-lightbox__next { width: 30px; height: 30px; }
  .udi-lightbox__prev svg,
  .udi-lightbox__next svg { width: 16px; height: 16px; }
  .udi-lightbox__prev { left: 4px; }
  .udi-lightbox__next { right: 4px; }
  .udi-lightbox__close { top: 12px; right: 12px; }
  .udi-lightbox__img { max-height: calc(100dvh - 96px); }
}

@media (prefers-reduced-motion: reduce) {
  .udi-lightbox { transition: none; }
}