/* Pattern: Hero — homepage */

/* Titre h1 hero : Playfair Display weight 400, letter-spacing -0.01em (charte DS v2) */
.mau-section--hero .wp-block-heading {
  font-weight: 400;
  letter-spacing: -0.01em;
}

.mau-hero {
  padding-block: clamp(var(--wp--preset--spacing--64), 10vw, var(--wp--preset--spacing--128));
}

/* Hero des pages intérieures (service, hub) */
.mau-section--hero {
  padding-block: clamp(var(--wp--preset--spacing--48), 6vw, var(--wp--preset--spacing--80));
}

.mau-section--hero .wp-block-columns.alignwide {
  align-items: center;
}

/* Checklist dans le hero — utilise .mau-checklist (mau-common.css) */
.mau-hero-checklist.wp-block-list {
  margin-block: var(--wp--preset--spacing--16) var(--wp--preset--spacing--16) !important;
}

@media (max-width: 767px) {
  .mau-section--hero {
    padding-block: var(--wp--preset--spacing--64) var(--wp--preset--spacing--80);
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  .mau-section--hero {
    padding-block: var(--wp--preset--spacing--64);
  }
}

/* Hero 2col (service/contact) : colonne carte — 400px fixe comme la maquette (grid 1fr 400px).
   Bat le flex-basis:31%/42% inline WP qui écrase la carte sur tablette (31% × 850px = 263px). */
@media (min-width: 782px) {
  .mau-section--hero .wp-block-columns.alignwide > .wp-block-column:last-child {
    flex-basis: 400px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
  }
}

/* Boutons hero — taille maquette (.btn--lg : padding 16px 28px) */
.mau-section--hero .wp-block-button__link {
  padding: 16px 28px !important;
}

/* Hero-stats (page hub indépendants) — 4 stats chiffre Playfair + label,
   filet de séparation au-dessus. Calque la maquette .hero-stats. */
.mau-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--preset--spacing--24);
  margin-block-start: var(--wp--preset--spacing--40);
  padding-block-start: var(--wp--preset--spacing--32);
  border-top: 1px solid var(--wp--preset--color--border-subtle);
}

.mau-hero-stat__num {
  font-family: var(--wp--preset--font-family--playfair);
  font-size: var(--wp--preset--font-size--xxxl);
  font-weight: 600;
  color: var(--wp--preset--color--accent);
  line-height: 1;
}

.mau-hero-stat__lbl {
  font-size: var(--wp--preset--font-size--xs);
  color: var(--wp--preset--color--slate);
  margin-block-start: var(--wp--preset--spacing--8);
}

/* Maquette : 2 colonnes en tablette et mobile. */
@media (max-width: 1099px) {
  .mau-hero-stats {
    grid-template-columns: 1fr 1fr;
    gap: var(--wp--preset--spacing--16);
  }
}

.mau-trust-bar .wp-block-columns {
  align-items: flex-start;
}

.mau-trust-bar .wp-block-column {
  min-width: 0;
}

/* Dashboard visuel */
.mau-hero__visual {
  display: flex;
  align-items: center;
}

/* Mobile : la maquette v2 AFFICHE la carte dashboard sous le texte (pleine largeur,
   empilée). On la garde visible et on contraint sa largeur pour éviter tout débordement. */
@media (max-width: 767px) {
  .mau-hero__visual {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .mau-hero__visual .mau-dashboard {
    width: 100%;
    max-width: 100%;
    padding: 16px;
  }
  /* Stats du dashboard : valeur 17px (maquette .hero__dashboard-stat-value) */
  .mau-hero__visual .mau-kpi-mini .has-xxl-font-size,
  .mau-hero__visual .mau-kpi-mini .has-xl-font-size {
    font-size: 17px !important;
    font-weight: 600;
  }
}
