/* Gallery page — full-width filterable grid + lightbox. Page-specific,
   loaded only by gallery.php (same pattern as hero-slider.css). */

/* Opts out of the site's standard 1240px section cap used everywhere else. */
.gallery-section { max-width: none; }

.gallery-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; }
.gallery-filter-btn {
  font: inherit;
  cursor: pointer;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--auth-border);
  background: var(--auth-card-bg);
  color: var(--auth-text);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.gallery-filter-btn:hover { border-color: var(--site-primary); }
.gallery-filter-btn.is-active { background: var(--site-primary); border-color: var(--site-primary); color: #fff; }

/* auto-fit (not auto-fill) so a filtered-down set of items grows to fill the
   row instead of leaving empty trailing grid tracks. */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; }
.gallery-grid figure { margin: 0; border-radius: var(--auth-radius); overflow: hidden; border: 1px solid var(--auth-border); background: var(--auth-card-bg); }
.gallery-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; cursor: zoom-in; }
.gallery-item.is-hidden { display: none; }
.gallery-empty { color: var(--auth-muted); }

/* Lightbox */
.lightbox-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(10, 20, 30, .92);
  display: flex; align-items: center; justify-content: center;
  padding: 32px;
}
.lightbox-overlay[hidden] { display: none; }
.lightbox-overlay img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox-close {
  position: absolute; top: 18px; right: 22px;
  font-size: 2rem; line-height: 1; color: #fff;
  background: none; border: 0; cursor: pointer; padding: 6px 10px;
}
.lightbox-close:hover { color: var(--theme-accent, #80e5d5); }

@media (max-width: 640px) {
  .gallery-filter-btn { padding: 8px 14px; font-size: .9rem; }
  .lightbox-overlay { padding: 16px; }
  .lightbox-close { top: 8px; right: 10px; }
}