/* =========================================================
   GREST POFI ODV – Foglio di stile
   ---------------------------------------------------------
   Stile: "neo-brutalista" – bordi neri spessi, ombre piene
   sfalsate, angoli vivi, colori della palette "Armonia Circolare".

   PER IL DESIGNER: quasi tutto si cambia dalle VARIABILI
   della sezione 1 (colori, font, bordi, ombre, spazi).

   Indice:
   1. Variabili (design token)
   2. Font
   3. Base
   4. Componenti riutilizzabili (box, sticker, icon, btn, tags)
   5. Menu
   6. Sezioni della home
   7. Footer
   8. Articoli e pagine interne
   9. Pagina del singolo articolo (lettura)
   10. Icone
   ========================================================= */


/* ---------- 1. VARIABILI ---------- */
:root {
  /* Palette "Armonia Circolare" */
  --AC-giallo:       #fcca59;   /* colore guida: pulsanti, evidenziatore, sezione "Chi siamo" */
  --AC-arancione:    #f5793b;
  --AC-verde:        #267f53;   /* scuro: usatelo per sfondi piccoli (icone), non sotto testi lunghi */
  --AC-azzurro:      #9fb6f0;
  --AC-rosa:         #e49bbc;
  --AC-sfondoBianco: #f9f2e2;
  --AC-boxIconeBianchi:  #fef1e4;

  /* Colori di servizio */
  --c-ink:   #111111;               /* nero "inchiostro": testi, bordi, ombre */
  --c-paper: #ffffff;               /* sfondo delle card */
  --c-bg:    var(--AC-sfondoBianco);/* sfondo della pagina */
  --c-muted: #4a4a4a;               /* testo secondario (descrizioni) */

  /* Font (vedi sezione 2). Dopo il nome del nostro font ci sono
     dei font "di riserva", usati se il file non si carica. */
  --font-secondario:   "Instrument Serif", Georgia, "Times New Roman", serif;   /* titoli */
  --font-primario: "Cal Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* testi */

  /* Il "tratto" brutalista */
  --border:    3px solid var(--c-ink);
  --shadow:    5px 5px 0 var(--c-ink);
  --shadow-sm: 3px 3px 0 var(--c-ink);
  --shadow-lg: 8px 8px 0 var(--c-ink);
  --radius:    0;      /* provate 12px per un look più morbido */

  /* Misure */
  --container: 1160px;
  --gutter:    .5rem;   /* 16px: margine laterale e distanza tra i box su telefono */
  --space-s:   .75rem;
  --space-m:   1.5rem;
  --space-l:   3rem;
  --space-xl:  5rem;
  --header-h:  72px;
}

/* Griglia da 1 cm: da desktop in su margini laterali e distanze
   tra i box diventano di 40px (circa 1 cm sullo schermo).
   Tutti i box usano --gutter, quindi restano allineati tra loro. */
@media (min-width: 1024px) {
  :root { --gutter: 20px; }
}


/* ---------- 2. FONT ----------
   Ogni @font-face "presenta" al browser un file di font:
   - font-family  → il nome con cui lo richiamiamo nelle variabili
   - src          → dove si trova il file (partendo da questa cartella css/)
   - font-weight  → che spessore contiene il file (400 = normale, 700 = grassetto).
                    I nostri due file contengono solo il 400: per questo nel resto
                    del CSS i pesi sono tutti 400. Se chiedessimo 700, il browser
                    "ingrasserebbe" le lettere da solo e verrebbero sbavate.
   - font-style   → normale o corsivo
   - font-display: swap → mentre il font si scarica, il testo si vede subito
                    con un font di sistema, poi viene sostituito. */
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Corsivo di Instrument Serif: è un file a parte (sottotitoli degli articoli
   e *corsivo* nel testo). Va scaricato da fontsource.org: vedi LEGGIMI.md. */
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cal Sans";
  src: url("../fonts/cal-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Material Symbols Rounded";
  src: url("../fonts/material-symbols-rounded.woff2") format("woff2");
  font-display: swap;
}

.material-symbols-rounded {  /* classe da aggiungere a un <span> per mostrare un'icona */
  font-family: "Material Symbols Rounded";
  font-weight: 600;
  font-style: normal;
  font-size: 28px;
  line-height: 1;
  display: inline-block;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
}


