@charset "UTF-8";
/* ============================================================================
   css/pages.css — sezioni e componenti delle pagine.
   ============================================================================ */

/* --- intestazione di pagina --- */
.intestazione-pagina {
  padding-block: var(--sp-6) var(--sp-4);
  border-bottom: 3px double var(--inchiostro);
  margin-bottom: var(--sp-5);
}
.intestazione-pagina h1 { max-width: 34ch; }
.intestazione-pagina .tratto-inchiostro { margin-top: var(--sp-4); }

/* --- hero della home --- */
.hero {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
  padding-block: var(--sp-6) var(--sp-5);
}
.hero__testo h1 { max-width: 26ch; }
.hero__identita {
  font-family: var(--font-display);
  font-size: var(--scala-h3);
  color: var(--timbro);
  margin-bottom: var(--sp-3);
}
.hero__sommario { max-width: 56ch; }
.hero__azioni { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.hero__figura {
  margin: 0;
  padding: var(--sp-4);
  background: var(--carta-vecchia);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-carta);
}
.hero__figura img { display: block; width: 100%; height: auto; max-width: 22rem; margin-inline: auto; }

/* --- schede --- */
.scheda {
  padding: var(--sp-4);
  background: var(--carta-vecchia);
  border: 1px solid var(--bordo);
  border-left: 4px solid var(--timbro);
  border-radius: var(--raggio);
  box-shadow: var(--ombra-carta);
}
.scheda h2, .scheda h3 { margin-top: 0; }
.scheda p:last-child { margin-bottom: 0; }
.scheda ul { margin-bottom: 0; }

/* --- metodo: elenco numerato in stile dattiloscritto --- */
.fasi { list-style: none; padding: 0; margin: 0; counter-reset: fase; }
.fasi > li {
  counter-increment: fase;
  position: relative;
  padding-left: var(--sp-6);
  margin-bottom: var(--sp-4);
}
.fasi > li::before {
  content: counter(fase, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display);
  font-size: var(--scala-h3);
  color: var(--timbro);
  border-bottom: 1px solid var(--bordo);
  width: 2.4rem;
}
.fasi h3 { margin-top: 0; }

/* --- profilo --- */
.profilo { display: grid; gap: var(--sp-5); }
.profilo__scheda { align-self: start; }
.dati { margin: 0; }
.dati dt {
  font-family: var(--font-display);
  font-size: var(--scala-piccola);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--inchiostro-tenue);
  margin-top: var(--sp-3);
}
.dati dd { margin: var(--sp-1) 0 0; }

/* --- contatti rapidi --- */
.contatti-rapidi { list-style: none; padding: 0; margin: 0 0 var(--sp-4); }
.contatti-rapidi li {
  padding: var(--sp-2) 0;
  border-bottom: 1px dashed var(--bordo);
}
.contatti-rapidi a { overflow-wrap: anywhere; }

/* --- 404 --- */
.errore-404 { padding-block: var(--sp-7); }
.errore-404 h1 { font-size: clamp(1.9rem, 5vw, 3rem); }

/* --- adattività delle pagine --- */
@media (min-width: 48em) {
  .hero { grid-template-columns: 1.35fr .65fr; gap: var(--sp-6); }
  .profilo { grid-template-columns: 1.6fr .9fr; }
}

@media (max-width: 30em) {
  .hero__azioni .bottone { width: 100%; text-align: center; }
}