/* ============================================================================
   notizie.css — l'elenco delle notizie e l'articolo. Si carica dopo base.css
   ============================================================================ */

/* --- le pastiglie delle categorie ---
   Le stesse dell'elenco calzolerie, ma riscritte qui: quel foglio non si
   carica su queste pagine, e una regola che sta altrove e' una regola che
   un giorno sparisce senza che nessuno capisca perche'. */
.ricerca{background:var(--nebbia);border-bottom:1px solid var(--filo);padding:1.2rem 0}
.regioni{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.regioni a.zona{font-size:.84rem;padding:.4rem .95rem;border-radius:100px;
  border:1px solid var(--filo);background:#fff;color:var(--grigio);
  transition:border-color .15s,color .15s}
.regioni a.zona:hover{border-color:var(--verde);color:var(--ink)}
.regioni a.zona.attiva{background:var(--ink);color:#fff;border-color:var(--ink)}
.regioni a.zona small{opacity:.7;font-size:.78rem}
.conteggio{font-size:.9rem;color:var(--grigio);margin-bottom:1.4rem}
.elenco{padding:2.4rem 0 4rem}

/* ---------------------------------------------------------------- elenco -- */
.notizie{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.notizia{display:flex;flex-direction:column;background:#fff;border:1px solid var(--filo);
  border-radius:var(--r);overflow:hidden;transition:border-color .15s,transform .15s}
.notizia:hover{border-color:var(--verde);transform:translateY(-2px)}

.notizia .senza-foto{display:block;width:100%;height:100%;
  background:#fff url(/media/sito/foto-da-inserire.svg) center/contain no-repeat;opacity:.35}
.notizia .testo{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1;
  background:var(--nebbia);border-top:1px solid var(--filo)}
.notizia time{font-size:.78rem;color:var(--grigio);text-transform:uppercase;letter-spacing:.06em}
.notizia h2{font-family:var(--display);font-weight:600;font-size:1.12rem;letter-spacing:-.02em;
  line-height:1.3;margin:0}
.notizia p{font-size:.92rem;color:var(--grigio);line-height:1.6;margin:0}
.notizia .filo{margin-top:auto;padding-top:.5rem;font-size:.88rem;font-weight:500;
  color:var(--ink);border-bottom:none}
.notizia .filo::after{content:" →";color:var(--verde)}

/* -------------------------------------------------------------- articolo -- */
.capo-notizia .sfondo img{filter:grayscale(20%) brightness(.55)}
.capo-notizia h1{max-width:20ch}

.articolo{padding:2.6rem 0 4rem;background:var(--nebbia)}
/* l'articolo e' largo quanto la testa e il resto del sito (.dentro): niente
   colonna piu' stretta «per leggere meglio» — regola di Simone, 24 ottobre 2026 */
.corpo{background:#fff;border:1px solid var(--filo);border-radius:var(--r);padding:2.2rem 2.4rem}
.corpo p{font-size:1.04rem;line-height:1.75;margin:0 0 1.1rem}
.corpo h2{font-family:var(--display);font-weight:600;font-size:1.4rem;letter-spacing:-.02em;
  margin:2rem 0 .8rem}
.corpo h3{font-family:var(--display);font-weight:600;font-size:1.15rem;margin:1.6rem 0 .6rem}
/* Gli elenchi rientrano rispetto al testo: 1,5 cm sul computer, molto meno
   sul telefono — la stessa misura della Newsletter (deciso da Simone il
   5 ottobre 2026). Il pallino e il numero cominciano a quella distanza dal
   margine del testo. La misura sta qui sola, in --rientro. */
.corpo{--rientro:1.5cm}
.corpo ul{margin:0 0 1.2rem;padding-left:calc(var(--rientro) + 1.1rem)}
.corpo ol{margin:0 0 1.2rem;padding-left:calc(var(--rientro) + 2.1rem)}
.corpo li{margin-bottom:.4rem;line-height:1.7}
/* I collegamenti dentro il testo: arancioni e sottolineati. La regola sta in
   base.css, una volta sola, e vale per ogni testo scritto con la barra. */

/* I colori del testo: la tavolozza fissa della redazione (COLORI_TESTO, in
   gutenberg.php). Le tinte stanno qui, in un posto solo: cambiarne una la
   cambia in tutti gli articoli. Sono scelte perche' sul bianco si leggano —
   il verde e l'oro del sito, cosi' come sono, a corpo di testo no. */
.colore-verde{color:#007337}
.colore-oro{color:#96700F}
.colore-rosso{color:#C8171A}
.colore-blu{color:#1F4FBF}
/* un collegamento dentro un testo colorato resta un collegamento */
.corpo [class^="colore-"] a{color:var(--collegamento)}
.corpo img{max-width:100%;height:auto;border-radius:10px;display:block;margin:1.4rem auto}
/* Rete di sicurezza: qualunque cosa arrivi dall'archivio — un'immagine con
   la larghezza scritta dentro, una tabella, un riquadro incorporato — non
   puo' uscire dalla colonna. Gli articoli hanno dieci anni e si portano
   dietro di tutto: meglio una regola in piu' che una pagina che sborda. */
.corpo{overflow-wrap:anywhere}
.corpo img,.corpo iframe,.corpo video,.corpo embed,.corpo object{
  max-width:100%!important;width:auto!important;height:auto}
.corpo figure{max-width:100%;margin:1.6rem 0}
.corpo table{display:block;overflow-x:auto;max-width:100%}
.corpo pre{overflow-x:auto;max-width:100%}
.corpo figure.video iframe{width:100%!important;height:100%!important}
.corpo figure{margin:1.6rem 0}
.corpo figcaption{font-size:.86rem;color:var(--grigio);text-align:center;margin-top:.5rem}
.corpo blockquote{margin:1.6rem 0;padding:.2rem 0 .2rem 1.2rem;border-left:3px solid var(--verde);
  color:var(--grigio);font-style:italic}
.corpo hr{border:none;border-top:1px solid var(--filo);margin:2rem 0}
.corpo table{width:100%;border-collapse:collapse;font-size:.92rem;margin:1.4rem 0}
.corpo th,.corpo td{border:1px solid var(--filo);padding:.5rem .7rem;text-align:left}
.corpo th{background:var(--nebbia);font-weight:600}
.corpo figure.video{position:relative;aspect-ratio:16/9;margin:1.6rem 0}
.corpo figure.video iframe{position:absolute;inset:0;width:100%;height:100%;border:none;border-radius:10px}

.etichette{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.4rem}
.etichette .zona{font-size:.82rem;padding:.35rem .85rem;border-radius:100px;
  border:1px solid var(--filo);background:#fff;color:var(--grigio)}
.etichette .zona:hover{border-color:var(--verde);color:var(--ink)}

.vicine{display:flex;gap:1rem;margin-top:1.8rem}
.vicina{flex:1;background:#fff;border:1px solid var(--filo);border-radius:var(--r);
  padding:1rem 1.2rem;display:block;transition:border-color .15s}
.vicina:hover{border-color:var(--verde)}
.vicina span{display:block;font-size:.78rem;color:var(--grigio);margin-bottom:.25rem}
.vicina b{font-family:var(--display);font-weight:600;font-size:.98rem;letter-spacing:-.015em;
  line-height:1.35;display:block}
.vicina.destra{text-align:right}
.torna{margin-top:1.8rem;text-align:center}

@media(max-width:700px){
  .articolo{padding:1.6rem 0 2.6rem}
  .corpo{padding:1.3rem 1.3rem;--rientro:.4cm}
  .corpo p{font-size:1rem}
  .corpo h2{font-size:1.22rem}
  .notizie{grid-template-columns:1fr;gap:1.1rem}
  .vicine{flex-direction:column}
  .vicina.destra{text-align:left}
}

/* --- l'avanzamento fra le pagine: lo stesso dell'elenco calzolerie ------
   Quelle regole stanno in elenco.css, che qui non si carica. Riscriverle
   e' meglio che caricare un foglio intero per una riga di pastiglie. */
.pagine{display:flex;gap:.4rem;justify-content:center;margin-top:2.4rem;flex-wrap:wrap}
.pagine a,.pagine span{display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--filo);background:#fff;color:var(--grigio);font:500 .9rem var(--testo);
  min-width:42px;height:42px;border-radius:100px;padding:0 .4rem;
  transition:border-color .15s,color .15s}
.pagine a:hover{border-color:var(--verde);color:var(--ink)}
.pagine .qui{background:var(--ink);color:#fff;border-color:var(--ink)}
.pagine .freccia{padding:0 1.1rem}
.pagine .spento{opacity:.35}

/* --- le fotografie -------------------------------------------------------
   Il riquadro ha una forma fissa, l'immagine ci entra INTERA invece di
   riempirlo tagliando. Riempire va bene per le fotografie, dove perdere i
   bordi non cambia niente; qui pero' quasi tutte sono locandine e copertine,
   e tagliarle vuol dire mangiare il titolo — «CalzITA LAB» diventava
   «ZITA-LA». Meglio un po' di fondo attorno che una scritta a meta'. */
.notizia .figura{display:flex;align-items:center;justify-content:center;
  aspect-ratio:16/9;min-height:170px;background:#fff;overflow:hidden;padding:.6rem}
.notizia .figura img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block}

@media(max-width:1000px){.notizie{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.notizie{grid-template-columns:1fr}}

/* --- le parole chiave in fondo all'articolo ---
   Non sono collegamenti: non hanno una pagina propria e non devono sembrare
   cliccabili. Servono a far capire l'argomento a colpo d'occhio. */
.parole-articolo{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:1.4rem;
  padding-top:1rem;border-top:1px solid var(--filo)}
.parole-articolo > span:first-child{font-size:.78rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--grigio);margin-right:.2rem}
.parole-articolo .parola{background:var(--nebbia);border-radius:100px;padding:.25rem .75rem;
  font-size:.84rem;color:var(--grigio)}

/* --- il pulsante fisso che riporta all'inizio dell'articolo ---------------
   Lo stesso della Newsletter (li' riporta al sommario): in basso a destra,
   arancione, sempre sullo schermo mentre si legge. Qui un sommario non c'e',
   quindi e' solo la freccia in un tondo, sul computer come sul telefono.
   Quando compare lo decide torna-sommario.js. */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* «inizio» e' la testa dell'articolo: ci si arriva con la testata fissa sopra,
   non con il titolo nascosto dietro */
.capo-notizia{scroll-margin-top:90px}
/* la freccia fissa che riporta su (.torna-su) sta in base.css: la usa anche la home */

/* il video fermo: un riquadro neutro, parte solo al tocco (nessun terzo prima) */
.corpo figure.video-fermo{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.8rem;background:var(--ink,#12143A);border-radius:10px;padding:1rem;text-align:center}
.corpo figure.video-fermo .guarda-video{display:inline-flex;align-items:center;gap:.6rem;
  background:#E8830A;color:#fff;text-decoration:none;font:600 1rem var(--display);
  padding:.8rem 1.5rem;border-radius:100px}
.corpo figure.video-fermo .guarda-video:hover{background:#C46E00;color:#fff}
.corpo figure.video-fermo .guarda-video::before{content:"";border-style:solid;
  border-width:.42em 0 .42em .7em;border-color:transparent transparent transparent #fff}
.corpo figure.video-fermo small{color:#C9CCE0;font-size:.82rem;line-height:1.4;max-width:26rem}

/* --- la barra di ricerca del Blognews: lo stesso campo della ricerca delle
   calzolerie (elenco.css), che questa pagina non carica --- */
.cerca-notizie{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.cerca-notizie .campo{flex:1;min-width:200px;max-width:34rem;display:flex;align-items:center;gap:.6rem;background:#fff;
  border:1px solid var(--filo);border-radius:100px;padding:0 1.1rem;height:48px}
.cerca-notizie .campo:focus-within{border-color:var(--verde)}
.cerca-notizie .campo input{border:none;outline:none;background:transparent;font:1rem var(--testo);color:var(--ink);width:100%;min-width:0}
.cerca-notizie .campo svg{flex:none;opacity:.45}
.cerca-notizie .filo{font-size:.9rem}
.cerca-notizie + .regioni{margin-top:1rem}
@media(max-width:640px){
  .cerca-notizie .campo{flex:1 1 100%;max-width:none;height:44px}
  .cerca-notizie .bottone{flex:1;height:44px}
}

/* la (i) della ricerca sta in base.css: la usano il Blognews e le Calzolerie */
.cerca-notizie{position:relative}
@media(max-width:640px){.cerca-notizie .bottone{flex:1}}

/* il menu dell'anno di pubblicazione, accanto alla barra */
.cerca-notizie .campo.anno{flex:0 0 auto;min-width:0;width:11.5rem;padding:0 .9rem}
.cerca-notizie .campo.anno select{border:none;outline:none;background:transparent;font:1rem var(--testo);color:var(--ink);width:100%;cursor:pointer}
@media(max-width:640px){.cerca-notizie .campo.anno{flex:1 1 100%;width:auto}}

/* --- immagini e allineamento dentro gli articoli (22 ottobre 2026) ---
   <figure class="foto-sinistra|foto-destra"> e class="testo-centro|testo-destra"
   su paragrafi, titoli e citazioni, scritti da testo_in_html(). Sul telefono
   le immagini sono sempre a tutta larghezza. */
.corpo{display:flow-root}
.corpo figure.foto-sinistra{float:left;width:46%;margin:.35rem 1.6rem 1rem 0}
.corpo figure.foto-destra{float:right;width:46%;margin:.35rem 0 1rem 1.6rem}
.corpo figure.foto-sinistra img,.corpo figure.foto-destra img{margin:0}
.corpo figure.foto-sinistra figcaption,.corpo figure.foto-destra figcaption{text-align:left}
.corpo h2,.corpo h3,.corpo hr,.corpo blockquote{clear:both}
.corpo .testo-centro{text-align:center}
.corpo .testo-destra{text-align:right}
@media(max-width:640px){
  .corpo figure.foto-sinistra,.corpo figure.foto-destra{float:none;width:auto;margin:1.4rem 0}
  .corpo figure.foto-sinistra figcaption,.corpo figure.foto-destra figcaption{text-align:center}
}

/* ============================================================================
   FIRMA, SINTESI, ARTICOLI RISERVATI (12 novembre 2026)
   Valgono sul sito e nell'anteprima della redazione, che carica questo foglio.
   ============================================================================ */

/* «In sintesi»: il riquadro sopra il testo */
.in-sintesi{background:#fff;border:1px solid var(--filo);border-left:4px solid var(--verde);
  border-radius:var(--r);padding:1.3rem 1.6rem 1.2rem;margin:0 0 1.4rem}
.in-sintesi > b{display:block;font:600 .78rem var(--testo);text-transform:uppercase;letter-spacing:.08em;
  color:var(--verde);margin-bottom:.55rem}
.in-sintesi p{font-size:1.04rem;line-height:1.7;margin:0 0 .7rem;color:var(--ink)}
.in-sintesi p:last-child{margin-bottom:0}

/* la firma, in fondo al testo: come nella Newsletter */
.firma{display:flex;align-items:center;gap:.65rem;margin-top:1.8rem;padding-top:1.1rem;
  border-top:1px solid var(--filo);font-size:.95rem;color:var(--grigio);clear:both}
.firma .pallino{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:2.3rem;height:2.3rem;border-radius:50%;background:var(--ink);color:#fff;
  font:600 .82rem var(--display);letter-spacing:.02em}

/* l'articolo riservato, a chi non è entrato */
.riservato{background:#fff;border:1px solid var(--filo);border-radius:var(--r);
  padding:2.2rem 2.4rem;text-align:center}
.riservato-segno{display:inline-flex;align-items:center;justify-content:center;width:3.2rem;height:3.2rem;
  border-radius:50%;background:var(--nebbia);color:var(--ink);margin-bottom:.8rem}
.riservato h2{font-family:var(--display);font-weight:600;font-size:1.35rem;letter-spacing:-.02em;margin:0 0 .6rem}
.riservato p{color:var(--grigio);line-height:1.65;max-width:38rem;margin:0 auto 1.3rem}
.riservato-azioni{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.riservato .firma{justify-content:center;text-align:left}
/* a chi è entrato: una riga che spiega perché lo legge */
.riservato-nota{font-size:.88rem;color:var(--grigio);margin:0 0 .9rem}
/* nell'elenco delle Blognews */
.riservato-etichetta{align-self:flex-start;font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink);background:#fff;border:1px solid var(--filo);border-radius:100px;padding:.18rem .65rem}

@media(max-width:700px){
  .in-sintesi{padding:1.1rem 1.15rem}
  .in-sintesi p{font-size:1rem}
  .riservato{padding:1.6rem 1.2rem}
  .riservato-azioni .bottone{flex:1 1 100%}
}

/* la sintesi con l'immagine: a chi non può leggere un articolo riservato */
.in-sintesi.con-foto{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:1.4rem;align-items:start}
.in-sintesi-foto{margin:0}
.in-sintesi-foto img{display:block;width:100%;height:auto;border-radius:10px}
.in-sintesi-testo > b{display:block;font:600 .78rem var(--testo);text-transform:uppercase;letter-spacing:.08em;
  color:var(--verde);margin-bottom:.55rem}
@media(max-width:700px){.in-sintesi.con-foto{grid-template-columns:1fr}}

/* --- la barra dell'anteprima della redazione (12 novembre 2026) ---
   Compare solo in redazione-articoli.php?p=guarda: in fondo allo schermo,
   sempre visibile, perché nessuno scambi l'anteprima per la pagina vera. */
.anteprima-barra{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;flex-wrap:wrap;align-items:center;
  gap:.5rem 1.2rem;padding:.75rem 1.4rem;background:#E8830A;color:#fff;font-size:.9rem;
  box-shadow:0 -4px 18px rgba(18,20,58,.18)}
.anteprima-barra b{font-family:var(--display);font-weight:600}
.anteprima-barra a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.anteprima-barra .anteprima-come a{margin-left:.5rem;opacity:.85}
.anteprima-barra .anteprima-come a.qui{opacity:1;font-weight:700;text-decoration:none;border-bottom:2px solid #fff}
.anteprima-barra .anteprima-torna{margin-left:auto;background:#fff;color:#C46E00;text-decoration:none;
  font-weight:600;padding:.4rem .9rem;border-radius:100px}
body:has(.anteprima-barra){padding-bottom:4.5rem}
@media(max-width:700px){.anteprima-barra .anteprima-torna{margin-left:0}}