/* Photo gallery — features.gallery (2026-10-19). This file is linked and shipped ONLY while the flag is on, so the default
   build stays byte-identical without it. Palette, type, radius and the 4:5 `.meal-photo` frame all come from site.css.
   Lively without new colours: a three-column grid with the middle column stepped down (two columns on phones, every
   second frame stepped), a gentle zoom on hover where hover exists and motion is allowed. No script. */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 18px;
  padding-bottom: 30px; /* room for the stepped column */
}

.gallery-frame {
  margin: 0;
  min-width: 0;
}

.gallery-grid > :nth-child(3n + 2) {
  transform: translateY(30px);
}

.gallery-frame .meal-photo {
  background: var(--card);
}

.gallery-frame figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted);
}

.gallery-page .gallery-grid {
  gap: 34px 22px;
}

.gallery-block .section-heading {
  margin-bottom: 36px;
}

.gallery-page .section-end {
  margin-top: 54px;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .gallery-frame .meal-photo img {
    transition: transform 0.5s ease;
  }

  .gallery-frame:hover .meal-photo img {
    transform: scale(1.04);
  }
}

@media (max-width: 767px) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px;
    padding-bottom: 24px;
  }

  .gallery-grid > :nth-child(3n + 2) {
    transform: none;
  }

  .gallery-grid > :nth-child(2n) {
    transform: translateY(24px);
  }

  .gallery-page .gallery-grid {
    gap: 26px 14px;
  }
}