/* ============================================================
   PAGE LOISIRS & TOURISME — styles spécifiques
   ------------------------------------------------------------
   La page charge en amont ma-commune.css (structure hub, cartes
   .service-card / .hub-services) et agenda.css (composant
   .event-card / .agenda__grid). Ce fichier n'ajoute que :
   1. la grille d'activités forcée en 3 colonnes
   2. la section « Prochains événements » sur fond clair
   @package Silly
   ============================================================ */

/* ============================================
   GRILLE DES ACTIVITÉS — 3 COLONNES
   Override du flat-grid (4 colonnes par défaut sur ma-commune.css).
   ============================================ */
.hub-services__flat-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

/* ============================================
   SECTION AGENDA — Prochains événements
   Réutilise .agenda__grid / .event-card (agenda.css), dans une
   section claire cohérente avec le reste de la page hub.
   ============================================ */
.loisirs-agenda {
  padding: 0 0 var(--section-padding, 112px);
  background: var(--color-bg);
}

.loisirs-agenda__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.loisirs-agenda__footer {
  display: flex;
  justify-content: center;
}

/* ============================================
   RESPONSIVE — TABLETTE (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {
  .hub-services__flat-grid--3col {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   RESPONSIVE — MOBILE LARGE (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
  .loisirs-agenda {
    padding-bottom: 64px;
  }

  .loisirs-agenda__inner {
    gap: 32px;
  }

  .loisirs-agenda__footer {
    justify-content: flex-start;
  }
}

/* ============================================
   RESPONSIVE — MOBILE SMALL (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
  .hub-services__flat-grid--3col {
    grid-template-columns: 1fr;
  }
}