/* templates/_shared/gallery.css — public Photo Gallery (Muuri grid + lightbox).
   Theme-adaptive via CSS custom props with safe fallbacks; --gal-accent can be
   set per template. Muuri positions .gal-item absolutely; widths/gutters here. */
.gal { --gal-gutter: 16px; --gal-accent: var(--accent, #2a3441); }
.gal-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 22px; }
.gal-left .gal-filters { justify-content: flex-start; }
.gal-filter { padding: 6px 15px; border-radius: 999px; border: 1px solid rgba(0,0,0,0.25);
  background: transparent; color: inherit; font: inherit; font-size: 0.9rem; cursor: pointer; opacity: 0.72; transition: opacity .15s, background .15s, color .15s; }
.gal-filter:hover { opacity: 1; }
.gal-filter.is-active { background: var(--gal-accent); color: #fff; border-color: transparent; opacity: 1; }

.gal-grid { position: relative; }
.gal-item { display: block; width: calc(33.333% - var(--gal-gutter)); margin: 0 calc(var(--gal-gutter) / 2) var(--gal-gutter); box-sizing: border-box; }
@media (max-width: 820px) { .gal-item { width: calc(50% - var(--gal-gutter)); } }
@media (max-width: 520px) { .gal-item { width: calc(100% - var(--gal-gutter)); } }
.gal-item-content { position: relative; }
.gal-thumb { position: relative; display: block; width: 100%; padding: 0; border: none; margin: 0; background: rgba(0,0,0,0.06);
  cursor: zoom-in; overflow: hidden; border-radius: 8px; }
.gal-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease; }
.gal-thumb:hover img { transform: scale(1.04); }
.gal-thumb:focus-visible { outline: 2px solid var(--gal-accent); outline-offset: 2px; }

/* Lightbox */
.gal-lightbox { margin: auto; max-width: min(94vw, 1200px); max-height: 92vh; border: none; padding: 0; background: transparent; overflow: visible; }
.gal-lightbox::backdrop { background: rgba(10,12,16,0.86); }
.gal-lb-img { display: block; max-width: 94vw; max-height: 82vh; width: auto; height: auto; margin: 0 auto; border-radius: 6px; background: #111; }
.gal-lb-caption { color: #eee; text-align: center; font-size: 0.92rem; margin: 12px auto 0; max-width: 70ch; }
.gal-lb-close, .gal-lb-prev, .gal-lb-next { position: fixed; background: rgba(0,0,0,0.5); color: #fff; border: none;
  cursor: pointer; border-radius: 50%; width: 46px; height: 46px; font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.gal-lb-close:hover, .gal-lb-prev:hover, .gal-lb-next:hover { background: rgba(0,0,0,0.78); }
.gal-lb-close { top: 18px; right: 18px; font-size: 30px; }
.gal-lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.gal-lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
@media (max-width: 520px) { .gal-lb-prev { left: 6px; } .gal-lb-next { right: 6px; } .gal-lb-close { top: 8px; right: 8px; } }

/* Muuri positions items absolutely — this rule is REQUIRED by Muuri; without
   it the items stay static and the transforms Muuri sets scatter them. */
.gal-grid .muuri-item { position: absolute; }

/* Muuri show/hide transitions */
.gal-grid .muuri-item-hidden { z-index: 0; }
.gal-grid .muuri-item-shown { z-index: 1; }