/* ==========================================================================
   SCT gallery — /gallery photo grid + <dialog> lightbox.
   Loaded only by gallery.php; tokens come from sct.css.
   ========================================================================== */

.gallery-page { padding: 28px 20px 64px; }

.gallery-head { margin-bottom: 24px; max-width: 720px; }
.gallery-head .eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 10px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--crimson);
}
.gallery-head .eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--gold); }
.gallery-head h1 { margin: 0 0 8px; font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); line-height: 1.08; letter-spacing: -.025em; }
.gallery-head .sub { margin: 0; color: var(--text-muted); font-size: var(--fs-md); }

/* ---------------------------------------------------------------- grid */

.gallery-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .gallery-grid { gap: 10px; } }

.gallery-item {
  position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-soft); color: var(--paper); text-decoration: none;
  transition: transform var(--dur) var(--ease-out);
}
.gallery-item::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: var(--sh-3); opacity: 0; transition: opacity var(--dur) var(--ease-out);
}
.gallery-item:hover, .gallery-item:focus-visible { transform: translateY(-3px); text-decoration: none; }
.gallery-item:hover::after, .gallery-item:focus-visible::after { opacity: 1; }
.gallery-item:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; }
.gallery-item img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 300ms var(--ease-out);
}
.gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.03); }


/* ------------------------------------------------------------ lightbox */

.lightbox {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 16px; border: 0; background: transparent; color: var(--paper); overflow: hidden;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: color-mix(in srgb, var(--ink) 88%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
body:has(.lightbox[open]) { overflow: hidden; }

.lightbox-fig { margin: 0; display: grid; justify-items: center; gap: 12px; max-width: 100%; }
.lightbox-fig img {
  display: block; width: auto; height: auto; max-width: min(100%, calc((100dvh - 110px) * 3 / 4)); max-height: calc(100dvh - 110px);
  aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--sh-3); background: var(--bg-soft);
}
.lightbox-fig figcaption { display: flex; gap: 12px; align-items: baseline; justify-content: center; flex-wrap: wrap; text-align: center; padding: 0 56px; }
.lightbox-title { font-size: var(--fs-sm); font-weight: 600; }
.lightbox-count { font-size: var(--fs-xs); color: var(--slate); font-variant-numeric: tabular-nums; }

.lightbox-btn {
  position: absolute; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 55%, transparent); color: var(--paper);
  cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.lightbox-btn:hover { transform: scale(1.06); }
.lightbox-btn:active { transform: scale(.96); }
.lightbox-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.lightbox-close { top: 16px; right: 16px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); }
.lightbox-nav:hover { transform: translateY(-50%) scale(1.06); }
.lightbox-nav:active { transform: translateY(-50%) scale(.96); }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
@media (max-width: 600px) {
  .lightbox { padding: 12px; }
  .lightbox-btn { width: 40px; height: 40px; }
  .lightbox-prev { left: 10px; } .lightbox-next { right: 10px; } .lightbox-close { top: 10px; right: 10px; }
  .lightbox-fig figcaption { padding: 0 8px; }
  .lightbox-fig img { max-height: calc(100dvh - 120px); }
}

/* entrance: fade + settle, ease-out, 200 ms; exits are instant */
.lightbox[open] { opacity: 1; transform: none; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
.lightbox[open]::backdrop { opacity: 1; transition: opacity 200ms var(--ease-out); }
@starting-style {
  .lightbox[open] { opacity: 0; transform: scale(.98); }
  .lightbox[open]::backdrop { opacity: 0; }
}
.lightbox-fig img.is-swapping { opacity: 0; }
.lightbox-fig img { transition: opacity 160ms var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .gallery-item, .gallery-item::after, .gallery-item img, .lightbox[open], .lightbox[open]::backdrop,
  .lightbox-btn, .lightbox-fig img { transition: none; }
  .gallery-item:hover, .gallery-item:focus-visible { transform: none; }
  .gallery-item:hover img, .gallery-item:focus-visible img { transform: none; }
}