/* ── Gallery ───────────────────────────────────────────────────────────── */
.gallery__head {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 2.5rem; align-items: end;
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}
.gallery__intro { font-size: 1.125rem; line-height: 1.6; max-width: 26rem; justify-self: end; }

.masonry { columns: 3; column-gap: clamp(0.75rem, 1.6vw, 1.5rem); }
.masonry__item { break-inside: avoid; margin-bottom: clamp(0.75rem, 1.6vw, 1.5rem); }
.masonry__item:nth-child(3n + 2) { padding-top: 0; }
.masonry__button { position: relative; display: block; width: 100%; text-align: left; cursor: zoom-in; }
.has-cursor .masonry__button { cursor: none; }
.masonry__frame { display: block; overflow: hidden; background: var(--bd-ivory); border-radius: var(--radius); }
.masonry__frame img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.001);
  transition: transform 1.6s var(--ease), filter 1.2s var(--ease);
}
.masonry__caption {
  position: absolute; left: 1.1rem; bottom: 1rem;
  padding: 0.35rem 0.8rem; border-radius: 999px;
  font-size: 0.9rem; font-weight: 600;
  background: var(--light); color: var(--ink);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
@media (hover: hover) {
  .masonry__button:hover img { transform: scale(1.05); filter: brightness(0.86); }
  .masonry__button:hover .masonry__caption { opacity: 1; transform: none; }
}
.masonry__button:focus-visible .masonry__caption { opacity: 1; transform: none; }

@media (max-width: 1099px) { .masonry { columns: 2; } }
@media (max-width: 899px) {
  .gallery__head { grid-template-columns: 1fr; }
  .gallery__intro { justify-self: start; }
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(4.5rem, 8vw, 6rem) clamp(1rem, 7vw, 7rem);
  background: rgba(21, 40, 28, 0.97);
  color: var(--ivory);
}
.lightbox__figure { display: flex; flex-direction: column; align-items: center; max-width: 100%; max-height: 100%; }
.lightbox__figure img { max-width: 100%; max-height: calc(100vh - 12rem); max-height: calc(100svh - 12rem); width: auto; height: auto; object-fit: contain; }
.lightbox__figure figcaption {
  display: flex; gap: 1.5rem; align-items: baseline; margin-top: 1.25rem;
  font-size: 0.85rem; color: var(--text-light-muted);
}
.lightbox__count { font-weight: 700; color: var(--gold-light); }
.lightbox button {
  position: absolute; display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; color: var(--ivory);
  border-radius: 50%; background: rgba(248, 242, 232, 0.1);
  transition: background-color var(--t-fast) var(--ease);
}
.lightbox button:hover { background: rgba(248, 242, 232, 0.22); }
.lightbox__close { top: 1.25rem; right: 1.25rem; }
.lightbox__nav { top: 50%; margin-top: -28px; }
.lightbox__nav--prev { left: clamp(0.5rem, 2vw, 2rem); }
.lightbox__nav--next { right: clamp(0.5rem, 2vw, 2rem); }
.has-cursor .lightbox, .has-cursor .lightbox button { cursor: auto; }

@media (max-width: 699px) {
  .lightbox { padding-inline: 0; }
  .lightbox__nav { top: auto; bottom: 1.25rem; margin-top: 0; }
  .lightbox__nav--prev { left: auto; right: 5.25rem; }
  .lightbox__nav--next { right: 1.25rem; }
  .lightbox__figure figcaption { padding-inline: 1.25rem; align-self: flex-start; flex-direction: column; gap: 0.25rem; }
}