/* ---------- 3. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); }

body {
  margin: 0;
  font-family: var(--font-secondario);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.3;
  word-spacing: .06em;   /* Cal Sans è molto stretto: un po' di spazio tra le parole aiuta a leggere */
  color: var(--c-ink);
  background: var(--c-bg);
}

/* Titoli: Instrument Serif è un font sottile ed elegante,
   quindi lo usiamo grande invece che in grassetto. */
h1, h2, h3 {
  font-family: var(--font-primario);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.01em;
  margin: 0 0 var(--space-s);
}
h2 { font-size: clamp(2.5rem, 6vw, 4rem); }
h3 { font-size: 1.9rem; }
p  { margin: 0 0 var(--space-s); }

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--c-ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { background: var(--AC-giallo); }

.collegamentoArticolo { text-decoration:none;} /*Per nascondere il link dell'articolo*/

:focus-visible { outline: 3px solid var(--AC-verde); outline-offset: 3px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link { position: absolute; left: -999px; top: 0; }
.skip-link:focus { left: var(--gutter); top: var(--gutter); z-index: 100; background: var(--AC-giallo); padding: .5rem 1rem; border: var(--border); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ---------- 4. COMPONENTI ---------- */

/* Riquadro brutalista di base: bordo + ombra */
.box {
  background: var(--c-paper);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Etichetta tipo "adesivo", leggermente ruotata */
.sticker {
  display: inline-block;
  margin-bottom: var(--space-m);
  padding: .3rem .9rem;
  font-family: var(--font-secondario);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--AC-azzurro);
  border: var(--border);
  box-shadow: var(--shadow-sm);
  transform: rotate(-3deg);
}
.sticker--rosa  { background: var(--AC-rosa); }
.sticker--verde { background: var(--AC-verde); }

/* Evidenziatore dietro una parola */
.highlight { background: var(--AC-giallo); padding-inline: .1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* Quadratino colorato con icona */
.icon {
  display: grid; place-items: center;
  width: 56px; height: 56px; flex-shrink: 0;
  font-size: 1.6rem;
  background: var(--AC-sfondoBianco);
  border: var(--border);
  margin-bottom: var(--space-s);
}
.icon--small     { width: 46px; height: 46px; font-size: 1.2rem; margin: 0; }
.icon--giallo    { background: var(--AC-giallo); }
.icon--arancione { background: var(--AC-arancione); }
.icon--verde     { background: var(--AC-verde); }
.icon--azzurro   { background: var(--AC-azzurro); }
.icon--rosa      { background: var(--AC-rosa); }


.loghiPersonali{
width: 40px;
height: 40px;
}

/* Pulsanti */
.btn {
  display: inline-block;
  padding: .8rem 1.4rem;
  font: inherit; font-weight: 400;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--c-ink); text-decoration: none;
  background: var(--c-paper);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.btn:hover  { background: var(--c-paper); transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.btn:active { transform: translate(3px, 3px); box-shadow: none; }
.btn--primary, .btn--primary:hover { background: var(--AC-giallo); }
.btn--small { padding: .35rem .8rem; font-size: .8rem; }

/* Etichette piccole (es. data, età, luogo) */
.tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: var(--space-s) 0 0; }
.tags li { padding: .2rem .7rem; font-size: .9rem; background: var(--c-paper); border: 2px solid var(--c-ink); }


/* ---------- 5. MENU ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-paper);
  border-bottom: var(--border);
}

.nav { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }

.nav__logo {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-secondario); font-size: 1.3rem; letter-spacing: -.01em;
  text-decoration: none;
}
.nav__logo:hover { background: none; }

.nav__menu { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav__menu a:not(.btn) {
  display: block; padding: .35rem .75rem;
  font-size: .9rem; text-transform: uppercase; letter-spacing: .04em;
  text-decoration: none;
}
.nav__menu li:last-child { margin-left: .75rem; }
/* Voce della pagina in cui ci si trova (es. "Articoli") */
.nav__menu a[aria-current="page"] { background: var(--AC-giallo); }

.nav__toggle { display: none; background: var(--AC-giallo); border: var(--border); padding: .6rem .5rem; cursor: pointer; }
.nav__burger, .nav__burger::before, .nav__burger::after {
  display: block; width: 22px; height: 3px; background: var(--c-ink); position: relative;
}
.nav__burger::before, .nav__burger::after { content: ""; position: absolute; }
.nav__burger::before { top: -7px; }
.nav__burger::after  { top:  7px; }

@media (max-width: 860px) {
  .nav__toggle { display: block; }
  .nav__menu {
    display: none;
    position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--c-paper); border-bottom: var(--border);
    padding: var(--space-s) var(--gutter) var(--space-m);
  }
  .nav__menu.is-open { display: flex; }
  .nav__menu a:not(.btn) { padding: .8rem .6rem; font-size: 1rem; border-bottom: 2px solid var(--c-bg); }
  .nav__menu li:last-child { margin: var(--space-s) 0 0; }
  .nav__menu .btn { display: block; text-align: center; }
}


/* ---------- 6. SEZIONI ---------- */
.section { padding-block: var(--space-xl); border-bottom: var(--border); }
.section--giallo  { background: var(--AC-giallo); }
.section--azzurro { background: var(--AC-azzurro); }

.section__head { max-width: 660px; margin-bottom: var(--space-l); }
.section__head p:last-child { font-size: 1.15rem; color: var(--c-muted); }
.section__head--center { margin-inline: auto; text-align: center; }
.section--azzurro .section__head p:last-child { color: var(--c-ink); }

/* Splash / hero */
.hero { border-bottom: var(--border); overflow: hidden; }
.hero__inner {
  display: grid; gap: calc(var(--gutter) * 2); align-items: center;
  grid-template-columns: 1.1fr 1fr;
  padding-block: var(--space-xl);
}
/* line-height un po' più alto: così l'evidenziatore non copre le lettere della riga sopra */
.hero__title { font-size: clamp(3rem, 8vw, 5.6rem); line-height: 1.12; margin-bottom: var(--space-m); }
.hero__subtitle { max-width: 34rem; font-size: 1.2rem; color: var(--c-muted); }
.hero__subtitle strong { color: var(--c-ink); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-m); }
.hero__inner > * { min-width: 0; }   /* senza, la lavagna (larga 1000px "veri") allargherebbe la pagina */

@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; padding-block: var(--space-l); }
}

