/* ==========================================================================
   /photos — filter pills, masonry gallery (CSS columns), <dialog> lightbox.
   Behaviour: public/js/pages/photos.js. Colors from tokens.css only.
   ========================================================================== */

/* ---- Filter pills ------------------------------------------------------ */
.gallery-intro { padding-bottom: 0; }
.gallery-intro .section-heading { margin-bottom: 2rem; }
.gallery-filter { scroll-margin-top: calc(var(--header-height-compact) + 1.5rem); }
.gallery-filter__list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
  list-style: none; margin: 0; padding: 0;
}
.gallery-filter__pill {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .7rem 1.25rem; border-radius: var(--radius-pill);
  border: 2px solid var(--color-border); background: var(--surface-card);
  color: var(--color-heading); text-decoration: none;
  font-size: .8125rem; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-button);
  transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.gallery-filter__pill:hover { border-color: var(--brand-grass-green); color: var(--brand-grass-green); }
.gallery-filter__count {
  display: inline-grid; place-items: center; min-width: 1.9em; height: 1.9em; padding: 0 .45em;
  border-radius: var(--radius-pill); background: var(--surface-green-tint); color: var(--color-primary);
  font-size: .75em; letter-spacing: 0; font-variant-numeric: tabular-nums;
}
.gallery-filter__pill[aria-pressed="true"] {
  background: var(--brand-grass-green); border-color: var(--brand-grass-green); color: var(--white);
}
.gallery-filter__pill[aria-pressed="true"] .gallery-filter__count { background: var(--surface-white-tint); color: var(--white); }

/* ---- Groups ------------------------------------------------------------ */
.gallery-group { scroll-margin-top: var(--header-height-compact); }
.gallery-group[hidden] { display: none; }
/* When filtered to one group, its section sits right under the pills: drop the doubled padding. */
.gallery-group:first-child,
.gallery.is-filtered .gallery-group { padding-top: var(--section-pad-sm); }
.gallery.is-filtered .gallery-group { background-color: transparent; }

/* ---- Masonry grid (CSS columns keep every photo uncropped) -------------- */
.gallery-grid {
  list-style: none; margin: 0; padding: 0;
  columns: 3 300px; column-gap: 1.25rem;
}
.gallery-item { break-inside: avoid; margin-bottom: 1.25rem; }
.gallery-item__figure { margin: 0; }
.gallery-item__link {
  position: relative; display: block; overflow: hidden; border-radius: var(--radius);
  background: var(--surface-sage); isolation: isolate;
}
.gallery-item__img, .gallery-item__link .img-fallback {
  display: block; width: 100%; height: auto; border-radius: 0;
  transition: transform var(--dur-slow) var(--ease-out);
}
.gallery-item__link::after { /* green hover wash, matches .photo-card */
  content: ""; position: absolute; inset: 0; background: var(--overlay-green);
  opacity: 0; transition: opacity var(--dur) var(--ease-out);
}
.gallery-item__zoom {
  position: absolute; z-index: 1; top: 50%; left: 50%;
  width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.2rem;
  background: var(--surface-glass); border: 1px solid var(--surface-glass-border); color: var(--white);
  opacity: 0; transform: scale(.85); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.gallery-item__link:hover .gallery-item__img, .gallery-item__link:focus-visible .gallery-item__img { transform: scale(1.04); }
.gallery-item__link:hover::after, .gallery-item__link:focus-visible::after { opacity: 1; }
.gallery-item__link:hover .gallery-item__zoom, .gallery-item__link:focus-visible .gallery-item__zoom { opacity: 1; transform: scale(1); }
.gallery-item__caption {
  margin-top: .6rem; font-size: .75rem; font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--color-text-muted);
}
@media (max-width: 575.98px) {
  .gallery-grid { columns: 2; column-gap: .75rem; }
  .gallery-item { margin-bottom: .75rem; }
  .gallery-item__caption { font-size: .6875rem; margin-top: .4rem; }
}

/* ---- Lightbox (<dialog>) ------------------------------------------------ */
.lightbox {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--white);
}
.lightbox::backdrop { background: rgba(0, 20, 10, .92); }
.lightbox__inner {
  position: relative; height: 100%; display: flex; align-items: center; justify-content: center;
  padding: clamp(56px, 7vw, 80px) clamp(16px, 7vw, 96px);
}
.lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; max-width: 100%; max-height: 100%; }
.lightbox__stage { display: flex; justify-content: center; min-height: 0; max-width: 100%; }
.lightbox__img {
  display: block; max-width: 100%; max-height: calc(100dvh - 180px); width: auto; height: auto;
  border-radius: var(--radius); box-shadow: var(--shadow-soft); background: var(--brand-deep-green);
}
.lightbox__img.is-loading { opacity: .75; }
.lightbox__caption {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .35rem 1rem;
  margin-top: 1rem; text-align: center;
}
.lightbox__title { font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); }
.lightbox__counter { font-size: var(--fs-small); color: var(--color-text-on-dark-muted); font-variant-numeric: tabular-nums; }
.lightbox__close, .lightbox__nav {
  position: absolute; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%; padding: 0;
  background: var(--surface-glass); border: 1px solid var(--surface-glass-border); color: var(--white);
  font-size: 1.25rem; cursor: pointer; transition: background-color var(--dur-fast);
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--surface-white-tint); }
.lightbox__close:focus-visible, .lightbox__nav:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__nav { top: 50%; margin-top: -24px; }
.lightbox__nav--prev { left: clamp(8px, 2vw, 24px); }
.lightbox__nav--next { right: clamp(8px, 2vw, 24px); }
@media (max-width: 575.98px) {
  .lightbox__nav { top: auto; bottom: 16px; margin-top: 0; }
  .lightbox__img { max-height: calc(100dvh - 210px); }
}
html.lightbox-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .gallery-item__img, .gallery-item__zoom, .gallery-item__link::after { transition: none; }
}