/* ============================================================
   extra.css — SOLO aggiunte non presenti nei template di
   riferimento (che ora vivono in css/pages/<pagina>.css).
   Caricato DOPO la CSS di pagina.
   ============================================================ */

/* Normalizza gli stili legacy inline dei contenuti da DB (paste da Word:
   text-align:justify, font Arial/Times in pt, margini in pt/cm)            */
.r-desc p,.r-desc div,.r-desc li,.r-desc [align]{text-align:left !important;}
.r-desc{color:var(--ink-soft);line-height:1.7;}

.mod p[style],.mod div[style],.mod li[style],.mod span[style],
.prose p[style],.prose div[style],.prose li[style],
.article-body p[style],.article-body div[style],.article-body li[style]{
  text-align:left !important;
  font-family:inherit !important;
  font-size:inherit !important;
  line-height:inherit !important;
  margin-left:0 !important; margin-right:0 !important;
}
.mod [align],.prose [align],.article-body [align]{text-align:left !important;}

/* Titoli h1 dentro i moduli da DB: declassati visivamente (l'h1 di pagina è l'hero) */
.mod.prose h1,.article-body .mod h1{font-family:"Fraunces",Georgia,serif;font-size:clamp(1.5rem,3vw,2.1rem);font-weight:600;margin:1.4em 0 .5em;line-height:1.15;}

/* Icona settore: guardia quando manca il file */
.sector-ico:empty{display:none;}

/* Barra meta del progetto: la CSS di riferimento fissa 5 colonne (nel mockup
   i dati erano sempre 5). I campi ora sono opzionali e gestiti da admin:
   adatta le colonne al numero di celle valorizzate (mobile resta a 2). */
@media (min-width:768px){
  .meta-grid[data-cells="1"]{grid-template-columns:1fr;}
  .meta-grid[data-cells="2"]{grid-template-columns:repeat(2,1fr);}
  .meta-grid[data-cells="3"]{grid-template-columns:repeat(3,1fr);}
  .meta-grid[data-cells="4"]{grid-template-columns:repeat(4,1fr);}
}

/* ============ CORREZIONI QA ============ */

/* Drawer menu mobile: con molte voci le ultime finivano fuori schermo */
.mobile-nav{ overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }

/* Contenuti legacy incollati da Word: tabelle e blocchi che sfondano in orizzontale */
.mod table,.prose table,.article-body table,.r-desc table{
  display:block; width:100% !important; max-width:100%;
  overflow-x:auto; border-collapse:collapse;
}
.mod table td,.mod table th,.prose table td,.prose table th{ width:auto !important; }
.mod img,.prose img,.article-body img,.r-desc img,.mr-desc img{ max-width:100%; height:auto; }
.mod [style*="margin-left:-"],.prose [style*="margin-left:-"],
.mod [style*="text-indent:-"],.prose [style*="text-indent:-"]{ margin-left:0 !important; text-indent:0 !important; }
.mod pre,.prose pre,.article-body pre{ overflow-x:auto; max-width:100%; }

/* iOS Safari zooma la pagina se il campo ha font-size < 16px */
@media (max-width:820px){
  input, select, textarea{ font-size:16px !important; }
}

/* etichetta di un gruppo di radio (non è una <label> perché non ha un solo controllo) */
.field .lbl{
  display:block; font-size:.74rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px;
}

/* Consensi privacy: nei mockup la regola .privacy dichiara .88rem / testo
   normale, ma viene sovrascritta da `.field label` (uppercase, .74rem) —
   collisione involontaria. Ripristino l'intento: testo legale leggibile. */
.field label.privacy,
.field label.nl-consent,
.privacy, .nl-consent{
  text-transform:none !important;
  letter-spacing:normal !important;
  font-size:.88rem !important;
  font-weight:400 !important;
  line-height:1.55 !important;
  color:var(--ink-soft);
}
.field label.privacy .req,.privacy .req{ color:var(--terracotta); }

