/* ============================================================
   Sito Parrocchia San Lorenzo — componenti del design system
   tradotti in CSS, per il rendering server-side di ProcessWire.

   Dipende dai token: caricare styles.css PRIMA di questo file.

   NOTA sul token --text-body: nel design system è dichiarato due
   volte (colore in tokens/colors.css, shorthand del font in
   tokens/typography.css) e vince il font, quindi
   `color: var(--text-body)` ripiega su nero. Qui NON tocchiamo i
   token — usiamo l'alias locale --ink sotto, che punta al colore
   che il design intendeva.
   ============================================================ */

:root {
  --ink: var(--ink-800);            /* il colore che --text-body doveva essere */
  --header-h: 62px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--surface-page);
}

img { max-width: 100%; }

.wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: 24px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Lo skip-link deve tornare visibile quando lo si raggiunge da tastiera:
   nascosto anche sotto il fuoco non servirebbe a nessuno. */
.sr-only:focus {
  position: fixed;
  top: 10px; left: 10px;
  width: auto; height: auto;
  margin: 0; padding: 10px 18px;
  clip: auto; overflow: visible;
  background: var(--color-brand);
  color: var(--text-on-brand);
  font: 600 0.9375rem/1 var(--font-body);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  z-index: 100;
}

/* ---------- Eyebrow ---------- */
.eyebrow {
  font: var(--text-eyebrow);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-brand);
}

/* ---------- SectionBar (variante "rule") ---------- */
.section-bar__label {
  font: 700 1.0625rem/1.2 var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-brand);
  padding-bottom: var(--space-2);
}
.section-bar__rule { height: 2px; width: 100%; background: var(--rule-brand); }
.section-bar--center .section-bar__label { text-align: center; }

/* ---------- Button ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.35rem;
  font: 700 0.9375rem/1 var(--font-body);
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-standard),
              background var(--dur) var(--ease-standard),
              box-shadow var(--dur) var(--ease-standard);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.btn--primary {
  background: var(--color-brand);
  color: var(--text-on-brand);
  box-shadow: var(--shadow-brand);
}
.btn--primary:hover { background: var(--color-brand-hover); color: var(--text-on-brand); }

.btn--secondary {
  background: var(--white);
  color: var(--color-brand);
  border: 1.5px solid var(--color-brand);
}
.btn--secondary:hover { background: var(--surface-tint-faint); color: var(--color-brand); }

.btn--sm { padding: 0.4rem 0.9rem; font: 600 0.8125rem/1 var(--font-body); gap: 0.4rem; }
.btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* ---------- Badge ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.7rem;
  font: 700 0.75rem/1.3 var(--font-body);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
}
.badge--sm { padding: 0.15rem 0.55rem; font: 700 0.6875rem/1.3 var(--font-body); }
.badge--solid   { background: var(--color-brand);  color: var(--text-on-brand); }
.badge--tint    { background: var(--surface-tint); color: var(--red-700); }
.badge--neutral { background: var(--gray-100);     color: var(--text-muted); }

/* ---------- Card ---------- */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.card--pad-sm { padding: var(--space-4); }
.card--pad-md { padding: var(--space-5); }
.card--interactive { display: block; text-decoration: none; color: inherit; }
.card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  color: inherit;
}
.card--interactive:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------- Photo ----------
   Il segnaposto fotografico del design (<Photo> in site.jsx): il progetto di
   design non include le immagini reali. Riempie il contenitore che lo ospita
   (.hero__media, .foglietto__media, .news-card__media), che ne detta l'altezza.
   Quando arriveranno le foto vere, qui va un <img> con object-fit: cover. */
.photo {
  height: 100%;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--red-100), var(--red-50));
  border: 1px dashed var(--red-300);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  color: var(--red-600);
  font: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
/* Nelle card news il segnaposto è a filo, senza angoli né bordo perimetrale. */
.photo--flush {
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
}

/* Quando la fotografia è stata caricata nel CMS, photo() rende un <img> con
   questa classe: riempie il contenitore e annulla il tratteggio del segnaposto. */
.photo--img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  padding: 0;
  border-style: solid;
  border-color: transparent;
}
.photo--img.photo--flush { border-bottom-color: var(--border-subtle); }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink-900);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  font: var(--text-body-sm);
  box-shadow: var(--shadow-lg);
  z-index: 50;
}
.toast[hidden] { display: none; }

