/*
 * Hop We Care — Composant Hero
 * ─────────────────────────────────────────────────────────────────────────────
 * Adapté de attached_assets/hero-clean.css.
 * Toutes les valeurs magiques remplacées par des tokens (tokens.css).
 * Reproduction fidèle du rendu Elementor original : image plein écran,
 * overlay dégradé, titre Playfair Display 900, CTA pilule teal.
 *
 * Image de fond : assets/images/hero-background.jpg (copiée de la baseline).
 * Définie via --hero-img dans tokens.css — aucune modification ici si
 * l'image change.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Section hero ─────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;           /* Pleine hauteur viewport — comme Elementor full-height */
  display: flex;
  align-items: center;
  overflow: hidden;

  /* Image de fond définie dans tokens.css via --hero-img */
  background-image: var(--hero-img);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;  /* Parallaxe — désactivé sur mobile, voir media query */
}

/* ── Overlay dégradé ──────────────────────────────────────────────────────── */
/*
 * Original Elementor : linear-gradient(180deg, #00000078 0%, #FFFFFF47 37%)
 * Noir semi-transparent en haut → blanc translucide à 37%
 */
.hero__overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.47) 0%,
    rgba(255, 255, 255, 0.28) 37%
  );
  pointer-events: none;
}

/* ── Conteneur intérieur ──────────────────────────────────────────────────── */
/*
 * Original : max-width 1144px, padding-bottom 250px (pousse le contenu haut)
 */
.hero__container {
  position: relative;  /* au-dessus de l'overlay */
  z-index: 1;
  width: 100%;
  max-width: 1144px;
  margin: 0 auto;
  padding: 0 var(--layout-padding-x) 15rem;  /* 15rem ≈ 250px */
}

/* ── Zone de contenu ──────────────────────────────────────────────────────── */
/*
 * Original : colonne gauche 50% — droite vide
 */
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  max-width: 50%;
}

/* ── Tagline ──────────────────────────────────────────────────────────────── */
/*
 * Original : Playfair Display 900, 54px, lh 1.2, blanc, text-shadow
 *            margin-top: -23px (légère remontée visuelle)
 */
.hero__tagline {
  margin-top: -1.2rem;  /* reproduit le margin-top: -23px de l'original */
  font-family: var(--font-title);
  font-size: var(--text-hero);
  font-weight: var(--weight-black);
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* ── CTA "Faire un don" ───────────────────────────────────────────────────── */
/*
 * Original : Helvetica 900, word-spacing 2px, bg #247F86,
 *            border 2px solid #0BA3AE, border-radius 50px
 */
.hero__cta {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.75rem;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: var(--weight-black);
  word-spacing: 2px;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: #fff;
  background-color: var(--color-teal);
  border: 2px solid var(--color-teal-light);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition:
    background-color var(--transition),
    border-color var(--transition);
}

.hero__cta:hover,
.hero__cta:focus-visible {
  background-color: var(--color-teal-dark);
  border-color: var(--color-teal-dark);
  outline: none;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

/* Tablette ≤ 1024px — titre à 34px comme Elementor */
@media (max-width: 1024px) {
  .hero__content {
    max-width: 70%;
  }
}

/* Mobile ≤ 768px — titre 27px, largeur pleine, parallaxe désactivé */
@media (max-width: 768px) {
  .hero {
    /* background-attachment: fixed bugué sur iOS Safari */
    background-attachment: scroll;
    /* small viewport height pour éviter la barre d'adresse mobile */
    min-height: 100svh;
  }

  .hero__container {
    padding-bottom: var(--space-24);
  }

  .hero__content {
    max-width: 100%;
  }

  .hero__tagline {
    margin-top: 0;
  }
}