/* ============================================================
BMup — blog
Vive sopra bmup-home.css e ne usa i token: nessun colore nuovo,
nessun font nuovo. Qui c'e' solo cio' che la home non ha:
le card articolo, il corpo del testo lungo, la paginazione.
============================================================ */
/* ---- archivio: testata ---- */
.bl-hero h1{font-size:clamp(2.1rem,4.2vw,3.2rem);margin-top:12px}
.bl-hero .lead{margin-top:16px;max-width:56ch}
.bl-cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.bl-cat{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;
font-size:.86rem;font-weight:500;color:var(--muted);
background:var(--card);border:1px solid var(--line);border-radius:999px;
transition:border-color .16s,color .16s}
.bl-cat .mono{font-size:.72rem;color:var(--muted);opacity:.7}
.bl-cat:hover{border-color:var(--azure);color:var(--navy)}
.bl-cat.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
.bl-cat.is-on .mono{color:rgba(255,255,255,.6)}
/* ---- griglia ---- */
.bl-lista{display:flex;flex-direction:column;gap:clamp(20px,3vw,34px)}
/* Quattro colonne quando lo schermo le regge, poi giu' a scalare.
Le card sono piu' compatte apposta: in un indice conta vedere quanti
pezzi ci sono e di cosa parlano, non leggerne l'anteprima per intero. */
.bl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:clamp(14px,1.6vw,20px)}
@media (max-width:1240px){.bl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.bl-grid{grid-template-columns:1fr}}
/* ---- card ---- */
.bl-card{position:relative;display:flex;flex-direction:column;
background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
overflow:hidden;box-shadow:var(--sh-1);
transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.bl-card:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:#D3DEEC}
/* Il link copre la card: tutta cliccabile senza annidare dentro . */
.bl-card-l{position:absolute;inset:0;z-index:2}
.bl-card-img{aspect-ratio:16/9;background:var(--paper-2);overflow:hidden}
.bl-card-img img{width:100%;height:100%;object-fit:cover}
.bl-card-c{display:flex;flex-direction:column;gap:7px;padding:15px 16px 17px}
.bl-card-c h3{font-size:1rem;line-height:1.26}
.bl-card-c p{font-size:.86rem;line-height:1.5;color:var(--muted);
/* due righe e basta: sotto, le card si allungano a caso e la griglia
smette di leggersi come una griglia */
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl-meta{font-size:.71rem;color:var(--muted);margin-top:auto;padding-top:4px}
.bl-card.is-grande{display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch}
.bl-card.is-grande .bl-card-img{aspect-ratio:auto;height:100%;min-height:220px}
.bl-card.is-grande .bl-card-c{justify-content:center;padding:clamp(24px,3vw,40px)}
.bl-card.is-grande h3{font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.18}
.bl-card.is-grande p{font-size:.95rem;-webkit-line-clamp:3}
@media (max-width:820px){
.bl-card.is-grande{grid-template-columns:1fr}
.bl-card.is-grande .bl-card-img{min-height:0;aspect-ratio:16/9}
}
.bl-vuoto{color:var(--muted);padding:40px 0}
/* ---- paginazione ---- */
.bl-pag ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0;
justify-content:center}
.bl-pag a,.bl-pag span{display:inline-flex;align-items:center;justify-content:center;
min-width:40px;height:40px;padding:0 13px;font-size:.9rem;font-weight:500;
color:var(--muted);background:var(--card);border:1px solid var(--line);
border-radius:var(--r-s)}
.bl-pag a:hover{border-color:var(--azure);color:var(--navy)}
.bl-pag .current{background:var(--navy);border-color:var(--navy);color:#fff}
/* ---- articolo ----
Testata, copertina e corpo condividono la stessa misura stretta: se il
titolo parte dal bordo e il testo dal centro si vede lo scalino. */
.bl-art-hd .wrap,
.bl-art-cover .wrap{max-width:min(100% - 40px,720px)}
.bl-art-hd{padding:clamp(38px,5vw,66px) 0 0}
.bl-art-hd h1{font-size:clamp(2rem,4vw,3.05rem);margin-top:18px;max-width:20ch}
.bl-art-hd .lead{margin-top:18px;max-width:62ch}
.bl-art-hd .bl-meta{display:block;margin-top:20px}
.bl-briciole{display:flex;flex-wrap:wrap;gap:8px;font-size:.75rem;color:var(--muted)}
.bl-briciole a{color:var(--muted)}
.bl-briciole a:hover{color:var(--azure)}
.bl-art-cover{margin-top:clamp(26px,3.5vw,44px)}
.bl-art-cover img{width:100%;height:auto;border-radius:var(--r-l);
border:1px solid var(--line);box-shadow:var(--sh-2)}
/* Il corpo dell'articolo e' l'unico punto del sito con testo lungo:
misura stretta e interlinea generosa, il resto della pagina non cambia. */
.bl-art-corpo{padding:clamp(30px,4vw,52px) 0}
.bl-art-corpo .wrap{max-width:min(100% - 40px,720px)}
.bl-art-corpo p,.bl-art-corpo li{font-size:1.06rem;line-height:1.75;color:#22364F}
.bl-art-corpo p{margin-top:1.15em}
.bl-art-corpo h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-top:1.9em}
.bl-art-corpo h3{font-size:1.22rem;margin-top:1.6em}
.bl-art-corpo ul,.bl-art-corpo ol{margin-top:1.1em;padding-left:1.35em}
.bl-art-corpo li{margin-top:.5em}
.bl-art-corpo li::marker{color:var(--azure)}
.bl-art-corpo a{color:var(--azure-d);text-decoration:underline;text-underline-offset:3px}
.bl-art-corpo strong{color:var(--navy);font-weight:600}
.bl-art-corpo img{width:100%;height:auto;border-radius:var(--r-m);margin-top:1.6em;
border:1px solid var(--line)}
.bl-art-corpo blockquote{margin:1.8em 0;padding:2px 0 2px 22px;
border-left:3px solid var(--azure);color:var(--navy);font-size:1.1rem}
.bl-art-corpo blockquote p{margin-top:.5em}
.bl-art-corpo pre{margin-top:1.5em;padding:16px 18px;overflow-x:auto;
background:var(--ink);color:#DDE7F5;border-radius:var(--r-m);
font-family:var(--f-mono);font-size:.85rem;line-height:1.6}
.bl-art-corpo code{font-family:var(--f-mono);font-size:.88em;
background:var(--paper-2);padding:.14em .4em;border-radius:4px}
.bl-art-corpo pre code{background:none;padding:0}
.bl-art-corpo hr{margin:2.4em 0;border:0;border-top:1px solid var(--line)}
.bl-art-corpo table{width:100%;border-collapse:collapse;margin-top:1.6em;font-size:.95rem;
/* Una tabella di cinque colonne su telefono sfonda la colonna di testo:
meglio farla scorrere da sola che far scorrere tutta la pagina. */
display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (min-width:620px){.bl-art-corpo table{display:table}}
.bl-art-corpo th,.bl-art-corpo td{padding:10px 12px;border-bottom:1px solid var(--line);
text-align:left;vertical-align:top}
.bl-art-corpo th{font-weight:600;color:var(--navy);white-space:nowrap;
border-bottom-width:2px}
.bl-art-corpo tbody tr:last-child td{border-bottom:0}
/* I numeri incolonnati si leggono solo se hanno tutti la stessa larghezza. */
.bl-art-corpo td{font-variant-numeric:tabular-nums}
.bl-art-tag .wrap{max-width:min(100% - 40px,720px);display:flex;flex-wrap:wrap;gap:8px;
padding-bottom:clamp(20px,3vw,34px)}
.bl-tag{font-family:var(--f-mono);font-size:.76rem;color:var(--muted);
padding:5px 11px;background:var(--paper-2);border-radius:999px}
.bl-tag:hover{color:var(--navy)}
.bl-altri{background:var(--paper-2);border-top:1px solid var(--line)}
/* ============================================================
Blocco di chiusura dell'articolo
Fondo scuro come la sezione contatti della home, cosi' si legge
come una pausa e non come un'altra sezione dell'articolo.
============================================================ */
.bl-cta{background:var(--ink);color:#fff;padding:clamp(38px,5vw,64px) 0;
position:relative;overflow:hidden}
/* La barra del brand in cima: e' l'unico punto in cui i quattro colori
stanno insieme, e serve a segnare lo stacco. */
.bl-cta::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
background:var(--brand-bar)}
.bl-cta-in{display:grid;grid-template-columns:1.15fr .85fr;
gap:clamp(28px,4vw,56px);align-items:center}
@media (max-width:860px){.bl-cta-in{grid-template-columns:1fr}}
.bl-cta .eyebrow{color:#7CD4FF}
.bl-cta h2{font-size:clamp(1.5rem,2.6vw,2.15rem);margin-top:12px;color:#fff}
.bl-cta p{margin-top:16px;max-width:52ch;color:rgba(255,255,255,.74);
font-size:.98rem;line-height:1.6}
.bl-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.bl-cta-note{margin-top:16px;font-size:.74rem;color:rgba(255,255,255,.45)}
/* Il fac-simile a destra: non e' uno screenshot, e' un'evocazione.
Nascosto sotto i 860px, dove ruberebbe solo spazio al pulsante. */
.bl-cta-art{display:flex;justify-content:center}
@media (max-width:860px){.bl-cta-art{display:none}}
.bl-cta-card{width:100%;max-width:330px;padding:18px;border-radius:var(--r-l);
background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.bl-cta-chip{display:inline-block;font-family:var(--f-mono);font-size:.68rem;
letter-spacing:.04em;color:#7CD4FF;background:rgba(0,170,255,.13);
border:1px solid rgba(0,170,255,.28);border-radius:999px;padding:4px 10px}
.bl-cta-riga{display:flex;align-items:center;justify-content:space-between;
gap:12px;margin-top:12px;padding-bottom:10px;
border-bottom:1px solid rgba(255,255,255,.08);font-size:.85rem}
.bl-cta-riga:last-of-type{border-bottom:0}
.bl-cta-riga b{font-weight:500;color:rgba(255,255,255,.86)}
.bl-cta-riga i{font-style:normal;font-family:var(--f-mono);font-size:.68rem;
padding:3px 9px;border-radius:999px;
color:#6FCBA8;background:rgba(30,158,106,.16)}
.bl-cta-riga i.w{color:#F0B45C;background:rgba(218,109,17,.16)}
.bl-cta-riga i.n{color:#F08BB8;background:rgba(210,19,110,.16)}
.bl-cta-bar{height:5px;border-radius:999px;margin-top:16px;
background:var(--brand-bar);opacity:.85}