/* ---------- TintPanel ---------- */
.tint-panel {
  background: var(--surface-tint);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.tint-panel__title {
  font: var(--text-eyebrow);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-brand);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1.5px solid rgba(220, 58, 43, 0.25);
}
.tint-panel__body {
  padding: var(--space-4);
  font: var(--text-body-sm);
  color: var(--ink);
}
.tint-panel__body p { margin: 0; }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.site-header__logo { display: flex; align-items: center; }
.site-header__logo img { height: 34px; width: auto; display: block; }

/* Le voci del menù sono le 5 del design + il CTA Foglietto. `wrap` è una rete
   di sicurezza: se in futuro le voci aumentano vanno a capo su due righe invece
   di sfondare la barra. */
.nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.nav__link {
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  font: 600 0.875rem/1 var(--font-body);
  color: var(--ink);
  text-decoration: none;
  background: transparent;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard);
}
.nav__link:hover { background: var(--surface-tint-faint); color: var(--ink); text-decoration: none; }
.nav__link[aria-current="page"] { color: var(--color-brand); }
/* Voce di menù senza destinazione: si legge come le altre ma non risponde, e
   non finge di essere un collegamento. */
.nav__link--inerte { color: var(--text-faint); cursor: default; }
.nav__link--inerte:hover { background: transparent; }
.nav__cta { margin-left: 6px; }

/* ---------- Voce di menù che si apre ----------
   Parrocchia non porta a una pagina: apre Storia e Sacerdoti. È un <details>,
   così funziona da tastiera e col dito senza JavaScript. */
.nav__gruppo { position: relative; }
.nav__somm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;          /* via il triangolino di serie */
}
.nav__somm::-webkit-details-marker { display: none; }
.nav__somm::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.nav__gruppo[open] > .nav__somm::after { transform: rotate(-135deg) translate(-2px, -2px); }
.nav__somm[aria-current="true"] { color: var(--color-brand); }
.nav__somm:hover { background: var(--surface-tint-faint); }
.nav__somm:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.nav__tendina {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 20;
}
.nav__link--figlia { display: block; }

/* Hamburger: solo CSS, nessun JavaScript */
.nav-toggle { display: none; }
.nav-burger {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}
.nav-burger span {
  display: block; width: 18px; height: 2px;
  background: var(--ink-800); border-radius: 2px;
}

/* ============================================================
   Hero
   ============================================================ */
.hero { max-width: var(--page-max); margin: 0 auto; padding: 40px 24px 8px; }
.hero__media { height: 300px; }
.hero__body { max-width: 720px; margin: 28px auto 0; text-align: center; }
.hero__title { font: var(--text-display); color: var(--text-strong); margin: 10px 0 0; }
.hero__lead { font: var(--text-lead); color: var(--text-muted); margin: 14px 0 0; }
.hero__actions {
  display: flex; gap: 12px; justify-content: center;
  margin-top: 22px; flex-wrap: wrap;
}

/* ============================================================
   Foglietto
   ============================================================ */
.foglietto { max-width: var(--page-max); margin: 0 auto; padding: 48px 24px; }
.foglietto__grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 28px;
  align-items: center;
}
.foglietto__text { font: var(--text-body); color: var(--ink); margin: 16px 0 0; }
.foglietto__actions {
  display: flex; gap: 10px; align-items: center;
  margin-top: 20px; flex-wrap: wrap;
}
.foglietto__media { height: 200px; }

/* ============================================================
   Orari delle Messe
   ============================================================ */
