/* SFTS EXPERIENCE COMPONENT #007 — "Card Grid Experience"
   Extrait de MT Univers (thème mt-univers, `.card-grid`/`.card--photo`
   + `.home-bento-item`) le 2026-09-24. Voir component.php pour le contexte
   complet et ce que ce composant NE couvre PAS (sfts-zone-card/filtres).

   Couleurs : jamais de token de marque en dur — `var(--surface)`/
   `var(--line)`/`var(--shadow)`/`var(--muted)`/`var(--deep)` viennent du
   thème appelant (custom properties CSS déjà globales sur MT Univers),
   pas de ce fichier. Divergence assumée vs #001/#003 (qui reçoivent leurs
   couleurs en argument PHP, jamais via des custom properties globales) —
   à trancher lors d'une consolidation future du "contrat commun theme"
   (voir SFTS-EXPERIENCE-COMPONENT-CONTRACT.md, "à démontrer plus tard").
   Ici, réutiliser les tokens globaux du thème est fidèle au comportement
   MT Univers d'origine (.card en dépendait déjà) — porté tel quel, pas
   une régression. */

.sfts-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

/* Mode "card" : photo + titre + texte + lien, fond carte visible. Base
   commune aux 2 variantes de photo (bleed/flush, voir plus bas). */
/* display: flex/column + .sfts-card-grid-cta en margin-top:auto AJOUTÉ le
   2026-09-25 (brief accueil MT Univers, point 3.2) : les liens "Découvrir"
   n'étaient pas alignés d'une vignette à l'autre — leur position dépendait
   de la longueur du texte <p> juste au-dessus (flux normal, display:block).
   Colonne flex : chaque carte s'étire à la hauteur de la plus grande
   (comportement CSS Grid par défaut du parent .sfts-card-grid), et le CTA
   est poussé en bas par margin-top:auto, quel que soit le nombre de lignes
   du texte. */
.sfts-card-grid-item--card {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow 0.35s cubic-bezier(0.19,1,0.22,1), transform 0.35s cubic-bezier(0.19,1,0.22,1);
}
.sfts-card-grid-item--card .sfts-card-grid-cta { margin-top: auto; }
.sfts-card-grid-item--card img {
  display: block;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.19,1,0.22,1);
}
.sfts-card-grid-item--card h3 { font-size: 1.1rem; margin: 0 0 10px; }
.sfts-card-grid-item--card p { color: var(--muted); font-size: 0.92rem; margin: 0 0 14px; }
.sfts-card-grid-cta { font-size: 0.88rem; font-weight: 600; color: var(--deep); }
.sfts-card-grid-item--card:hover img { transform: scale(1.06); }
.sfts-card-grid-item--card:hover { box-shadow: 0 24px 48px -20px rgba(0,0,0,0.2); }
.sfts-card-grid-item--card:active { transform: scale(0.98); transition-duration: 0.1s; }

/* Variante "bleed" (par défaut) : padding sur toute la carte, photo qui
   déborde ce padding de 26px de chaque côté (motif .card--photo générique
   du thème, porté à l'identique). */
.sfts-card-grid-item--bleed { padding: 26px; }
.sfts-card-grid-item--bleed img { width: calc(100% + 52px); margin: -26px -26px 18px; }

/* Variante "flush" : aucun padding sur la carte, photo pleine largeur bord
   à bord, texte avec une petite marge propre (motif trouvé sur "Mes trois
   univers"/#sfts-catalogue-anchor — scopé à l'origine, généralisé ici en
   2ᵉ variante plutôt que forcé dans le motif "bleed", qui aurait changé le
   rendu). */
.sfts-card-grid-item--flush { padding: 0 0 26px; }
.sfts-card-grid-item--flush img { width: 100%; margin: 0 0 18px; }
.sfts-card-grid-item--flush h3, .sfts-card-grid-item--flush p, .sfts-card-grid-item--flush .sfts-card-grid-cta { margin-left: 4px; margin-right: 4px; }

/* Mode "tile" : photo seule, aucun texte, aucune carte visible — même
   rectangle net que le reste du site (jamais d'arrondi). */
.sfts-card-grid-item--tile {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.sfts-card-grid-item--tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.19,1,0.22,1);
}
.sfts-card-grid-item--tile:hover img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .sfts-card-grid-item--card, .sfts-card-grid-item--card img, .sfts-card-grid-item--tile img { transition: none; }
  .sfts-card-grid-item--card:hover img, .sfts-card-grid-item--tile:hover img { transform: none; }
  .sfts-card-grid-item--card:active { transform: none; }
}

/* Colonnes demandées (argument `columns`) : seulement quand il y a la place.
   En dessous de 901px, la règle responsive de base (auto-fit, 230px mini)
   s'applique : 1 colonne sur téléphone, 2 ou 3 sur tablette. */
@media (min-width: 901px) {
  .sfts-card-grid { grid-template-columns: repeat(var(--sfts-card-grid-cols, 3), 1fr); }
}