/* ==========================================================================
   Vidim Workflow — 282:1829 · responsive
   PROVVISORIO. Il mockup mobile non esiste: ogni valore qui e una mia scelta
   di riflusso. Nessuna riga fuori da @media.

   A >= 1512 la sezione resta identica al mockup: 1430.84 di altezza, card
   289 con le due liste ai lati del logo, tre step affiancati.

   L'ordine in cui le cose cedono:
     1. il testo delle liste (24 -> 20 -> 18);
     2. a 1023 la card si impila: lista, freccia in giu, logo, freccia, lista;
     3. sempre a 1023 gli step passano a due colonne, e a 767 a una.
   ========================================================================== */


/* --------------------------------------------------------------------------
   <= 1279 · Laptop
   Le voci a 24px in una colonna da ~400px mandano «Apps (smartphone /
   tablet)» a due righe e la card cresce.
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .wf__testo { font-size: 20px; }
  .wf__lista { padding: var(--space-4); }        /* 40 -> 32 */
  .wf-step   { padding: var(--space-4); }
}

/* --------------------------------------------------------------------------
   <= 1399 · «Use the data automatically» va a capo
   ⚠️ LA SOGLIA E STATA ALZATA DUE VOLTE, e la seconda con il conto in mano.
   Era dentro il blocco 1279, poi 1359. A 1366 — cioe uno dei portatili piu
   diffusi — il titolo del terzo step usciva ancora dal riquadro di 6px.
   Il conto: la colonna vale (finestra - 80 di gutter - 32 di gap) / 3 meno
   gli 80 di padding della card. Il titolo chiede 344px, quindi serve una
   card da 424, una riga da 1304 e una finestra da 1384. Sotto quella misura
   il `nowrap` non e piu sostenibile e la frase deve poter andare a capo.
   1399 lascia una quindicina di pixel di margine.
   Lo sorveglia strabordo.mjs, che va lanciato anche a 1366 e 1440.
   -------------------------------------------------------------------------- */
@media (max-width: 1399px) {
  .wf-step__nome { white-space: normal; }
}

@media (max-width: 1359px) {
  /* Card impilate: non c'e piu nessuna riga su cui allineare le schermate, e
     lo spazio raccolto sopra l'immagine diventerebbe un buco. Vedi la nota in
     sections/14-vidim-workflow.css. */
  .wf-step__media { margin-top: 0; }
}


/* --------------------------------------------------------------------------
   <= 1023 · Tablet — la card si impila
   Cinque voci e quattro voci affiancate al logo, sotto i 1024, sono due
   colonne da 300px: il diagramma smette di leggersi. In colonna il senso
   resta lo stesso — entra, passa da VIDIM, esce — e le frecce ruotano di
   90 gradi per dirlo.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .wf__card {
    flex-direction: column;
    align-items: stretch;
  }

  .wf__lista { align-self: auto; }

  /* Le frecce puntano in giu: in colonna il senso e lo stesso — entra, passa
     da VIDIM, esce — e la rotazione lo dice. */
  .wf__freccia { transform: rotate(90deg); align-self: center; }

  .wf__logo { align-self: center; }

  .wf__step { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* --------------------------------------------------------------------------
   <= 767 · Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .wf { padding-block: 64px; }
  .wf__container { gap: var(--space-5); }        /* 80 -> 40 */
  .wf__testo { font-size: 18px; }
  .wf__step { grid-template-columns: minmax(0, 1fr); }
}


/* --------------------------------------------------------------------------
   < 480 · Mobile stretto
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  .wf__lista,
  .wf-step { padding: 24px; }
}