.orari {
  background: var(--surface-tint-faint);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.orari__inner { max-width: var(--page-max); margin: 0 auto; padding: 44px 24px; }
.orari__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  /* È un <ul>: senza azzerare il padding di serie la griglia resta rientrata di
     40px rispetto alla barra rossa e al riquadro della segreteria. I pallini non
     si vedevano perché `.orario` è flex e il marcatore sparisce — restava solo
     lo scalino, evidente da telefono dove le card sono in colonna. */
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}
.orario {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.orario__day {
  font: var(--text-h3);
  font-family: var(--font-display);
  color: var(--text-strong);
}
.orario__place { font: var(--text-caption); color: var(--text-muted); }
.orari__panel { max-width: 520px; margin: 18px auto 0; }

/* ============================================================
   News & Eventi
   ============================================================ */
.news { max-width: var(--page-max); margin: 0 auto; padding: 48px 24px; }
.news__title { font: var(--text-h1); color: var(--text-strong); margin: 6px 0 22px; }
.news__grid,
.griglia-schede { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* Nell'archivio la griglia divide tre quarti di pagina, non tutta: a tre
   colonne le card diventerebbero francobolli. */
.griglia-schede--due { grid-template-columns: repeat(2, 1fr); }
/* Il riquadro della copertina.
   Rapporto 5:3, che è la mediana delle locandine della parrocchia: la maggior
   parte lo riempie quasi esatta. Le poche verticali e le poche lunghissime non
   vengono tagliate ma appoggiate sul fondo tinta — meglio una fascia rosa che un
   titolo mozzato, e il rosa è già del sito. L'altezza è uguale per tutte, così
   le righe di card restano allineate. */
.news-card__media {
  position: relative;
  aspect-ratio: 5 / 3;
  height: auto;
  background: var(--surface-tint-faint);
  overflow: hidden;
}
/* Il figlio riempie il riquadro, sia che sia l'immagine sia che sia il
   segnaposto: con `place-items: center` la griglia lo stringeva sul contenuto e
   le pagine senza copertina mostravano un rettangolo vuoto. */
.news-card__media > * { width: 100%; height: 100%; }

/* Lo sfondo: la stessa immagine, sfocata e schiarita, che riempie lo spazio
   lasciato libero da quella intera. Una locandina verticale o una striscia
   panoramica dentro un riquadro 5:3 lasciano molto vuoto, e una fascia rosa
   piatta sotto una fotografia si nota più della fotografia. `scale` copre i
   bordi che la sfocatura schiarisce. */
.news-card__sfondo {
  position: absolute;
  inset: 0;
  object-fit: cover;
  transform: scale(1.2);
  filter: blur(16px) saturate(1.1);
  opacity: 0.5;
}
/* `background: transparent` perché `.photo` porta il gradiente rosa del
   segnaposto: sull'immagine vera coprirebbe lo sfondo sfocato qui sotto. */
.news-card__media .photo--img {
  position: relative;
  object-fit: contain;
  background: transparent;
}
/* Il filetto sotto la copertina lo mette già `.photo--flush`, sull'immagine e
   sul segnaposto: ripeterlo qui darebbe una riga doppia. */
.news-card__media .photo--img { object-fit: contain; }
.news-card__body { padding: var(--space-4); }
.news-card__title { font: var(--text-h3); color: var(--text-strong); margin: 8px 0 6px; }
.news-card__text { font: var(--text-body-sm); color: var(--text-muted); margin: 0; }
.news__more { margin-top: 24px; text-align: center; }

/* ============================================================
   Pagine interne — aggiunta al design system, che copriva solo
   la home. Nessun token nuovo: solo composizioni di quelli.
   ============================================================ */
/* ---------- Fasce ----------
   L'unità di impaginazione delle pagine interne, presa dalla home: lì le
   sezioni si susseguono a tutta larghezza alternando fondo bianco e fondo
   tinta (è quello che fa .orari fra .foglietto e .news). Le pagine interne
   usano lo stesso ritmo invece di una colonna unica di documento. */
.fascia { padding-block: 48px; }
.fascia--tinta {
  background: var(--surface-tint-faint);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
/* La coda porta solo il pulsante di ritorno: non le serve tutto quel respiro. */
.fascia--coda { padding-block: 32px 56px; }
.fascia__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-inline: 24px;
}
.fascia__inner--stretto { max-width: calc(var(--measure) + 12rem); }

.ritorno { text-align: center; }

/* ---------- Briciole di pane ---------- */
.briciole__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 14px 24px 0;
}
.briciole__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  font: var(--text-caption);
  color: var(--text-faint);
}
.briciole__voce + .briciole__voce::before {
  content: "›";
  margin-right: var(--space-2);
  color: var(--border-strong);
}
.briciole__voce a { color: var(--text-muted); text-decoration: none; }
.briciole__voce a:hover { color: var(--color-brand); text-decoration: underline; }
.briciole__voce--attiva { color: var(--text-faint); }

/* ---------- Apertura di pagina ----------
   Le pagine interne aprono con lo stesso .hero della home (vedi
   inc/testa-pagina.php): qui c'è solo la variante per le immagini che non
   vanno ritagliate — le locandine verticali delle news, dove l'immagine è il
   contenuto e un ritaglio a formato fisso ne taglierebbe il titolo. */
