/* ==========================================================================
   Sezione "Governance & target" — #governance

   Due blocchi immagine + testo, specchiati.
   ========================================================================== */

.eia-governance {
  position: relative;
  padding-block: clamp(120px, 22vw, 340px) clamp(120px, 21vw, 330px);
  /* Gli aloni sono piu' larghi del viewport: senza questo comparirebbe
     una barra di scorrimento orizzontale. */
  overflow: clip;
}

.eia-governance__inner {
  position: relative;
  z-index: var(--eia-z-content);
}

.eia-governance__glow {
  position: absolute;
  z-index: var(--eia-z-decor);
  border-radius: 50%;
  background: var(--eia-glow-neutral);
  pointer-events: none;
}

.eia-governance__glow--a {
  right: -240px;
  top: -180px;
  width: 1300px;
  height: 1300px;
}

.eia-governance__glow--b {
  left: 40%;
  top: 640px;
  width: 1400px;
  height: 1100px;
}


/* --- Blocchi ------------------------------------------------------------- */

.eia-governance__block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 60px;
}

.eia-governance__block + .eia-governance__block {
  margin-top: clamp(48px, 6vw, 82px);
}

/* L'alternanza e' calcolata sull'indice, non su una classe nel contenuto:
   un terzo blocco aggiunto dal backoffice si dispone da solo. */
.eia-governance__block[data-eia-index="1"] .eia-governance__media {
  order: 2;
}

.eia-governance__block[data-eia-index="1"] .eia-governance__content {
  /* Nel design il secondo blocco e' rientrato rispetto al primo. */
  padding-left: 8%;
}

.eia-governance__media {
  display: block;
  flex: 0 1 480px;
  width: 480px;
  max-width: 100%;
}

.eia-governance__media img {
  width: 100%;
  height: auto;
  border-radius: var(--eia-radius-image);
  box-shadow: var(--eia-shadow-image);
}

.eia-governance__content {
  flex: 1 1 480px;
  min-width: 300px;
}

.eia-governance__title {
  max-width: 560px;
  font-size: clamp(26px, 2.5vw, var(--eia-fs-display));
  font-weight: var(--eia-fw-regular);
  line-height: 1.18;
  color: var(--eia-color-text-strong);
  text-wrap: balance;
}

.eia-governance__body {
  max-width: 545px;
  margin-top: 26px;
  font-size: var(--eia-fs-body);
  line-height: 1.64;
  color: var(--eia-color-text-soft);
  text-wrap: pretty;
}

.eia-governance__cta {
  margin-top: clamp(24px, 3vw, 34px);
  /* Questa CTA non e' uppercase come quella della navbar: e' una frase,
     non un'etichetta. */
  padding: 15px 26px;
  border-radius: 24px;
  font-size: var(--eia-fs-cta);
  font-weight: var(--eia-fw-regular);
  letter-spacing: normal;
  text-transform: none;
}


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

@media (max-width: 1023px) {
  .eia-governance__block {
    gap: var(--eia-space-xl);
  }

  /* In colonna singola l'alternanza non ha senso: il testo viene sempre
     prima del media, in entrambi i blocchi. */
  .eia-governance__block[data-eia-index="1"] .eia-governance__media {
    order: 0;
  }

  .eia-governance__block[data-eia-index="1"] .eia-governance__content {
    padding-left: 0;
  }

  .eia-governance__media {
    flex-basis: 100%;
    width: 100%;
  }

  .eia-governance__glow {
    display: none;
  }
}