/* ==========================================================================
   Easy Introduce — 34:1580 · responsive

   PROVVISORIO. Il mockup mobile non esiste: ogni valore qui dentro e una mia
   scelta di riflusso, non una misura di Figma.

   REGOLA INVIOLABILE: nessuna riga fuori da @media. A >= 1512 la sezione
   resta identica al mockup (1016px di altezza, card 708x500, testa 1086+346).

   Struttura desktop:
     .section-head--split  1432 = titolo 1086 (flex 1 0 0) + aside 346
     .easy__cards          1432 x 500 — due card affiancate, gap 16
     .easy-card             708 x 500 — immagine di fondo + testo in basso
   ========================================================================== */


/* --------------------------------------------------------------------------
   1280-1511 · Desktop compresso
   Stessa struttura: titolo + aside affiancati, due card in riga. Si sciolgono
   le larghezze fisse (1432, 346) e le altezze fisse (500).
   L'aside resta proporzionale invece che a 346 fissi: 346/1432 = 24.16%.
   -------------------------------------------------------------------------- */
@media (max-width: 1511px) {
  .section-head,
  .easy__cards {
    width: 100%;
  }
  .easy__cards { height: auto; }

  /* 346px -> quota della griglia. min-width MIA: sotto ~260px il paragrafo
     laterale diventa una colonna di 3-4 parole per riga. */
  .section-head--split .section-head__aside {
    width: 24.16%;
    min-width: 260px;
  }
  /* gap minimo fra titolo e aside: in Figma i due blocchi sono a filo dei
     1432, qui servono per non farli toccare quando il titolo si allunga */
  .section-head--split { gap: var(--space-4); }

  /* 500px vale al wrapping di 708: appena la card si stringe il corpo cresce.
     min-height MIA: senza minimo la card collassa sul testo e l'immagine
     di fondo (che e il contenuto della card) sparisce. */
  .easy-card {
    height: auto;
    min-height: 460px;
  }
  /* 628 = 708 - 40 - 40 */
  .easy-card__title,
  .easy-card__body {
    width: 100%;
  }

  /* Il core mette max-width:100% su tutti i .ph per sicurezza, ma la card
     34:1583 ha un image fill in crop (width 129.23%) dentro un wrapper
     clippato: cappato al 100% lascerebbe una banda vuota a destra.
     Qui si ripristina il comportamento della sezione. */
  .easy-card__img--crop { max-width: none; }
}


/* --------------------------------------------------------------------------
   1024-1279 · Laptop
   Le due card restano affiancate (sono una coppia comparativa: "easy for
   operators" / "easy to integrate"). Cresce solo il testo, cala il minimo.
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .easy-card { min-height: 430px; }
}


/* --------------------------------------------------------------------------
   <= 1023 · Tablet — i blocchi affiancati si impilano
   Testa: titolo sopra, paragrafo laterale sotto (l'allineamento sulla base,
   che e il senso del pattern --split, non ha traduzione in colonna).
   Card: una sopra l'altra.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .section-head--split {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);            /* 32px, valore MIO */
  }
  .section-head--split .section-head__title,
  .section-head--split .section-head__aside {
    width: 100%;
    min-width: 0;
    flex: 0 0 auto;
  }
  /* impilato, il paragrafo a piena larghezza farebbe righe di 900px:
     lo si tiene su una misura leggibile */
  .section-head--split .section-head__aside { max-width: 68ch; }

  .easy__cards {
    flex-direction: column;
    align-items: stretch;
  }
  .easy-card {
    flex: 0 0 auto;
    width: 100%;
    min-height: 420px;
  }
}


/* --------------------------------------------------------------------------
   <= 767 · Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .easy-card { min-height: 380px; }
}


/* --------------------------------------------------------------------------
   < 480 · Mobile stretto
   40px di padding su una card di ~343px lascerebbero 263px di testo.
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  .easy-card {
    padding: 24px;
    min-height: 340px;
  }
}