/* ============================================================
   APPROFONDIMENTI — aggiunte al sistema della home
   Regole: BRIEF-APPROFONDIMENTI.md §3, §5, §6 · geometrie:
   riferimento-visivo\19-le-due-pagine.html (blocco finale, verbatim).
   Niente qui sovrascrive la home: stile.css resta la copia esatta
   di sito\stile.css e si aggiorna ricopiandolo sopra.
   ============================================================ */

:root{ --rc:0 5px 18px 5px; }   /* raccordo dei comandi di interfaccia */

/* forma interna dei box — NON esiste nella home, calcolata per lo
   scarto perpendicolare (§3.1 del brief): NON si ricava rimpicciolendo
   la forma esterna in proporzione. Copiata ESATTAMENTE dal riferimento. */
.shape-el-in{border-radius:0 8.5px 54.5px 8.5px;
  clip-path:polygon(90.7px 0,100% 0,100% 100%,0 100%,0 25.6px,
                    .8px 22.1px,3.5px 19.2px,83.2px 2.4px,86.2px 1px)}
.shape-el-in-forte{border-radius:0 7.5px 53.5px 7.5px;
  clip-path:polygon(89.8px 0,100% 0,100% 100%,0 100%,0 25.4px,
                    .8px 21.9px,3.5px 19px,82.3px 2.4px,85.3px 1px)}

/* ---------- occhiello con filetto ---------- */
.eb-f{padding-left:15px;position:relative}
.eb-f::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:var(--blu)}

/* ---------- INDICE · testata ed elenco ----------
   Dal 15/09 (LAVORO-GROSSO.md fase 8): il titolo e, sotto, i collegamenti
   agli articoli. Le schede con foto, occhiello, anteprima e data sono
   uscite con l'HTML che le portava. */
.ap-testata{text-align:center}
.ap-testata h1{font-family:Newsreader,serif;font-weight:500;font-size:52px;line-height:1.10;
               letter-spacing:-.02em;margin:0;color:var(--antracite)}
.ap-elenco{list-style:none;margin:40px auto 0;padding:0;max-width:74ch;text-align:center}
.ap-elenco li+li{margin-top:14px}
.ap-elenco a{font-family:Newsreader,serif;font-weight:500;font-size:23px;line-height:1.3;
             color:var(--blu);text-decoration:underline;text-underline-offset:4px;
             text-decoration-thickness:1px}
.ap-elenco a:hover{text-decoration-thickness:2px}
.ap-elenco a:focus-visible{outline:2px solid var(--blu);outline-offset:3px}

/* ---------- ARTICOLO ---------- */
.art{background:var(--base);padding:48px 0 72px}
.art-wrap{max-width:1360px;margin:0 auto;padding:0 48px;display:grid;
     grid-template-columns:300px 720px;gap:72px;justify-content:center;align-items:start;
     transition:grid-template-columns .35s ease,gap .35s ease}
.art-wrap.chiuso{grid-template-columns:0px 920px;gap:0}

.colap{background:var(--antracite);position:sticky;top:98px;padding:26px 0 22px;overflow:hidden;
     transition:opacity .2s ease}
