/* ==========================================================================
   Blocco condiviso — WORKFLOW (scroll bloccato, card che avanza)
   Maintenance `Maintenance Workflow` 80:3165 · 1512 x 1020
   Su Compliance c'e `Compliance Workflow` 80:3756, stessa altezza.

   ⚠️ E LO STESSO MECCANISMO di `How Vidim Helps` sulla Home: si blocca lo
   scorrimento e la card cambia contenuto. Due differenze pero:
     1. qui gli step sono DUE, sulla Home sono tre;
     2. qui l'immagine a destra e UNA SOLA e non cambia mai — sulla Home
        cambiava a ogni step.
   Per questo il JS e una funzione a se (`initWorkflow`) che legge il numero
   di step dal DOM, invece di riusare `initHow` che e scritta su misura per
   la Home. Le due andranno unite quando si fara la versione mobile
   dell'animazione: e il momento giusto per toccare codice gia collaudato.

   Verifica altezza: 160 + 700 (immagine, il figlio piu alto) + 160 = 1020 ✔
   Colonna sinistra: titolo 116 + spazio 359 + card 225 = 700 ✔
   ========================================================================== */

.workflow__row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-5);              /* 40 */
  width: 100%;
}

/* Le due colonne sono 696 ciascuna: (1432 − 40) / 2. Non le scrivo fisse
   perche su Compliance il contenitore e diverso. */
.workflow__col {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;   /* titolo in alto, card in fondo */
}

.workflow__titolo { color: var(--text-on-light); }

/* --- La card che cambia --------------------------------------------------- */
.workflow__card {
  position: relative;
  width: 100%;
  /* 225 su Maintenance (2 step), 168 su Compliance (6 step): la card e piu
     bassa dove gli step sono piu corti. Si passa dal template. */
  height: var(--altezza-card, 225px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* ⚠️ L'angolo del gradiente cambia con l'altezza della card, per lo stesso
     motivo spiegato accanto a --gradient-card-why-alta: in Figma il gradiente
     e definito da maniglie nel box, in CSS da un angolo assoluto. */
  background: var(--gradiente-card, var(--gradient-card-workflow));
  flex: 0 0 auto;
}

/* Tutti gli step stanno sovrapposti al centro della card. Il primo e visibile,
   gli altri hanno opacita 0 e partono 20px piu in basso: e esattamente lo
   stato che il mockup disegna per `Text02` (y 88.5 invece di 68.5). */
.workflow__step {
  position: absolute;
  left: 160px;                      /* lascia spazio al numero gigante */
  top: 50%;
  width: 516px;
  max-width: calc(100% - 176px);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);              /* 16 */
}

.workflow__step[data-step="1"] { opacity: 1; }
.workflow__step:not([data-step="1"]) {
  opacity: 0;
  transform: translateY(calc(-50% + 20px));
}

.workflow__step-titolo { color: var(--text-on-dark); }
.workflow__step-corpo  { color: var(--text-on-dark-muted); }

/* --- Il numero decorativo -------------------------------------------------
   160px, bianco al 25%, allineato al fondo della card e mezzo fuori dal
   bordo sinistro (x = −40): e il taglio che gli da peso. `overflow: hidden`
   sulla card lo ritaglia.
   ⚠️ L'opacita 0.25 e un valore del design, non un caso: portarlo a 1
   durante l'animazione lo trasforma in un blocco bianco.
-------------------------------------------------------------------------- */
.workflow__num {
  position: absolute;
  left: -40px;
  bottom: 0;
  font-size: 160px;
  font-weight: 400;
  color: var(--color-white);
  opacity: .25;
  white-space: nowrap;
  pointer-events: none;
}

.workflow__num:not([data-step="1"]) { opacity: 0; }

/* --- L'immagine ----------------------------------------------------------
   Renderizzata al 174.63% della larghezza del box e ancorata in alto a
   sinistra: il lato destro viene tagliato. E lo stesso trattamento dello
   screenshot su `How Vidim Helps`, e va fornita l'immagine INTERA, non gia
   ritagliata.
-------------------------------------------------------------------------- */
.workflow__media {
  flex: 1 1 0;
  min-width: 0;
  height: 700px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

.workflow__media > img {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 174.63%;
  max-width: none;
  object-fit: cover;
  object-position: left top;
}