/* ==========================================================================
   Sezione 2 — Hero. Nodi 2625:27 + 2566:235.

   La navbar e' fissa e flottante: l'hero deve lasciarle spazio in cima,
   altrimenti il titolo ci finisce sotto.
   ========================================================================== */

.eia-hero {
  padding-top: calc(var(--eia-nav-offset) + var(--eia-nav-height) + var(--eia-space-2xl));
}

.eia-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--eia-space-xl);
}

.eia-hero__content {
  max-width: 560px;
}

.eia-hero__title {
  /* 50px / 59px, nodo 2566:230 — e' l'H1 nonostante si chiami "Subheading". */
  font-size: var(--eia-fs-hero);
  font-weight: var(--eia-fw-regular);
  line-height: var(--eia-lh-hero);
  margin-bottom: var(--eia-space-md);
  /* Evita che l'ultima riga resti con una parola sola. */
  text-wrap: balance;
}

.eia-hero__lead {
  /* 18px / 24px, nodo 2566:231 — e' il paragrafo nonostante si chiami
     "Main Heading". */
  font-size: var(--eia-fs-lead);
  line-height: var(--eia-lh-body);
  margin-bottom: var(--eia-space-lg);
  text-wrap: pretty;
}

.eia-hero__cta {
  /* 188 x 47, raggio 20px, nodo 2625:23. */
  width: var(--eia-btn-w);
}


/* --- Media -------------------------------------------------------------- */

.eia-hero__media img {
  width: 100%;
  height: auto;
}

/* Finche' l'asset non e' stato esportato da Figma (R7): riserva lo spazio
   al rapporto d'aspetto reale, cosi' il layout si verifica alle misure
   definitive senza l'immagine. */
.eia-hero__media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 912 / 587;
  border: 1px dashed var(--eia-color-hairline);
  border-radius: var(--eia-radius-card);
  background-color: var(--eia-surface-card);
  color: var(--eia-color-text-muted);
  font-size: var(--eia-fs-nav);
  letter-spacing: var(--eia-ls-nav);
}


/* --- Sotto 1024px ------------------------------------------------------- */

@media (max-width: 1023px) {
  .eia-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--eia-space-2xl);
  }

  .eia-hero__content {
    max-width: none;
  }

  /* L'immagine passa sotto al testo: su viewport stretti il messaggio
     deve arrivare prima dell'illustrazione. */
  .eia-hero__media {
    order: 2;
  }
}

@media (max-width: 768px) {
  .eia-hero {
    padding-top: calc(var(--eia-nav-height) + var(--eia-space-2xl));
  }

  .eia-hero__cta {
    width: 100%;
    max-width: var(--eia-btn-w);
  }
}