/* =========================================================================
   Guide di SistemaCV (sistemacv.it/guide/)
   Si aggiunge a stile.css: stessa testata, stessi colori e caratteri.
   Solo ciò che serve a leggere un articolo lungo con schermate.
   ========================================================================= */

.guida { max-width: 76ch; }
.briciole { font-size: .92rem; color: var(--testo-tenue); margin: 0 0 1rem; }
.briciole ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.briciole li + li::before { content: "›"; margin-right: 6px; }
.briciole a { color: inherit; display: inline-block; padding: 10px 0; }
.data-revisione { color: var(--testo-tenue); font-size: .92rem; margin: 0 0 1.25rem; }

.guida h2 { font-size: 1.45rem; margin: 2.5rem 0 .6rem; scroll-margin-top: 16px; }
.guida h3 { font-size: 1.12rem; margin: 1.6rem 0 .4rem; }
.guida p, .guida li { line-height: 1.65; }
.guida li + li { margin-top: .3rem; }
.guida .risposta-breve { font-size: 1.08rem; }

/* Indice cliccabile */
.indice-guida { background: var(--superficie); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 12px 16px; margin: 1.5rem 0; }
.indice-guida h2 { font-size: 1rem; margin: 0 0 .25rem; }
.indice-guida ol { margin: 0; padding-left: 1.4rem; }
.guida .indice-guida li { margin: 0; padding: 4px 0; }

/* Schermate: quelle del telefono restano strette, come sul telefono vero. */
.schermata { margin: 1.25rem 0 1.5rem; }
.schermata img {
  display: block; width: 100%; height: auto; border: 1px solid var(--bordo); border-radius: var(--raggio);
  background: #F3F5F7;
}
.schermata.telefono img { max-width: 340px; margin: 0 auto; }
/* Le schermate restano nella colonna del testo (a destra resta spazio libero):
   un clic le apre a grandezza reale in una nuova finestra. */
.schermata a { display: block; border-radius: var(--raggio); }
.schermata a:hover img { border-color: var(--accento); }
.schermata.foglio img { max-width: 560px; margin: 0 auto; }
.schermata.stretta img { max-width: 380px; margin: 0 auto; }
.schermata figcaption { color: var(--testo-tenue); font-size: .88rem; margin-top: 4px; text-align: right; }

/* Esempi pronti da copiare (profili, frasi, lettere) */
.guida blockquote.esempio {
  margin: 1rem 0 1.25rem; padding: 12px 16px; background: var(--superficie);
  border: 1px solid var(--bordo); border-left: 4px solid var(--accento); border-radius: var(--raggio);
}
.guida blockquote.esempio p { margin: 0; }
.guida blockquote.esempio p + p { margin-top: .6rem; }

/* Tabelle: sul telefono scorrono di lato invece di stringersi. */
.guida .tabella-scorre { margin: 1rem 0 1.25rem; }
.guida table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: .95rem; }
.guida th, .guida td { border: 1px solid var(--bordo); padding: 8px 10px; text-align: left; vertical-align: top; }
.guida th { background: var(--superficie); }

/* Il solo invito allo strumento: discreto, in fondo. */
.fallo-con-sistemacv {
  margin: 2.5rem 0 1rem; padding: 18px 16px; border: 1px solid var(--bordo); border-left: 4px solid var(--margine);
  border-radius: var(--raggio); background: var(--superficie);
}
.fallo-con-sistemacv h2 { margin-top: 0; }
.fallo-con-sistemacv .bottone { margin-top: .5rem; }

/* Indice delle guide */
.elenco-guide { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: 12px; }
.elenco-guide a {
  display: block; padding: 16px; border: 1px solid var(--bordo); border-radius: var(--raggio);
  background: var(--superficie); text-decoration: none; color: var(--testo);
}
.elenco-guide a:hover { border-color: var(--accento); }
.elenco-guide strong { display: block; color: var(--accento); font-size: 1.1rem; margin-bottom: 4px; }
.elenco-guide span { color: var(--testo-tenue); }