/* ==========================================================================
   Vidim Workflow — 282:1829 · 1512 x 1430.84

   NUOVA dal mockup del 31 ago 2026.
   Flusso verticale:
     160 + 151 (testo) + 80 + 289 (card) + 80 + 387.84 (step) + 80
     + 43 (pulsanti) + 160 = 1430.84

   ⚠️ I decimali vengono dalle tre schermate degli step: proporzione 1729/907
   su 386.667 di larghezza = 202.8378 di altezza. Sono corretti. Fissare
   un'altezza intera vorrebbe dire deformare le immagini.
   ========================================================================== */

.wf {
  width: var(--page-width);
  padding: var(--space-7) var(--page-gutter);   /* 160 / 40 */
  background: var(--color-neutral-100);         /* #f5f5f5 */
}

.wf__container {
  align-items: center;
  gap: var(--space-6);                          /* 80 fra tutti i blocchi */
}

/* --- Text 282:1832 — 1432 x 151, centrato -------------------------------- */
.wf__intro {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);                          /* 16 */
}

.wf__titolo {
  width: 100%;
  color: var(--text-on-light);
  text-align: center;
}

.wf__lead {
  width: 100%;
  color: var(--text-on-light-muted);
  text-align: center;
}

/* --- Card 282:1842 — 1432 x 289 ------------------------------------------
   Riga: lista | freccia | logo | freccia | lista. Le due liste si dividono
   lo spazio che avanza (`flex: 1`), le tre cose in mezzo hanno misura
   propria. L'altezza la detta la lista piu lunga — quella di destra, cinque
   voci — e l'altra si allunga per pareggiarla, centrando il contenuto.
-------------------------------------------------------------------------- */
.wf__card {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);                          /* 16 */
}

.wf__lista {
  flex: 1 0 0;
  min-width: 0;
  align-self: stretch;                          /* pareggia le due colonne */
  margin: 0;
  padding: var(--space-5);                      /* 40 */
  list-style: none;
  border-radius: var(--radius-lg);              /* 16 */
  background: var(--color-neutral-200);         /* #e8e8e8 */

  display: flex;
  flex-direction: column;
  justify-content: center;                      /* quella corta resta centrata */
  gap: var(--space-3);                          /* 16 */
}

.wf__voce {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);                          /* 8 */
  width: 100%;
}

.wf__icona {
  flex: none;
  width: 24px;
  height: 24px;
  display: block;
}

.wf__icona > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wf__testo {
  flex: 1 0 0;
  min-width: 0;
  color: var(--text-on-light);
}

/* Le due frecce orizzontali — 40px, colore primario. */
.wf__freccia {
  flex: none;
  color: var(--color-primary);
}

/* Logo 282:1837 — 211.2 x 112: 40 di padding attorno a un logo 131.2 x 32 */
.wf__logo {
  flex: none;
  padding: var(--space-5);                      /* 40 */
  border-radius: var(--radius-md);              /* 8 */
  background: var(--color-tertiary);            /* #00122b */
  display: flex;
  align-items: center;
  justify-content: center;
}

.wf__logo-img {
  display: block;
  width: 131.2px;
  height: 32px;
  object-fit: contain;
}

/* --- Il gambo verticale — TOLTO il 1 set 2026 ----------------------------
   Qui c'era il segmento che scendeva dal logo alla fila degli step
   (282:1959), disegnato come pseudo-elemento della card per non prendersi i
   gap della colonna. Nel frame aggiornato quel vettore non c'e piu: la card
   e gli step non sono piu collegati da una linea.
-------------------------------------------------------------------------- */

/* --- Steps 282:2037 — 1432 x 387.84 -------------------------------------- */
.wf__step {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);                          /* 16 */

  /* Le card devono coprire il gambo, non passarci sotto. */
  position: relative;
  z-index: 1;
}

.wf-step {
  padding: var(--space-5);                      /* 40 */
  border-radius: var(--radius-lg);              /* 16 */
  background: var(--color-tertiary);            /* #00122b */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);                          /* 16 */
}

.wf-step__titolo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);                          /* 8 */
  width: 100%;
}

/* Pallino 282:2052 — 35 x 35, bianco pieno, numero 16px scuro dentro */
.wf-step__numero {
  flex: none;
  width: 35px;
  height: 35px;
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-tertiary);
  font-size: var(--type-body-size);
  line-height: 35px;
  text-align: center;
}

.wf-step__nome {
  color: var(--color-white);
  white-space: nowrap;
}

.wf-step__corpo {
  width: 100%;
  color: var(--text-on-dark-muted);             /* #d2d2d2 */
}

/* Schermata 282:2044 — proporzione 1729/907, radius 8, cover */
.wf-step__media {
  /* ⚠️ 7 set 2026 — L'IMMAGINE STA IN FONDO ALLA CARD. Richiesta di Andrea:
     «fare che la card 3 abbia il testo posizionato al top della card e
     l'immagine al bottom (cosi da evitare che l'immagine sia disallineata con
     le altre)».
     Le tre card sono alte uguale (sono una riga di flex), ma il testo no: in
     italiano la terza descrizione sta su UNA riga contro le due delle altre,
     quindi la sua schermata partiva 24px piu in alto e finiva piu in basso.
     Con `margin-top: auto` lo spazio che avanza si raccoglie SOPRA
     l'immagine: il testo resta in cima, le tre schermate si allineano fra
     loro qualunque cosa dica il testo, e in inglese — dove le tre
     descrizioni sono gia pari — non cambia niente.
     Sotto i 1024 le card si impilano e non c'e piu niente da allineare: la
     regola si spegne (responsive/39-vidim-workflow.css). */
  margin-top: auto;
  width: 100%;
  aspect-ratio: 1729 / 907;
  border-radius: var(--radius-md);              /* 8 */
  overflow: hidden;
}

.wf-step__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}