/* msp-ds-v2-blog.css - gruppo «Modello articoli, glossario e FAQ», giro 2 (04/10/2026).
   Si carica SOLO con lo strato v2 acceso (anteprima con token). Tutte le regole valgono solo su body.msb-on
   (articoli, glossario, FAQ singole, archivi di categoria). Correzioni minime: spaziature con la scala --s-*,
   divisori sagomati in CSS (altezza fissa, niente CLS), fondo della testata piu' morbido. 
   @pagine: :blog
   (":blog" = solo pagine del modello blog, msb_active(): caricatore msp-ds-loader.php, residui 04/10 sera) */

/* 1. contenitori del modello: la regola v2 «tetto di 72 px su telefono» leggeva il padding in linea di Avada (0)
      e annullava gli spazi del modello (titolo attaccato all'intestazione, indice attaccato all'immagine). */
body.msp-v2.msb-on #wrapper .fusion-fullwidth.msb-hero{padding-top:clamp(32px,4vw,48px)!important;padding-bottom:var(--s-2)!important}
body.msp-v2.msb-on #wrapper .fusion-fullwidth.msb-body{padding-top:clamp(32px,4vw,48px)!important;padding-bottom:var(--s-4)!important}
body.msp-v2.msb-on.msb-k-glossary #wrapper .fusion-fullwidth.msb-body,
body.msp-v2.msb-on.msb-k-faq #wrapper .fusion-fullwidth.msb-body{padding-top:var(--s-6)!important;padding-bottom:var(--s-8)!important}
body.msp-v2.msb-on #wrapper .fusion-fullwidth.msb-relsec{padding-top:var(--s-8)!important;padding-bottom:calc(var(--s-8) + var(--v2-div-h) * .6)!important;border-top:0!important;position:relative}
body.msp-v2.msb-on #wrapper .fusion-fullwidth.msb-final{padding-top:var(--s-9)!important;padding-bottom:var(--s-9)!important}
body.msp-v2.msb-on #wrapper .fusion-fullwidth.msb-catsec{padding-top:var(--s-6)!important;padding-bottom:var(--s-9)!important}
@media (max-width:640px){
 body.msp-v2.msb-on #wrapper .fusion-fullwidth.msb-final{padding-top:var(--s-8)!important;padding-bottom:var(--s-8)!important}
 body.msp-v2.msb-on #wrapper .fusion-fullwidth.msb-catsec{padding-bottom:var(--s-8)!important}
}

/* 2. ritmo del testo: titoli 48/16 (telefono 40/12), niente spaziatori Gutenberg attaccati ai titoli */
.msp-v2.msb-on .msb-main .fusion-content-tb h2{margin:var(--s-7) 0 var(--s-4)!important}
.msp-v2.msb-on .msb-main .fusion-content-tb h3{margin:var(--s-6) 0 var(--s-3)!important}
.msp-v2.msb-on .msb-main .fusion-content-tb :is(h2,h3)+.wp-block-spacer,
.msp-v2.msb-on .msb-main .fusion-content-tb .wp-block-spacer:has(+:is(h2,h3)){height:0!important}
.msp-v2.msb-on .msb-main .fusion-content-tb figure{margin:var(--s-5) 0}
@media (max-width:767px){
 .msp-v2.msb-on .msb-main .fusion-content-tb h2{margin:40px 0 var(--s-3)!important}
 .msp-v2.msb-on .msb-main .fusion-content-tb h3{margin:var(--s-5) 0 var(--s-2)!important}
}

