/* Pattern: Process */

/* Fond paper-soft sur la section entière (maquette v2), pas sur les cartes.
   :has() couvre les pages importées (sans mau-section--process) + le pattern */
.mau-section:has(.mau-process-grid) {
  background-color: var(--wp--preset--color--paper-soft);
}

/* Emphase dorée dans le titre H2 de la section */
.mau-section:has(.mau-process-grid) .wp-block-heading em {
  color: var(--wp--preset--color--accent);
  font-style: italic;
}

.mau-process-grid .wp-block-column {
  position: relative;
}

.mau-process-step {
  padding: var(--wp--preset--spacing--32) var(--wp--preset--spacing--24);
  background: var(--wp--preset--color--paper-soft);
  border-radius: var(--wp--custom--radius--md);
  transition: transform 0.3s;
}
.mau-process-step:hover {
  transform: translateY(-4px);
}

.mau-process-num {
  font-family: var(--wp--preset--font-family--inter);
  font-weight: 600;
  font-size: 3rem;
  font-variant-numeric: tabular-nums;
  font-style: italic;
  line-height: 1;
  margin-block-end: var(--wp--preset--spacing--16) !important;
}

.mau-process-step .wp-block-heading {
  margin-block-end: var(--wp--preset--spacing--8);
  line-height: 1.6; /* maquette v2 : step-title lede 19px → lh 1.6 (30.4px) */
  font-size: 1.1875rem !important; /* maquette v2 : step-title = 19px fixe (pas fluide) — .has-lede-font-size WP injecte !important, on prime avec !important scopé */
}

/* Connecteurs visuels entre étapes (desktop uniquement) */
@media (min-width: 1100px) {
  .mau-process-grid .wp-block-column:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 2.5rem;
    right: -1rem;
    width: 2rem;
    height: 2px;
    background: var(--wp--preset--color--border-subtle);
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  /* Grille 2×2 par défaut (4 steps), 3 colonnes (3+2) pour les pages à 5 steps.
     PAS 5 colonnes : à cette largeur, 5 tracks minmax(0,1fr) tombent sous la
     largeur du mot → le titre se coupe au milieu (« Lanceme|nt »). 3 colonnes
     laissent assez de place pour des mots entiers. */
  .mau-process-grid.wp-block-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--24);
  }
  .mau-process-grid.wp-block-columns:has(.mau-process-step:nth-child(5)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .mau-process-grid.wp-block-columns {
    flex-direction: column;
  }
}