/* ===========================================
   HERO
   Desktop/tablet : image gauche 50% + contenu droit 50%
   Mobile         : stacked (image haut, contenu bas)
   =========================================== */

.hero {
  display: flex;
  width: 100%;
  /* Hauteur minimum : la plus grande entre
     - 50vw (= largeur de l'image en layout side-by-side) → garantit
       que l'image n'est jamais landscape, peu importe la hauteur du viewport
     - viewport - navbar → comportement classique "fill the screen"
     max() fait la transition fluidement entre les deux selon le ratio
     de l'écran. */
  min-height: max(50vw, calc(100vh - var(--nav-height)));
  background-color: var(--color-bg);
}

/* --- Image (gauche desktop/tablet, haut mobile) --- */
.hero__image-wrapper {
  flex: 1 1 50%;
  overflow: hidden;
}

.hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --- Contenu (droit desktop/tablet, bas mobile) --- */
.hero__content {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  padding: 40px 85px;
  position: relative;
  z-index: 1;
}


/* Groupe titre : Toulouse-Ouest + H1.
   Gap interne de 10px (Figma Frame 68), plus serré que le gap 30 du
   container parent qui sépare les blocs majeurs. */
.hero__heading-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- Textes --- */
.hero__location {
  font-size: 16px;
  font-weight: var(--fw-bold);
  line-height: 24px;
  color: var(--color-accent);
}

.hero__title {
  font-size: 48px;
  font-weight: var(--fw-bold);
  line-height: 55px;
  color: var(--color-text);
  margin: 0;
}

.hero__description {
  font-size: 20px;
  font-weight: var(--fw-regular);
  line-height: 30px;
  color: var(--color-text);
}

/* Bouton ghost — surcharge des tailles spécifiques au hero */
.hero__button {
  align-self: flex-start;
  font-size: 14px;
  line-height: 21px;
}

.hero__trust {
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  color: var(--color-text);
}

/* ============================
   TABLET (768-1199px)
   ============================ */
@media (max-width: 1199px) {
  .hero__inner {
    padding: 40px 30px;
  }
}

/* ============================
   MOBILE (< 768px)
   Image : hauteur basée sur le viewport (60vh) avec bornes min/max
   pour rester visuellement marquante mais sans pousser le texte
   hors de l'écran sur les téléphones plus grands.
   ============================ */
@media (max-width: 767px) {
  .hero {
    flex-direction: column;
    min-height: 0;
  }

  .hero__image-wrapper {
    flex: none;
    width: 100%;
    /* Aspect-ratio 1/1 garantit que l'image reste carrée à toutes
       les largeurs mobile (320 → 767). Jamais landscape.
       min-height assure une présence visuelle suffisante sur les
       très petits écrans (<360px). */
    aspect-ratio: 1 / 1;
    min-height: 360px;
  }

  .hero__content {
    flex: none;
    width: 100%;
  }

  .hero__inner {
    padding: 40px 30px;
  }

  .hero__title {
    font-size: 40px;
    line-height: 45px;
  }

  .hero__description {
    font-size: 16px;
    line-height: 24px;
  }

  .hero__button {
    font-size: 13px;
    line-height: 20px;
  }

  .hero__trust {
    font-size: 13px;
    line-height: 20px;
  }

}

/* Animation d'entrée : chaque texte glisse de 20px vers le haut en
   apparaissant (slide-up + fade). Stagger 100ms entre chaque élément,
   du haut vers le bas. Easing ease-out-quint pour un démarrage rapide
   et une décélération douce — pattern des sites premium. */
@keyframes hero-reveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__location,
.hero__title,
.hero__description,
.hero__button,
.hero__trust {
  opacity: 0;
  animation: hero-reveal 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero__location    { animation-delay: 100ms; }
.hero__title       { animation-delay: 200ms; }
.hero__description { animation-delay: 300ms; }
.hero__button      { animation-delay: 400ms; }
.hero__trust       { animation-delay: 500ms; }

@media (prefers-reduced-motion: reduce) {
  .hero__location,
  .hero__title,
  .hero__description,
  .hero__button,
  .hero__trust {
    opacity: 1;
    animation: none;
  }
}