/* =====================================================================
   baroque.it — componenti aggiuntivi (pagine articolo / categoria)
   Estende design/css/style.css (stessi token in :root)
   ===================================================================== */

/* ---- contenitore articolo ---- */
.post{padding-block:0;}
.post__wrap{max-width:820px;}
.crumbs{font-family:var(--sans);font-size:12.5px;letter-spacing:.04em;color:var(--ink-soft);padding-block:22px 0;}
.crumbs a{color:var(--cerise);}
.crumbs a:hover{text-decoration:underline;}
.crumbs__sep{color:var(--gold);margin:0 8px;}

.post__head{margin:18px 0 26px;}
.post__title{
  font-family:var(--serif-display);font-weight:700;
  font-size:32px;line-height:1.12;letter-spacing:-.01em;
  color:var(--cerise);margin:0 0 16px;text-wrap:balance;   /* H1 = rosso del tema */
}
.byline{
  font-family:var(--sans);font-size:13.5px;color:var(--ink-soft);
  margin:0;padding-bottom:18px;border-bottom:1px solid var(--hairline);
}
.byline b{color:var(--ink);font-weight:600;}
.byline a{color:var(--cerise);}
.byline a:hover{text-decoration:underline;}
.byline__sep{color:var(--gold);margin:0 8px;}

/* ---- prosa: SEMPRE allineata a sinistra ---- */
.prose{font-size:19px;line-height:1.82;color:var(--ink);text-align:left;}
.prose > *:first-child{margin-top:0;}
.prose p{margin:0 0 1.25em;text-align:left;}
.prose h2,.prose h3{font-family:var(--serif-display);line-height:1.2;margin:1.6em 0 .5em;font-weight:600;}
.prose h2{font-size:24px;color:var(--azzurro);   /* H2 = azzurro del tema */
  padding-bottom:.18em;border-bottom:1px solid var(--hairline);}
.prose h3{font-size:clamp(19px,1.8vw,22px);color:var(--ink);}
.prose a{color:var(--cerise);border-bottom:1px solid var(--gold-soft);}
.prose a:hover{border-bottom-color:var(--cerise);}
.prose strong,.prose b{color:var(--ink);font-weight:700;}
.prose em,.prose i{font-style:italic;}
.prose img{margin:1.8em auto;border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:0 18px 40px -28px rgba(42,36,32,.5);}
.prose figure{margin:1.8em 0;}
.prose figcaption{font-family:var(--sans);font-size:13px;color:var(--ink-soft);text-align:center;margin-top:8px;}
.prose blockquote{border-left:3px solid var(--gold);margin:1.6em 0;padding:.2em 0 .2em 1.3em;font-style:italic;color:var(--ink-soft);}
.prose ul,.prose ol{margin:0 0 1.25em;padding-left:1.4em;}
.prose li{margin:.35em 0;}
/* capolettera */
.prose > p:first-of-type::first-letter{
  font-family:var(--serif-display);font-weight:700;font-size:4.2em;line-height:.78;
  float:left;color:var(--cerise);padding:.04em .12em 0 0;
}
/* segnaposto immagine inline (img mancante sostituita via JS) */
.prose .ph{aspect-ratio:3/2;margin:1.8em 0;border:1px solid var(--hairline);}

/* immagini card uniformi 3:2 (ritaglio), come i placeholder */
.card__media img{aspect-ratio:3/2;width:100%;height:auto;object-fit:cover;display:block;}

/* ---- FAQ ---- */
.faq{padding-top:8px;}
.faq__item{border-bottom:1px solid var(--hairline);}
.faq__q{
  font-family:var(--serif-display);font-size:21px;font-weight:600;color:var(--ink);
  cursor:pointer;padding:18px 36px 18px 0;position:relative;list-style:none;
}
.faq__q::-webkit-details-marker{display:none;}
.faq__q::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-family:var(--sans);font-size:24px;color:var(--cerise);line-height:1;}
.faq__item[open] .faq__q::after{content:"–";}
.faq__a{font-size:16.5px;line-height:1.7;color:var(--ink-soft);padding:0 0 20px;max-width:80ch;}
.faq__a p{margin:0 0 .8em;}