/* Lavagna "Disegna il tuo sole" (codice in js/lavagna.js).
   NB: la lavagna NON è ruotata come gli adesivi, altrimenti il
   tratto non cadrebbe esattamente sotto il dito. */
.lavagna {
  display: grid; gap: var(--space-s);
  padding: var(--space-m);
  background: var(--c-paper);
  border: var(--border);
  box-shadow: var(--shadow-lg);
}
.lavagna .sticker { justify-self: start; margin-bottom: 0; }
.lavagna__titolo { font-size: clamp(2.2rem, 4vw, 2.8rem); margin: 0; }
.lavagna__aiuto { margin: 0; color: var(--c-muted); font-size: 1rem; }

/* Riga degli strumenti */
.lavagna__barra { display: flex; flex-wrap: wrap; gap: .5rem; }
.lavagna__strumento {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px;                      /* misura minima comoda per il dito */
  padding: .4rem .75rem;
  font: inherit; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--c-ink); background: var(--c-paper);
  border: var(--border); box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .1s, box-shadow .1s;
}
.lavagna__strumento svg { width: 20px; height: 20px; flex-shrink: 0; }
/* Strumento scelto: giallo e "schiacciato" */
.lavagna__strumento[aria-pressed="true"] { background: var(--AC-giallo); transform: translate(3px, 3px); box-shadow: none; }
.lavagna__strumento--annulla { margin-left: auto; }

/* Tavolozza: tutti i colori su una riga, ogni quadratino prende il colore da --colore */
.lavagna__colori { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: .4rem; }
.lavagna__colore {
  width: 100%; aspect-ratio: 1 / 1; max-height: 44px; padding: 0;
  background: var(--colore);
  border: var(--border); box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .1s, box-shadow .1s;
}
.lavagna__colore[aria-pressed="true"] { transform: translate(3px, 3px); box-shadow: none; outline: 3px solid var(--c-ink); outline-offset: 2px; }

