/* Pattern: Services */

/* Grille en CSS grid : colonnes égales + gap sur les deux axes (corrige les
   cartes « collées » du flex sans column-gap) + hauteurs égales par rangée
   (align stretch natif). Nombre de colonnes piloté par --mau-cols (render.php). */
/* Couvre le cas bloc-colonnes SSR (.wp-block-columns, prime sur le flex WP par
   spécificité) ET le cas grille en wp:html (.mau-services-grid seul, ex. page géo). */
.mau-services-grid,
.mau-services-grid.wp-block-columns {
  display: grid;
  grid-template-columns: repeat(var(--mau-cols, 4), minmax(0, 1fr));
  gap: var(--wp--preset--spacing--20);
}

/* Nombre de colonnes via classe modificatrice (grilles nativisées : un wp:group
   ne porte pas le `style="--mau-cols:N"` inline du wp:html d'origine). Le SSR
   services-list garde son --mau-cols inline (render.php) — les deux coexistent. */
.mau-services-grid--2col { --mau-cols: 2; }
.mau-services-grid--3col { --mau-cols: 3; }
.mau-services-grid--4col { --mau-cols: 4; }

.mau-service-card {
  padding: 32px 28px;
  border-radius: var(--wp--custom--radius--md);
  border: 1px solid var(--wp--preset--color--border-subtle);
  background-color: var(--wp--preset--color--paper);
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--12);
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* En grille, la carte EST l'item-grille : on laisse `align-items:stretch` (défaut
   grille) dimensionner sa hauteur. `height:100%` sur un conteneur flex à enfant
   `flex:1` dans une rangée `auto` sous-dimensionne la piste (calcul min-content)
   → le contenu déborde et chevauche la rangée suivante (visible dès qu'une grille
   à N colonnes reflue sur 2 colonnes en tablette/mobile). Les cartes AUTONOMES
   (hors grille) conservent `height:100%` pour remplir leur colonne flex. */
.mau-services-grid > .mau-service-card {
  height: auto;
}

.mau-service-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--wp--custom--accent-soft);
  color: var(--wp--preset--color--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mau-service-card__icon .mau-icon,
.mau-service-card__icon svg {
  width: 22px;
  height: 22px;
  margin-block-end: 0;
}

.mau-service-card:hover,
.mau-service-card:focus-within {
  border-color: var(--wp--preset--color--accent);
  box-shadow: var(--wp--custom--shadow--sm);
  transform: translateY(-2px);
}

/* Variante « guide » : carte-question avec numéro display à la place de l'icône
   (maquette page géo : .service-card avec n° 32px Playfair accent, titre italique). */
.mau-service-card__num {
  font-family: var(--wp--preset--font-family--playfair);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  color: var(--wp--preset--color--accent);
}

.mau-service-card--guide .mau-service-card__title {
  font-style: italic;
}

/* Carte mise en avant (service phare du hub) — fond beige, icône inversée en blanc.
   Réplique .indep-service-card--featured de la maquette v2. */
.mau-service-card--featured {
  background-color: var(--wp--preset--color--paper-soft);
}

.mau-service-card--featured .mau-service-card__icon {
  background: var(--wp--preset--color--paper);
}

.mau-service-card .wp-block-heading {
  margin-block: 0;
  font-family: var(--wp--preset--font-family--inter);
  font-weight: 600;
}

/* Annuler les marges UA (1em haut/bas) sur les <p> en flex-column */
.mau-service-card > p {
  margin-block: 0;
}

/* L'excerpt prend tout l'espace disponible → pousse le CTA en bas, comme la maquette.
   Couleur + taille portées par le composant (maquette : 13px / text-muted / lh 1.5) :
   les copies inline de tools/import omettent `has-slate-color has-sm-font-size`, et sans
   couleur explicite le <p> hérite de la couleur du lien `.mau-service-card` (accent/or).
   On fige ici pour que toute carte soit correcte, classes ou non. */
.mau-service-card__desc {
  flex: 1;
  color: var(--wp--preset--color--slate);
  font-size: var(--wp--preset--font-size--sm);
  line-height: 1.5;
}

/* Note de prix/forfait sous l'excerpt (maquette : 13px, ink, strong en gras) —
   plus discrète que l'excerpt, ne doit pas hériter de la taille de corps (16px). */
.mau-service-card__note {
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--ink);
  line-height: 1.5;
}

.mau-service-card .mau-link-arrow {
  display: inline-block;
}

/* Feature card — grille d'atouts/avantages (FAM-10 variant, fond variable) */
.mau-feature-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.mau-feature-card:hover,
.mau-feature-card:focus-within {
  border-color: var(--wp--preset--color--accent) !important;
  box-shadow: var(--wp--custom--shadow--sm);
}

.mau-feature-card .wp-block-heading {
  margin-block: var(--wp--preset--spacing--12) var(--wp--preset--spacing--8);
  font-family: var(--wp--preset--font-family--inter);
  font-weight: 600;
}

@media (min-width: 768px) and (max-width: 1099px) {
  /* Grille 3 colonnes en tablette. display:grid prime sur le layout flex de WP
     par spécificité — pas de !important.
     Auparavant 2 colonnes → cartes trop larges sur toute la plage tablette
     (la maquette reste en 4 colonnes jusqu'au mobile, pas de palier 2-col large).
     3 colonnes conserve une largeur de carte proche du desktop sans tasser. */
  .mau-services-grid,
  .mau-services-grid.wp-block-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--20);
  }
}

@media (max-width: 767px) {
  /* Maquette mobile : grille 2 colonnes (services-grid__list 1fr 1fr), gap 12, carte 20. */
  .mau-services-grid,
  .mau-services-grid.wp-block-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .mau-service-card {
    padding: 20px;
  }
}