@media (max-width:760px){
  /* su schermo stretto 17.5px davano ~36 caratteri per riga (troppo pochi: la
     riga ideale ne tiene 45-75), quindi corpo e titoli interni scalano. */
  .prose{font-size:16px;line-height:1.72;
    /* sotto i 760px la colonna e' a tutta larghezza: senza un tetto, su tablet
       la riga arriva a ~90 caratteri (si perde il segno andando a capo)
       (l'unita' ch non va bene: lo zero di questo serif e' largo, 64ch valgono
       ~88 caratteri veri) */
    max-width:32em;}
  .prose h2{font-size:21px;}
  .prose h3{font-size:18px;}
  .prose > p:first-of-type::first-letter{font-size:3.6em;}
  .post__wrap{max-width:none;}
}
@media (max-width:420px){
  .prose{font-size:15.5px;}
}

/* ---- sfondo più chiaro (miglior contrasto in lettura) ---- */
body{background:#FFFFFF;}
.band{background:#FAF6EF;}   /* leggero stacco per le sezioni a fascia */

/* ---- paginazione ---- */
.sechead__page{font-family:var(--sans);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap;}
.pager{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:40px;font-family:var(--sans);}
.pager__nav{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--cerise);padding:8px 14px;border:1px solid var(--hairline);border-radius:var(--radius);}
.pager__nav:hover{background:var(--cerise);color:#fff;border-color:var(--cerise);}
.pager__nav.is-disabled{color:#c9c0b2;border-color:var(--hairline-2);pointer-events:none;}
.pager__pages{display:flex;gap:4px;flex-wrap:wrap;}
.pager__n{min-width:34px;text-align:center;padding:7px 8px;font-size:13.5px;color:var(--ink);border:1px solid var(--hairline);border-radius:var(--radius);}
.pager__n:hover{border-color:var(--cerise);color:var(--cerise);}
.pager__n.is-current{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:600;}

/* ---- sotto-navigazione di sezione: sidebar sticky di articoli (desktop) ---- */
.post__wrap--split{max-width:1080px;display:grid;grid-template-columns:1fr 260px;gap:44px;align-items:start;}
.post__wrap--split .post__main{min-width:0;}

.secnav{position:sticky;top:260px;}
.secnav__eyebrow{display:block;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--label);margin-bottom:6px;}
.secnav__card{display:grid;grid-template-columns:72px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--hairline);}
.secnav__card:last-child{border-bottom:0;padding-bottom:0;}
.secnav__media{aspect-ratio:1/1;overflow:hidden;border:1px solid var(--hairline);}
.secnav__media img{width:100%;height:100%;object-fit:cover;display:block;}
.secnav__media .ph{aspect-ratio:1/1;display:grid;place-items:center;}
.secnav__media .ph::before{inset:6px;}
.secnav__media .ph__glyph{font-size:18px;}
.secnav__cat{display:block;font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--cerise);
  /* accanto alla miniatura restano ~176px: l'etichetta sta su una riga sola,
     altrimenti "La politica in epoca barocca" ne occupa tre. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.secnav__title{font-family:var(--serif-display);font-size:15px;font-weight:600;line-height:1.28;margin:4px 0 0;color:var(--ink);transition:color .15s;}
.secnav__card:hover .secnav__title{color:var(--cerise);}

/* ---- sotto-navigazione di sezione: pillole (mobile + fine pagina) ---- */
.secpills{padding-block:clamp(32px,4vw,48px);border-top:1px solid var(--hairline);}
.secpills__row{display:flex;flex-wrap:wrap;gap:10px;}
.pill{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--ink);padding:9px 18px;border:1px solid var(--hairline);border-radius:999px;transition:all .15s;}
.pill:hover{border-color:var(--cerise);color:var(--cerise);}
.pill.is-current{background:var(--cerise);border-color:var(--cerise);color:#fff;}

@media (max-width:760px){
  .post__wrap--split{grid-template-columns:1fr;}
  .secnav{display:none;}
}

/* ---- "carica altri": griglie oltre i 12 articoli restano nascoste finché non si clicca ---- */
/* card oltre il primo blocco: nascoste solo se il JS puo' rivelarle scorrendo */
.js .card.is-extra{display:none;}
.more-wrap{display:flex;justify-content:center;margin-top:36px;}
.btn-more{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cerise);background:transparent;border:1px solid var(--cerise);border-radius:999px;
  padding:13px 30px;cursor:pointer;transition:background .15s,color .15s;}
