/* ==========================================================================
   Blocco condiviso — EASY INTRODUCE (variante con elenco puntato)
   Maintenance `Easy Introduce` 63:500 · 1512 x 1016

   ⚠️ Stessa altezza e stesse due card 708x500 della Easy Introduce della
   Home, ma DUE differenze sostanziali:
     1. l'intestazione e su due colonne — titolo a sinistra, paragrafo largo
        346 ancorato a destra e allineato in BASSO (`items-end`);
     2. dentro le card non c'e un paragrafo ma un ELENCO PUNTATO.

   ⚠️ Correzione all'inventario: avevo annotato che le due card fossero "sole
   immagini senza figli" perche i metadata non mostrano il contenuto delle
   istanze. Il contesto di design dice il contrario — titolo + quattro voci.

   Verifica altezza: 160 + 116 (testo) + 80 + 500 (card) + 160 = 1016 ✔
   ========================================================================== */

/* Su Monitoring 113:1780 la sezione e bianca invece che grigia. E l'unica
   differenza strutturale, e vale la pena dichiararla esplicitamente invece di
   lasciarla al fondo del body. */
.easy2--chiaro {
  background: var(--color-white);
}

.easy2__intro {
  display: flex;
  align-items: flex-end;              /* ⚠️ in basso, non in alto */
  justify-content: space-between;
  gap: var(--space-5);
  width: 100%;
}

.easy2__titolo {
  color: var(--text-on-light);
  /* ⚠️ 4 set 2026 — ERA `white-space: nowrap`, ed e stato tolto.
     L'a-capo di questo titolo e esplicito (un <br> nel testo), quindi il
     nowrap non serviva a ottenerlo: serviva a impedire un a-capo automatico
     in un punto sbagliato fra 1280 e 1511. Ma con la traduzione italiana —
     una riga sola, piu lunga — il nowrap faceva sfondare la pagina di 252px
     su Monitoring & Reporting: il titolo non poteva andare a capo e spingeva
     fuori il contenitore.
     Senza nowrap l'inglese non cambia di un pixel (ci sta comunque, e il <br>
     resta dov'e) e una traduzione piu lunga va a capo invece di rompere il
     layout. Verificato con il controllo di sconfinamento su tutte e sette le
     pagine, in entrambe le lingue, da 360 a 1920. */
}

.easy2__lead {
  color: var(--color-tertiary-300);
  width: 346px;
  flex: 0 0 346px;
}

/* --- Le due card ---------------------------------------------------------- */
.easy2__cards {
  display: flex;
  align-items: center;
  gap: var(--space-3);                /* 16 */
  width: 100%;
  margin-top: var(--space-6);         /* 80 */
}

.easy2-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 500px;
  padding: var(--space-5);            /* 40 */
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;          /* il testo sta in fondo */
  gap: var(--space-3);
  color: var(--text-on-dark);
}

.easy2-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.easy2-card__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* La seconda card ha un ritaglio suo, dichiarato in Figma come percentuali
   sul box: l'immagine sborda e viene clippata dal wrapper. Va fornita PIU
   GRANDE del riquadro (>= 1830 x 1356 @2x), non gia ritagliata. */
.easy2-card__media--crop > img {
  inset: auto;
  left: -14.62%;
  top: -35.54%;
  width: 129.23%;
  height: 135.54%;
}

/* La velatura scura che rende leggibile il testo: trasparente fino a un
   quarto dell'altezza, poi scende al blu pieno. */
.easy2-card__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgb(0 18 43 / 0) 25%, #00122b 100%);
}

.easy2-card__titolo,
.easy2-card__lista,
.easy2-card__corpo {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Variante a paragrafo (Monitoring 113:1787 / 113:1790): stesso colore delle
   voci dell'elenco, senza marcatore ne rientro. */
.easy2-card__corpo {
  color: var(--text-on-dark-muted);
}

.easy2-card__lista {
  list-style: disc;
  padding-left: 24px;                 /* il rientro del marcatore in Figma */
  color: var(--text-on-dark-muted);
}