/* ============================================================
   vs-blog.css — blog e articoli
   Gli articoli non sono fatti col Divi Builder: sono testo normale.
   Divi da solo li impagina come nel 2015, quindi qui si dà loro la
   stessa tipografia del resto del sito e una colonna di lettura di
   larghezza umana. Nessun template su misura: solo leggibilità.
   ============================================================ */

/* --- gabbia: la stessa del resto del sito ---
   Header e sezioni Divi stanno in una riga da 1240px centrata. Il contenitore
   di Divi sul blog è da 1080px: il testo partiva rientrato rispetto al logo e
   al menu. Qui si porta il contenitore alla misura del sito, così il blog è
   incolonnato con tutto il resto. --- */
.single-post #main-content .container,
.blog #main-content .container,
.archive #main-content .container,
.search #main-content .container{max-width:1240px;width:90%}

.single-post #left-area,
.blog #left-area,
.archive #left-area,
.search #left-area{width:100%;max-width:none;
float:none!important;margin:0!important;padding-right:0!important}

/* --- il testo occupa tutta la gabbia ---
   Scelta esplicita: niente colonna stretta, il contenuto usa gli stessi 1240px
   delle altre sezioni. Su schermi molto larghi la riga arriva a ~150 caratteri,
   oltre la misura comoda di lettura: si compensa con interlinea generosa
   (line-height 1.72 più sotto) e paragrafi corti negli articoli. --- */

/* la sidebar è vuota di proposito: non deve occupare spazio */
.single-post #sidebar,
.blog #sidebar,
.archive #sidebar{display:none}

.single-post #main-content,
.blog #main-content,
.archive #main-content{padding:56px 24px 72px}

/* --- titolo e riga di servizio --- */
.single-post .entry-title,
.blog .entry-title,
.archive .entry-title{font-family:"Bricolage Grotesque",system-ui,sans-serif;
font-weight:600;line-height:1.15;letter-spacing:-.02em;margin:0 0 14px}
.single-post .entry-title{font-size:clamp(1.9rem,1.2rem + 2.2vw,2.8rem)}
.blog .entry-title,.archive .entry-title{font-size:clamp(1.4rem,1rem + 1.4vw,1.9rem)}
.blog .entry-title a,.archive .entry-title a{color:inherit;text-decoration:none}
.blog .entry-title a:hover,.archive .entry-title a:hover{color:var(--vs-blue,#1d5b9e)}

/* I separatori "|" di Divi sono nodi di testo del contenitore, non elementi:
   non si nascondono con display:none. Azzerando il font del contenitore
   spariscono loro e la parola "da", e si ridà misura ai soli figli. */
.single-post .post-meta,
.blog .post-meta,
.archive .post-meta{font-size:0!important;letter-spacing:.02em;opacity:.65;margin-bottom:28px}
.single-post .post-meta > *,
.blog .post-meta > *,
.archive .post-meta > *{font-size:.86rem!important;margin-right:16px}
.single-post .post-meta > * a,
.blog .post-meta > * a,
.archive .post-meta > * a{font-size:.86rem!important}
/* l'autore "admin" e il conteggio commenti non dicono niente al lettore */
.post-meta .author,
.post-meta .comments-number{display:none}
.post-meta a{color:inherit;text-decoration:none}
.post-meta a:hover{text-decoration:underline}

/* --- corpo del testo --- */
.single-post .entry-content{font-family:Manrope,system-ui,sans-serif;
font-size:1.05rem;line-height:1.72}
.single-post .entry-content p{margin:0 0 1.15em}
.single-post .entry-content h2{font-family:"Bricolage Grotesque",system-ui,sans-serif;
font-weight:600;font-size:1.55rem;line-height:1.25;letter-spacing:-.015em;
margin:2.2em 0 .6em}
.single-post .entry-content h3{font-family:"Bricolage Grotesque",system-ui,sans-serif;
font-weight:600;font-size:1.2rem;line-height:1.3;margin:1.8em 0 .5em}
.single-post .entry-content ul,
.single-post .entry-content ol{margin:0 0 1.3em;padding-left:1.3em}
.single-post .entry-content li{margin-bottom:.5em;line-height:1.65}
.single-post .entry-content strong{font-weight:700}
.single-post .entry-content a{color:var(--vs-blue,#1d5b9e);font-weight:600;
text-decoration:underline;text-underline-offset:3px;
text-decoration-thickness:1px;text-decoration-color:rgba(29,91,158,.35)}
.single-post .entry-content a:hover{text-decoration-color:currentColor}

/* --- elenco articoli --- */
.blog .et_pb_post,.archive .et_pb_post{border-bottom:1px solid rgba(0,0,0,.1);
padding-bottom:34px;margin-bottom:34px}
.blog .et_pb_post:last-child,.archive .et_pb_post:last-child{border-bottom:0}
.blog .et_pb_post .post-content,
.archive .et_pb_post .post-content{font-family:Manrope,system-ui,sans-serif;
line-height:1.65;opacity:.85}
/* --- "Leggi tutto" ---
   Il titolo è già cliccabile, ma un invito esplicito converte molto di più.
   Pillola come i pulsanti del sito, in versione a contorno per non competere
   con la CTA "Contatti" dell'header. --- */
.vs-leggi-wrap{margin:16px 0 0}
.vs-leggi{display:inline-block;font-family:Manrope,system-ui,sans-serif;
font-size:15px;font-weight:600;line-height:1;color:var(--vs-blue,#1a6fb4);
padding:12px 24px;border:1.5px solid var(--vs-blue,#1a6fb4);border-radius:999px;
text-decoration:none;transition:background .15s,color .15s}
.vs-leggi:hover,.vs-leggi:focus-visible{background:var(--vs-blue,#1a6fb4);color:#fff}
.vs-leggi:focus-visible{outline:2px solid var(--vs-ink,#172a3a);outline-offset:3px}
.vs-leggi:after{content:" \2192";font-weight:400}

/* il testo aggiuntivo serve a chi naviga con lo screen reader — "Leggi tutto"
   da solo, ripetuto dieci volte, non dice quale articolo. Va nascosto alla
   vista ma non alle tecnologie assistive: fuori schermo, non display:none. */
.vs-leggi .screen-reader-text{position:absolute!important;width:1px;height:1px;
overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

.blog .more-link,.archive .more-link{display:inline-block;margin-top:10px;
font-weight:600;color:var(--vs-blue,#1d5b9e);text-decoration:none}
.blog .more-link:hover,.archive .more-link:hover{text-decoration:underline}

/* --- commenti: il blog di uno studio tecnico non li usa --- */
.single-post #comment-wrap{display:none}

@media (max-width:782px){
	.single-post #main-content,
	.blog #main-content,
	.archive #main-content{padding:36px 18px 56px}
	.single-post .entry-content{font-size:1rem}
}

/* --- intestazione dell'elenco articoli (vs-blog.php / VS-BLOG-H1) --- */
.blog .vs-blog-head{margin:0 0 34px;padding:0 0 22px;border-bottom:1px solid var(--vs-line,#e3e9ee)}
.blog .vs-blog-head h1{font-size:clamp(1.9rem,1.2rem + 2vw,2.7rem);font-weight:600;line-height:1.15;
  letter-spacing:-.02em;color:var(--vs-ink,#172a3a);margin:0;padding:0;text-wrap:balance}
.blog .vs-blog-head .vs-lead{max-width:62ch;margin:12px 0 0;font-size:1.05rem;line-height:1.6;
  color:var(--vs-grey,#55636f)}