/* =========================================
= CATEGORIE PRODUIT — taxonomy-product_cat + archive-product
   Bloc `nl-category` : header + grille produits
========================================= */

/* -----------------------------------------
   HEADER catégorie : photo en fond + grille de texte par-dessus
----------------------------------------- */
.nl-category-header {
  position: relative;
  margin: 0;
  border-radius: var(--radius-xs);
  overflow: hidden;
  color: var(--secondary);
  background-color: var(--primary); /* fallback / catégorie sans image */
}

/* Photo en fond (couvre tout le header) */
.nl-category-header--media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.nl-category-header--media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Grille de texte par-dessus : nom = col 1-2, col 3 vide, description = col 4 */
.nl-category-header--grid {
  position: relative;
  z-index: 1;
  height: calc(-7.5rem + 95vh);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 1.25rem;
  padding: 2.5rem 2rem;
  min-height: 17.5rem;
}
.nl-category-header--title { grid-column: 1 / 3; }
.nl-category-header--desc  { grid-column: 4; }

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

.nl-category-header--desc {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-sm);
  line-height: 1.6;
}
.nl-category-header--desc p { margin: 0 0 0.5rem; }
.nl-category-header--desc p:last-child { margin-bottom: 0; }

/* Mobile / tablette : grille empilée (1 colonne) */
@media (max-width: 64rem) {
  .nl-category-header--grid {
    grid-template-columns: 1fr;
    min-height: calc(-12.5rem + 85vh);
    gap: 1.25rem;
    padding: 1.25rem;
    align-content: center;   /* centre le bloc verticalement */
    justify-items: center;   /* centre les items horizontalement */
    text-align: center;
  }
  .nl-category-header--title,
  .nl-category-header--desc { grid-column: auto; }
  .nl-category-header--desc { max-width: 30rem; }
}

/* -----------------------------------------
   GRILLE produits — responsive 1 / 2 / 4 colonnes
----------------------------------------- */
.nl-category-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin: 1.25rem 1rem;
  --grid-gap: 1.25rem;
    --grid-gap-m: 1.25rem;         /* référence pour le calcul de hauteur des tuiles larges */
  container-type: inline-size; /* active les unités cqw (largeur réelle de la grille) */
}
@media (min-width: 48rem) {
  .nl-category-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}
@media (min-width: 64rem) {
  .nl-category-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin: 2.5rem 2rem;}
}

/* -----------------------------------------
   TUILE « suggestion » intercalée dans la grille (.nl-product-sug)
   Photo décorative + titre en surimpression. Largeur 1 ou 2 colonnes.
----------------------------------------- */
.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 */
}
/* « 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;
}

.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 */
  }
}