/* ==========================================================================
   Gallery: the society's photographs in columns, filtered by event, and a
   full-screen viewer (assets/js/gallery.js).
   ========================================================================== */
.gl-head { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(24px, 3vw, 40px); }
.gl-head h1 { font: clamp(64px, 8vw, 120px)/.95 var(--serif); letter-spacing: -2px; color: var(--navy); }
.gl-head p { margin-top: 20px; font-size: 18px; line-height: 1.65; max-width: 34em; }
.gl-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.gl-filter button { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); background: #fff; color: var(--navy); font: 500 15px var(--sans); cursor: pointer; transition: background-color 200ms, border-color 200ms, color 200ms, transform 200ms; }
.gl-filter button span { margin-left: 6px; color: var(--muted); }
.gl-filter button[aria-pressed="true"] { background: var(--bold-blue, #2F4FA8); border-color: var(--bold-blue, #2F4FA8); color: #fff; }
.gl-filter button[aria-pressed="true"] span { color: #dbe3f6; }
.gl-filter button:hover { border-color: var(--navy); }
.gl-filter button:active { transform: scale(.97); }

.gl-grid { list-style: none; margin: 0; padding: 0 0 40px; columns: 3 300px; column-gap: 12px; }
.gl-item { break-inside: avoid; margin-bottom: 12px; }
.gl-item[hidden] { display: none; }
.gl-item a { position: relative; display: block; overflow: hidden; background: var(--cream); cursor: zoom-in; }
.gl-item img { display: block; width: 100%; height: auto; transition: transform 700ms cubic-bezier(.16, 1, .3, 1), filter 400ms; }
.gl-item a::after {
  content: attr(data-cap); position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 14px 12px; font-size: 14px; color: #fff;
  background: linear-gradient(180deg, transparent, rgb(10 18 34 / .75)); opacity: 0; transform: translateY(8px); transition: opacity 300ms, transform 300ms;
}
@media (hover: hover) and (pointer: fine) {
  .gl-item a:hover img { transform: scale(1.04); }
  .gl-item a:hover::after, .gl-item a:focus-visible::after { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .gl-item.is-shown { animation: gl-in 500ms cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--d, 0ms); }
}
@keyframes gl-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Viewer */
.gl-view { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(8 12 22 / .96); color: #fff; }
.gl-view::backdrop { background: rgb(8 12 22 / .9); }
.gl-view[open] { display: grid; place-items: center; }
.gl-view figure { margin: 0; display: grid; justify-items: center; gap: 14px; padding: 64px 72px 48px; max-width: 100%; max-height: 100%; }
.gl-view img { max-width: min(1600px, calc(100vw - 144px)); max-height: calc(100dvh - 150px); width: auto; height: auto; object-fit: contain; }
.gl-view figcaption { font-size: 15px; color: #d3dae3; text-align: center; }
.gl-view__btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgb(255 255 255 / .3); background: rgb(255 255 255 / .06); color: #fff; font: 22px/1 var(--sans); cursor: pointer; transition: background-color 200ms, transform 200ms; }
.gl-view__btn:hover { background: rgb(255 255 255 / .16); }
.gl-view__btn:active { transform: scale(.94); }
.gl-view__close { top: 14px; right: 14px; font-size: 28px; }
.gl-view__prev { left: 14px; top: 50%; margin-top: -24px; }
.gl-view__next { right: 14px; top: 50%; margin-top: -24px; }
.gl-view__count { position: absolute; top: 26px; left: 20px; margin: 0; font-size: 14px; color: #c9d1dc; }
@media (prefers-reduced-motion: no-preference) {
  .gl-view[open] img { animation: gl-zoom 380ms cubic-bezier(.16, 1, .3, 1) both; }
  .gl-view img.is-next { animation: gl-slide-l 360ms cubic-bezier(.16, 1, .3, 1) both; }
  .gl-view img.is-prev { animation: gl-slide-r 360ms cubic-bezier(.16, 1, .3, 1) both; }
}
@keyframes gl-zoom { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes gl-slide-l { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes gl-slide-r { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) {
  .gl-grid { columns: 2; column-gap: 8px; }
  .gl-item { margin-bottom: 8px; }
  .gl-view figure { padding: 70px 12px 80px; }
  .gl-view img { max-width: calc(100vw - 24px); max-height: calc(100dvh - 190px); }
  .gl-view__prev, .gl-view__next { top: auto; bottom: 16px; margin-top: 0; }
}