/* ========== LIGHTBOX ========== */
.lightbox {
  /* Hidden with visibility + opacity instead of display:none so opening and
     closing can fade. visibility:hidden still removes it from the
     accessibility tree and from the Tab order, just like display:none did. */
  display: flex;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  position: fixed;
  inset: 0;
  background-color: var(--black-alpha-92);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
}

.lightbox.open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}

.lightbox-content {
  transform: scale(0.96);
  transition: transform 0.25s ease;
}

.lightbox.open .lightbox-content {
  transform: scale(1);
}

.lightbox-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 760px;
}

/* Flanks the image with the prev/next controls, so the arrows sit OUTSIDE the
   image instead of overlapping it. The stage flexes to fill the space the arrows
   don't take. */
.lightbox-stage-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  width: 100%;
}

.lightbox-stage {
  position: relative;
  flex: 1;
  min-width: 0;               /* allow the image to shrink inside the flex row */
  height: var(--height-lightbox-stage-base);
  background-color: var(--dark-overlay-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
  transition: opacity 0.2s ease;
}

/* js/gallery.js fades the photo out while the next one loads, then back in once
   it has decoded, so navigation cross-fades instead of flashing empty. */
.lightbox-img.is-changing {
  opacity: 0;
}

/* An <img> with no src yet would show a broken-image icon while the first photo loads. */
.lightbox-img:not([src]) {
  visibility: hidden;
}

/* Spinner shown only while a photo is still downloading. Delayed so a cached or
   fast photo never flashes it. */
.lightbox-stage::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 3px solid var(--white-alpha-10);
  border-top-color: var(--white);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: lightbox-spin 0.8s linear infinite;
  transition: opacity 0.2s ease;
}

.lightbox-stage.is-loading::after {
  opacity: 1;
  transition-delay: 0.3s;
}

@keyframes lightbox-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox-content,
  .lightbox-img {
    transition: none;
  }
  .lightbox-content {
    transform: none;
  }
}

.lightbox-caption {
  text-align: center;
  margin-top: var(--space-lg);
  color: var(--white);
  width: 100%;
}

.lightbox-title {
  font-weight: 700;
  font-size: 1.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
}

.lightbox-counter {
  font-size: var(--font-size-xs);
  color: var(--white-alpha-65);
  margin-top: var(--space-2xs);
}

/* Stays in the top-right corner, above the stage row. */
.lightbox-close {
  position: absolute;
  top: -2.75rem;
  right: 0;
  background: transparent;
  color: var(--white);
  font-size: 2.25rem;
  line-height: 1;
}

/* Now static flex items beside the image, and lighter: no filled circle, just a
   soft translucent chevron that brightens on hover/focus. */
.lightbox-arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--white-alpha-65);
  font-size: 2.25rem;
  line-height: 1;
  border-radius: var(--radius-full);
  transition: color 0.2s ease, background-color 0.2s ease;
}

.lightbox-arrow:hover {
  color: var(--white);
  background-color: var(--white-alpha-10);
}

/* Tab cycles close → prev → next inside the open lightbox (the focus trap in
   js/gallery.js), which is only usable if the ring is visible. White, not the
   accent color, because everything here sits on a near-black backdrop. */
.lightbox-close:focus-visible,
.lightbox-arrow:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 2px;
}

/* Phones: shrink the arrows and tighten the gap so the image keeps as much width
   as possible now that the controls live beside it rather than over it. */
@media (max-width: 575px) {
  .lightbox {
    padding: var(--space-lg);
  }

  .lightbox-stage-row {
    gap: var(--space-xs);
  }

  .lightbox-arrow {
    width: 38px;
    height: 38px;
    font-size: 1.85rem;
  }

  .lightbox-close {
    font-size: 2rem;
  }
}