/* ---------------------------------------------------------------------------
   Program description + venue photo grid — a static 3x3 wall of real venue
   shots, matching the live site (no carousel).

   Title uses the shared .ils-heading--lg .ils-eyebrow scale, and the intro
   paragraph the shared .ils-heading__intro style (both in components.css)
   like every other section on the page — nothing band-specific to override
   for either.
   --------------------------------------------------------------------------- */

/* Column count re-measured directly on the live site by bisecting real
   widths (not just the tier edges): a single stacked column holds through
   460px, 2-up starts somewhere in 460-480px, and 3-up starts at 768px —
   confirmed still 2-up at 767px, already 3-up at 768px exactly, matching
   this site's usual tablet threshold. The previous 2-up mobile default
   was never actually checked against the live site's own real (narrower)
   mobile breakpoint. */
.venue-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.venue-grid__photo { aspect-ratio: var(--media-ratio-landscape); }

/* Measured on the live site: 30px, between the design system's --radius-lg
   (12px) and --radius-xl (24px) — not an existing token, same as the
   stat-card radius in components.css. */
.venue-grid__photo img { border-radius: 30px; }

@media (min-width: 480px) {
  .venue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .venue-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}