.hero__media--intera { height: auto; margin-top: var(--space-6); }
.hero__media--intera img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 72vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-lg);
}

/* Le pagine di contenuto aprono a sinistra e a tutta larghezza: un titolo
   centrato su una colonna stretta è la copertina del sito, non un capitolo. */
.hero__body--sinistra { max-width: none; margin-inline: 0; text-align: left; }
.hero__body--sinistra .hero__lead { max-width: var(--measure); margin-inline: 0; }

/* ---------- Due colonne: testo e ciò che gli sta accanto ----------
   Tre quarti e un quarto. A destra ci va la barra laterale (gli orari della
   segreteria, in Moduli) oppure l'indice della pagina (in Storia): la larghezza
   del sito si riempie con qualcosa di utile invece che con spazio bianco. */
.colonne {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
.colonne--sola { grid-template-columns: 1fr; }
.colonne__principale { min-width: 0; }
.colonne__lato { min-width: 0; }
/* Resta a vista mentre si scorre: è il suo unico motivo di esistere. */
.lato-blocco { position: sticky; top: calc(var(--header-h) + 16px); }

/* ---------- Riquadro di download ----------
   In una pagina di modulo il PDF è il motivo per cui si è lì: sta a destra, in
   evidenza e a vista, non in fondo dopo il testo. */
.scarica {
  background: var(--surface-tint-faint);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: center;
}
.scarica__titolo {
  font: var(--text-eyebrow);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-brand);
  margin: 0 0 var(--space-3);
}
.scarica__btn { width: 100%; white-space: normal; }
.scarica__peso {
  font: var(--text-caption);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin: var(--space-2) 0 0;
}

/* ---------- Indice della pagina ---------- */
.indice {
  border-left: 2px solid var(--rule-brand);
  padding-left: var(--space-4);
}
.indice__titolo {
  font: var(--text-eyebrow);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-brand);
  margin: 0 0 var(--space-3);
}
.indice__lista { list-style: none; margin: 0; padding: 0; }
.indice__voce { margin-bottom: var(--space-2); }
.indice__voce--l3 { padding-left: var(--space-3); }
.indice__voce a {
  font: var(--text-body-sm);
  color: var(--text-muted);
  text-decoration: none;
  line-height: 1.35;
  display: block;
}
.indice__voce a:hover { color: var(--color-brand); }
.indice__voce--l2 a { font-weight: var(--fw-semibold); color: var(--ink); }

/* ---------- Blocchi affiancati ---------- */
.schede {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
  align-items: start;
}
/* Più di due blocchi per gruppo: colonne più strette, così i tre recapiti e le
   quattro parrocchie non finiscono su file da uno. */
.schede--fitte { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.scheda { display: block; }
.scheda--con-img { display: grid; grid-template-columns: 150px 1fr; gap: var(--space-4); }
.scheda__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.scheda__titolo {
  font: var(--text-h3);
  color: var(--text-strong);
  margin: 0 0 var(--space-2);
}
/* Dentro una card il testo non ha una misura da rispettare: la larghezza gliela
   dà la card. */
.scheda__corpo .prosa { max-width: none; }

/* ---------- Prosa: il corpo redazionale ---------- */
.prosa {
  font: var(--text-body);
  color: var(--ink);
  max-width: var(--measure);
}
/* La home centra tutto: anche la colonna di testo sta in mezzo alla fascia. */
.prosa--centrata { margin-inline: auto; }
.prosa > :first-child { margin-top: 0; }
.prosa > :last-child { margin-bottom: 0; }
.prosa p, .prosa ul, .prosa ol, .prosa blockquote, .prosa table {
  margin: 0 0 var(--space-4);
}
.prosa h2 {
  font: var(--text-h2);
  color: var(--text-strong);
  margin: var(--space-6) 0 var(--space-3);
}
/* h4–h6 compresi: i testi migrati dal sito attuale usano <h6> come titoletto,
   e senza questa regola resterebbero più piccoli del corpo. */
.prosa h3, .prosa h4, .prosa h5, .prosa h6 {
  font: var(--text-h3);
  color: var(--text-strong);
  margin: var(--space-5) 0 var(--space-2);
}
.prosa a { color: var(--text-link); }
.prosa a:hover { color: var(--text-link-hover); }
.prosa ul, .prosa ol { padding-left: var(--space-5); }
.prosa li { margin-bottom: var(--space-2); }
.prosa img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
  margin: var(--space-5) 0;
}
.prosa blockquote {
  border-left: 3px solid var(--rule-brand);
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
  color: var(--text-muted);
  font-style: italic;
}
.prosa hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-6) 0;
}
/* Le tabelle incollate dai contenuti vecchi possono essere più larghe della
   colonna: scorrono da sole invece di sfondare la pagina. */
