/* ==========================================================================
   Maintenance — `Before After` 63:715 · responsive

   PROVVISORIO: riflussi miei, il mockup mobile non esiste.
   REGOLA INVIOLABILE: nessuna riga fuori da @media.
   ========================================================================== */

/* --- <= 1511 · la scaletta diventa proporzionale --------------------------
   A 1512 i numeri sono: card 800, passo 160, contenitore 1432.
   In percentuale: 800/1432 = 55.87%, 160/1432 = 11.17%.
   Tenendoli cosi, la diagonale resta la stessa mentre la pagina si stringe,
   e l'ultima card continua a chiudere a filo destro da sola (`margin-left:
   auto`) senza che nessuno debba ricalcolare niente. */
@media (max-width: 1511px) {
  .mnt-ba-card { width: 55.87%; }

  .mnt-ba-card:nth-child(2) { margin-left: 11.17%; }
  .mnt-ba-card:nth-child(3) { margin-left: 22.35%; }
  .mnt-ba-card:nth-child(4) { margin-left: 33.52%; }

  .mnt-proactive__media {
    height: auto;
    aspect-ratio: 1432 / 645;
  }
}

/* --- <= 1023 · la scaletta si raddrizza ----------------------------------
   Sotto i 1024 la card al 55.87% e larga meno di 570px e lo scostamento del
   33.5% la spinge fuori dalla colonna leggibile: la diagonale smetterebbe di
   essere un'idea e diventerebbe un problema.

   Le card tornano a piena larghezza e in colonna. La progressione — che e il
   senso della sezione — resta leggibile lo stesso: la danno i numeri (1..5) e
   soprattutto il fondo che si scurisce a ogni gradino, che qui diventa
   l'unico indizio visivo del percorso. MIA scelta, da riverificare col
   mockup mobile quando arrivera. */
@media (max-width: 1023px) {
  .mnt-ba-card,
  .mnt-ba-card:nth-child(2),
  .mnt-ba-card:nth-child(3),
  .mnt-ba-card:nth-child(4),
  .mnt-ba-card:last-child {
    width: 100%;
    margin-left: 0;
  }

  .mnt-ba-card { padding: var(--space-4); }   /* 32 */

  .mnt-ba__scala { margin-top: 56px; }
  .mnt-proactive { margin-top: 56px; }
}

/* --- <= 767 · mobile ------------------------------------------------------ */
@media (max-width: 767px) {
  .mnt-ba__scala,
  .mnt-proactive { margin-top: 48px; }

  .mnt-proactive { gap: var(--space-4); }

  .mnt-proactive__media { aspect-ratio: 4 / 3; }
}

/* --- < 480 · mobile stretto ---------------------------------------------- */
@media (max-width: 479px) {
  .mnt-ba-card { padding: 24px; }

  /* Il numero e il titolo su una card stretta stanno meglio incolonnati:
     "Condition-Based Maintenance (CBM)" accanto a "4." lascia due parole per
     riga. */
  .mnt-ba-card__titolo {
    display: block;
  }
  .mnt-ba-card__titolo::before {
    content: counter(gradino) ". ";
  }
}