/* --- Variables & Base --- */
.olympus-home-hero-landing {
  position: relative;
  padding: 4rem 2rem; /* Padding par défaut pour mobile */
  box-sizing: border-box;

  /* Définition des variables locales avec fallback sur les presets WP */
  --hero-bg: var(--hero-primary, var(--wp--preset--color--primary, #2e2f85));
  --hero-btn-bg: var(
    --hero-secondary,
    var(--wp--preset--color--secondary, #ff6b6b)
  );
  --hero-text: #ffffff;
}
/* ... le reste du CSS reste inchangé, car il utilise déjà --hero-bg et --hero-btn-bg ... */

/* Le conteneur interne qui gère la largeur max */
.olympus-home-hero-landing .olympus-container {
  width: 100%;
  max-width: var(
    --wp--style--global--wide-size,
    1200px
  ); /* Utilisation de la variable globale */
  margin: 0 auto;
  box-sizing: border-box;
}

/* Configuration de l'image background */
.olympus-home-hero-landing .hero-image-wrapper {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* Hauteur minimale par défaut pour mobile */
  min-height: 300px;
  width: 100%;
  border-radius: 12px; /* Style de base */
}

/* Couleur des textes dans le InnerBlocks */
.olympus-home-hero-landing .hero-content {
  color: var(--hero-text);
}

.olympus-home-hero-landing .hero-content h1,
.olympus-home-hero-landing .hero-content h2,
.olympus-home-hero-landing .hero-content h3,
.olympus-home-hero-landing .hero-content p {
  color: inherit;
}

/* =========================================
   THEME 1: Landing Page Simple (2 Colonnes)
   ========================================= */
.olympus-home-hero-landing.theme-landingpage1 {
  background-color: var(--hero-bg);
}

/* Mobile First: Stacked */
.olympus-home-hero-landing.theme-landingpage1 .olympus-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.olympus-home-hero-landing.theme-landingpage1 .hero-image-wrapper {
  order: -1; /* Image au dessus sur mobile */
  order: 0;
  border-radius: 8px;
}

@media (min-width: 960px) {
  .olympus-home-hero-landing.theme-landingpage1 {
    padding: 6rem 2rem;
  }

  .olympus-home-hero-landing.theme-landingpage1 .olympus-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
  }

  .olympus-home-hero-landing.theme-landingpage1 .hero-content {
    max-width: 100%;
    margin-right: auto;
  }

  .olympus-home-hero-landing.theme-landingpage1 .hero-image-wrapper {
    /* On fixe une hauteur pour desktop ou on laisse min-height */
    height: 100%;
    min-height: 400px; /* Assure une bonne présence */
    max-height: 500px;
  }
}

/* =========================================
   THEME 2: Complex (Centré, Image Bottom, Overlap)
   ========================================= */
.olympus-home-hero-landing.theme-landingpage2 {
  background: transparent;
  position: relative;
  padding-bottom: 0;
  isolation: isolate;
}

/* Pseudo-élément pour le fond bleu */
.olympus-home-hero-landing.theme-landingpage2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 75%;
  background-color: var(--hero-bg);
  z-index: -1;
}

.olympus-home-hero-landing.theme-landingpage2 .olympus-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.olympus-home-hero-landing.theme-landingpage2 .hero-content {
  max-width: 800px;
  margin-bottom: 4rem;
  z-index: 1;
}

.olympus-home-hero-landing.theme-landingpage2 .hero-image-wrapper {
  width: 100%;
  max-width: 1000px;
  min-height: 640px; /* Grande hauteur pour le theme 2 */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
}