/* ═══════════════════════════════════════════════════════════════════════════
   PAGINE INTERNE — i componenti comuni a tutti i siti («La croce evoluta»)
   ───────────────────────────────────────────────────────────────────────────
   Dal 9/10 stanno qui, nello strato comune: li usano il Lab e il principale.
   Si carica dopo componenti.css su tutte le pagine che non sono la home, e
   prima del pagina.css del sito (che aggiunge i suoi componenti).
   Apertura compatta, briciole, intestazioni, blocchi di testo, passi, spunte,
   esami in pillole, schede, note con link, indice ad ancore, gruppi, cerca in
   pagina, persone, articolo, sedi in pagina, moduli di contatto.
   (Spostati com'erano da Sito-Lab/sito/css/pagina.css: Sito-Lab, diario 36.)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Apertura compatta ──────────────────────────────────────────────────
   Deciso il 29/9: solo quanto serve al titolo, e il contenuto comincia
   subito. Fondo ghiaccio, la croce a contorno in filigrana; a destra una foto
   ad angolo quando la pagina ne ha una vera. */
.apertura-pagina { padding-block: clamp(1.75rem, 1rem + 2.5vw, 3rem) clamp(2.5rem, 1.5rem + 3vw, 4.5rem); background: var(--nl-ghiaccio); }
.apertura-pagina::before {
  content: ""; position: absolute; z-index: -1; right: -14rem; top: -12rem; width: 44rem; aspect-ratio: 1;
  background: var(--nl-tinta-blu);
  -webkit-mask: var(--forma-contorno) center / contain no-repeat; mask: var(--forma-contorno) center / contain no-repeat;
}
.apertura-pagina-griglia { display: grid; gap: 2.5rem; align-items: center; }
.apertura-pagina-testo { display: grid; justify-items: start; gap: 1.25rem; max-width: 48rem; min-width: 0; }
/* Le parole più larghe dello schermo («Otorinolaringoiatria» a 375px) vanno a
   capo con il trattino invece di uscire dalla pagina (10/10). */
.apertura-pagina .titolo { margin-top: .25rem; max-width: 100%; hyphens: auto; overflow-wrap: break-word; }
.apertura-pagina .lead { max-width: 42rem; }
.apertura-pagina .lead + .lead { margin-top: -.5rem; }
.apertura-pagina .azioni { margin-top: .5rem; }
.apertura-pagina-foto { width: min(100%, 22rem); justify-self: center; }
.apertura-pagina-foto img { aspect-ratio: 4 / 5; }
@media (max-width: 47.9375em) { .apertura-pagina-foto { display: none; } }  /* da telefono il contenuto prima della foto */
@media (min-width: 64em) {
  .apertura-pagina-griglia:has(.apertura-pagina-foto) { grid-template-columns: minmax(0, 1fr) auto; gap: 4rem; }
  .apertura-pagina-foto { width: 24rem; }
}

/* Briciole: Montserrat piccolo, la pagina corrente senza link. */
.briciole { display: flex; flex-wrap: wrap; gap: .35rem .6rem; font: 600 var(--nl-t-piccolo)/1.4 var(--nl-font-marchio); color: var(--nl-ink-2); }
.briciole li { display: inline-flex; align-items: center; gap: .6rem; }
.briciole li + li::before { content: "›"; color: var(--nl-ink-3); }
.briciole a { color: var(--nl-blu-ink); text-underline-offset: .25em; }

