/* Photo gallery (/gallery/). Builds on /css/styles.css. */
.gallery-page { background: var(--ivory); }
.g-albums { margin-bottom: clamp(24px, 4vw, 40px); }
.g-loading { color: var(--muted); }

/* Justified rows: each tile grows in proportion to its aspect ratio, so every row shares one height. */
.g-grid { --h: 300px; display: flex; flex-wrap: wrap; gap: 10px; }
.g-grid::after { content: ""; flex: 999999 1 0; }
.g-grid.g-few::after { display: none; }
.g-grid .empty-state { flex: 1 1 100%; }
.g-item {
  position: relative; display: block; flex-shrink: 1; flex-basis: calc(var(--h) * var(--r)); aspect-ratio: var(--r);
  overflow: hidden; border-radius: var(--radius); background: var(--stone); max-height: 72vh;
}
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .4s; }
.g-item:hover img { transform: scale(1.035); }
.g-cap {
  position: absolute; inset: auto 0 0; padding: 36px 16px 14px; color: #fff; font: 500 1.15rem/1.25 var(--serif);
  background: linear-gradient(180deg, transparent, rgba(20,16,12,.7)); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s;
}
.g-item:hover .g-cap, .g-item:focus-visible .g-cap { opacity: 1; transform: none; }
.g-item:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }

/* ---------- Lightbox ---------- */
html.lb-open { overflow: hidden; }
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(16,13,11,.96); color: #e9e1d6; overflow: hidden;
}
.lightbox::backdrop { background: rgba(16,13,11,.9); }
.lightbox[open] { display: grid; grid-template-rows: 1fr auto; animation: lbIn .2s ease; }
@keyframes lbIn { from { opacity: 0; } }
.lb-stage { display: flex; align-items: center; justify-content: center; padding: 64px 88px 8px; min-height: 0; touch-action: pan-y; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 2px; opacity: 0; transition: opacity .25s; user-select: none; -webkit-user-drag: none; }
.lb-stage img.in { opacity: 1; }
.lb-bar { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 88px 22px; }
.lb-cap { margin: 0; font: 400 1.35rem/1.3 var(--serif); color: #fff; }
.lb-count { margin: 0; font-size: .85rem; color: #a59a8d; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lb-btn {
  position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); cursor: pointer;
  background: rgba(255,255,255,.06); color: #fff; display: flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s;
}
.lb-btn:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); }
.lb-btn:focus-visible { outline: 2px solid var(--copper-lt); outline-offset: 2px; }
.lb-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 20px; top: 50%; transform: translateY(-50%); }
.lb-close { right: 20px; top: 14px; }

@media (max-width: 760px) {
  .g-grid { --h: 150px; gap: 6px; }
  .g-cap { display: none; }
  .lb-stage { padding: 60px 0 0; }
  .lb-bar { padding: 14px 20px 22px; flex-direction: column; gap: 4px; }
  .lb-cap { font-size: 1.15rem; }
  .lb-prev, .lb-next { top: auto; bottom: 18px; transform: none; width: 44px; height: 44px; }
  .lb-prev { left: auto; right: 72px; }
  .lb-next { right: 20px; }
  .lb-bar { padding-right: 132px; }
  .lb-close { top: 10px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .g-item img, .lb-stage img, .g-cap { transition: none; }
  .lightbox[open] { animation: none; }
}