/* Stile degli articoli (progetti): colonna di lettura, immagini, tabelle, codice, indice, commenti.
   Si aggiunge a base.css; le pagine lo richiamano con ?v=versione come base.css. */
.articolo { padding-bottom: clamp(3rem, 7vw, 5rem); }
.articolo > * { max-width: 46rem; margin-inline: auto; }
.percorso { font-size: .9rem; color: var(--tenue); margin: 2rem auto 0; }
.percorso a { color: var(--tenue); }

.apertura-articolo { padding: clamp(1.5rem, 5vw, 2.5rem) 0 1.5rem; }
.apertura-articolo h1 { font: 500 clamp(2rem, 5.5vw, 3rem)/1.12 var(--titoli); letter-spacing: .01em; margin: 0 0 1rem; }
.sommario { font-size: 1.15rem; color: var(--tenue); margin: 0 0 1rem; }
.dati { font-size: .9rem; color: var(--tenue); margin: 0 0 1.75rem; }
.dati a { color: inherit; }
.copertina { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; box-shadow: var(--ombra); }

/* indice dell'articolo, chiuso di default */
.indice details { border: 1px solid var(--linea); border-radius: 12px; background: var(--bianco); padding: .9rem 1.25rem; }
.indice ol { margin: .75rem 0 .25rem; padding-left: 1.25rem; display: grid; gap: .3rem; font-size: .95rem; }

/* testo */
.testo { padding-top: 1rem; }
.testo h2 { margin: 2.75rem 0 .75rem; scroll-margin-top: 5rem; }
.testo h3 { font-size: 1.25rem; margin: 2rem 0 .5rem; }
.testo p, .testo ul, .testo ol { margin: 0 0 1.1rem; }
.testo li { margin-bottom: .35rem; }
.testo figure { margin: 2rem 0; }
.testo figure img { width: 100%; border-radius: 10px; }
.testo figcaption { font-size: .9rem; color: var(--tenue); margin-top: .6rem; text-align: center; }
.testo blockquote { margin: 1.5rem 0; padding: .25rem 0 .25rem 1.25rem; border-left: 3px solid var(--rame); color: var(--tenue); }
.testo hr { border: 0; border-top: 1px solid var(--linea); margin: 2.5rem 0; }

/* tabelle: scorrono in orizzontale sul telefono invece di allargare la pagina */
.tabella { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--linea); border-radius: 10px; background: var(--bianco); }
.tabella table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .92rem; }
.tabella th, .tabella td { padding: .6rem .8rem; text-align: left; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabella th { font-weight: 600; background: var(--carta); }
.tabella tr:last-child td { border-bottom: 0; }
.tabella .numero { text-align: right; white-space: nowrap; }

/* codice */
.testo pre { overflow-x: auto; background: var(--inchiostro); color: #f3efe7; border-radius: 10px; padding: 1rem 1.25rem; font-size: .85rem; line-height: 1.55; }
.testo code { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .9em; }
.testo :not(pre) > code { background: var(--linea); border-radius: 4px; padding: .1em .35em; }

/* file da scaricare */
.allegato a { display: inline-flex; gap: .5rem; align-items: center; padding: .7rem 1.1rem; border: 1px solid var(--linea); border-radius: 10px; background: var(--bianco); font-weight: 600; text-decoration: none; }
.allegato a::before { content: '↓'; color: var(--rame); }

/* domande frequenti dentro l'articolo */
.testo details summary { font-size: 1rem; }

/* commenti del sito precedente, in sola lettura */
.commenti { padding: 2.5rem 0 0; margin-top: 2.5rem; border-top: 1px solid var(--linea); }
.commenti .nota { color: var(--tenue); font-size: .95rem; }
.commenti ol { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1.25rem; }
.commenti li { background: var(--bianco); border: 1px solid var(--linea); border-radius: 10px; padding: 1rem 1.25rem; }
.commenti .chi { font-size: .9rem; color: var(--tenue); margin: 0 0 .5rem; }
.commenti li p:last-child { margin-bottom: 0; }

/* invito finale */
.invito { margin-top: 3rem; padding: 2rem clamp(1.25rem, 4vw, 2rem); background: var(--bianco); border: 1px solid var(--linea); border-radius: 14px; text-align: center; }
.invito p { color: var(--tenue); max-width: 34rem; margin: 0 auto 1.5rem; }
.invito .bottone { margin: .25rem; }
.bottone.secondario { background: transparent; color: var(--inchiostro); box-shadow: inset 0 0 0 2px var(--inchiostro); }
.bottone.secondario:hover, .bottone.secondario:focus-visible { background: var(--inchiostro); color: var(--bianco); }
.commenti .risposte { margin: 1rem 0 0; padding-left: 1rem; border-left: 2px solid var(--linea); }
.commenti .risposte li { background: var(--carta); }

/* gallerie e confronti: foto in griglia */
.testo .galleria, .testo .confronto { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .75rem; }
.testo .galleria figure { margin: 0; }
.testo .galleria img, .testo .confronto img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.testo .galleria > figcaption, .testo .confronto > figcaption { grid-column: 1 / -1; }
.testo .confronto { grid-template-columns: 1fr 1fr; }
.testo .confronto img { aspect-ratio: auto; }
/* parole lunghe (indirizzi, codici) nei commenti e nel testo: vanno a capo invece di allargare la pagina */
.testo, .commenti li { overflow-wrap: anywhere; min-width: 0; }
.tabella th, .tabella td { overflow-wrap: normal; }   /* nelle tabelle (che scorrono) le parole restano intere */

/* pagine legali (privacy, cookie, termini) */
.pagina-legale .aggiornato { font-size: .9rem; color: var(--tenue); }