/**
 * How It Works Cards Styles
 */

.olympus-how-it-works-cards {
  width: 100%;
  padding: 4rem 0;
  box-sizing: border-box;

  /* Définition des variables locales avec fallback */
  --cards-icon-color: var(
    --cards-primary,
    var(--wp--preset--color--primary, #2e2f85)
  );
  --cards-bg-color: var(--cards-secondary, #ffffff);
  /* Fallback couleur de texte : noir (pour contrast sur blanc) ou couleur globale */
  --cards-text-color: var(--cards-text, inherit);
}

.olympus-how-it-works-cards .olympus-container {
  width: 100%;
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin: 0 auto;
}

/* C'est le conteneur interne d'ACF qui doit être la grille */
.olympus-how-it-works-cards .olympus-container > .acf-innerblocks-container,
.olympus-how-it-works-cards
  .olympus-container
  > .block-editor-inner-blocks
  > .block-editor-block-list__layout {
  display: grid;
  grid-template-columns: 1fr; /* Mobile */
  gap: 30px;
  width: 100%; /* Sécurité */
}

@media (min-width: 768px) {
  .olympus-how-it-works-cards .olympus-container > .acf-innerblocks-container,
  .olympus-how-it-works-cards
    .olympus-container
    > .block-editor-inner-blocks
    > .block-editor-block-list__layout {
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes simple */
  }
}

/* Gestion de la couleur de l'icône via la variable */
.olympus-how-it-works-cards .step-icon-wrapper {
  color: var(--cards-icon-color);
}

/* =========================================
   THEME 1: Simple (Pas de carte, juste icone + texte)
   ========================================= */
.olympus-how-it-works-cards.theme-landingpage1 {
  background-color: transparent;
}

/* =========================================
   THEME 2: Cartes (Fond + Radius)
   ========================================= */
.olympus-how-it-works-cards.theme-landingpage2 {
  /* Styles globaux du conteneur si besoin */
}

/* Spécificités Theme 2 sur les enfants */
.olympus-how-it-works-cards.theme-landingpage2 .olympus-how-it-works-card {
  background-color: var(--cards-bg-color);
  color: var(--cards-text-color); /* Application du contraste */
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* On force la couleur des titres et paragraphes internes pour s'assurer du contraste */
.olympus-how-it-works-cards.theme-landingpage2 .olympus-how-it-works-card h1,
.olympus-how-it-works-cards.theme-landingpage2 .olympus-how-it-works-card h2,
.olympus-how-it-works-cards.theme-landingpage2 .olympus-how-it-works-card h3,
.olympus-how-it-works-cards.theme-landingpage2 .olympus-how-it-works-card h4,
.olympus-how-it-works-cards.theme-landingpage2 .olympus-how-it-works-card h5,
.olympus-how-it-works-cards.theme-landingpage2 .olympus-how-it-works-card h6,
.olympus-how-it-works-cards.theme-landingpage2 .olympus-how-it-works-card p {
  color: inherit; /* Hérite de la carte qui utilise --cards-text-color */
}