/* ====================================
   Lightbox
   ====================================
   Loaded on EVERY page from base.njk, because every content image on the
   site is clickable to enlarge (see the rule in CLAUDE.md). These rules used
   to live in gallery.css, which is why that file is named the way it is —
   gallery.css now holds only the photo-grid styles and is still gated on the
   `gallery` frontmatter flag.
   ==================================== */

/* Any image the script has wired up. The cursor is the only affordance that
   an image opens, so it has to be on the image itself, not a hover overlay. */
.is-zoomable {
  cursor: zoom-in;
}

/* Lightbox Overlay */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
}

.lightbox[hidden] {
  display: none;
}

.lightbox-close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  background: none;
  border: none;
  color: var(--color-white);
  font-size: var(--text-3xl);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-close:hover {
  opacity: 1;
}

.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--color-white);
  font-size: var(--text-2xl);
  cursor: pointer;
  padding: var(--space-lg);
  opacity: 0.7;
  transition: all var(--transition-fast);
}

.lightbox-prev:hover,
.lightbox-next:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev {
  left: var(--space-lg);
}

.lightbox-next {
  right: var(--space-lg);
}

.lightbox-content {
  max-width: 90vw;
  max-height: 85vh;
  margin: 0;
  text-align: center;
}

.lightbox-content img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  margin: 0 auto;
}

.lightbox-content figcaption {
  color: var(--color-white);
  margin-top: var(--space-lg);
  font-size: var(--text-lg);
}