/* ===========================================================================
   gallery.css — mixed media gallery
   Agent 20 (2026-06-01): items use [data-reveal="scale-up"] with staggered
   --reveal-delay; the grid keeps its centered container layout.
   ========================================================================= */


.gallery {
  padding-block: var(--section-pad);
  padding-inline: var(--gutter);
  background: var(--bg-alt);
}

.gallery > .section-header {
  max-width: var(--container-max);
  margin-inline: auto;
}

.gallery__container {
  max-width: var(--container-max);
  margin-inline: auto;
}

.gallery__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-block-start: var(--space-12);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) { .gallery__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .gallery__grid { grid-template-columns: repeat(4, 1fr); } }

.gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--mist), var(--brass));
}

.gallery__item picture, .gallery__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-cinema) var(--ease-out-cinema);
}

@media (hover: hover) and (pointer: fine) {
  .gallery__item:hover img { transform: scale(var(--card-zoom)); }
}

@media (prefers-reduced-motion: reduce) {
  .gallery__item img { transition: none; }
  .gallery__item:hover img { transform: none; }
}