/* ==========================================================================
   La Médocaine — page d'accueil
   Chargé UNIQUEMENT sur l'accueil (déclaré dans config/theme.yml).
   Règle : tout ce qui sert sur 2 pages ou plus vit dans custom.css — la
   miniature produit, l'en-tête de section et la bande image (.md-band) y sont.
   Ce fichier ne contient donc que les variantes propres à l'accueil.
   ========================================================================== */

/* Fonds de section, dans l'ordre de la maquette : hero → catégories (crème)
   → coups de cœur (blanc) → bande éditoriale → nouveautés (crème) → avis.    */

.ps-bestsellers { background-color: var(--md-white); }

.ps-bestsellers,
.ps-newproducts { padding-block: var(--md-section-y); }

/* ── Bande éditoriale « Plus qu'une cave… » ────────────────────────────────
   Variante de .md-band : voile plus dense, logo à gauche, texte du BO à droite.
   Le contenu est saisi en back-office (module Bloc texte libre) : on style les
   balises produites, jamais des classes qui n'existeraient qu'ici.           */

.ps-customtext {
  --md-band-overlay: rgba(0, 0, 0, .7);
  background-image: url("../img/cms-bg.jpg");
}

.ps-customtext__logo {
  display: block;
  width: auto;
  max-width: 12rem;
  height: auto;
  margin-inline: auto;
}

.ps-customtext__content :is(h1, h2, h3) {
  font-family: var(--md-font-display);
  font-size: clamp(1.75rem, 4vw, var(--md-fs-3xl));
  font-weight: 400;
  line-height: 1.15;
  color: var(--md-white);
  margin-block-end: 1.25rem;
}

/* « une passion à partager » : l'italique de la maquette passe en or. */
.ps-customtext__content :is(h1, h2, h3) :is(em, i) {
  color: var(--md-gold);
  font-style: italic;
}

.ps-customtext__content p {
  font-size: var(--md-fs-base);
  line-height: 1.45;
  margin-block-end: 1rem;
}

.ps-customtext__content p:last-child { margin-block-end: 0; }

.ps-customtext__content a { color: var(--md-gold); }

@media (min-width: 992px) {
  .ps-customtext__content p { text-align: justify; }
  .ps-customtext__logo { max-width: 16rem; margin-inline: 0; }
}

/* ── Hero (module mwshero) ─────────────────────────────────────────────────
   Le module fournit la structure, le diaporama et le pipeline d'images
   (WebP + srcset + preload du premier visuel). On ne pose ici que la charte :
   typographie, couleurs et boutons de la maquette.                           */

/* La hauteur minimale porte sur le cadre du diaporama, pas sur la diapositive :
   posée sur la diapositive (en position absolue), elle la faisait dépasser
   d'un cadre en 21/9, que le hero rognait (boutons coupés de 27 px à 768). */
.mwshero__viewport { min-height: clamp(26rem, 48vw, 35.75rem); }   /* 572px au max */

/* Place réservée sous le texte aux puces du diaporama, qui se posaient sur
   les boutons à 768 et 992 px. */
.mwshero__content {
  max-width: 40rem;
  padding-block-end: 3.5rem;
}

.mwshero__eyebrow {
  color: var(--md-gold);
  font-size: var(--md-fs-2xs);
  font-weight: 400;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.mwshero__title {
  font-family: var(--md-font-display);
  font-size: clamp(2.5rem, 5.6vw, 4.5rem);   /* 72px en desktop */
  font-weight: 400;
  line-height: 1.05;
  color: var(--md-cream);
}

/* Deuxième ligne du titre : italique or, comme sur la maquette. */
.mwshero__title em {
  color: var(--md-gold);
  font-style: italic;
}

.mwshero__html {
  color: var(--md-on-dark);
  font-size: 1.0625rem;
  line-height: 1.45;
  max-width: 35rem;
}

.mwshero__actions { gap: .875rem; }

.mwshero__cta {
  background-color: var(--md-cream);
  border: 1px solid var(--md-cream);
  border-radius: 0;
  color: var(--md-navy);
  font-size: var(--md-fs-sm);
  font-weight: 700;
  letter-spacing: var(--md-ls-wide);
  padding: .8125rem 1.75rem;
  text-transform: uppercase;
}

.mwshero__cta:hover {
  background-color: var(--md-gold);
  border-color: var(--md-gold);
  color: var(--md-navy);
}

.mwshero__cta--ghost {
  background-color: transparent;
  color: var(--md-cream);
}

.mwshero__cta--ghost:hover {
  background-color: var(--md-cream);
  color: var(--md-navy);
}

/* La bande de réassurance est collée au hero : pas de respiration entre les deux. */
.mwshero { margin-block-end: 0; }

/* Le parent espace les blocs de l'accueil avec `gap: 2.5rem` sur la grille
   .page-content--home. La maquette les veut jointifs (fonds pleine largeur qui
   se touchent) : chaque section porte déjà son propre rythme vertical. */
.page-content--home { gap: 0; }

/* ── Bloc « Lectures de caves » ────────────────────────────────────────────
   Maquette : un article mis en avant (visuel plus large) suivi de deux autres.
   Les cartes (.md-article) sont définies dans blog.css, partagé avec le blog.

   Mobile : un article par écran, on navigue au doigt (scroll-snap) — pas de JS,
   et la grille reprend la main dès 992 px.                                    */

.md-blogblock {
  background-color: var(--md-cream);
  padding-block: var(--md-section-y);
  overflow: hidden;             /* le rail ne doit jamais élargir la page */
}

.md-blogblock__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 85%;       /* l'article suivant dépasse : on voit qu'il y en a d'autres */
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  /* Le rail va au bord de l'écran, exactement de la marge du conteneur. Et la
     même marge d'accroche : sans elle, le défilement s'accrochait au bord de
     la première carte et la rognait dès le chargement. */
  padding: 0 calc(var(--bs-gutter-x, 1.5rem) * .5) .5rem;
  margin-inline: calc(var(--bs-gutter-x, 1.5rem) * -.5);
  scroll-padding-inline: calc(var(--bs-gutter-x, 1.5rem) * .5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.md-blogblock__item {
  min-width: 0;                 /* sans ça, l'image impose sa largeur naturelle */
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .md-blogblock__grid { grid-auto-columns: 48%; }
}

@media (min-width: 992px) {
  /* 540 / 360 / 360 px dans la maquette, soit 1,5 / 1 / 1, gouttière 24 px. */
  .md-blogblock__grid {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    overflow: visible;
    padding: 0;
    margin-inline: 0;
  }

  /* Seule l'image change de format : 540 × 337,5 pour l'article de tête,
     360 × 270 pour les deux autres. Les titres restent à la même taille. */
  .md-blogblock__item:not(.md-blogblock__item--lead) .md-article__media {
    aspect-ratio: 4 / 3;
  }
}