/* ── Intestazione di sezione dentro la pagina ──────────────────────────── */
.intestazione { display: grid; gap: 1rem; max-width: 46rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.intestazione .sottotitolo { margin-top: .25rem; }
.testo-apre { display: grid; gap: .75rem; max-width: 46rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.titolo-gruppo { font-size: var(--nl-t-scheda); font-weight: 900; line-height: 1.05; text-transform: uppercase; }

/* ── Blocco: titolo a sinistra, contenuto a destra (pagine di testo) ───── */
.blocchi { display: grid; gap: clamp(3rem, 2rem + 3vw, 5rem); }
.blocco { display: grid; gap: 1.5rem; }
.blocco-testa { display: grid; gap: .75rem; align-content: start; }
.blocco-corpo { display: grid; gap: 1.25rem; align-content: start; max-width: 44rem; }
.blocco-corpo .lead + .lead { margin-top: -.5rem; }
@media (min-width: 64em) {
  .blocco { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4rem; }
  /* La riga a metà dello spazio fra due blocchi: sopra lo spazio della
     griglia, sotto il padding (12/10: con gap 0 la riga toccava l'ultimo
     punto dell'elenco sopra). */
  .blocco + .blocco { padding-top: clamp(3rem, 2rem + 3vw, 5rem); border-top: 1px solid var(--nl-bordo); }
}

/* ── Passi numerati: cerchi a filo con il numero ───────────────────────── */
.passi { display: grid; gap: 1.75rem; counter-reset: passo; }
.passo { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.25rem; counter-increment: passo; }
.passo::before {
  content: counter(passo); grid-row: span 3;
  display: grid; place-items: center; width: 3rem; height: 3rem;
  border: 1.5px solid var(--nl-blu); border-radius: 50%;
  color: var(--nl-blu-ink); font: 700 var(--nl-t-voce)/1 var(--nl-font-marchio);
}
.passo p { color: var(--nl-ink-2); }
.passi--liberi .passo::before { content: none; }
.passi--liberi .passo { grid-template-columns: 1fr; }
/* Voce con l'icona a sinistra (7/10, Come prepararsi). */
.passi--liberi .passo--icona { grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; }
.passo--icona .passo-icona { grid-row: span 2; width: 2rem; height: 2rem; stroke-width: 1.5; color: var(--nl-blu-ink); }

/* ── Elenco con la spunta ──────────────────────────────────────────────── */
.spunte { display: grid; gap: .75rem; }
.spunte li { display: grid; grid-template-columns: auto 1fr; gap: .75rem; }
.spunte li::before {
  content: ""; width: 1.25rem; height: 1.25rem; margin-top: .2rem;
  background: var(--nl-accento-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Esami: nomi in pillole, si leggono a colpo d'occhio ───────────────── */
.esami { display: flex; flex-wrap: wrap; gap: .45rem; }
.esami li { padding: .35rem .8rem; border-radius: var(--nl-r-pillola); background: var(--nl-vetro); font-size: var(--nl-t-piccolo); line-height: 1.35; }
.esami--tinta li { background: var(--nl-accento-tinta); }

/* ── Schede generiche (indici, percorsi, pacchetti, profili) ───────────── */
.schede { display: grid; gap: 1.25rem; }
@media (min-width: 48em) { .schede { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .schede--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.scheda {
  position: relative; display: grid; align-content: start; gap: .75rem;
  padding: 1.75rem;
  border: 1px solid var(--nl-bordo); border-radius: var(--nl-r-scheda);
  background: var(--nl-bianco);
}
.scheda-titolo { font-size: var(--nl-t-scheda); font-weight: 900; line-height: 1.05; text-transform: uppercase; }
.scheda > p:not(.etichetta):not(.bozza) { color: var(--nl-ink-2); }
.scheda .link-freccia { margin-top: auto; padding-top: .5rem; }
/* Tutta la scheda è il link, quando il link è uno solo. */
.scheda--link { transition: border-color var(--nl-veloce); }
@media (hover: hover) and (pointer: fine) {
  .scheda--link:hover { border-color: var(--nl-blu-ink); }
  .scheda--link:hover .link-freccia .icona { transform: translateX(3px); }
}
.scheda--link .link-freccia::after { content: ""; position: absolute; inset: 0; }
/* L'elemento accento nell'angolo in alto a destra: la scheda più importante. */
.scheda--angolo { overflow: hidden; padding-right: 4.5rem; }
.scheda--angolo::after {
  content: ""; position: absolute; right: -1.25rem; top: -1.25rem; width: 4.5rem; aspect-ratio: 1;
  background: var(--nl-accento);
  -webkit-mask: var(--forma-accento) center / contain no-repeat; mask: var(--forma-accento) center / contain no-repeat;
}
/* Filetto di categoria (D5): il solo posto dove entra il colore. */
.scheda--categoria { border-top: 5px solid var(--categoria, var(--nl-blu)); }
/* Qui il punto dice qualcosa: è il colore della categoria. */
.scheda--categoria .etichetta::before { content: ""; flex: none; width: .7rem; height: .7rem; border-radius: 50%; background: var(--categoria, var(--nl-accento)); }

/* Schede con un'azione in fondo (5/10, «Aggiungi al preventivo»): il
   pulsante sta sulla stessa riga in tutte le schede affiancate. */
.scheda--azione { display: flex; flex-direction: column; }
.scheda-azione { align-self: flex-start; margin-top: auto; }
.scheda--azione > .scheda-esami { margin-bottom: .25rem; }

/* L'icona dell'area (7/10, modifica 17 di Giosuè): a tratto, nel colore
   della categoria, senza cerchio. */
.scheda-icona { width: 2.5rem; height: 2.5rem; stroke-width: 1.5; color: var(--categoria, var(--nl-blu-ink)); }

/* ── Nota con link: un argomento minore in fondo a una sezione ─────────── */
.nota-riga {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); padding: 1.5rem 1.75rem;
  border-radius: var(--nl-r-scheda); background: var(--nl-vetro);
}
.nota-riga > div { display: grid; gap: .35rem; max-width: 46rem; }
.nota-riga p { color: var(--nl-ink-2); }
/* Il titolo della nota è una frase: niente maiuscolo (DESIGN.md, «solo titoli brevi»). */
.nota-riga .voce-titolo { text-transform: none; font-weight: 700; line-height: 1.35; }

/* ── Indice ad ancore, in pillole ──────────────────────────────────────── */
.indice { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.indice a {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5rem 1.1rem;
  border: 1.5px solid var(--nl-bordo); border-radius: var(--nl-r-pillola);
  background: var(--nl-bianco); color: var(--nl-ink);
  font-weight: 500; text-decoration: none;
  transition: border-color var(--nl-veloce), background-color var(--nl-veloce);
}
.indice a:hover { border-color: var(--nl-blu-ink); background: var(--nl-vetro); }

/* ── Gruppi di una pagina lunga ────────────────────────────────────────── */
.gruppo + .gruppo { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.gruppo-testa { display: grid; gap: .5rem; margin-bottom: 1.5rem; max-width: 46rem; }
.gruppo-testa p { color: var(--nl-ink-2); }

/* ── Cerca in pagina (nell'apertura delle pagine di consultazione) ─────── */
.cerca { display: grid; gap: .6rem; width: min(100%, 40rem); margin-top: .5rem; }
.cerca-etichetta { font-weight: 700; }
.cerca-riga { position: relative; }
.cerca-riga .icona { position: absolute; left: 1.1rem; top: 50%; translate: 0 -50%; width: 1.4rem; height: 1.4rem; color: var(--nl-blu-ink); pointer-events: none; }
.cerca-campo { min-height: 3.75rem; padding-left: 3.25rem; border-radius: var(--nl-r-pillola); font-size: var(--nl-t-voce); }
.cerca-stato:empty { display: none; }
.cerca-stato { font-weight: 700; color: var(--nl-blu-ink); }
mark.cerca-segno { padding: 0 .1em; background: var(--nl-accento-tinta); color: inherit; }

/* ── Fonti, risposte, dati mancanti ───────────────────────────────────── */
.fonte { font-size: var(--nl-t-piccolo); color: var(--nl-ink-3); }
.fisarmonica-risposta > * + * { margin-top: .75em; }
.mancante { padding: .6rem .9rem; border-radius: var(--nl-r-campo); background: var(--nl-accento-tinta); color: var(--nl-accento-brace); font-size: var(--nl-t-piccolo); }

/* ── Chi ci rivolgiamo, team ───────────────────────────────────────────── */
.voci-griglia { display: grid; gap: 1.75rem 2.5rem; }
@media (min-width: 48em) { .voci-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.voce { display: grid; gap: .4rem; padding-top: 1.25rem; border-top: 3px solid var(--nl-blu); }
.voce p { color: var(--nl-ink-2); }

.persone { display: grid; gap: 1.25rem; }
@media (min-width: 40em) { .persone { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .persone { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.persona { display: grid; align-content: start; justify-items: start; gap: .5rem; padding: 1.5rem; border-radius: var(--nl-r-scheda); background: var(--nl-bianco); }
/* Segnaposto dichiarato finché non arrivano le foto (CLAUDE.md, «Cosa manca»). */
.persona-foto { display: grid; place-items: center; width: 5.5rem; height: 5.5rem; margin-bottom: .5rem; border: 1.5px dashed var(--nl-ink-3); border-radius: 50%; color: var(--nl-ink-3); }
.persona-foto .icona { width: 2.5rem; height: 2.5rem; stroke-width: 1.25; }
.persona-ruolo { font: 700 var(--nl-t-etichetta)/1.3 var(--nl-font-marchio); letter-spacing: .08em; text-transform: uppercase; color: var(--nl-blu-ink); }
.persona-nome { font-size: var(--nl-t-voce); font-weight: 900; line-height: 1.15; text-transform: uppercase; }

/* ── Articolo ──────────────────────────────────────────────────────────── */
.titolo--articolo { text-transform: none; letter-spacing: -.015em; line-height: 1.05; }
.articolo-corpo { display: grid; gap: 2.5rem; max-width: 44rem; }
.articolo-corpo > div { display: grid; gap: 1rem; }
.articolo-corpo h2 { font-size: var(--nl-t-sottotitolo); font-weight: 900; line-height: 1.15; }
.articolo-corpo p { color: var(--nl-ink-2); }
.articolo-corpo ul { display: grid; gap: .75rem; }
/* Segno d'elenco: il trattino d'accento dei titoli, in piccolo. */
.articolo-corpo li { position: relative; padding-left: 1.9rem; color: var(--nl-ink-2); }
.articolo-corpo li::before { content: ""; position: absolute; left: 0; top: .75em; width: .9rem; height: .25rem; border-radius: var(--nl-r-pillola); background: var(--nl-accento); }
.articolo-corpo li strong { color: var(--nl-ink); }

/* ── Sedi in pagina ────────────────────────────────────────────────────── */
.sedi-schede { display: grid; gap: 1rem; }
@media (min-width: 40em) { .sedi-schede { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .sedi-schede { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── Modulo di contatto ────────────────────────────────────────────────── */
.modulo-griglia { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 64em) { .modulo-griglia { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 4rem; } }
.campi { display: grid; gap: 1rem; }
@media (min-width: 40em) { .campi { grid-template-columns: repeat(2, minmax(0, 1fr)); } .campo-riga--larga { grid-column: 1 / -1; } }
.campo-riga { display: grid; gap: .4rem; }
.campo-etichetta { font-weight: 700; }
.campo--area { min-height: 8rem; resize: vertical; }
select.campo { appearance: none; padding-right: 2.75rem; background: var(--nl-bianco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A6E8C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 1rem center / 1.25rem no-repeat; }
.consensi { display: grid; gap: .9rem; padding-block: .5rem; }
.modulo-nota { font-size: var(--nl-t-piccolo); color: var(--nl-ink-2); }