/* ============================================================================
   GALLERY — the wall.
   A dense patchwork grid: every tile spans a few cells of one square grid,
   so sizes and aspect ratios vary tile to tile while the whole wall stays
   fluid. gallery.js assigns the spans (seeded, so the layout is stable for
   a given file order) and computes each tile's hover scale.
   ========================================================================= */

.wrap--wide { max-width: 96rem; }

.gal {
  display: grid;
  /* The unit cell. Tiles span 2-4 of these each way, so the smallest tile
     is ~2 cells square and the biggest a 4x3 slab. auto-fill keeps the
     wall fluid at any width; dense backfills the holes the mixed spans
     leave, which is what makes it read as a patchwork rather than rows. */
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  grid-auto-rows: 9.5rem;
  grid-auto-flow: dense;
  gap: 1rem;
  padding-block: 1rem 2rem;
}

.gal__tile {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  cursor: zoom-in;
  background: var(--sand);
  border: 0;
  padding: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* --peek is set per tile by gallery.js: small tiles grow more than big
     ones, so every hover lands near the same on-screen footprint. */
  transition: transform 0.32s cubic-bezier(0.22, 0.9, 0.3, 1.08),
              box-shadow 0.32s ease;
  will-change: transform;
}
.gal__tile:hover,
.gal__tile:focus-visible {
  transform: scale(var(--peek, 1.08));
  z-index: 5;
  box-shadow: 10px 12px 0 rgba(23, 20, 15, 0.28);
}
.gal__tile:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.gal__tile > img,
.gal__tile > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The peek-through-a-window read: the art sits a notch zoomed-in, so the
     tile is a crop and the pop-up is the reveal. */
  transform: scale(1.16);
  transition: transform 0.5s ease;
  display: block;
}
.gal__tile:hover > img,
.gal__tile:hover > video { transform: scale(1.06); }

/* Tiles fade up as each batch lands. */
.gal__tile { opacity: 0; translate: 0 10px; }
.gal__tile.is-in {
  opacity: 1; translate: 0 0;
  transition: opacity 0.5s ease, translate 0.5s ease,
              transform 0.32s cubic-bezier(0.22, 0.9, 0.3, 1.08),
              box-shadow 0.32s ease;
}

.gal__more { text-align: center; padding: 1.5rem 0 2.5rem; color: var(--ink-soft); }

/* ------------------------------------------------------------- lightbox */
.glb {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(23, 20, 15, 0.88);
  padding: 3vmin;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.glb.is-open { opacity: 1; }

.glb__media {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 12px;
  box-shadow: 14px 16px 0 rgba(0, 0, 0, 0.35);
  background: var(--box);
  /* Never upscale past the file's own pixels — full size means full size. */
  object-fit: contain;
}

.glb__count {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  color: var(--paper);
  font: 600 var(--type-eyebrow) var(--font-body);
  letter-spacing: 0.08em;
  opacity: 0.8;
}

.glb__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 0;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.glb__btn:hover { background: var(--gold); transform: translateY(-50%) scale(1.08); }
.glb__btn--prev { left: 1rem; }
.glb__btn--next { right: 1rem; }
.glb__btn--close {
  top: 1rem;
  right: 1rem;
  transform: none;
  font-size: 1.1rem;
}
.glb__btn--close:hover { transform: scale(1.08); }

@media (max-width: 40rem) {
  .gal {
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
    grid-auto-rows: 7rem;
    gap: 0.75rem;
  }
  .glb__btn--prev { left: 0.35rem; }
  .glb__btn--next { right: 0.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gal__tile, .gal__tile > img, .gal__tile > video, .glb { transition: none; }
  .gal__tile { opacity: 1; translate: 0 0; }
  .gal__tile:hover { transform: none; }
}