.prosa table { display: block; overflow-x: auto; border-collapse: collapse; }
.prosa th, .prosa td {
  border: 1px solid var(--border-subtle);
  padding: var(--space-2) var(--space-3);
  text-align: left;
}
.prosa th { background: var(--surface-subtle); font-weight: var(--fw-semibold); }

/* ---------- Allegati ---------- */
.allegati__lista { list-style: none; margin: var(--space-5) 0 0; padding: 0; }
.allegati__voce {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.allegati__voce:last-child { border-bottom: 0; }
.allegati__link { font: var(--text-body); color: var(--text-link); text-decoration: none; }
.allegati__link:hover { color: var(--text-link-hover); text-decoration: underline; }
.allegati__peso {
  font: var(--text-caption);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  white-space: nowrap;
}

/* ---------- Griglia di schede ----------
   Stessa griglia delle news: una sezione elenca le proprie pagine con le
   stesse card del design, copertina compresa. Le regole stanno insieme a
   quelle di .news__grid, comprese quelle responsive. */
.griglia-schede { margin-top: var(--space-6); }

/* ---------- Elenchi di persone ----------
   Tre rese per lo stesso dato: scheda in rilievo per chi ha una fotografia,
   riga con periodo e note per gli elenchi storici, elenco compatto per chi
   porta solo il nome. */
.persona-rilievo {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--space-5);
  align-items: start;
  padding: var(--space-5);
  margin-top: var(--space-5);
  max-width: 860px;
  margin-inline: auto;
}
.persona-rilievo__foto {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}
.persona-rilievo__nome {
  font: var(--text-h2);
  color: var(--text-strong);
  margin: var(--space-2) 0 0;
}

/* Gli elenchi storici sono una griglia di schede: ventiquattro parroci in
   colonna sono due schermate di lenzuolo, in griglia si percorrono a colpo
   d'occhio. auto-fill e non un numero fisso di colonne, così la griglia si
   adatta senza altri breakpoint. */
/* `columns` e non una griglia: le biografie vanno da due righe a quaranta, e
   una griglia allineerebbe ogni riga all'altezza della scheda più alta,
   lasciando buchi enormi. Le colonne impacchettano le schede una sotto l'altra
   senza sprechi. */
.persone {
  columns: 3;
  column-gap: var(--space-3);
  margin-top: var(--space-5);
}
.persone > .persona {
  break-inside: avoid;
  margin-bottom: var(--space-3);
}
.persona--con-foto {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: var(--space-3);
  align-items: start;
}
.persona__foto {
  display: block;
  width: 84px;
  height: 104px;
  object-fit: cover;
  object-position: top;      /* i ritratti hanno il volto in alto */
  border-radius: var(--radius-sm);
}
.persona__corpo { min-width: 0; }

/* La biografia lunga si apre a richiesta. Il <summary> sta DOPO il testo così
   il pulsante compare in fondo, dove finisce l'estratto; il testo si accorcia
   con line-clamp finché il <details> è chiuso. */
.persona__piu { display: block; }
.persona__note { display: block; }
.persona__piu:not([open]) .persona__note {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.persona__apri {
  display: inline-block;
  margin-top: var(--space-2);
  font: 600 0.8125rem/1 var(--font-body);
  color: var(--text-link);
  cursor: pointer;
  list-style: none;
}
.persona__apri::-webkit-details-marker { display: none; }
.persona__apri::after { content: "Leggi tutto ↓"; }
.persona__piu[open] .persona__apri::after { content: "Chiudi ↑"; }
.persona__apri:hover { color: var(--text-link-hover); text-decoration: underline; }
.persona__apri:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
.persona__nome {
  font: var(--text-h3);
  color: var(--text-strong);
  margin: 0;
}

/* Il numero di voci accanto al titolo del gruppo: dice quanto è lungo l'elenco
   prima di percorrerlo. */
.section-bar__conta {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--surface-tint);
  color: var(--red-700);
  font: 700 0.6875rem/1.4 var(--font-body);
  vertical-align: middle;
}

