/* =========================================
= COMPOSANT — EN-TÊTE CATÉGORIE (.nl-category-header)
= Bannière des archives (boutique + catégorie) : photo en fond + grille
= de texte par-dessus (titre + description). Statique (pas de JS).
========================================= */
.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; }
}

/* Fondu au chargement (wc-category-header.js) : bandeau masqué AVANT le JS,
   uniquement si scripting actif ET animations autorisées → aucun flash.
   Sans JS / GSAP absent / reduced-motion → visible (le JS révèle en fallback).
   ⚠️ Le fondu (photo = LCP probable) décale légèrement le LCP (choix assumé). */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .nl-category-header,
  .nl-category-header--title,
  .nl-category-header--desc { opacity: 0; }
}