/* ============================================================
 * Mobile Sprint Phase 1 — responsive grid utility classes.
 *
 * Helpers à appliquer aux grids dense desktop qui n'ont pas de
 * variant Tailwind responsive — un seul changement de classe et
 * la grid stack mobile correctement (1 col → 2 col → N cols).
 *
 * Le caller fournit son propre gap (`gap-2`, `gap-4`, `gap-6`...)
 * pour ne pas écraser les espacements custom des landings.
 *
 * Usage : remplacer `class="grid grid-cols-3 gap-4"` par
 *         `class="grid-auto-3 gap-4"` (le gap reste explicit).
 *
 * Pas de @apply Tailwind dans des fichiers CSS imported via
 * stylesheet_link_tag (Propshaft). On déclare donc les media
 * queries en dur, équivalent du résultat Tailwind compilé.
 * ============================================================ */

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

.grid-auto-3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  .grid-auto-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid-auto-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.grid-auto-4 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  .grid-auto-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .grid-auto-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Stats blocks — toujours min 2 colonnes pour densité visuelle, peut
   être 4 sur desktop. Les KPIs lus en colonne 1 sur mobile = trop pauvre. */
.grid-auto-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1024px) {
  .grid-auto-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}