.congregazioni {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-4);
  align-items: start;
}
.persona__periodo {
  font: var(--text-caption);
  color: var(--text-faint);
  letter-spacing: var(--tracking-label);
  margin: 0;
}

/* Elenco di soli nomi. Le congregazioni stanno affiancate in .congregazioni, e
   dentro ciascuna i nomi vanno a colonne solo se sono tanti: le Dorotee sono
   trentasette, le Salesiane una. */
.nomi { margin-top: 0; }
.nomi__titolo {
  font: var(--text-h3);
  color: var(--text-strong);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}
.nomi__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  font: var(--text-body-sm);
  color: var(--ink);
}
.nomi__lista li {
  break-inside: avoid;
  padding: var(--space-1) 0;
}

/* Il testo di una nota vive dentro una riga, non è il corpo della pagina. */
.prosa--sm { font: var(--text-body-sm); max-width: none; }
.prosa--sm p { margin-bottom: var(--space-2); }

/* ---------- Galleria ----------
   Stessa griglia a tre delle card, ma senza cornice: qui contano le fotografie
   e non il contenitore. */
.album {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.album__voce { margin: 0; }
.album__foto {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.album__voce a:hover .album__foto { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.album__voce a:focus-visible { outline: none; }
.album__voce a:focus-visible .album__foto { box-shadow: var(--focus-ring); }

/* ---------- Recapiti ----------
   Le card degli orari delle Messe applicate ai contatti: etichetta piccola in
   rosso, valore in evidenza. */
.recapiti {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.recapito__etichetta {
  font: var(--text-eyebrow);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: var(--space-2);
}
.recapito__valore {
  font: var(--text-h3);
  font-family: var(--font-display);
  color: var(--text-strong);
  overflow-wrap: anywhere;   /* gli indirizzi di posta sono lunghi */
}
.recapito__valore a { color: inherit; text-decoration: none; }
.recapito__valore a:hover { color: var(--color-brand); text-decoration: underline; }

/* ---------- Archivio dei foglietti ----------
   Un numero per riga: qui non c'è una copertina da mostrare, c'è un periodo da
   riconoscere e un PDF da scaricare. */
.numeri { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.numero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
}
.numero__data {
  font: var(--text-caption);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  margin: 0 0 var(--space-1);
}
.numero__periodo { font: var(--text-h3); color: var(--text-strong); margin: 0; }
.numero__periodo a { color: inherit; text-decoration: none; }
.numero__periodo a:hover { color: var(--color-brand); }
.numero__azioni { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Le annate: una riga di pastiglie sopra l'elenco. Compaiono solo dal secondo
   anno in poi — con una annata sola sarebbe un filtro che non filtra nulla. */
.annate { margin-bottom: var(--space-5); }
.annate__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.annate__voce {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: 8px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  color: var(--text-muted);
  font: var(--text-bar);
  text-decoration: none;
}
.annate__voce:hover { border-color: var(--color-brand); color: var(--color-brand); }
.annate__voce--attiva {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--white);
}
/* Quanti numeri ha quell'anno: risponde prima del clic. */
.annate__quanti { font: var(--text-caption); opacity: 0.75; }
.annate__titolo {
  font: var(--text-h3);
  color: var(--text-strong);
  margin: 0 0 var(--space-3);
}

/* ---------- Donazioni ----------
   I progetti usano la card delle news — copertina, titolo, sommario — con in
   fondo la barra di quanto manca al traguardo. */
.progetti {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.progetto { display: flex; }
.progetto__link { display: flex; flex-direction: column; width: 100%; color: inherit; text-decoration: none; }
.progetto__link .news-card__body { display: flex; flex-direction: column; flex: 1; }
/* La barra scende in fondo alla card, così le barre di tutte si allineano. */
.progetto__link .avanzamento { margin-top: auto; padding-top: var(--space-3); }
.progetto__nota { margin: var(--space-3) 0 0; font: var(--text-caption); color: var(--text-muted); }

.avanzamento__barra {
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--red-100);
  overflow: hidden;
}
.avanzamento__pieno {
  height: 100%;
  border-radius: inherit;
  background: var(--color-brand);
  /* La larghezza la scrive il template: è un dato, non una decorazione. */
}
.avanzamento__cifre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  margin-top: 8px;
  font: var(--text-body-sm);
  color: var(--text-strong);
}
/* «raccolti» e «traguardo» sono etichette: contano le cifre. */
.avanzamento__cifre span span { font: var(--text-caption); color: var(--text-muted); }
.avanzamento__quota { font: var(--text-bar); color: var(--color-brand); }

/* ---------- Ricerca e filtri dell'archivio ---------- */
.filtri {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}
.filtri__titolo {
  font: var(--text-eyebrow);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-brand);
  margin: 0 0 var(--space-3);
  display: block;
}
.filtri__gruppo { margin-top: var(--space-5); }
.filtri__lista { list-style: none; margin: 0; padding: 0; }
.filtri__voce {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font: var(--text-body-sm);
  color: var(--ink);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard);
}
.filtri__voce:hover { background: var(--surface-tint-faint); color: var(--ink); }
.filtri__voce--attiva { background: var(--color-brand); color: var(--text-on-brand); }
.filtri__voce--attiva:hover { background: var(--color-brand-hover); color: var(--text-on-brand); }
.filtri__quante {
  font: var(--text-caption);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.filtri__voce--attiva .filtri__quante { color: rgba(255, 255, 255, 0.85); }

.cerca__riga { display: flex; gap: var(--space-2); }
.cerca__campo {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font: var(--text-body-sm);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.cerca__campo:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--color-brand); }

/* L'esito della ricerca, sopra i risultati. */
.esito {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.esito__testo { font: var(--text-body); color: var(--ink); margin: 0; }
.esito__azzera { font: var(--text-body-sm); color: var(--text-link); }

/* ---------- Paginazione ---------- */
.paginazione {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
}
.paginazione__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.paginazione__voce {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 8px 10px;
  border-radius: var(--radius-pill);
  font: 600 0.875rem/1 var(--font-body);
  color: var(--ink);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard);
}
.paginazione__voce:hover { background: var(--surface-tint-faint); color: var(--ink); }
.paginazione__voce--attiva {
  background: var(--color-brand);
  color: var(--text-on-brand);
}
.paginazione__salto {
  font: 600 0.875rem/1 var(--font-body);
  color: var(--text-link);
  text-decoration: none;
  white-space: nowrap;
}
.paginazione__salto:hover { color: var(--text-link-hover); text-decoration: underline; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--surface-brand); color: #fff; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 36px 24px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 24px;
}
.site-footer__logo { height: 40px; width: auto; margin-bottom: 12px; display: block; }
.site-footer__text { font: var(--text-body-sm); opacity: 0.92; margin: 0; line-height: 1.6; }
.site-footer__head {
  font: var(--text-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  opacity: 0.85;
}
.site-footer__list { font: var(--text-body-sm); opacity: 0.92; margin: 0; line-height: 1.8; list-style: none; padding: 0; }
.site-footer__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font: var(--text-caption);
  opacity: 0.8;
}
.site-footer__legal .wrap { padding-block: 14px; }
/* Anno, codice fiscale e policy a sinistra; il credito a destra. Sul telefono
   vanno tutti a capo. */