/* Spessore del pennello */
.lavagna__spessore { display: flex; align-items: center; gap: var(--space-s); }
.lavagna__spessore label { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.lavagna__spessore input { flex: 1; min-width: 0; accent-color: var(--c-ink); }
.lavagna__spessore output { min-width: 2ch; font-variant-numeric: tabular-nums; }

/* Il foglio da disegno */
.lavagna__tela {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
  background: #ffffff;
  border: var(--border);
  touch-action: none;                    /* sul telefono il dito disegna invece di scorrere la pagina */
  cursor: crosshair;
}

.lavagna__azioni { display: flex; flex-wrap: wrap; gap: .5rem; }
.lavagna__azioni .btn--primary { margin-left: auto; }

@media (max-width: 480px) {
  .lavagna { padding: var(--space-s); }
  .lavagna__strumento span { display: none; }   /* sul telefono piccolo restano solo le icone */
}

/* Nastro scorrevole */
.ribbon {
  overflow: hidden;
  background: var(--c-ink); color: var(--AC-sfondoBianco);
  font-family: var(--font-primario); font-size: 1.1rem; text-transform: uppercase; letter-spacing: .04em;
  padding-block: .8rem;
}
/* Come funziona: js/main.js (punto 5) ripete le parole finché il gruppo
   è più largo dello schermo, poi lo duplica. Il nastro entra da destra
   (nastro-entra) e poi gira all'infinito spostandosi di metà (nastro-gira):
   le due metà sono identiche, quindi il salto non si vede.
   Le durate le calcola il JavaScript, per avere sempre la stessa velocità. */
.ribbon__track { display: flex; width: max-content; }
.ribbon__gruppo { display: flex; flex-shrink: 0; }
.ribbon__track span { padding-right: 1rem; white-space: nowrap; }
.ribbon.is-pronto .ribbon__track {
  animation:
    nastro-entra var(--durata-entrata, 10s) linear,
    nastro-gira var(--durata-giro, 30s) linear var(--durata-entrata, 10s) infinite;
}
@keyframes nastro-entra { from { transform: translateX(var(--larghezza-nastro, 100vw)); } to { transform: translateX(0); } }
@keyframes nastro-gira  { to { transform: translateX(-50%); } }

/* Card */
.cards { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.card {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: var(--space-m);
  background: var(--c-paper);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s;
}
.card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); }
.card p { color: var(--c-muted); }
.card .btn { margin-top: auto; }
.blocco:not(.blocco-altre-attivita):hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); }
 