.btn-more:hover{background:var(--cerise);color:#fff;}
.btn-more__n{color:var(--gold);font-weight:400;}
.btn-more:hover .btn-more__n{color:#fff;}

/* ---- teaser (landing di categoria): intro tagliata + dissolvenza + "Leggi l'intero
   articolo", cosi' le card della sezione restano a portata di scroll. Il taglio si
   applica solo con JS attivo (altrimenti il testo resterebbe irraggiungibile). ---- */
.teaser__fade{display:none;}
.teaser__more{display:none;}
.js .prose--teaser{max-height:340px;overflow:hidden;position:relative;}
/* nell'anteprima si mostra solo il testo: alcune landing si aprono con
   un'immagine dentro il primo paragrafo e riempivano da sola tutti i 340px,
   lasciando l'anteprima senza una parola. Immagini e didascalie ricompaiono
   con "Leggi l'intero articolo". */
.js .prose--teaser:not(.is-expanded) img,
.js .prose--teaser:not(.is-expanded) figure,
.js .prose--teaser:not(.is-expanded) .ph{display:none;}
.js .prose--teaser.is-expanded{max-height:none;overflow:visible;}
.js .teaser__fade{display:block;position:absolute;left:0;right:0;bottom:0;height:72px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 78%);pointer-events:none;}
.js .prose--teaser.is-expanded .teaser__fade{display:none;}
.js .teaser__more{display:inline-block;margin:14px 0 26px;padding:12px 28px;font-family:var(--sans);
  font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cerise);
  background:transparent;border:1px solid var(--cerise);border-radius:999px;cursor:pointer;
  transition:background .15s,color .15s;}
.js .teaser__more:hover{background:var(--cerise);color:#fff;}
.js .teaser__more.is-hidden{display:none;}
@media (max-width:760px){
  .js .prose--teaser{max-height:232px;}
  .js .teaser__more{display:block;width:100%;margin:16px 0 32px;padding:13px;
    background:var(--ivory);border-color:var(--hairline);border-radius:var(--radius);}
  .js .teaser__more.is-hidden{display:none;}
}

/* ================= sezione MEDIA (glossario, video, fumetti) ================= */

/* -- glossario: indice per iniziale + voci -- */
.gloss__index{display:flex;flex-wrap:wrap;gap:6px;margin:26px 0 34px;padding-bottom:18px;
  border-bottom:1px solid var(--hairline);}
.gloss__letter{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;
  font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--cerise);
  border:1px solid var(--hairline);border-radius:999px;text-decoration:none;transition:background .15s,color .15s;}
.gloss__letter:hover{background:var(--cerise);color:#fff;border-color:var(--cerise);}
.gloss{margin:0 0 44px;}
.gloss__item{padding:22px 0;border-bottom:1px solid var(--hairline-2);scroll-margin-top:90px;}
.gloss__term{font-family:var(--serif,Georgia,serif);font-size:22px;color:var(--cerise);margin:0 0 8px;}
.gloss__def{margin:0;font-size:17px;line-height:1.7;color:var(--ink);}
.gloss__def p{margin:0 0 10px;}
.gloss__def p:last-child{margin-bottom:0;}

/* -- video: anteprima statica, YouTube parte solo al click -- */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:30px;margin:30px 0 16px;}
.vcard{margin:0;}
.vcard__play{display:block;position:relative;width:100%;padding:0;border:0;background:#000;
  cursor:pointer;border-radius:var(--radius);overflow:hidden;line-height:0;}
.vcard__thumb{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
  transition:opacity .2s,transform .3s;}
