/* ==========================================================================
   Blocco condiviso — USE CASES
   Maintenance `Use Cases` 63:513 · 1512 x 1238
   Lo stesso componente sta anche su Compliance (`85:4016`).

   ⚠️ Questa sezione ha padding 160 su TUTTI i lati, non 40 come le altre:
   il contenuto e largo 1192 (1512 − 320), non 1432. E l'unica sezione del
   progetto che rientra dai bordi, ed e voluto: l'elenco e fatto di righe
   lunghe e a 1432 sarebbero faticose da leggere.

   Verifica altezza (Maintenance, 6 voci):
     160 + 58 (titolo) + 80 + 657 (voci) + 80 + 43 (pulsanti) + 160 = 1238 ✔
     voci = 5 x 73 + 1 x 92 + 5 x 40 di gap = 457 + 200 = 657 ✔
     riga = 29 (titolo) + 8 + 19 (corpo) + 16 (padding) + 1 (filetto) = 73 ✔
   ========================================================================== */

/* Il rientro NON si fa col padding della sezione: `#contenuto > [id]` in
   base.css impone gia un padding-inline calcolato e ha specificita maggiore,
   quindi vincerebbe lui (ci sono cascato: le righe venivano 1432 invece di
   1192, e la quinta voce smetteva di andare a capo). Si stringe invece il
   contenitore, che la sezione centra da sola. */
.use-cases > .container {
  width: 1192px;                        /* 1512 − 2 x 160 */
  max-width: 100%;
  align-items: center;
}

.use-cases__titolo {
  color: var(--text-on-dark);
  text-align: center;
  width: 100%;
}

/* --- L'elenco ------------------------------------------------------------- */
.use-cases__lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);                  /* 40 */
  width: 100%;
  margin-top: var(--space-6);           /* 80 */
  list-style: none;
  padding: 0;
}

.use-case {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);                  /* 16 */
  width: 100%;
  padding-bottom: var(--space-3);       /* 16 */
  border-bottom: 1px solid var(--color-tertiary-300);
}

/* L'icona e un quadrato fisso: non deve mai stringersi quando il testo
   accanto e lungo, ne crescere quando e corto. */
.use-case__icona {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
}

.use-case__icona > img {
  width: 28px;
  height: 28px;
}

.use-case__testo {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);                  /* 8 */
}

.use-case__titolo { color: var(--text-on-dark); }
.use-case__corpo  { color: var(--text-on-dark-muted); }

/* --- Pulsanti ------------------------------------------------------------
   ⚠️ Su fondo scuro il secondo pulsante e la variante BIANCA outline, non
   quella primary: `btn--white-outline`. E l'unico punto in cui la coppia
   cambia colore, ed e per questo che il template part accetta le classi
   invece di deciderle da solo. */
.use-cases .btn-group {
  margin-top: var(--space-6);           /* 80 */
}

/* --- Occhiello e linguette (solo Compliance) -----------------------------
   Il sottotitolo sotto il titolo e la coppia EUROPE / UNITED KINGDOM.
   La seconda linguetta e disabilitata: il contenuto UK non esiste ancora e
   un pulsante spento e piu onesto di uno che non fa niente. */
.use-cases__lead {
  color: var(--text-on-dark-muted);
  text-align: center;
  width: 100%;
  margin-top: var(--space-3);
}

.use-cases__tab {
  display: flex;
  gap: var(--space-2);                  /* 8 */
  margin-top: var(--space-6);           /* 80 */
}

.use-cases__tab-voce {
  padding: 8px 12px;
  border-radius: var(--radius-xs);
  /* Bordo INTERNO, non `border`: in Figma lo stroke e "inside" e la linguetta
     e alta 35. Con un border vero diventerebbero 37 e la riga crescerebbe. */
  border: 0;
  box-shadow: inset 0 0 0 1px var(--color-tertiary-200);
  background: none;
  color: var(--color-tertiary-200);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  cursor: pointer;
}

.use-cases__tab-voce.is-attiva {
  background: var(--color-primary);
  box-shadow: none;
  color: var(--color-tertiary);
}

.use-cases__tab-voce[disabled] { cursor: not-allowed; }

/* Quando c'e la tab, l'elenco non ha bisogno di altri 80px sopra. */
.use-cases__tab + .use-cases__lista { margin-top: var(--space-6); }