/* Card grande a tutta larghezza (es. Grest campo estivo) */
.card--featured {
  grid-column: 1 / -1;
  flex-direction: row; gap: var(--space-m);
  background: var(--AC-giallo);
 border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card--featured h3 { font-size: 2.4rem; }
@media (max-width: 600px) { .card--featured { flex-direction: column; } }

/* Blocchi della sezione Attività: ogni blocco è separato dal precedente */
.blocco + .blocco { margin-top: calc(var(--gutter) * 2); }

.blocco + .blocco-altre-attivita{ margin-top: calc(var(--gutter) * 2); } /*Blocco Armonia- blocco altre attività*/

.blocco__titolo { font-size: 2.4rem; margin-bottom: var(--gutter); }

/* Progetto (es. Armonia Circolare): un riquadro colorato che contiene
   l'intestazione del progetto e, sotto, i suoi box minori e i banner. */
.progetto {
  padding: var(--gutter);
  background: var(--AC-rosa);   /* cambiate qui il colore del riquadro */
  border: var(--border);
  box-shadow: var(--shadow);
}
.progetto__head { display: flex; gap: var(--space-m); margin-bottom: var(--gutter); }
.progetto__head h3 { font-size: 2.4rem; }
.progetto__head p  { margin: 0; }
@media (max-width: 600px) { .progetto__head { flex-direction: column; } }

/* Griglia a 3 colonne dentro il progetto (2 su tablet, 1 su telefono) */
.griglia-3 { display: grid; gap: var(--gutter); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .griglia-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .griglia-3 { grid-template-columns: 1fr; } }

/* Banner con i loghi: banner--3 occupa tutta la riga, banner--1 una colonna */
.banner {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: var(--space-xl);
  min-height: 10rem;
  padding: var(--space-m);
  
  background: var(--c-paper);
  border: var(--border);
  box-shadow: var(--shadow);
}
.banner img { max-height: 5rem; width: auto; }
.banner--3 { grid-column: 1 / -1; }
.banner--1 { grid-column: span 1; }


/* Due colonne */
.split { display: grid; gap: calc(var(--gutter) * 2); grid-template-columns: 1fr 1fr; align-items: center; }
.split--top { align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* Numeri in "Chi siamo" */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.stat { margin: 0; padding: var(--space-m); text-align: center; }
.stat:nth-child(even) { transform: translateY(var(--gutter)); }
.stat strong { display: block; font-family: var(--font-primario); font-weight: 400; font-size: 3.4rem; line-height: 1; }
.stat span { display: block; margin-top: .4rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }

/* Supportaci */
.code-box {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%;
  font-family: var(--font-secondario); font-size: 0.95rem; letter-spacing: .03em;
  background: var(--c-bg); border: 2px solid var(--c-ink);
  padding: .5rem .6rem;
  word-break: break-all;
  margin-top: auto;
}
/* Il codice fiscale e l'IBAN sono neri, non grigi: il grigio li faceva
   sembrare un campo da compilare. */
.card .code-box { color: var(--c-ink); }
.code-box .btn { flex-shrink: 0; white-space: nowrap; }

.partners { margin-top: var(--space-xl); text-align: center; }
.partners__title { font-family: var(--font-secondario); text-transform: uppercase; letter-spacing: .06em; }
.partners__list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-s); list-style: none; padding: 0; }
.partners__list li { padding: .5rem 1rem; background: var(--c-paper); border: var(--border); }
.partners__list li:nth-child(odd)  { transform: rotate(-1.5deg); }
.partners__list li:nth-child(even) { transform: rotate(1.5deg); }

/* Contatti */
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--gutter); }
.contact-list li { display: flex; align-items: center; gap: var(--space-s); }
.contact-list .icon { background: var(--c-paper); }
.contact-list__label { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.contact-list a { font-size: 1.1rem; word-break: break-word; }

.faq:hover { transform: none; box-shadow: var(--shadow); }
.faq details { width: 100%; border-top: 2px solid var(--c-ink); padding: var(--space-s) 0; }
.faq summary { cursor: pointer; }
.faq summary::marker { color: var(--AC-arancione); }
.faq details p { margin-top: .5rem; }


/* ---------- 7. FOOTER ---------- */
.site-footer { background: var(--c-paper); padding-block: var(--space-l); font-size: .95rem; }
.site-footer__inner { display: grid; gap: var(--space-s); text-align: center; justify-items: center; }
.site-footer__brand { font-family: var(--font-primario); font-size: 1.8rem; line-height: 1; }
.site-footer__copy { color: var(--c-muted); }


/* ---------- 8. ARTICOLI E PAGINE INTERNE ---------- */
.page-head { padding-block: var(--space-l) var(--space-m); }
.page-head h1 { font-size: clamp(3rem, 7vw, 4.4rem); }

/* --- Archivio degli articoli (articoli.html) --- */
.archivio { padding-bottom: var(--space-xl); }

/* Barra dei filtri: ricerca larga, poi anno, ordine e "Azzera" */
.filtri {
  display: grid; gap: var(--space-s) var(--gutter);
  grid-template-columns: 2fr 1fr 1fr auto;
  align-items: end;
  padding: var(--space-m);
  margin-bottom: var(--space-m);
}
.filtri[hidden] { display: none; }
@media (max-width: 860px) {
  .filtri { grid-template-columns: 1fr 1fr; }
  .filtri__campo--cerca { grid-column: 1 / -1; }
  .filtri .btn { grid-column: 1 / -1; }
}
@media (max-width: 480px) { .filtri { grid-template-columns: 1fr; } }

.filtri__campo label {
  display: block; margin-bottom: .35rem;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
}
.filtri input,
.filtri select {
  width: 100%;
  padding: .7rem .8rem;
  font: inherit;
  color: var(--c-ink);
  background-color: var(--c-bg);
  border: var(--border);
  border-radius: var(--radius);
}
.filtri input::placeholder { color: var(--c-muted); }
/* Menu a tendina: freccia disegnata con due triangoli, uguale su tutti i browser */
.filtri select {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.4rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-ink) 50%),
    linear-gradient(135deg, var(--c-ink) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - .8rem) 55%;
  background-size: .36rem .36rem;
  background-repeat: no-repeat;
  cursor: pointer;
}
.filtri input:focus-visible,
.filtri select:focus-visible { outline: 3px solid var(--AC-verde); outline-offset: 2px; background-color: var(--c-paper); }