.art-wrap.chiuso .colap{opacity:0;pointer-events:none}
.colap h4{font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin:0 0 16px;
     padding-left:15px;position:relative;color:#9AA3AA;white-space:nowrap}
.colap h4::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:1px;background:#9AA3AA}
.colap ul{list-style:none;margin:0;padding:0}
.colap li{border-top:1px solid rgba(255,255,255,.09)}
.colap li:first-child{border-top:0}
.colap a{display:block;padding:13px 22px;text-decoration:none;font-family:Newsreader,serif;font-weight:500;
     font-size:16px;line-height:1.32;color:#C6CCD1;position:relative;transition:color .18s}
.colap a:hover{color:#fff}
.colap .qui a{color:#fff}
.colap .qui a::before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:2px;background:#fff}
.colap .coda{margin-top:20px;padding:16px 22px 0;border-top:1px solid rgba(255,255,255,.09)}
.colap .coda a{padding:0;font-family:Inter,sans-serif;font-size:12.5px;font-weight:600;color:#9AA3AA}

.corpo{min-width:0}
.cmd{font-family:Inter,sans-serif;font-size:12.5px;font-weight:600;color:var(--grigio);background:transparent;
     border:1px solid rgba(60,65,71,.28);padding:9px 15px;cursor:pointer;border-radius:var(--rc);
     display:inline-flex;align-items:center;gap:9px;margin-bottom:26px;
     transition:border-color .15s,color .15s}
.cmd:hover,.cmd:focus-visible{border-color:rgba(60,65,71,.55);color:var(--antracite);outline:none}

/* antracite come gli altri H1 del sito: il colore che aveva prima e' uscito
   il 15/09 (DESIGN-BRIEF §2). Il colore definitivo dei titoli degli articoli
   e' la domanda aperta del fronte 2 in STATO.md — questa e' la scelta provvisoria */
.corpo h1{font-family:Newsreader,serif;font-weight:500;font-size:44px;line-height:1.12;
     letter-spacing:-.018em;color:var(--antracite);margin:0 0 16px}
.ameta{font-size:13px;color:var(--grigio);margin:0 0 34px;padding-bottom:22px;
     border-bottom:1px solid rgba(60,65,71,.14)}
.corpo p{font-family:Newsreader,serif;font-weight:400;font-size:19.5px;line-height:1.62;
     color:var(--antracite);margin:0 0 22px}
.corpo h2{font-family:Newsreader,serif;font-weight:500;font-size:29px;line-height:1.20;
     letter-spacing:-.012em;color:var(--antracite);margin:44px 0 16px}
.corpo a.link{color:var(--blu);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.cit{margin:32px 0;padding:0 0 0 24px;border-left:2px solid rgba(15,107,168,.45);font-family:Newsreader,serif;
     font-style:italic;font-size:18.5px;line-height:1.60;color:var(--grigio)}
.cit .fonte{display:block;margin-top:10px;font-family:Inter,sans-serif;font-style:normal;font-size:12.5px}
.figap{margin:36px 0}
.figap .im{height:340px;position:relative;background:linear-gradient(150deg,#B9AFA5 0%,#A79C92 46%,#8E857C 100%)}
.figap .im span{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;
     letter-spacing:.18em;color:rgba(255,255,255,.9);font-weight:700}
.figap figcaption{font-size:13px;line-height:1.6;color:var(--grigio);margin-top:10px}

details.bib{margin:48px 0 0;border-top:1px solid rgba(60,65,71,.14);padding-top:26px}
details.bib summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
     font-family:Inter,sans-serif;font-size:12.5px;font-weight:600;color:var(--grigio);
     border:1px solid rgba(60,65,71,.28);padding:11px 15px;border-radius:var(--rc);
     transition:border-color .15s,color .15s}
details.bib summary::-webkit-details-marker{display:none}
details.bib summary:hover{border-color:rgba(60,65,71,.55);color:var(--antracite)}
details.bib[open] .fre{transform:rotate(180deg)}
details.bib ol{margin:22px 0 0;padding-left:22px}
details.bib li{font-size:13.5px;line-height:1.72;color:var(--grigio);margin-bottom:9px}

.coda-art{margin-top:52px;padding-top:34px;border-top:1px solid rgba(60,65,71,.14)}
.coda-art p{font-size:15px;line-height:1.7;color:var(--grigio);margin:0 0 20px;max-width:52ch}

/* ============================================================
   ADATTAMENTI WORDPRESS — non vengono dal riferimento visivo
   ============================================================ */

/* stile.css (verbatim) porta [id]{scroll-margin-top:90px}: un selettore
   universale sull'attributo, che in WordPress colpirebbe qualsiasi id.
   Qui si azzera e si restringe al contenuto della pagina. */
[id]{scroll-margin-top:0}
main [id]{scroll-margin-top:90px}

/* le immagini che WordPress mette nel corpo dell'articolo prendono il
   taglio come tutte le altre del sito, e la didascalia in Inter */
.corpo img{display:block;height:auto;
  border-radius:0 10px 56px 10px;
  clip-path:polygon(92px 0,100% 0,100% 100%,0 100%,0 26px,.8px 22.5px,3.5px 19.6px,84.5px 2.4px,87.5px 1px)}
.corpo figure{margin:36px 0}
.corpo figcaption{font-family:Inter,sans-serif;font-size:13px;line-height:1.6;
  color:var(--grigio);margin-top:10px}

/* il ritorno all'indice in fondo all'articolo: e' un comando di
   navigazione, non una CTA — quindi antracite pieno e raccordo --rc
   (DESIGN-BRIEF §6), mai la pillola col cerchio verde della CTA */
.coda-art .torna{margin:26px 0 0}
.coda-art .torna a{display:inline-block;background:var(--antracite);color:#fff;
  font-family:Inter,sans-serif;font-size:13px;font-weight:600;line-height:1;
  padding:13px 20px;border-radius:var(--rc);text-decoration:none;
  transition:background .15s}
.coda-art .torna a:hover,.coda-art .torna a:focus-visible{background:#2E3338;outline:none}

/* colonna di lettura elastica prima che la colonna laterale sparisca:
   300+72+720 non ci sta sotto i ~1190px */
@media (max-width:1180px){
  .art-wrap{grid-template-columns:270px minmax(0,720px);gap:44px;padding:0 32px}
}

/* ---------- il selettore dell'elenco su mobile (§6.4) ----------
   Sul desktop non esiste: al suo posto c'e' la colonna laterale.
   Resta sempre grigio, raccordo --rc; la tenda antracite sotto,
   staccata di 2px, con overflow:hidden (§3.3). */
.sel-app{display:none}
/* Antracite pieno, per scelta esplicita (20 agosto): comanda la stessa
   tenda antracite che apre, e sta col bottone del ritorno all'indice.
   NB: il brief §3.3 lo voleva grigio — decisione superata qui. */
.sel-app summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  font-family:Inter,sans-serif;font-size:12.5px;font-weight:600;color:#fff;
  background:var(--antracite);border:0;padding:11px 16px;border-radius:var(--rc);
  transition:background .15s}
.sel-app summary .fre{color:rgba(255,255,255,.8)}
.sel-app summary::-webkit-details-marker{display:none}
.sel-app summary:hover{background:#2E3338}
.sel-app[open] summary .fre{transform:rotate(180deg)}
.sel-app .tenda{margin-top:2px;background:var(--antracite);border-radius:var(--rc);
  overflow:hidden;padding:6px 0}
.sel-app .tenda ul{list-style:none;margin:0;padding:0}
.sel-app .tenda li{border-top:1px solid rgba(255,255,255,.09)}
.sel-app .tenda li:first-child{border-top:0}
.sel-app .tenda a{display:block;padding:12px 20px;text-decoration:none;font-family:Newsreader,serif;
  font-weight:500;font-size:15.5px;line-height:1.32;color:#C6CCD1;position:relative}
.sel-app .tenda .qui a{color:#fff}
.sel-app .tenda .qui a::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;background:#fff}
.sel-app .tenda .coda{margin-top:6px;padding:14px 20px 8px;border-top:1px solid rgba(255,255,255,.09)}
.sel-app .tenda .coda a{padding:0;font-family:Inter,sans-serif;font-size:12.5px;font-weight:600;color:#9AA3AA}

/* ---------- mobile ---------- */
@media (max-width:900px){
  .ap-testata h1{font-size:34px}
  .ap-elenco{margin-top:28px}
  .ap-elenco a{font-size:19px}

  /* ARTICOLO: la colonna laterale sparisce, compare il selettore */
  .art{padding:32px 0 56px}
  .art-wrap{grid-template-columns:minmax(0,1fr);gap:0;padding:0 22px}
  .colap{display:none}
  .sel-app{display:block;margin-bottom:26px}
  .corpo h1{font-size:32px}
  .corpo p{font-size:17.5px}
  .corpo h2{font-size:25px;margin:34px 0 14px}
  .corpo img{clip-path:none;border-radius:0 6px 28px 6px}
}

@media (max-width:640px){
  .ap-testata h1{font-size:28px}
  .ap-elenco a{font-size:17.5px}
}