/* =========================================
= COMPOSANT — TUILE SUGGESTION (.nl-product-sug)
= Tuile (photo/vidéo décorative + titre) intercalée dans la grille produits.
= Markup + logique : inc/category-suggestions.php (feature complète).
= Vit dans le conteneur .nl-category-list (unités cqw) → enqueue après nouli-category.
========================================= */
.nl-product-sug {
  position: relative;
  list-style: none;
  overflow: hidden;
  border-radius: var(--radius-xs);
  aspect-ratio: 0.65 / 1; /* portrait — proportion d'une vignette produit */
  /* Skeleton shimmer pendant le chargement du média (recouvert par img/video).
     Keyframe propre → composant autonome (ne dépend pas de wc-card.css). */
  background: linear-gradient(100deg,
    var(--secondary-c) 25%,
    var(--secondary) 50%,
    var(--secondary-c) 75%
  );
  background-size: 300% 100%;
  animation: nl-sug-shimmer 1.5s ease-in-out infinite;
}
/* Média prêt → shimmer coupé (classe posée par wc-card-sug.js) */
.nl-product-sug.is-loaded {
  animation: none;
  background: var(--secondary-c);
}
@keyframes nl-sug-shimmer {
  0%   { background-position: 150% 0; }
  100% { background-position: -150% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nl-product-sug { animation: none; background: var(--secondary-c); }
}
/* « 2 espaces » : occupe 2 colonnes — MAIS uniquement quand la grille a ≥ 2
   colonnes (≥ 48rem). En 1 colonne, `span 2` créerait une colonne implicite et
   casserait l'affichage des produits → on garde une tuile normale sur mobile. */
.nl-product-sug--wide {
  aspect-ratio: 0.65 / 1;
}

.nl-product-sug--media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;                    /* masqué tant que le média n'est pas prêt */
  transition: opacity 0.5s ease;
}
.nl-product-sug.is-loaded .nl-product-sug--media { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .nl-product-sug--media { transition: none; opacity: 1; }
}

.nl-product-sug--overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;       /* titre en bas */
  justify-content: flex-start; /* … à gauche */
  padding: 1.25rem;
  text-align: left;
  color: var(--secondary-c);
}

.nl-product-sug--title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: 1;
}


/* Tuile large : hauteur EXACTE d'une tuile 1 colonne, gap compris.
   largeur colonne = (largeur grille − (n−1) × gap) / n ; hauteur = largeur / 0.65
   On pilote la hauteur (et non l'aspect-ratio) car le gap est fixe et la colonne fluide. */
@media (min-width: 48rem) {
  .nl-product-sug--wide {
    grid-column: span 2;  /* span appliqué seulement quand il y a ≥ 2 colonnes */
    aspect-ratio: auto;   /* la hauteur calculée prend le relais */
    height: calc((100cqw - 2 * var(--grid-gap-m)) / 3 / 0.65); /* 3 colonnes */
  }
}
@media (min-width: 64rem) {
  .nl-product-sug--wide {
    height: calc((100cqw - 3 * var(--grid-gap)) / 4 / 0.65); /* 4 colonnes */
  }
}