/* =========================================
= COMPOSANT — HOME SELECT (.nl-home-select)
= Section 50/50 de l'accueil : card « collection » + liste de 4 produits.
= Ce fichier ne porte QUE la mise en page du conteneur (le split et l'ordre) ;
= l'apparence des 2 moitiés vit dans home-select-card.css / home-select-list.css.
========================================= */
.nl-home-select {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;   /* la card s'étire à la hauteur de la liste */
  gap: 1.25rem;
  padding: 5rem 2rem;
}

/* Le DOM est « card puis liste » (ordre voulu sur mobile, donc aucun `order` à
   poser sur le cas contraint). À partir du desktop on inverse visuellement :
   liste à gauche, card à droite. */
@media (min-width: 64rem) {
  .nl-home-select-list { order: 1; }
  .nl-home-select-card { order: 2; }
}

/* Empilé : on retrouve l'ordre du DOM (card puis liste), rien à réordonner. */
@media (max-width: 64rem) {
  .nl-home-select {
    grid-template-columns: 1fr;
    padding: 4rem 1rem;
  }
}

/* Card absente (collection sans image) : la liste occupe toute la largeur. */
.nl-home-select-list:only-child { grid-column: 1 / -1; }

/* Reveal au scroll (home-select.js) : card + cartes produit masquées AVANT le JS,
   uniquement si scripting actif ET animations autorisées → aucun flash.
   Le masque vit ici (et non dans les CSS enfants) car c'est home-select.js qui
   pilote l'animation de toute la section : masque et anim restent synchronisés.
   Sans JS / GSAP absent / reduced-motion → visible (le JS révèle en fallback). */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .nl-home-select-card,
  .nl-home-select-list--items > li { opacity: 0; }
}