/* ==========================================================================
   gallery.css — layout tweaks unique to the full gallery page, plus the
   lightbox slider overlay driven by assets/js/slider.js. The homepage
   gallery preview keeps the compact 160px rows defined in style.css;
   this page uses taller rows since it's the primary destination.
   ========================================================================== */

.gallery-page-grid {
  grid-auto-rows: 200px;
}

@media (max-width: 640px) {
  .gallery-page-grid { grid-auto-rows: 140px; }
}

/* ---------- Lightbox slider ---------- */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(20, 40, 26, 0.92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity 260ms ease, visibility 260ms ease;
  padding: 24px;
}
.lightbox-overlay.show { opacity: 1; visibility: visible; }

.lightbox-content { max-width: 900px; width: 100%; text-align: center; }
.lightbox-image {
  max-width: 100%; max-height: 72vh; border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); display: block; margin: 0 auto;
}
.lightbox-caption { color: var(--color-cream); font-size: var(--step--1); margin-top: 14px; }
.lightbox-counter { color: rgba(250,246,236,0.6); font-family: var(--font-mono); font-size: 0.78rem; margin-top: 4px; }

.lightbox-close {
  position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.1); border: none; color: var(--color-cream); font-size: 1.4rem;
  cursor: pointer; transition: background 220ms ease;
}
.lightbox-close:hover { background: rgba(255,255,255,0.2); }

.lightbox-prev, .lightbox-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.1); color: var(--color-cream); font-size: 1.4rem;
  cursor: pointer; transition: background 220ms ease;
}
.lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,0.2); }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

@media (max-width: 640px) {
  .lightbox-prev { left: 4px; width: 40px; height: 40px; }
  .lightbox-next { right: 4px; width: 40px; height: 40px; }
  .lightbox-close { top: 10px; right: 10px; }
}

/* Thumbnails become obviously interactive once slider.js wires them up */
[data-lightbox] { cursor: pointer; }