/* 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). */
.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);
}

.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);
}

/* 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 */
.mau-service-card__desc {
  flex: 1;
}

.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 2 colonnes en tablette. display:grid prime sur le layout flex de WP
     par spécificité — pas de !important. */
  .mau-services-grid.wp-block-columns {
    display: grid;
    grid-template-columns: repeat(2, 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.wp-block-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .mau-service-card {
    padding: 20px;
  }
}