/* Lightbox (spec 7.4). Linked by base.njk whenever a page loads gallery.js; the gallery grid
   itself lives in main.css so it renders without this file. */
.lightbox { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: #0f0a06; color: var(--on-dark-2); }
.lightbox::backdrop { background: rgba(15,10,6,.9); }
html:has(.lightbox[open]) { overflow: hidden; }
.lightbox__fig { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; height: 100%; margin: 0; padding: 64px 80px 22px; }
.lightbox__stage { display: flex; align-items: center; justify-content: center; min-height: 0; touch-action: pan-y; }
.lightbox__img { width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.lightbox__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; width: 100%; max-width: 1100px; margin-inline: auto; font: 400 16px/1.45 var(--font-ui); color: var(--on-dark-2); }
.lightbox__count { flex: none; font-variant-numeric: tabular-nums; color: var(--on-dark-meta); }
.lightbox__btn { position: absolute; top: 50%; display: grid; place-items: center; width: 52px; height: 52px; margin-top: -26px; padding: 0; border: 1.5px solid rgba(234,223,207,.45); border-radius: var(--r-btn); background: rgba(26,18,11,.7); color: var(--on-dark); cursor: pointer; }
.lightbox__btn:hover { background: var(--deep-2); border-color: var(--on-dark-2); }
.lightbox__btn:focus-visible { outline-color: var(--tan-light); }
.lightbox__prev { left: 16px; }
.lightbox__next { right: 16px; }
.lightbox__close { top: 12px; right: 16px; margin-top: 0; width: 48px; height: 48px; }
.lightbox[data-single] .lightbox__prev, .lightbox[data-single] .lightbox__next, .lightbox[data-single] .lightbox__count { display: none; }
@media (max-width: 639.98px) {
  .lightbox__fig { padding: 68px 12px 84px; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 14px; margin-top: 0; }
  .lightbox__cap { flex-direction: column; gap: 4px; }
}