/* ==========================================================================
   Easy Introduce — 34:1580 · 1512 x 1016
   Flusso verticale: 160 (pad-top) + 116 (Text) + 80 (gap) + 500 (Cards)
                     + 160 (pad-bottom) = 1016
   ========================================================================== */

.easy {
  height: 1016px;
  background: var(--color-white);
  gap: var(--space-6);            /* 80px */
  justify-content: flex-start;
}

/* ==========================================================================
   .section-head--split — pattern condiviso
   "titolo largo 1086px (flex 1 0 0) + paragrafo laterale 346px, allineati
   sulla base". Ricorre identico in Easy Introduce 34:1606 e in Outcome
   32:1388 (00-design-system §229). 1086 + 346 = 1432.
   NB: sta qui perche components.css non e modificabile; da spostare la'
   quando anche Outcome verra implementata.
   ========================================================================== */
.section-head {
  width: var(--container-width);
}
.section-head--split {
  display: flex;
  flex-direction: row;
  align-items: flex-end;          /* allineamento sulla base */
  justify-content: space-between;
}
.section-head--split .section-head__title {
  flex: 1 0 0;                    /* -> 1086px */
  min-width: 0;
  text-align: left;
}
.section-head--split .section-head__aside {
  width: var(--col-1);            /* 346px fisso */
  flex: 0 0 auto;
  text-align: left;
}

/* --- Text 34:1606 — colori propri della sezione --------------------------- */
.easy__title { color: var(--color-tertiary); }   /* #00122b */
.easy__aside { color: var(--color-tertiary-300); } /* #525e6f */

/* --- Cards 34:1596 — 1432 x 500, row, items-center, gap 16 ---------------- */
.easy__cards {
  width: var(--container-width);
  height: 500px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--grid-gap);
}

/* ==========================================================================
   Card grande Easy Introduce — 34:1602 e 34:1583 · 708 x 500
   ========================================================================== */
.easy-card {
  position: relative;
  flex: 1 0 0;                    /* -> 708px */
  min-width: 0;
  height: 500px;
  padding: var(--space-5);        /* 40px -> contenuto 628px */
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-tertiary);  /* fondo in attesa dell'immagine (non e un fill Figma) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;      /* contenuto ancorato al fondo */
  gap: var(--space-3);            /* 16px */
}

/* --- Image fill + overlay -------------------------------------------------
   Come nelle Application Card: l'immagine e un image fill del frame root,
   non un layer. Wrapper decorativo assoluto sotto i testi. */
.easy-card__media {
  position: absolute;
  inset: 0;
  overflow: hidden;               /* clippa il crop della card 34:1583 */
  pointer-events: none;
  z-index: 0;
}
.easy-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
/* Crop specifico della card 34:1583 (spec §3.4) */
.easy-card__img--crop {
  inset: auto;
  left: -14.62%;
  top: -35.54%;
  width: 129.23%;
  height: 135.54%;
}
.easy-card__overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-card-easy);
}

/* I testi stanno sopra il wrapper decorativo */
.easy-card__title,
.easy-card__body { position: relative; z-index: 1; width: 628px; }

/* Titoli 34:1603 / 34:1585 — 28/34, #ffffff */
.easy-card__title { color: var(--color-white); }

/* Corpi 34:1604 / 34:1586 — 16/19, #d2d2d2.
   Un unico layer di testo con due paragrafi separati da un a-capo. */
.easy-card__body { color: var(--color-neutral-300); }