/* 3. testata: fondo chiaro con aurora statica (al posto della fascia uniforme) */
.msp-v2.msb-on .fusion-fullwidth.msb-hero{background:radial-gradient(55% 90% at 92% 0%,rgba(252,190,130,.28),transparent 70%),radial-gradient(45% 80% at 4% 0%,rgba(255,222,190,.34),transparent 70%),linear-gradient(180deg,#fff7f0 0%,#fffaf5 100%)!important}

/* passaggio morbido corpo -> «Leggi anche» (prima: bordo netto tra crema e bianco) */
.msp-v2.msb-on .fusion-fullwidth.msb-relsec{background:linear-gradient(180deg,#fffaf5 0,#fff 160px)!important}

/* 4. divisori sagomati in CSS (stessa tecnica di .msp-v2-div-giu, altezza fissa = niente salti):
      «Leggi anche» -> fascia scura finale (onda). Fascia scura -> piede: resta dritto (il piede ha aloni propri). */
.msp-v2.msb-on .fusion-fullwidth.msb-relsec::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:var(--v2-div-h);z-index:2;pointer-events:none}
.msp-v2.msb-on .fusion-fullwidth.msb-relsec::after{background:var(--night,#0e1011);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 62c160-34 320-44 480-20s320 56 480 40 320-62 480-46V100H0z'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 62c160-34 320-44 480-20s320 56 480 40 320-62 480-46V100H0z'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}

/* 5. paginazione degli archivi: pagina corrente arancio profondo con testo bianco (4,7:1), hover arancio */
.msp-v2.msb-on .msb-pag .page-numbers.current{background:linear-gradient(135deg,var(--v2-o1,#ba561a),var(--v2-o2,#9c4813));border-color:var(--v2-o2,#9c4813);color:#fff!important}
.msp-v2.msb-on .msb-pag a.page-numbers:hover{border-color:var(--v2-act,#a85419);color:var(--v2-act,#a85419)!important}

/* 6. schede: risposta al clic */
.msp-v2.msb-on a.msb-card:active{transform:translateY(-1px) scale(.99)}
@media (prefers-reduced-motion:reduce){.msp-v2.msb-on a.msb-card,.msp-v2.msb-on a.msb-card:hover,.msp-v2.msb-on a.msb-card:active,.msp-v2.msb-on a.msb-card:hover .msb-card-i img{transform:none!important}}

/* 7. riquadro CTA (correzioni del verificatore, 04/10 pomeriggio): l'alone verde del pulsante finiva sotto il link
      secondario «Scopri le funzionalità» (#a85419), che scendeva a 3,9:1 sullo sfondo reale. Alone corto e link
      staccato di 8 px in piu': lo sfondo sotto il link resta quello del riquadro (4,8:1). Eyebrow del riquadro piu' scuro
      (4,5:1 al limite sul fondo sfumato del telefono -> 5:1). */
.msp-v2.msb-on .msb-cta a.ms-btn.ms-g{box-shadow:0 8px 16px -12px rgba(22,108,68,.6),inset 0 1px 0 rgba(255,255,255,.18)!important}
.msp-v2.msb-on .msb-cta a.ms-btn.ms-g:hover{box-shadow:0 12px 20px -14px rgba(15,82,51,.7),inset 0 1px 0 rgba(255,255,255,.18)!important}
.msp-v2.msb-on .msb-cta-a a.msb-lnk{margin-top:var(--s-2)}
.msp-v2.msb-on .msb-cta .msb-eye{color:#8a4a1b!important}

/* 8. indice laterale su computer (difetto noto dal giro 1): l'altezza dell'elenco era una stima fissa (100vh - 530 px)
      e a 1366x900 mostrava 7 voci su 9 lasciando 100 px vuoti in basso. Ora la colonna fissa e' una pila flessibile alta
      quanto lo schermo: l'elenco prende tutto lo spazio che resta sopra il riquadro CTA (compattato), e se le voci sono
      ancora di piu' una sfumatura in basso/in alto segnala che l'elenco continua (scorre al suo interno, la voce letta
      resta sempre visibile grazie a msp-ds-blog.js). Altezze fisse: nessun salto di layout. */
@media (min-width:1025px){
 body.msp-v2.msb-on .msb-side>.fusion-column-wrapper{display:flex!important;flex-direction:column!important;max-height:calc(100vh - var(--mspai-hdr-h,84px) - 44px)!important}
 body.msp-v2.msb-on .msb-side .msb-toc{flex:1 1 auto;min-height:150px;display:flex;flex-direction:column}
 body.msp-v2.msb-on .msb-side .msb-toc-t{flex:0 0 auto}
 body.msp-v2.msb-on .msb-side .msb-toc ol{flex:1 1 auto;min-height:120px;max-height:none!important;
  background:linear-gradient(#fffaf5 30%,rgba(255,250,245,0)) top/100% 28px no-repeat local,
   linear-gradient(rgba(255,250,245,0),#fffaf5 70%) bottom/100% 28px no-repeat local,
   radial-gradient(farthest-side at 50% 0,rgba(31,18,6,.13),rgba(31,18,6,0)) top/100% 10px no-repeat scroll,
   radial-gradient(farthest-side at 50% 100%,rgba(31,18,6,.13),rgba(31,18,6,0)) bottom/100% 10px no-repeat scroll}
 body.msp-v2.msb-on .msb-side .msb-toc a{padding-top:6px;padding-bottom:6px}
 body.msp-v2.msb-on .msb-side .msb-cta-lato{flex:0 0 auto;margin-top:var(--s-5)}
 body.msp-v2.msb-on .msb-side .msb-cta-lato .msb-cta{padding:18px 20px 18px}
 body.msp-v2.msb-on .msb-side .msb-cta-lato .msb-cta-d{margin-bottom:var(--s-3)!important}
 body.msp-v2.msb-on .msb-side .msb-cta-lato a.msb-lnk{padding:4px 0}
}

/* 9. residui 04/10 sera.
   a) Alone della fascia scura finale: partiva dal bordo alto dritto della sezione (radial-gradient at 50% 0) e sotto l'onda
      #0e1011 del divisore si vedeva un gradino orizzontale. Ora il centro dell'alone e' 240 px piu' in basso: al bordo alto
      (dove finisce l'onda) e' gia' trasparente, il passaggio onda -> fascia e' continuo. */
.msp-v2.msb-on .fusion-fullwidth.msb-final{background:radial-gradient(700px 320px at 50% 240px,rgba(245,134,52,.2),transparent 70%),var(--night,#0e1011)!important}
/* b) Ingressi leggeri negli articoli (punto 6): solo spostamento dei titoli e dei pulsanti, scala minima per immagini e schede
      «Leggi anche"; mai trasparenti (il contrasto resta quello misurato), niente effetto senza supporto di animation-timeline,
      con movimento ridotto o senza JS non serve nulla (e' solo CSS e lo stato finale e' quello normale).
      Escluse la testata (titolo, immagine principale) e la prima immagine del testo (LCP su telefono). */
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
 .msp-v2.msb-on .msb-main .fusion-content-tb>:is(h2,h3,.wp-block-buttons,blockquote,.wp-block-quote):not(.msp-v2-noin){animation:v2In linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
 .msp-v2.msb-on .msb-main .fusion-content-tb>figure.wp-block-image:not(:first-of-type):not(.msp-v2-noin){animation:v2InZ linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
 .msp-v2.msb-on .msb-relsec a.msb-card,.msp-v2.msb-on .msb-catsec a.msb-card:not(:nth-child(-n+3)){animation:v2In linear both;animation-timeline:view();animation-range:entry 0% entry 50%}}}

/* === NEWSLETTER 05/10 (post-live) - riquadro «Vuoi ricevere le prossime guide?» sotto «Il team MailSenpai» ===
   Su telefono il modulo era rientrato sotto il testo dell'autore (colonna di ~260 px accanto all'avatar): ora la firma e' una
   griglia (avatar | titolo + descrizione) e il riquadro newsletter occupa tutta la larghezza sotto. Tablet e computer: riquadro
   allineato al testo dell'autore, con padding proporzionato. Margine interno del widget azzerato (prima 18/26 px in piu').
   Lo stile dentro il widget (pulsante, casella, «Niente spam») e' in msp-ds-v2-blog.js (shadow DOM).
   La riserva d'altezza del giro 1 (min-height 132 px) resta: il riquadro sta in fondo all'articolo, CLS misurato 0. */
body.msp-v2.msb-on .msb-news{padding:20px 22px 18px;border-radius:var(--v2-r,14px)}
body.msp-v2.msb-on .msb-news .msb-news-t{margin-bottom:12px!important}
@media (max-width:640px){
 body.msp-v2.msb-on .msb-firma{display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 14px;align-items:start}
 body.msp-v2.msb-on .msb-firma>.msb-av-l{grid-row:span 2}
 body.msp-v2.msb-on .msb-firma>.msb-firma-b{display:contents}
 body.msp-v2.msb-on .msb-firma .msb-news{grid-column:1/-1;margin-top:20px;padding:18px 16px 16px}
}