/* Banda certificazioni: le card con PDF diventano link scaricabili */
a.cert{ text-decoration:none; }
.cert-dl{
  margin-top:auto; padding-top:10px;
  display:inline-flex; align-items:center; gap:8px;
  font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--bronze); opacity:.75;
  transition:opacity .25s var(--ease), gap .25s var(--ease);
}
a.cert:hover .cert-dl{ opacity:1; gap:13px; }
a.cert:focus-visible{ outline:2px solid var(--bronze); outline-offset:3px; }

/* Riga meta del dettaglio offerta: icone SVG allineate come nel resto del tema */
/* Il tema definisce .posizione .p-attr (la scheda in elenco) ma non il
   contenitore quando la riga attributi sta nell'hero della posizione: stessi
   valori, cosi' le due occorrenze non divergono. */
.p-attr{
  display:flex; flex-wrap:wrap; gap:8px 20px;
  margin-top:10px; margin-bottom:14px;
  font-size:.82rem; color:var(--ink-soft);
}
.p-attr span{ display:inline-flex; align-items:center; gap:7px; }
.p-attr svg{ flex:none; color:var(--bronze-deep); }

/* Opzioni radio/checkbox dentro un .field: sono VALORI, non etichette di campo,
   quindi niente maiuscolo e testo accanto al controllo (non sopra). */
.field .opt,
.field div[role="radiogroup"] label,
.field .radio-inline{
  display:inline-flex !important; align-items:center; gap:8px;
  text-transform:none !important; letter-spacing:normal !important;
  font-size:.94rem !important; font-weight:400 !important;
  color:var(--ink); margin-bottom:0 !important;
}
.field div[role="radiogroup"] input[type="radio"]{ flex:none; margin:0; accent-color:var(--terracotta); }
.field .opt-group{ display:flex; flex-wrap:wrap; gap:10px 20px; padding-top:8px; }
.field .opt{ white-space:nowrap; }   /* mai spezzare l'etichetta di un'opzione */

/* Utility: testo per soli screen reader (sostituisce gli stili inline
   left:-9999px, tecnica datata che può creare scroll orizzontali) */
