/* Shared click-to-enlarge overlay (assets/js/lightbox.js) for any
   [data-lightbox-group] gallery — the object gallery carousel and a
   single post's photo grid. One overlay, built once and reused. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(20 22 33 / 90%);
  backdrop-filter: blur(var(--theme-blur));
  opacity: 0;
  transition: opacity 0.3s var(--theme-ease-signature);
}

/* Same reasoning as nav-overlay.css: an author "display" rule beats the
   UA's built-in [hidden] one, so closing (which sets [hidden] after the
   transition) doesn't leave an invisible-but-still-fixed, still-
   clickable layer blocking the page underneath. */
.lightbox[hidden] {
  display: none;
}

.lightbox.is-open {
  opacity: 1;
}

.lightbox__figure {
  position: relative;
  margin: 0;
  max-width: min(92vw, 1600px);
  max-height: 92svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--theme-space-xs);
}

.lightbox__image {
  display: block;
  max-width: 100%;
  max-height: 85svh;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  scale: 0.98;
  transition: opacity 0.3s var(--theme-ease-signature), scale 0.3s var(--theme-ease-signature);
}

.lightbox__image.is-visible {
  opacity: 1;
  scale: 1;
}

.lightbox__counter {
  color: color-mix(in srgb, var(--brand-color-light) 70%, transparent);
  font-size: 0.8rem;
  letter-spacing: 0.5px;
}

.lightbox__close,
.lightbox__nav {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--theme-line-width) solid var(--theme-line-color);
  background: rgb(20 22 33 / 60%);
  color: var(--brand-color-light);
  cursor: pointer;
  transition: background-color 0.25s var(--theme-ease-signature), color 0.25s var(--theme-ease-signature);
}

.lightbox__close:hover,
.lightbox__nav:hover {
  background: var(--brand-color-dark);
  color: var(--theme-color-accent);
}

.lightbox__close svg,
.lightbox__nav svg {
  width: 1.25rem;
  height: 1.25rem;
}

.lightbox__close {
  top: var(--theme-section-padding);
  right: var(--theme-section-padding);
}

.lightbox__nav {
  top: 50%;
  translate: 0 -50%;
}

.lightbox__nav--prev {
  left: var(--theme-section-padding);
}

.lightbox__nav--next {
  right: var(--theme-section-padding);
}

@media (width <= 768px) {
  .lightbox__close,
  .lightbox__nav {
    width: 2.25rem;
    height: 2.25rem;
  }

  .lightbox__close {
    top: var(--theme-space-xs);
    right: var(--theme-space-xs);
  }

  .lightbox__nav--prev {
    left: var(--theme-space-xs);
  }

  .lightbox__nav--next {
    right: var(--theme-space-xs);
  }
}

body.lightbox-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox__image {
    transition-duration: 0.01s;
  }
}