/* ============================================================
   ARVIO · pages/casi.css
   Sei casi archetipali. Ogni caso: eyebrow numerato + titolo,
   poi le tre parti (Situazione, Diagnosi, Sequenza) in colonne
   con filo copper in alto (stesso stilema di "Cosa facciamo"),
   e l'Esito come citazione editoriale di chiusura.
   Bande alternate white/parchment, come la pagina Interlocutori.
   ============================================================ */

.caso__head {
  max-width: var(--container-editorial);
  margin-bottom: var(--space-m);
}

.caso__title {
  margin-bottom: 0;
}

/* Le tre parti diagnostiche in colonne affiancate, filo copper in alto */
.caso__parts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-m);
}

@media (min-width: 768px) {
  .caso__parts {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-l);
  }
}

.caso__col {
  padding-top: var(--space-s);
  border-top: 1px solid var(--copper);
}

.caso__label {
  display: block;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-ui);
  text-transform: uppercase;
  color: var(--copper-text);
  margin-bottom: var(--space-xs);
}

.caso__col p {
  color: var(--stone);
}

/* Esito: citazione editoriale di chiusura, larghezza leggibile */
.caso__esito {
  margin-top: var(--space-l);
  max-width: var(--container-editorial);
}

/* Link secondario sotto il CTA di chiusura */
.cta-close .cta-secondary {
  margin-top: var(--space-s);
}