.site-footer__legal-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  justify-content: space-between;
}
.site-footer__legal a { text-decoration: underline; }

/* Le voci separate da una barretta, come nel sito attuale. Il separatore è
   generato dal CSS: non è testo, quindi la sintesi vocale non lo legge. */
.site-footer__legal-voci {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__legal-voci li + li::before {
  content: "|";
  margin-right: 10px;
  opacity: 0.45;
}

/* ============================================================
   Responsive — il kit di design era solo desktop, questi
   breakpoint sono un'aggiunta.
   ============================================================ */
@media (max-width: 900px) {
  .foglietto__grid { grid-template-columns: 1fr; }
  .foglietto__media { height: 220px; order: -1; }
  .orari__grid { grid-template-columns: repeat(2, 1fr); }
  .news__grid,
  .progetti,
  .griglia-schede { grid-template-columns: repeat(2, 1fr); }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .hero__title { font: var(--text-h1); }
  .persona-rilievo { grid-template-columns: 180px 1fr; }
  .persone { columns: 2; }
  .album, .recapiti { grid-template-columns: repeat(2, 1fr); }
  .schede { grid-template-columns: 1fr; }
  .colonne { grid-template-columns: 2fr 1fr; gap: var(--space-5); }
}

/* Hamburger: le 6 voci più il CTA chiedono ~708px, che a 940px di viewport
   sono i primi in cui ci stanno su una riga sola (940-48-127-20 = 745).
   Sotto quella soglia il menù si chiude nell'hamburger. */
@media (max-width: 940px) {
  .nav-burger { display: flex; }
  .nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px 24px 18px;
    background: var(--white);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
  }
  .nav-toggle:checked ~ .nav { display: flex; }
  .nav__link { padding: 12px; font-size: 1rem; }
  .nav__cta { margin-left: 0; margin-top: 8px; justify-content: center; }
  .site-header__inner { position: relative; }

  /* Nel menù a tendina del telefono la voce che si apre resta in colonna:
     niente riquadro sovrapposto, le figlie rientrano sotto. */
  .nav__tendina {
    position: static;
    border: 0;
    box-shadow: none;
    padding: 0 0 0 12px;
    background: transparent;
    min-width: 0;
  }
  .nav__somm { justify-content: space-between; }

  /* ---------- Bersagli tattili ----------
     Sotto questa soglia si naviga col dito. Un collegamento alto diciannove
     pixel — l'altezza naturale di una riga di testo — si sbaglia a premere:
     le linee guida chiedono almeno una quarantina di pixel. Qui non si
     ingrandisce il testo, si allarga la zona che risponde al tocco. */
  /* Le righe restano una sotto l'altra: il <li> NON diventa inline-block, o si
     affiancano. E il respiro lo dà una cosa sola — o il link o la riga — o le
     spaziature si sommano e fra una voce e l'altra resta un buco di una riga. */
  .site-footer__list { line-height: 1.35; }

  /* «Link»: la voce è tutta un collegamento, quindi diventa una riga intera
     alta abbastanza da premerci sopra. */
  .site-footer__list--link a {
    display: block;
    padding-block: 11px;
  }

  /* «Contatti»: il collegamento è dentro la riga («Canonica · 0422 959019»).
     Reso a blocco si staccherebbe dalla sua etichetta, quindi resta in linea: il
     padding verticale su un elemento in linea allarga la zona che risponde al
     tocco senza spostare il testo. */
  .site-footer__list--contatti li { padding-block: 7px; }
  .site-footer__list--contatti a { padding-block: 8px; }

  .briciole__voce a { display: inline-block; padding-block: 8px; }
  .briciole__lista { gap: 0 var(--space-2); }

  .indice__voce a { padding-block: 8px; }
  .indice__voce { margin-bottom: 0; }

  .filtri__voce { padding-block: 11px; }
  .allegati__link { display: inline-block; padding-block: 8px; }
  .nomi__lista li { padding: 6px 0; }

  .paginazione__voce { min-width: 42px; min-height: 42px; }
  .paginazione__salto { display: inline-block; padding: 12px 4px; }
  .site-footer__legal a { display: inline-block; padding-block: 6px; }

  /* I collegamenti dentro il testo restano come sono: sono in linea nella
     frase, e allargarli spezzerebbe l'interlinea del paragrafo. */
}

