/* BLOG LaScuola360 — disegno r2 (prova del 20/09/2026)
   Si appoggia ai token di site.css (colori, raggi, bottoni, header, footer): qui c'è solo il blog.
   Scelte: fondo crema piatto (via la velatura rosa che finiva a metà pagina), niente scatole bianche
   attorno alle card, testo piccolo mai sotto 4,5 di contrasto, colonna di lettura a ~68 caratteri. */
:root{
 --ink:#A44A32;            /* corallo scuro per le scritte piccole: 5,6 su crema (coral-dk fa 3,6) */
 --meta:#646B76;           /* grigio dei dati: 4,9 su crema (il --muted del sito fa 2,4) */
 --line:#E7DED6;
 --ease:cubic-bezier(.32,.72,0,1);
 --shadow-img:0 1px 2px rgba(91,55,40,.06),0 18px 40px -18px rgba(91,55,40,.28);
}
body.blog{background:var(--bg-warm)}
body.blog ::selection{background:#FCD9CC}
body.blog a:focus-visible,body.blog button:focus-visible,body.blog input:focus-visible,body.blog summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
/* testo scuro sulla sfumatura, come nella home r4: il bianco faceva 2,7 di contrasto, lo scuro 6 */
body.blog .btn-primary{color:var(--text)}
body.blog .cta-band,body.blog .cta-band h2{color:var(--text)}
body.blog .cta-band p{opacity:1;color:#3A2A26}
body.blog .btn-white{color:var(--text)}
body.blog .btn-glass{background:rgba(255,255,255,.34);border-color:rgba(33,38,46,.28);color:var(--text)}
body.blog .btn-glass:hover{background:rgba(255,255,255,.5)}
.mainnav a[aria-current]{color:var(--text);background:rgba(0,0,0,.06)}
.lbl{font-family:'Poppins',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.meta{font-size:13px;color:var(--meta);font-variant-numeric:tabular-nums}
.meta b{color:var(--text);font-weight:600}
.ph{display:block;overflow:hidden;border-radius:18px;background:#EFE6DE;box-shadow:var(--shadow-img)}
.ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
a:hover>.ph img,.ph:hover img{transform:scale(1.035)}
.tt{background:linear-gradient(var(--coral),var(--coral)) 0 100%/0 2px no-repeat;transition:background-size .5s var(--ease)}
a:hover .tt,a.tt:hover{background-size:100% 2px}

/* ---------- testata dell'indice ---------- */
.mast{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:56px;align-items:end;padding:64px 0 36px}
.mast h1{font-size:clamp(36px,5.2vw,64px);font-weight:700;letter-spacing:-.04em;line-height:1.02;text-wrap:balance;margin-top:14px}
.mast h1 mark{background:linear-gradient(transparent 62%,#F9CFC0 62%,#F8C9DF 100%);color:inherit;padding:0 .06em}
.mast-side p{font-size:17px;line-height:1.6;color:#4B525C;max-width:46ch;text-wrap:pretty}
.cerca{position:relative;margin-top:22px;max-width:460px}
.cerca input{width:100%;font:500 15.5px 'Inter',sans-serif;color:var(--text);background:#fff;border:1px solid var(--line);border-radius:999px;padding:15px 20px 15px 50px;box-shadow:0 1px 2px rgba(91,55,40,.04);transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.cerca input::placeholder{color:#7A818C}
.cerca input:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 4px rgba(228,130,103,.18)}
.cerca svg{position:absolute;left:19px;top:50%;width:19px;height:19px;transform:translateY(-50%);color:var(--ink);pointer-events:none}
.mast-side .meta{margin-top:14px;padding-left:4px}

/* ---------- barra delle aree ---------- */
.catbar{position:sticky;top:64px;z-index:60;background:rgba(251,247,244,.9);backdrop-filter:blur(10px);border-block:1px solid var(--line)}
.catbar-in{display:flex;gap:6px;overflow-x:auto;padding:11px 0;scrollbar-width:none;mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.catbar-in::-webkit-scrollbar{display:none}
.fpill{flex:0 0 auto;font:600 13.5px 'Poppins',sans-serif;color:#4B525C;background:transparent;border:0;border-radius:999px;padding:9px 15px;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),transform .2s var(--ease)}
.fpill i{font-style:normal;font-weight:500;font-size:12px;color:var(--meta);margin-left:5px;font-variant-numeric:tabular-nums}
.fpill:hover{background:rgba(0,0,0,.05);color:var(--text)}
.fpill:active{transform:scale(.97)}
.fpill.on{background:var(--text);color:#fff}
.fpill.on i{color:#C9CDD3}

/* ---------- vetrina ---------- */
.ultime{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:64px;align-items:start;padding-top:44px}
.lead{display:block;color:var(--text)}
.lead .ph{aspect-ratio:16/10;border-radius:24px}
.lead .lbl{display:block;margin:22px 0 10px}
.lead h2{font-size:clamp(26px,3vw,38px);font-weight:700;letter-spacing:-.03em;line-height:1.12;text-wrap:balance}
.lead p{font-size:16.5px;color:#4B525C;line-height:1.6;margin:12px 0 14px;max-width:58ch;text-wrap:pretty}
.col-h{padding-bottom:12px;border-bottom:1px solid var(--text)}
.riga{display:grid;grid-template-columns:92px minmax(0,1fr);gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);color:var(--text)}
.riga .ph{aspect-ratio:4/3;border-radius:12px;box-shadow:none}
.riga h3{font-size:15.5px;font-weight:600;line-height:1.32;letter-spacing:-.012em;margin-bottom:5px;text-wrap:pretty}

/* ---------- le fasce per area ---------- */
.fascia{padding-top:88px;scroll-margin-top:110px}
.fascia-h{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;padding-bottom:16px;margin-bottom:28px;border-bottom:1px solid var(--text)}
.fascia-h h2{font-size:clamp(23px,2.4vw,30px);font-weight:700;letter-spacing:-.028em}
.fascia-h p{font-size:15.5px;color:#4B525C;flex:1;min-width:200px}
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 32px}
.pc{display:flex;flex-direction:column;gap:14px;color:var(--text);grid-column:span 3}
.pc .ph{aspect-ratio:16/10}
.pc h3{font-size:16.5px;font-weight:600;line-height:1.3;letter-spacing:-.015em;text-wrap:pretty}
.pc .tx{display:flex;flex-direction:column;gap:7px}
.pc p{display:none}
.pc.big{grid-column:span 6;grid-row:span 2}
.pc.big .ph{aspect-ratio:auto;flex:1;min-height:340px;border-radius:24px}
.pc.big h3{font-size:clamp(21px,2vw,26px);font-weight:700;letter-spacing:-.025em;line-height:1.18}
.pc.big p{display:block;font-size:15.5px;color:#4B525C;line-height:1.6;max-width:56ch}
.pc.tall{grid-row:span 2}
.pc.tall .ph{aspect-ratio:auto;flex:1;min-height:340px}
.pc.wide{grid-column:span 6;flex-direction:row;align-items:center;gap:20px}
.pc.wide .ph{flex:0 0 46%}
.bento.n2 .pc,.bento.n1 .pc{grid-column:span 6;grid-row:auto}
.bento.n2 .pc .ph,.bento.n1 .pc .ph{aspect-ratio:16/10;min-height:0;flex:none}
.altre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;margin-top:36px;border-top:1px solid var(--line)}
.altre[hidden]{display:none}
.piu{display:inline-flex;align-items:center;gap:12px;margin-top:32px;font:600 14.5px 'Poppins',sans-serif;color:var(--text);background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 7px 7px 20px;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.piu span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--coral-lt);color:var(--ink);transition:transform .5s var(--ease)}
.piu svg{width:15px;height:15px}
.piu:hover{box-shadow:0 10px 26px -12px rgba(91,55,40,.35)}
.piu:hover span{transform:translateY(2px)}
.piu:active{transform:scale(.98)}
.piu[aria-expanded=true] span{transform:rotate(180deg)}

/* ---------- risultati della ricerca ---------- */
#trovati{padding-top:40px;min-height:50vh}
#trovati[hidden]{display:none}
#trovati .fascia-h{margin-bottom:0}
#trovati .altre{margin-top:0;border-top:0}
.vuoto{padding:56px 0;max-width:52ch;font-size:16.5px;color:#4B525C;line-height:1.65}
.vuoto b{display:block;font:700 22px 'Poppins',sans-serif;color:var(--text);letter-spacing:-.02em;margin-bottom:8px}
.vuoto a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- pagina articolo ---------- */
.avanza{position:fixed;inset:0 0 auto 0;height:3px;z-index:120;background:var(--grad);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
@supports (animation-timeline:scroll()){.avanza{animation:avanza linear both;animation-timeline:scroll(root)}@keyframes avanza{to{transform:scaleX(1)}}}
.art{max-width:1104px;margin-inline:auto}
.art-top{max-width:900px;padding:44px 0 34px}
.crumbs{font-size:13.5px;color:var(--meta);margin-bottom:26px}
.crumbs a{color:var(--meta);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .3s,color .3s}
.crumbs a:hover{color:var(--ink);text-decoration-color:currentColor}
.art-top h1{font-size:clamp(32px,4.6vw,54px);font-weight:700;letter-spacing:-.038em;line-height:1.06;text-wrap:balance;margin:14px 0 18px}
.deck{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:#4B525C;max-width:62ch;text-wrap:pretty}
.byline{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.byline .meta+.meta::before{content:'';display:inline-block;width:3px;height:3px;border-radius:50%;background:#B9B2AB;vertical-align:middle;margin-right:18px}
.art-hero{border-radius:28px;aspect-ratio:16/8}
.art-grid{display:grid;grid-template-columns:248px minmax(0,700px);gap:0 96px;justify-content:space-between;padding-top:56px}
.art-grid>.lato{order:-1}
.lato{position:sticky;top:96px;align-self:start;max-height:calc(100dvh - 120px);overflow:auto;scrollbar-width:thin}
.lato .lbl{display:block;margin-bottom:14px}
.lato ol{list-style:none;border-left:1px solid var(--line)}
.lato ol a{display:block;font-size:14px;line-height:1.4;color:#4B525C;padding:7px 0 7px 16px;margin-left:-1px;border-left:2px solid transparent;transition:color .3s var(--ease),border-color .3s var(--ease)}
.lato ol a:hover{color:var(--text)}
.lato ol a.qui{color:var(--text);font-weight:600;border-left-color:var(--coral)}
.lato-cta{margin-top:28px;padding:6px;border-radius:24px;background:rgba(91,55,40,.05);border:1px solid rgba(91,55,40,.06)}
.lato-cta div{background:#fff;border-radius:18px;padding:20px;box-shadow:inset 0 1px 0 #fff}
.lato-cta b{display:block;font:600 15.5px/1.3 'Poppins',sans-serif;letter-spacing:-.015em}
.lato-cta p{font-size:13.5px;color:#4B525C;line-height:1.55;margin:8px 0 16px}
.toc-m{display:none}
.breve{border-left:3px solid var(--coral);padding:4px 0 4px 24px;margin-bottom:40px}
.breve .lbl{display:block;margin-bottom:12px}
.breve ul{list-style:none}
.breve li{position:relative;font-size:17px;line-height:1.6;padding-left:22px;margin-bottom:10px}
.breve li::before{content:'';position:absolute;left:0;top:.72em;width:8px;height:2px;background:var(--coral)}
.prose{font-size:18.5px;line-height:1.75;color:#262B33}
.prose>p:first-child{font-size:20.5px;line-height:1.65;color:var(--text)}
/* site.css ingrigisce e rimpicciolisce ogni <p>: nel testo dell'articolo comandano le misure della colonna */
.prose p,.prose li{font-size:inherit;line-height:inherit;color:inherit}
.prose p{margin:0 0 22px;text-wrap:pretty}
.prose h2{font-size:clamp(24px,2.4vw,29px);font-weight:700;letter-spacing:-.025em;line-height:1.2;margin:56px 0 16px;scroll-margin-top:96px;text-wrap:balance}
.prose h3{font-size:20px;font-weight:600;letter-spacing:-.015em;margin:36px 0 10px}
.prose ul,.prose ol{margin:0 0 24px 4px;padding-left:22px}
.prose li{margin-bottom:9px;padding-left:4px}
.prose li::marker{color:var(--ink);font-weight:600}
.prose a:not(.btn){color:var(--text);font-weight:500;text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px;text-underline-offset:3px;transition:background .3s var(--ease)}
.prose a:not(.btn):hover{background:var(--coral-lt)}
.prose blockquote{margin:32px 0;padding:0 0 0 26px;border-left:3px solid var(--text);font:500 21px/1.5 'Poppins',sans-serif;letter-spacing:-.015em;color:var(--text)}
.prose blockquote p{margin:0}
.midcta{display:flex;align-items:center;gap:24px;margin:48px 0;padding:6px;border-radius:26px;background:rgba(91,55,40,.05);border:1px solid rgba(91,55,40,.06)}
.midcta>div{flex:1;display:flex;align-items:center;gap:22px;flex-wrap:wrap;background:#fff;border-radius:20px;padding:24px 26px}
.midcta p{flex:1;min-width:230px;margin:0;font-size:15.5px;line-height:1.55;color:#4B525C}
.midcta b{display:block;font:600 18px/1.3 'Poppins',sans-serif;color:var(--text);letter-spacing:-.015em;margin-bottom:4px}
.faq-h,.rel-h{font-size:clamp(24px,2.4vw,29px);font-weight:700;letter-spacing:-.025em;margin:64px 0 8px}
details.faq{border-bottom:1px solid var(--line)}
details.faq summary{display:flex;justify-content:space-between;gap:20px;align-items:center;list-style:none;cursor:pointer;padding:20px 0;font:600 17px/1.4 'Poppins',sans-serif;letter-spacing:-.012em}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:'';flex:0 0 12px;height:12px;background:linear-gradient(var(--ink),var(--ink)) 50%/100% 2px no-repeat,linear-gradient(var(--ink),var(--ink)) 50%/2px 100% no-repeat;transition:transform .5s var(--ease)}
details.faq[open] summary::after{transform:rotate(135deg)}
details.faq p{font-size:17px;line-height:1.7;color:#3D434C;margin:0 0 20px;max-width:62ch}
.passa{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:44px;padding-top:22px;border-top:1px solid var(--line)}
.passa .lbl{margin-right:8px}
.passa a,.passa button{display:inline-flex;align-items:center;gap:8px;font:600 14px 'Poppins',sans-serif;color:var(--text);background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 16px;cursor:pointer;transition:transform .2s var(--ease),border-color .3s var(--ease)}
.passa a:hover,.passa button:hover{border-color:var(--coral)}
.passa a:active,.passa button:active{transform:scale(.97)}
.passa svg{width:17px;height:17px}
.correlati{padding-block:24px 72px}
.correlati .rel-h{padding-bottom:16px;margin:64px 0 28px;border-bottom:1px solid var(--text)}
.correlati .bento .pc{grid-column:span 4}

/* ---------- telefono e tablet ---------- */
@media(max-width:1100px){
 .art-grid{grid-template-columns:minmax(0,700px);justify-content:center;padding-top:36px}
 .lato{display:none}
 .toc-m{display:block;margin-bottom:36px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:0 18px}
 .toc-m summary{display:flex;justify-content:space-between;align-items:center;list-style:none;cursor:pointer;padding:16px 0;font:600 15px 'Poppins',sans-serif}
 .toc-m summary::-webkit-details-marker{display:none}
 .toc-m summary i{font-style:normal;font-weight:500;font-size:13px;color:var(--meta)}
 .toc-m ol{padding:0 0 12px 20px}
 .toc-m ol a{display:block;padding:8px 0;font-size:15px;color:var(--text)}
 .art-top{margin-inline:auto;max-width:700px}
}
@media(max-width:980px){
 .mast{grid-template-columns:1fr;gap:22px;padding:40px 0 28px}
 .ultime{grid-template-columns:1fr;gap:40px;padding-top:32px}
 .bento{gap:32px 24px}
 .pc{grid-column:span 6}
 .pc.big,.pc.wide{grid-column:span 12}
 .pc.big .ph,.pc.tall .ph{min-height:0;flex:none;aspect-ratio:16/10}
 .pc.tall{grid-row:auto}
 .altre{grid-template-columns:repeat(2,minmax(0,1fr))}
 .correlati .bento .pc{grid-column:span 6}
}
@media(max-width:640px){
 .catbar{top:64px}
 .fascia{padding-top:60px}
 .fascia-h{gap:6px;margin-bottom:22px}
 .bento{display:block}
 /* sul telefono solo la prima di ogni area resta una card grande: le altre diventano righe */
 .pc,.pc.wide{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
 .pc .ph,.pc.tall .ph,.pc.wide .ph{aspect-ratio:4/3;border-radius:12px;box-shadow:none;flex:none}
 .pc h3{font-size:15.5px}
 .pc.big,.bento.n1 .pc{display:flex;padding:0 0 22px}
 .pc.big .ph,.bento.n1 .pc .ph{aspect-ratio:16/10;border-radius:20px;box-shadow:var(--shadow-img)}
 .altre{grid-template-columns:1fr;margin-top:0;border-top:0}
 .riga{grid-template-columns:104px minmax(0,1fr);gap:14px}
 .piu{width:100%;justify-content:space-between;margin-top:22px}
 .art-top{padding:28px 0 26px}
 .byline{flex-direction:column;align-items:flex-start;gap:3px}
 .byline .meta+.meta::before{display:none}
 .art-hero{border-radius:20px;aspect-ratio:4/3}
 .prose{font-size:17.5px}
 .prose>p:first-child{font-size:19px}
 .prose h2{margin-top:44px}
 .midcta>div{padding:20px}
 .midcta .btn{width:100%}
 .correlati .bento .pc{padding:14px 0}
}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation:none!important}html{scroll-behavior:auto}}