/* ==========================================================================
   Sezione 8 — Feature block A e B. Nodi 2633:55 / 2566:330 e figli.

   ⏳ STUB: la spec ha solo le coordinate dei contenitori. La disposizione
   interna (dove sta il media rispetto al testo, quali dei quattro
   sotto-nodi sono titolo, corpo e decorazione) NON e' stata estratta.

   Applicata l'alternanza testo/immagine, la disposizione piu' probabile
   date le coordinate. DA VERIFICARE contro il rendering reale.
   ========================================================================== */

.eia-features {
  position: relative;
}

/* Grafica decorativa di fondo, nodo 2566:318 (1162 x 1261). */
.eia-features__decor {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1162px;
  max-width: 100%;
  opacity: 0.6;
}

.eia-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--eia-space-xl);
  position: relative;
  z-index: var(--eia-z-content);
}

.eia-feature + .eia-feature {
  margin-top: var(--eia-space-section);
}

/* Il secondo blocco specchia il primo: media a sinistra, testo a destra. */
.eia-feature[data-eia-feature-index="1"] .eia-feature__content {
  order: 2;
}

.eia-feature__title {
  margin-bottom: var(--eia-space-md);
  font-size: var(--eia-fs-display);
  font-weight: var(--eia-fw-regular);
  line-height: 1.2;
  text-wrap: balance;
}

.eia-feature__body {
  font-size: var(--eia-fs-body);
  line-height: var(--eia-lh-body);
  text-wrap: pretty;
}

.eia-feature__media img {
  width: 100%;
  height: auto;
  border-radius: var(--eia-radius-card);
}

.eia-feature__media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Rapporto neutro: la spec non riporta le misure dei media di questa
     sezione, quindi non se ne inventa uno. */
  aspect-ratio: 4 / 3;
  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);
  text-align: center;
}


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

  /* In colonna singola l'alternanza non ha senso: il testo viene sempre
     prima del media. */
  .eia-feature[data-eia-feature-index="1"] .eia-feature__content {
    order: 0;
  }

  .eia-features__decor {
    display: none;
  }
}