@media (max-width: 620px) {
  .wrap, .hero, .foglietto, .news, .orari__inner, .site-header__inner, .site-footer__inner {
    padding-inline: 16px;
  }
  .hero { padding-top: 24px; }
  .hero__media { height: 200px; }
  .orari__grid { grid-template-columns: 1fr; }
  .news__grid,
  .progetti,
  .griglia-schede { grid-template-columns: 1fr; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .hero__title { font: var(--text-h2); }
  .hero__lead { font: var(--text-body); }
  .foglietto, .news { padding-block: 32px; }
  .fascia { padding-block: 32px; }
  .fascia__inner, .briciole__inner { padding-inline: 16px; }
  .persona-rilievo { grid-template-columns: 1fr; padding: var(--space-4); }
  .persona-rilievo__foto { max-width: 220px; }
  .persona-rilievo__nome { font: var(--text-h3); }
  .persone { columns: 1; }
  .album, .recapiti { grid-template-columns: 1fr; }
  .griglia-schede--due { grid-template-columns: 1fr; }
  .album__foto { height: 220px; }
  /* Sotto i 620px la colonna di lato va in fondo e smette di restare a vista. */
  .colonne { grid-template-columns: 1fr; }
  .lato-blocco { position: static; }
  .scheda { grid-template-columns: 110px 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .card--interactive:hover { transform: none; }
}