/* ============================================================
   Gallery page — masonry grid + pure-CSS :target lightbox
   Zero JavaScript. Loads after styles.css (inherits tokens).
   ============================================================ */

.gal-main { padding-block: var(--sp-8) var(--sp-12); }

.gal-head { text-align: center; max-width: 60ch; margin: 0 auto var(--sp-8); }
.gal-head .eyebrow { color: var(--c-gold); }
.gal-head h1 {
  font-size: var(--fs-2);
  line-height: 1.05;
  margin: var(--sp-2) 0;
  color: var(--c-white);
}
.gal-head p { color: var(--c-muted); font-size: var(--fs-4); margin: 0; }

/* ---------- Masonry grid (varied proportions tile cleanly) ---------- */
.gal-grid { column-count: 3; column-gap: var(--sp-1); }
@media (max-width: 1024px) { .gal-grid { column-count: 2; } }
@media (max-width: 620px)  { .gal-grid { column-count: 1; } }

.gthumb {
  display: block;
  position: relative;
  break-inside: avoid;
  margin: 0 0 var(--sp-1);
  overflow: hidden;
  background: var(--c-card);
  cursor: zoom-in;
  text-decoration: none;
}
.gthumb img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .5s ease;
}
.gthumb:hover img,
.gthumb:focus-visible img { transform: scale(1.045); }
.gthumb figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--sp-6) var(--sp-3) var(--sp-2);
  font-size: 0.85rem;
  line-height: 1.35;
  color: #fff;
  background: linear-gradient(to top, rgba(6,8,10,.86), rgba(6,8,10,0));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.gthumb:hover figcaption,
.gthumb:focus-visible figcaption { opacity: 1; transform: none; }

/* ---------- Lightbox: hidden until its id is the :target ---------- */
.lightbox { position: fixed; inset: 0; z-index: 1000; display: none; }
.lightbox:target { display: flex; align-items: center; justify-content: center; }

.lb-backdrop {
  position: absolute; inset: 0;
  background: rgba(6,8,10,.94);
  cursor: zoom-out;
}

/* Fixed-size stage — every image is contained inside it, whatever its ratio */
.lb-stage {
  position: relative;
  z-index: 2;
  width: min(92vw, 1200px);
  height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
}

/* Chrome (arrows, close, caption) is anchored to the viewport,
   NOT to the image — so it never shifts when proportions change. */
.lb-prev, .lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0; /* hide the fallback glyph; chevron drawn below */
  color: #fff; text-decoration: none;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  transition: background .2s ease, color .2s ease;
}
/* CSS chevron — geometrically centered, unlike guillemet glyphs */
.lb-prev::before, .lb-next::before {
  content: "";
  display: block;
  width: 13px; height: 13px;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
}
.lb-next::before { transform: rotate(-45deg); margin-left: -4px; }
.lb-prev::before { transform: rotate(135deg); margin-right: -4px; }
.lb-prev:hover, .lb-next:hover { background: var(--c-gold); color: var(--c-bg); }
.lb-prev { left: clamp(.5rem, 3vw, 2.5rem); }
.lb-next { right: clamp(.5rem, 3vw, 2.5rem); }

.lb-x {
  position: absolute;
  top: clamp(.75rem, 2.5vh, 1.5rem);
  right: clamp(.75rem, 3vw, 2rem);
  z-index: 3;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; line-height: 1;
  color: #fff; text-decoration: none;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  transition: background .2s ease;
}
.lb-x:hover { background: #b23b32; }

.lb-cap {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(.75rem, 3.5vh, 2rem);
  z-index: 3;
  text-align: center;
  color: #e9edf1;
  font-size: 0.95rem;
  padding: 0 clamp(4rem, 10vw, 7rem);
}
.lb-cap .lb-count {
  display: block;
  color: var(--c-gold);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 0.3rem;
}

@media (max-width: 620px) {
  .lb-stage { width: 94vw; height: 74vh; }
  .lb-prev, .lb-next { width: 44px; height: 44px; }
  .lb-prev::before, .lb-next::before { width: 11px; height: 11px; }
  .lb-prev { left: .35rem; }
  .lb-next { right: .35rem; }
  .lb-cap { padding: 0 3.25rem; font-size: 0.85rem; }
}