/* ==========================================================================
   Chœur Polycantus — 04-hero.css

   Bandeau d'accueil : photo voilée, titre décalé, trois cartes.
   
   Les cartes chevauchent le bas du bandeau et s'alignent par le haut ; leurs
   hauteurs diffèrent selon la longueur du texte, comme sur l'original.
   ========================================================================== */

.hero {
  position: relative;
  background: var(--navy) center / cover no-repeat;
  color: var(--white);
  padding-block: clamp(3.5rem, 8vw, 6rem) 0;
  overflow: hidden;
}

/* Voile sombre : sur l'original, la photo reste lisible dessous. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 46, 79, 0.82);
}

.hero__inner {
  position: relative;
  z-index: 1;
}

.hero h1 {
  color: var(--white);
  font-weight: 500;
  margin-bottom: 0.5em;
}

.hero__subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
  max-width: 44ch;
}

.hero__actions {
  margin-block: 1.6rem 0;
}

/* Titre et bouton alignés sur le bord gauche des cartes, comme l'original
   (écart mesuré : 4 px, l'approche de la première lettre). */
.hero__lead {
  max-width: 46rem;
}

/* Les trois cartes chevauchent le bas du bandeau. */
.hero__cards {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 1.6rem;
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.hero-card {
  padding: 1.6rem 1.75rem 1.9rem;
}

.hero-card h3 {
  margin-bottom: 0.7rem;
}

.hero-card p {
  font-size: 0.95rem;
  margin: 0;
}

.hero-card a {
  font-weight: 700;
}

/* Trois teintes, comme sur l'original : pétrole, gris moyen, gris clair. */
.hero-card--teal {
  background: var(--teal);
  color: rgba(255, 255, 255, 0.9);
}

.hero-card--teal h3 {
  color: var(--white);
}

.hero-card--teal a {
  color: var(--mint);
}

.hero-card--grey {
  background: rgba(136, 136, 136, 0.88);
  color: rgba(255, 255, 255, 0.92);
}

.hero-card--grey h3 {
  color: var(--white);
}

.hero-card--grey a {
  color: var(--white);
  text-decoration: underline;
}

.hero-card--light {
  background: rgba(238, 238, 238, 0.92);
  color: #5f6b70;
}

.hero-card--light h3 {
  color: var(--teal);
}

@media (max-width: 900px) {

    .hero__cards {
      grid-template-columns: 1fr;
      gap: 1rem;
    }
}