/* ==========================================================================
   gallery.css — /gallery/ ("The Work") ONLY. A filter-free responsive grid of
   curated tiles. Reuses the shared content-page helpers (.page-section / .crumb /
   .page-intro in base.css), .eyebrow, and .btn. Namespaced .gallery-*. Tokens only.

   Motion: only a subtle hover zoom (transform/filter), disabled under
   prefers-reduced-motion. Scroll-reveal is the shared .reveal pattern (reveal.css).
   ========================================================================== */

.gallery-grid {
  list-style: none;
  margin: clamp(1.5rem, 4vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* mobile: 2-up */
  gap: clamp(0.5rem, 1.5vw, 1rem);
}
@media (min-width: 40rem) {
  .gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.gallery-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--shadow);          /* tile rests on a warm-dark surface */
  aspect-ratio: 4 / 5;                /* uniform portrait grid, no CLS */
}
.gallery-tile picture,
.gallery-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;                  /* fill the tile, crop overflow */
}
.gallery-tile img {
  transition: transform 600ms var(--ease-rise), filter 600ms ease;
}
/* subtle, on-brand hover: a slow push-in + a touch of light */
.gallery-tile:hover img,
.gallery-tile:focus-within img {
  transform: scale(1.045);
  filter: brightness(1.08);
}
/* gold hairline emerges on hover (matches the brand accent) */
.gallery-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow 300ms ease;
  pointer-events: none;
}
.gallery-tile:hover::after,
.gallery-tile:focus-within::after {
  box-shadow: inset 0 0 0 1px rgba(232, 178, 89, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .gallery-tile img {
    transition: none;
  }
  .gallery-tile:hover img,
  .gallery-tile:focus-within img {
    transform: none;
    filter: none;
  }
}

/* ---- close: uses the shared .page-close helper (base.css) -------------- */