.stx-photo-gallery { padding: 56px 0; color: var(--ink-strong); font-family: var(--font-ui); }
.stx-photo-gallery h2 { font-family: var(--font-display); font-size: var(--text-section); }
.stx-photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.stx-photo-grid a { display: block; border-radius: var(--radius-lg); overflow: hidden; }
.stx-photo-grid img { display: block; width: 100%; height: auto; }
@media (max-width: 600px) { .stx-photo-grid { grid-template-columns: minmax(0, 1fr); } }

/* The photo viewer (assets/js/event-gallery.js): the event pages' lightbox (event-details-pdd2026.css), scoped to the
   dialog, since that stylesheet's bare .close / .previous / .next rules are not loaded on news stories. */
.lightbox { width: min(1040px, calc(100% - 28px)); max-width: none; max-height: calc(100dvh - 28px); padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--night); color: #fff; }
.lightbox::backdrop { background: rgba(17, 7, 34, .82); }
.lightbox figure { margin: 0; }
.lightbox-image { height: min(68dvh, 650px); background: var(--purple) center / contain no-repeat; }
.lightbox-image.is-fallback { background-color: var(--purple); background-image: radial-gradient(circle at 95% 0, var(--cyan) 0 23%, transparent 23.2%), radial-gradient(circle at 0 100%, var(--orange) 0 18%, transparent 18.2%); }
.lightbox figcaption { display: flex; justify-content: center; padding: 12px; color: var(--on-dark); font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 700; }
.lightbox button { position: absolute; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: var(--radius-round); background: #fff; color: var(--purple-deep); font-size: var(--text-xl); cursor: pointer; }
.lightbox button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.lightbox .close { top: 14px; right: 14px; }
.lightbox .previous { top: 50%; left: 16px; transform: translateY(-50%); }
.lightbox .next { top: 50%; right: 16px; transform: translateY(-50%); }
.lightbox.is-single .previous, .lightbox.is-single .next { display: none; }
body.gallery-open { overflow: hidden; }
html:has(body.gallery-open) { overflow: hidden; scrollbar-gutter: stable; }
@media (max-width: 760px) {
  .lightbox .previous { left: 8px; }
  .lightbox .next { right: 8px; }
}