.archivio__conteggio { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--space-m); }

/* Griglia dei box */
.archivio__griglia { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.archivio__vuoto { grid-column: 1 / -1; }

/* Box di un articolo: è una .card, con l'immagine in alto senza margini */
.scheda { padding: 0; overflow: hidden; text-decoration: none; }
.scheda:hover { background: var(--c-paper); }
.scheda__media {
  position: relative;
  width: 100%; aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  border-bottom: var(--border);
}
/* La foto riempie il riquadro e viene ritagliata: così tutti i box
   hanno la stessa altezza, qualunque sia la forma della foto */
.scheda__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scheda__media--giallo    { background: var(--AC-giallo); }
.scheda__media--azzurro   { background: var(--AC-azzurro); }
.scheda__media--rosa      { background: var(--AC-rosa); }
.scheda__media--arancione { background: var(--AC-arancione); }

/* "Timbro" con la data, al posto della copertina quando manca */
.scheda__timbro {
  display: grid; justify-items: center;
  padding: .5rem 1.1rem .7rem;
  font-family: var(--font-primario);
  font-size: 3.4rem; line-height: 1;
  background: var(--c-paper);
  border: var(--border);
  box-shadow: var(--shadow-sm);
  transform: rotate(-3deg);
}
.scheda__timbro small { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; margin-top: .3rem; }

.scheda__corpo { display: flex; flex-direction: column; flex: 1; width: 100%; padding: var(--space-m); }
.scheda__meta { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.card .scheda__meta { color: var(--c-ink); }
.scheda__titolo { font-size: 2rem; }
.scheda__leggi {
  margin-top: auto; padding-top: var(--space-s);
  font-size: .85rem; text-transform: uppercase; letter-spacing: .06em;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
  text-decoration-color: var(--AC-arancione);
}

/* Il primo box è grande: a tutta riga, con immagine a sinistra su schermi larghi */
.scheda--grande { grid-column: 1 / -1; }
.scheda--grande .scheda__titolo { font-size: clamp(2.2rem, 4vw, 3.2rem); }
@media (min-width: 860px) {
  .scheda--grande { flex-direction: row; align-items: stretch; }
  .scheda--grande .scheda__media { width: 55%; flex-shrink: 0; aspect-ratio: auto; min-height: 20rem; border-bottom: 0; border-right: var(--border); }
  .scheda--grande .scheda__corpo { padding: calc(var(--gutter) * 1.2); justify-content: center; }
  .scheda--grande .scheda__leggi { margin-top: var(--space-s); }
}

.meta { font-size: .9rem; color: var(--c-muted); }

/* Pagine di testo semplici (es. privacy.html) */
.article { max-width: 720px; margin-inline: auto; padding-block: var(--space-l) var(--space-xl); }
.article h1 { font-size: clamp(2.6rem, 6vw, 3.8rem); }
.notice { padding: var(--space-m); background: var(--AC-arancione); border: var(--border); box-shadow: var(--shadow-sm); }


/* ---------- 9. PAGINA DEL SINGOLO ARTICOLO (articolo.html) ----------
   Impaginazione da rivista: una colonna stretta al centro, comoda da
   leggere (circa 65-70 caratteri per riga). Solo la copertina è più larga.
   - Titolo:      Cal Sans (è già un font "pieno", non serve il grassetto)
   - Sottotitolo: Instrument Serif corsivo
   - Testo:       Instrument Serif
   Instrument Serif è stretto e ha le lettere piccole: per questo il testo
   è più grande del resto del sito. */
.lettura {
  --colonna: 42rem;   /* larghezza della colonna di testo */
  padding-block: var(--space-l) var(--space-xl);
}
.lettura > * { max-width: var(--colonna); margin-inline: auto; }

/* Intestazione */
.lettura__titolo {
  font-family: var(--font-primario);
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  word-spacing: normal;
  margin-bottom: var(--space-m);
}
.lettura__sottotitolo {
  font-family: var(--font-secondario);
  font-style: italic;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.2;
  word-spacing: normal;
  margin-bottom: var(--space-m);
}
/* Firma: autore, data e tempo di lettura tra due righe nere */
.lettura__firma {
  display: flex; flex-wrap: wrap; gap: .4rem 1.2rem;
  margin: 0;
  padding-block: .8rem;
  border-block: var(--border);
  font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
}
.lettura__firma strong { font-weight: 400; background: var(--AC-giallo); padding-inline: .3em; }

/* Copertina: più larga della colonna di testo */
.lettura__copertina { max-width: 60rem; margin-block: var(--space-l); }
.lettura__copertina img { width: 100%; border: var(--border); box-shadow: var(--shadow); }
.lettura__head + .lettura__testo { margin-top: var(--space-l); }

/* Tasto "← Indietro" sopra l'articolo, allineato alla colonna di testo
   (42rem = la stessa misura di --colonna) */
.lettura__indietro { max-width: 42rem; margin: var(--space-m) auto 0; }
.lettura__indietro + .lettura { padding-top: var(--space-m); }

/* Testo */
.lettura__testo {
  font-family: var(--font-secondario);
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.55rem);
  line-height: 1.5;
  word-spacing: normal;
}
.lettura__testo p, .lettura__testo ul, .lettura__testo ol { margin: 0 0 1em; }
.lettura__testo li { margin-bottom: .3em; }
.lettura__testo li::marker { color: var(--AC-arancione); }

/* Capolettera: la prima lettera dell'articolo, grande e in un riquadro giallo */
.lettura__testo > p:first-child::first-letter {
  float: left;
  margin: .1em .25em 0 0;
  padding: .1em .18em;
  font-family: var(--font-primario);
  font-size: 3.4em;
  line-height: .9;
  background: var(--AC-giallo);
  border: var(--border);
}

/* Sottotitoli scritti nel testo con # e ## */
.lettura__testo h2, .lettura__testo h3 {
  font-family: var(--font-primario);
  letter-spacing: -.01em;
  margin: 1.8em 0 .5em;
}
.lettura__testo h2 { font-size: 1.6em; }
.lettura__testo h3 { font-size: 1.2em; }

/* Instrument Serif non ha il grassetto: il **grassetto** diventa
   una sottolineatura gialla a evidenziatore */
.lettura__testo strong {
  font-weight: 400;
  background: linear-gradient(transparent 58%, var(--AC-giallo) 58%);
}
.lettura__testo a { text-decoration-color: var(--AC-arancione); }

/* Citazione (> nel testo): grande, in corsivo, tra due righe nere */
.lettura__testo blockquote {
  margin: 1.6em 0;
  padding: .8em 0;
  border-block: var(--border);
  font-style: italic;
  font-size: 1.5em;
  line-height: 1.2;
}
.lettura__testo blockquote p { margin: 0; }

/* Foto nel testo, con didascalia */
.lettura__testo figure { margin: 1.6em 0; }
.lettura__testo figure img { width: 100%; border: var(--border); box-shadow: var(--shadow); }
.lettura__testo figcaption {
  margin-top: .8rem;
  font-family: var(--font-primario);
  font-size: .9rem; line-height: 1.4;
  color: var(--c-muted);
}

/* Segno di fine articolo: un quadratino giallo dopo l'ultima parola */
.lettura__testo > p:last-child::after {
  content: "";
  display: inline-block;
  width: .55em; height: .55em;
  margin-left: .35em;
  background: var(--AC-giallo);
  border: 2px solid var(--c-ink);
}

/* Fondo pagina */
.lettura__fine { margin-top: var(--space-l); padding-top: var(--space-m); border-top: var(--border); }


.collegamentoArticolo { text-decoration:none;}