.vcard__play:hover .vcard__thumb{opacity:.82;transform:scale(1.02);}
.vcard__btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:34px;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.55);pointer-events:none;}
.vcard__frame{width:100%;aspect-ratio:16/9;border:0;display:block;border-radius:var(--radius);}
.vcard__cap{padding:12px 2px 0;}
.vcard__title{font-family:var(--serif,Georgia,serif);font-size:19px;line-height:1.3;margin:0 0 4px;color:var(--ink);}
.vcard__note{margin:0;font-family:var(--sans);font-size:13.5px;color:#6b6259;white-space:pre-line;}
.vgrid__note{font-family:var(--sans);font-size:13px;color:#6b6259;margin:0 0 40px;}

/* -- fumetti: tavole in colonna + navigazione episodi -- */
.epnav{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:24px 0 30px;}
.epnav__n{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;
  font-family:var(--sans);font-size:13px;font-weight:700;color:var(--cerise);text-decoration:none;
  border:1px solid var(--hairline);border-radius:999px;transition:background .15s,color .15s;}
.epnav__n:hover{background:var(--cerise);color:#fff;border-color:var(--cerise);}
.epnav__n.is-current{background:var(--cerise);color:#fff;border-color:var(--cerise);}
.tavole{display:flex;flex-direction:column;gap:18px;margin:0 0 14px;}
.tavola{display:block;line-height:0;background:var(--ivory);border:1px solid var(--hairline);
  border-radius:var(--radius);overflow:hidden;}
.tavola img{width:100%;height:auto;display:block;}
.tavole__note{font-family:var(--sans);font-size:13px;color:#6b6259;margin:0 0 30px;}
.eppager{display:flex;justify-content:space-between;gap:16px;margin:0 0 46px;
  padding-top:22px;border-top:1px solid var(--hairline);font-family:var(--sans);font-size:13.5px;}
.eppager a{color:var(--cerise);text-decoration:none;font-weight:700;}
.eppager a:hover{text-decoration:underline;}

/* ============ card senza immagine: scheda tipografica (alternativa A) ============
   ~170 articoli su 1251 non hanno nessuna immagine (nemmeno sul sito live).
   Invece di un riquadro vuoto col fregio, la card perde il riquadro e usa lo
   spazio per il testo: filetto, titolo piu' grande, anteprima piu' lunga. */
.card--text{border-top:3px solid var(--cerise);padding-top:16px;}
.card__cat2{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cerise);}
.card--text .card__title{font-size:26px;margin:10px 0 10px;}
.card--text .card__excerpt{-webkit-line-clamp:7;}
@media (max-width:760px){
  .card--text .card__title{font-size:23px;}
  .card--text .card__excerpt{-webkit-line-clamp:5;}
}

/* stessa logica nella colonna "Da leggere": niente miniatura vuota. Serve pero'
   annullare la colonna da 72px della griglia, altrimenti il testo resta
   incastrato nello spazio dove sarebbe stata la miniatura. */
.secnav__card--text{grid-template-columns:1fr;border-left:2px solid var(--cerise);
  padding-left:12px;}
.secnav__card--text .secnav__title{font-size:16px;margin-top:3px;}

/* ============ ricerca client-side (/Ricerca.html) e pagina 404 ============
   L'indice sta in assets/search-index.json (una voce per pagina, generata da
   generator/publish.py). Nessuna chiamata esterna: il filtro e' tutto in pagina. */
.sitesearch{margin:8px 0 4px;max-width:34em;}
.sitesearch__label{display:block;font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cerise);margin-bottom:8px;}
.sitesearch__input{width:100%;font-family:var(--serif-body);font-size:21px;
  padding:14px 16px;color:var(--ink);background:#fff;
  border:1px solid var(--hairline);border-bottom:2px solid var(--cerise);border-radius:3px;}
.sitesearch__input:focus{outline:none;border-color:var(--azzurro);
  border-bottom-color:var(--cerise);box-shadow:0 0 0 3px rgba(94,162,208,.18);}
.sitesearch__status{font-family:var(--sans);font-size:13px;color:#6b6560;
  margin:18px 0 4px;padding-bottom:14px;border-bottom:1px solid var(--hairline);}

.sitesearch__results{list-style:none;margin:0;padding:0;max-width:44em;}
.sitesearch__hit{padding:20px 0;border-bottom:1px solid var(--hairline);}
.sitesearch__cat{display:block;font-family:var(--sans);font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cerise);margin-bottom:6px;}
.sitesearch__link{font-family:var(--serif-display);font-size:22px;line-height:1.3;
  color:var(--ink);text-decoration:none;}
.sitesearch__link:hover{color:var(--cerise);}
.sitesearch__excerpt{margin:6px 0 0;font-size:15px;line-height:1.6;color:#57514c;}
@media (max-width:760px){
  .sitesearch__input{font-size:18px;}
  .sitesearch__link{font-size:19px;}
}

/* 404 */
.err__code{font-family:var(--serif-display);font-size:88px;line-height:1;
  color:var(--cerise);margin:0 0 4px;opacity:.85;}
@media (max-width:760px){ .err__code{font-size:64px;} }

/* ============ caratteri di sistema (niente Google Fonts) ============
   Ridefiniti QUI e non in design/css/style.css, che e' il bozzetto del cliente
   e non va toccato: extra.css viene caricato dopo, quindi questi token vincono.

   - display: Palatino e le sue parenti sono umanistiche e calligrafiche, molto
     piu' vicine allo spirito del sito di quanto lo sia Georgia; Georgia resta
     come rete di sicurezza.
   - corpo: Georgia e' disegnata apposta per lo schermo ed e' ovunque.
   - etichette: lo stack di sistema, cioe' il carattere dell'interfaccia del
     dispositivo (Segoe UI su Windows, San Francisco su Mac, Roboto su Android).
   Costo di caricamento: zero byte, zero richieste, nessun testo invisibile
   durante il caricamento. */
:root{
  --serif-display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",
                  "URW Palladio L",Georgia,"Times New Roman",serif;
  --serif-body:Georgia,"Iowan Old Style","Times New Roman",Times,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* Con width/height sugli <img> (vedi scraper/image_sizes.py) il browser conosce
   le proporzioni e riserva lo spazio prima ancora di scaricare l'immagine: la
   pagina non "salta" mentre carica. Perche' funzioni serve pero' height:auto,
   altrimenti l'altezza dell'attributo verrebbe presa alla lettera e le immagini
   ridotte da max-width risulterebbero schiacciate. */
img{height:auto;}

/* Il campo di ricerca dell'intestazione era un <label> decorativo del bozzetto:
   ora e' un <form> che porta a /Ricerca.html. La lente diventa il pulsante di
   invio e deve restare identica a prima (in style.css e' uno <svg> dentro
   .search, qui si azzera l'aspetto da bottone). */
.search__go{
  background:none;border:0;padding:0;margin:0;display:flex;align-items:center;
  cursor:pointer;color:inherit;line-height:0;flex:none;
}
.search__go:hover svg{color:var(--cerise-deep);}
.search:focus-within{border-color:var(--cerise);}

/* Video riportati dentro il testo degli articoli: nel database erano shortcode
   {youtube}ID{/youtube}, l'identificativo era li' e il video si e' potuto
   ricostruire. Come nelle pagine media, si carica solo al click. */
.prose .vcard--inline{margin:1.9em auto;max-width:620px;}

/* ============ gallerie recuperate (ex [widgetkit id=NN]) ============
   Il contenuto stava nei plugin Joomla: elenco e ordine sono stati ripresi dalle
   pagine archiviate, i file sono gli originali gia' presenti sul server.
   Le miniature sono link all'immagine intera: senza JavaScript si apre il file,
   con JavaScript si apre la lente in sovrimpressione (vedi site.js). */
.wkgal{display:grid;gap:12px;margin:2em 0;padding:0;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}
.wkgal__item{display:block;position:relative;overflow:hidden;border-radius:var(--radius);
  border:1px solid var(--hairline);background:var(--ivory);text-decoration:none;}
.wkgal__item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .45s cubic-bezier(.2,.7,.2,1);}
.wkgal__item:hover img{transform:scale(1.05);}
.wkgal__cap{display:block;font-family:var(--sans);font-size:11.5px;line-height:1.35;
  color:var(--ink);padding:8px 10px 10px;}
.wkgal__item:hover .wkgal__cap{color:var(--cerise);}
@media (max-width:520px){
  .wkgal{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:9px;}
  .wkgal__cap{font-size:10.5px;}
}

/* lente: immagine intera sopra la pagina */
.lente{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;
  justify-content:center;background:rgba(10,20,27,.94);padding:24px;}
.lente img{max-width:100%;max-height:82vh;width:auto;object-fit:contain;
  border-radius:var(--radius);box-shadow:0 30px 80px -30px #000;}
.lente__cap{position:absolute;left:0;right:0;bottom:18px;text-align:center;
  font-family:var(--sans);font-size:13px;color:#f2ece2;padding:0 60px;}
.lente__x,.lente__nav{position:absolute;background:none;border:0;color:#f2ece2;
  font-size:34px;line-height:1;cursor:pointer;padding:10px 16px;}
.lente__x{top:10px;right:14px;font-size:28px;}
.lente__nav--prev{left:6px;top:50%;transform:translateY(-50%);}
.lente__nav--next{right:6px;top:50%;transform:translateY(-50%);}
.lente__x:hover,.lente__nav:hover{color:var(--cerise);}