.sr-only{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
/* Embed mappa da impostazioni */
.map-embed{ border:1px solid var(--rule); overflow:hidden; line-height:0; }
.map-embed iframe{ width:100%; min-height:420px; border:0; display:block; }

/* Fascia CTA finale: il bronzo del mockup (#8A7647) porta il testo avorio
   piccolo a 3,85:1, sotto la soglia WCAG AA (4,5:1). Scurito del 10% —
   stessa tinta, contrasto 4,59:1 — e occhiello a piena opacità. */
.final-cta{ background:#7C6A3F; }
.final-cta .eyebrow{ color:var(--paper); opacity:.95; }
.final-cta .btn-ghost{ border-color:rgba(244,239,230,.75); }

/* Titoli con icona di settore dentro una card (es. pagina 404) */
.card h3 .sector-ico{ width:26px; height:26px; margin-right:10px; vertical-align:-6px; }

/* ============ RICERCA: campo e conteggio ============ */
.search-form{ display:flex; gap:10px; margin-top:24px; max-width:560px; flex-wrap:wrap; }
/* stessi valori di .field input: un campo di ricerca non e' un caso a parte */
.search-form .search-input{
  flex:1 1 240px; min-width:0;
  padding:13px 15px;
  border:1px solid var(--rule);
  border-radius:1px;
  background:var(--paper);
  color:var(--ink);
  font-family:"Spline Sans",system-ui,-apple-system,sans-serif;
  font-size:1rem;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s;
}
.search-form .search-input::placeholder{ color:#9a9384; }
.search-form .search-input:focus{
  outline:none;
  border-color:var(--terracotta);
  background:#fff;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--terracotta) 16%,transparent);
}

/* .sec-note vive nella 3a colonna di .sec-head (stretta, a destra):
   fuori da lì serve una riga a larghezza piena */
.result-count{
  font-size:.92rem; color:var(--ink-soft);
  margin:0 0 6px; padding-bottom:14px;
  border-bottom:1px solid var(--rule);
}
.result-count strong{ color:var(--ink); font-weight:600; }

/* ============ STATO VUOTO ============ */
.empty-state{
  text-align:center;
  max-width:58ch;
  margin:0 auto;
  padding:30px 0 6px;
}
.empty-state .es-mark{
  display:block; width:54px; height:54px; margin:0 auto 22px;
  border:1px solid var(--rule); border-radius:50%;
  font-family:"Fraunces",Georgia,serif; font-size:1.4rem; line-height:52px;
  color:var(--terracotta);
}
.empty-state h2{
  font-family:"Fraunces",Georgia,serif; font-weight:500;
  font-size:clamp(1.5rem,3vw,2.1rem);
  line-height:1.15; margin:0 0 14px; color:var(--ink);
}
.empty-state p{ color:var(--ink-soft); margin:0 auto 26px; max-width:48ch; }
.empty-links{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
}
.empty-links a{
  display:inline-block; padding:9px 16px;
  border:1px solid var(--rule);
  color:var(--ink); text-decoration:none;
  font-size:.9rem; letter-spacing:.02em;
  transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.empty-links a:hover,
.empty-links a:focus-visible{
  border-color:var(--terracotta); color:var(--terracotta); background:var(--paper-2);
}

/* ============ MESSAGGI DI ESITO ============ */
/* --c-cultura scurito quanto basta a reggere il contrasto come testo:
   prima era l'hex #3B5A31 ripetuto inline in tre viste e in area.css */
:root{ --ok:#3B5A31; }
/* classe raddoppiata per pareggiare .form-card .form-intro (0,2,0): extra.css
   viene dopo, quindi a parita' di peso vince lo stato. Evita !important, che
   toglierebbe all'admin ogni possibilita' di sovrascrivere. */
.msg-ok.msg-ok,
.msg-err.msg-err{ padding:12px 16px; border-radius:2px; }
.msg-ok.msg-ok{  background:rgba(79,107,67,.14);  color:var(--ok); }
.msg-err.msg-err{ background:rgba(176,90,60,.14); color:var(--terracotta); }

/* ============ CONTRASTO DEL TERRACOTTA SUL TESTO PICCOLO ============ */
/* --terracotta su carta rende 4.19:1, sotto la soglia AA (4.5) per il testo
   normale. Resta l'accento del marchio per il display, i bordi e i fregi —
   dove la soglia e' 3:1 — mentre il testo piccolo usa una versione scurita
   all'86%, che rende 5.35:1 su carta e 4.85:1 sulla tinta dei messaggi.
   Le selettivita' qui sotto ricalcano quelle dei CSS di pagina (extra.css
   viene caricato dopo, quindi a parita' di peso vince). */
:root{ --terracotta-testo:#974D34; }

.sec-index.sec-index{ color:var(--terracotta-testo); }
.field label .req{ color:var(--terracotta-testo); }
.orari .hrs.closed{ color:var(--terracotta-testo); }
.obbligatorio{ color:var(--terracotta-testo); font-weight:600; }

.msg-err.msg-err{ color:var(--terracotta-testo); }

/* ============ BRONZO E ARCHEOLOGIA SUL TESTO PICCOLO ============ */
/* Stessa logica del terracotta: --bronze-deep rende 3.85:1 su carta e
   --c-archeologia 3.03:1, entrambi sotto AA per il testo normale. Le versioni
   scurite servono solo dove il colore diventa testo (eyebrow, meta, etichette);
   i token originali restano per fregi, bordi e display. */
:root{
  --bronze-testo:#7C6A40;
  --c-archeologia-testo:#965F22;
}
.eyebrow.eyebrow{ color:var(--bronze-testo); }
.card .meta{ color:var(--bronze-testo); }
.card .tag[data-c="arch"]{ color:var(--c-archeologia-testo); }
/* le eccezioni gia' previste dal tema restano tali */
.certs .eyebrow.eyebrow{ color:var(--bronze); }
.final-cta .eyebrow.eyebrow{ color:rgba(244,239,230,.78); }

/* ultimi due casi: l'etichetta dei filtri e il corsivo d'accento nei titoli.
   Il corsivo e' testo grande (soglia 3:1) e bastava un 8% di scurimento. */
:root{ --bronze-display:#998656; }
.filters-label{ color:var(--bronze-testo); }
.page-hero h1 em{ color:var(--bronze-display); }

/* la firma della citazione eredita --accent del settore: solo archeologia
   scende sotto soglia, quindi --accent-testo ricade su --accent per gli altri */
.s-archeologia{ --accent-testo:var(--c-archeologia-testo); }
.settore cite{ color:var(--accent-testo, var(--accent)); }

/* ============ FRECCE DEL CAROSELLO ============ */
/* Erano centrate verticalmente (top:50%) a 28px dal bordo, mentre il testo
   dell'hero comincia a 48px: la freccia sinistra copriva le prime lettere di
   .hero-lead. Il difetto e' nel mockup di partenza, non nel porting, e si
   presenta a qualunque larghezza perche' dipende da dove cade la riga di
   testo. Le frecce passano nella riga dei controlli in basso, dove .hero-ui
   tiene contatore e pallini allineati a destra e il lato sinistro e' libero. */
.hero-nav{ top:auto; bottom:32px; transform:none; }
.hero-nav.prev{ left:14px; }
.hero-nav.next{ left:72px; right:auto; }
@media (min-width:1024px){
  .hero-nav.prev{ left:48px; }
  .hero-nav.next{ left:106px; right:auto; }
}

/* Riga controlli su schermi stretti: con 11 slide i pallini a larghezza fissa
   (36px) sommano ~500px, e con justify-content:flex-end senza wrap la riga
   sbordava a sinistra portando il contatore fuori schermo (x -244 a 375px).
   I pallini diventano flessibili e la riga lascia spazio alle frecce. */
@media (max-width:1023px){
  .hero-ui{ padding-left:138px; gap:14px; }
  .hero-dots{ flex:1 1 auto; min-width:0; }
  .hero-dot{ flex:1 1 auto; min-width:6px; max-width:36px; }
  .hero-count{ flex:none; }
}

/* ============ CONTROLLI: EREDITARE IL FONT ============ */
/* button, input, select e textarea non ereditano il font dal body: senza
   dichiarazione esplicita il browser usa il proprio (Arial). Capitava a
   .menu-toggle e al pulsante di chiusura del menu mobile. Le regole del tema
   che dichiarano gia' "Spline Sans" restano piu' specifiche e vincono. */
button, input, select, textarea{ font-family:inherit; }

/* Titolo della banda scura "I numeri": la CSS di chi-siamo definisce .numeri
   ma non il suo h2, che era interamente in stile inline. */
.numeri h2{
  color:var(--paper);
  font-size:clamp(1.7rem,3.6vw,2.6rem);
  margin:14px 0 36px;
  max-width:22ch;
}

/* stessa regola per i contenuti fuori dai moduli */
.prose li > p,
.article-body li > p,
.r-desc li > p{ margin:0; }
.prose li > p + p,
.article-body li > p + p,
.r-desc li > p + p{ margin-top:8px; }

/* ============ ANCORE SOTTO L'HEADER STICKY ============ */
/* L'header e' sticky a top:0 e misura 93px su mobile, 103px da 1024px in su.
   Senza scroll-padding qualunque salto a un'ancora porta il bersaglio a
   quota 0, cioe' sotto l'header. Il tema lo aveva gia' risolto in un solo
   punto (.settore-row{scroll-margin-top:120px} in settori.css): qui la stessa
   correzione vale per ogni ancora, presente e futura. */
html{ scroll-padding-top:108px; }
@media (min-width:1024px){ html{ scroll-padding-top:120px; } }

/* ============ CARD INTERAMENTE CLICCABILI ============ */
/* Nei mockup la card e' un <article> con dentro un solo link "Vai al
   progetto": l'hover pero' ingrandisce la foto, quindi immagine e titolo
   invitano a un clic che non esiste. Si estende l'area attiva del link gia'
   presente invece di aggiungerne un secondo, che per un lettore di schermo
   sarebbe una voce duplicata verso la stessa destinazione. */
.card, .settore, .sotto-card{ position:relative; }
.card:hover, .settore:hover, .sotto-card:hover{ cursor:pointer; }
.card .go::after,
.settore .go::after,
.sotto-card .go::after{
  content:""; position:absolute; inset:0; z-index:1;
}
/* qualunque altro elemento interattivo dentro la card resta raggiungibile */
.card a:not(.go), .card button,
.settore a:not(.go), .settore button,
.sotto-card a:not(.go), .sotto-card button{ position:relative; z-index:2; }

/* ============ SALTA AL CONTENUTO ============ */
/* Era posizionato a left:-999px e riportato in vista da onfocus/onblur inline:
   senza JavaScript la scorciatoia non compariva, e gli handler inline
   obbligano a unsafe-inline nella CSP. Qui e' solo CSS, e resta fuori vista
   traslato invece che spostato a coordinate negative (che in alcuni contesti
   genera scroll orizzontale). */
.skip{
  position:absolute; left:8px; top:8px; z-index:200;
  background:var(--ink); color:var(--paper);
  padding:10px 16px; border-radius:2px;
  text-decoration:none; font-size:.9rem;
  transform:translateY(calc(-100% - 16px));
  transition:transform .2s var(--ease);
}
.skip:focus{ transform:translateY(0); }

/* .testi-grid saltava da 1 a 3 colonne a 768px, unica fra le griglie del
   tema: a tablet le colonne restavano larghe 206px, circa 27 caratteri per
   riga. Ora segue lo stesso schema di .cert-list: 1 → 2 → 3. */
@media (min-width:768px) and (max-width:1023px){
  .testi-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ============ COLONNE DAVVERO UGUALI ============ */
/* repeat(N,1fr) ha minimo "auto": una cella con contenuto largo allarga la
   propria colonna e sbilancia la riga. Nella banda dei numeri le quattro
   colonne uscivano a 157/171/191/173px invece che uguali. minmax(0,1fr)
   impone la ripartizione voluta dal tema. */
@media (min-width:768px){
  .numeri-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* ============ ERRORI DI VALIDAZIONE ============ */
.msg-elenco{ margin:8px 0 0; padding-left:20px; }
.msg-elenco li{ margin:2px 0; }
/* il campo sbagliato si riconosce dal bordo, non solo dall'elenco:
   il colore da solo non basta, quindi cambia anche lo spessore */
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{
  border-color:var(--terracotta-testo);
  border-width:2px;
  background:rgba(176,90,60,.05);
}

/* ============================================================
   STAMPA
   Il tema non aveva alcuna regola @media print. Stampando una
   pagina si otteneva: le sezioni non ancora scorse completamente
   bianche (.reveal resta a opacity:0 finche' non entra nel
   viewport), le bande scure come blocchi di inchiostro, e il 61%
   del foglio occupato da header, moduli, CTA e footer.
   ============================================================ */
@media print{
  /* il reveal e' un effetto legato allo scorrimento: su carta lo
     scorrimento non esiste, quindi il contenuto va sempre mostrato */
  .reveal{ opacity:1 !important; transform:none !important; }

  /* niente sfondi: su carta sono solo inchiostro */
  html, body{ background:#fff !important; }
  *{
    background:transparent !important;
    color:#000 !important;
    box-shadow:none !important;
    text-shadow:none !important;
  }

  /* navigazione, interazione e fregi non servono su carta */
  .site-header, .mobile-nav, .skip, .hero-nav, .hero-ui,
  .footer, .final-cta, .filters-bar, .news-toolbar, .chips,
  .pagination, .socials, .ico-pat, .strata, .map-embed, .map-box,
  form, .form-card, .newsletter, .nl-form, .empty-links{
    display:none !important;
  }

  /* il titolo e i suoi dati restano insieme al testo che introducono */
  h1, h2, h3, h4{ break-after:avoid; page-break-after:avoid; }
  .card, .mod, figure, blockquote, li, tr{ break-inside:avoid; page-break-inside:avoid; }

  /* Su carta un link e' inutile se non se ne legge la destinazione, ma il
     sito genera URL assoluti anche per i link interni: stampare l'indirizzo
     di ogni briciola di pane sarebbe solo rumore. Si mostrano quindi i soli
     link dentro il testo redazionale, che sono quelli che rimandano fuori. */
  .mod-prose a[href^="http"]::after,
  .article-body a[href^="http"]::after,
  .prose a[href^="http"]::after,
  .r-desc a[href^="http"]::after{
    content:" (" attr(href) ")";
    font-size:.82em; word-break:break-all;
  }

  img{ max-width:100% !important; height:auto !important; }
  body{ font-size:11pt; line-height:1.45; }

  @page{ margin:16mm 14mm; }
}

/* ============ MISURA DELLA COLONNA DI TESTO ============ */
/* Il tema fissa max-width:70ch sul corpo degli articoli e sui moduli di
   testo, ma "ch" e' la larghezza della cifra zero: in Spline Sans il
   carattere medio e' molto piu' stretto, quindi 70ch rendono 90-97 caratteri
   per riga — misurati, non stimati — contro i 45-75 leggibili. 54ch riporta
   la riga a circa 72 caratteri mantenendo allineati anche gli elementi che
   condividono la stessa colonna (didascalia, barra condivisione, box autore). */
.mod-prose,
.mod-gallery-head,
.article-body,
.article-share,
.author-box-wrap,
.article-cover figcaption{ max-width:54ch; }

/* Il chip attivo del filtro News: il tema lo stilava su aria-pressed, che
   vale per i pulsanti a due stati. Ora i chip sono link e lo stato corrente
   si dichiara con aria-current, quindi la regola va estesa. */
.chip[aria-current="page"]{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
}
.chip[aria-current="page"] .dot{ background:var(--bronze); }
.chip[aria-current="page"]:hover{ background:var(--ink); color:var(--paper); }

/* I chip del filtro erano figli diretti di .filters-bar: quando la riga
   andava a capo, l'ultimo tornava al bordo sinistro del contenitore invece
   di allinearsi agli altri, che partono dopo l'etichetta. Raggruppandoli
   restano su un'unica colonna di partenza. */
.filters-bar .filters-chips{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
}

/* Esito dell'iscrizione alla newsletter: la banda e' scura, quindi i colori
   dei messaggi del sito chiaro qui non si leggerebbero. */
.nl-esito{
  margin:0 0 14px; padding:10px 14px; border-radius:2px;
  font-size:.92rem;
  background:rgba(244,239,230,.12); color:var(--paper);
}
.nl-esito.nl-errore{
  background:rgba(176,90,60,.22);
  color:#F0D9CE;
}

/* ============ RESPIRO TRA LE SCHEDE ============ */
/* La griglia usava un gap uniforme di 34px. Dentro la scheda la distanza
   maggiore e' 18px (immagine -> data): con soli 34px fra una scheda e la
   successiva il rapporto era 1,9 e il titolo, che sta in fondo alla propria
   scheda, sembrava riferirsi all'immagine sottostante invece che a quella
   sopra. Le colonne restano a 34px: cambia solo il passo verticale. */
.lavori-grid{
  column-gap:34px;
  row-gap:64px;
}

/* ============ TABELLE NEI TESTI LIBERI ============
   L'elenco dei cookie e' una tabella, ma .mod-prose non ne prevedeva lo
   stile: finiva impilata come testo corrente e illeggibile. */
.mod-prose table{
  width:100%;
  border-collapse:collapse;
  margin:28px 0;
  font-size:.92rem;
}
.mod-prose caption{
  text-align:left;
  font-size:.76rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--bronze-deep);
  padding-bottom:10px;
}
.mod-prose th,
.mod-prose td{
  text-align:left;
  vertical-align:top;
  padding:11px 14px 11px 0;
  border-bottom:1px solid var(--rule);
}
.mod-prose th{
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
}
.mod-prose thead th{
  border-bottom-width:2px;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.mod-prose tbody th{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.86rem; }

/* Su schermo stretto la tabella scorre invece di spaccare il layout. */
@media (max-width:640px){
  .mod-prose .tabella-scorrevole{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .mod-prose .tabella-scorrevole table{ min-width:460px; }
}

/* ============ NEWS: IMMAGINE SEMPRE INTERA ============
   Le news sono spesso locandine, quadrate o verticali, con il testo fino ai
   bordi. Con "object-fit: cover" la card ne tagliava una parte: nella card
   in evidenza (21:9) piu' di meta' altezza, nelle altre (4:3) il titolo in
   alto o in basso. Le card delle news hanno la classe .thumb-intera:
   l'immagine si vede per intero e la banda che avanza e' riempita dalla
   stessa immagine sfocata, cosi' non resta un vuoto. Le card dei progetti
   non la usano: sono foto, e ritagliate rendono meglio. */
.card .thumb.thumb-intera{ isolation:isolate; }
.card .thumb.thumb-intera::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:var(--img, none) center / cover no-repeat;
  filter:blur(30px) saturate(.85) brightness(.9);
  z-index:-1;
  transition:transform .8s var(--ease, ease);
}
/* Il selettore e' lungo apposta: deve battere ".card .thumb img" dei CSS di
   pagina, che altrimenti vince per specificita' anche caricandosi prima. */
.card .thumb.thumb-intera img{ object-fit:contain; }

/* Lo zoom al passaggio del mouse ritaglierebbe di nuovo i bordi
   dell'immagine: si muove lo sfondo sfocato al suo posto. */
.card:hover .thumb.thumb-intera img{ transform:none; }
.card:hover .thumb.thumb-intera::before{ transform:scale(1.06); }

/* ============ TITOLI DEI SETTORI SU TELEFONI STRETTI ============
   Il titolo restava a circa 31px a ogni larghezza e condivide la riga con
   l'icona da 52px: su 360px, la misura piu' diffusa su Android,
   "Archeologia" e "Allestimenti" uscivano dalla card di una decina di
   pixel, e su 320px venivano tagliati. Sotto i 420px il titolo scala con
   lo schermo e l'icona si riduce un po'. */
@media (max-width:420px){
  .settori-grid h3{ font-size:clamp(1.35rem, 7vw, 1.95rem); gap:10px; }
  .settori-grid h3 .sector-ico{ width:42px; height:42px; flex:0 0 auto; }
}

/* ============ DETTAGLIO NEWS: IMMAGINE DI COPERTINA INTERA ============
   Stesso problema delle card: la copertina dell'articolo e' una cornice
   21:9 con "object-fit: cover", e una locandina verticale perdeva oltre
   meta' altezza. Ora si vede per intero, con la stessa immagine sfocata a
   riempire la banda. */
/* La <figure> conservava i 40px di margine laterale che il browser le da'
   di suo: il CSS di pagina impostava solo il margine superiore. Su un
   telefono la copertina si riduceva cosi' a meta' larghezza. */
.article-cover{ margin-left:0; margin-right:0; }
.article-cover.immagine-intera{ isolation:isolate; }
.article-cover.immagine-intera::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:var(--img, none) center / cover no-repeat;
  filter:blur(30px) saturate(.85) brightness(.9);
  z-index:-1;
}
.article-cover.immagine-intera img{ object-fit:contain; }

/* ============ ETICHETTA SOTTO LA FOTO ============
   L'etichetta delle card (settore o categoria) stava sopra la foto, in alto
   a sinistra. Con la foto intera ne spuntava solo un pezzo, un rettangolo
   bianco vuoto: l'immagine ha un filtro, che la fa disegnare sopra
   l'etichetta. Ora sta sotto la foto, prima della data, nel colore del suo
   settore e senza il riquadro bianco pensato per stare sull'immagine.
   Nella card in evidenza apre la colonna del testo. */
.card > .tag,
.card .body > .tag{
  position:static;
  align-self:flex-start;
  margin:16px 0 0;
  padding:0;
  background:none;
  box-shadow:none;
  border-radius:0;
}
.card .body > .tag{ margin-top:0; }
.card > .tag + .meta,
.card .body > .tag + .meta{ margin-top:6px; }