/* ── Guide (/b) — estende linktree.css ────────────────────────── */

/* Shell leggermente più larga per le card prodotto */
.blog-shell{ max-width: 780px; }

/* Nav in alto (torna a guide / links) */
.blog-nav{
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 16px;
}
.blog-back{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 20px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.13);
    color: rgba(255,255,255,.78); font-size: .82rem; font-weight: 600;
    text-decoration: none; transition: all .18s ease;
}
.blog-back:hover{
    background: rgba(255,138,0,.14);
    border-color: rgba(255,138,0,.35);
    color: var(--brand);
}

/* Header articolo */
.blog-head{
    text-align: center;
    margin: 22px 0 18px;
}
.blog-badge{
    display: inline-block;
    padding: 3px 12px; border-radius: 20px;
    font-size: .72rem; font-weight: 700;
    background: rgba(19,167,197,.14);
    border: 1px solid rgba(19,167,197,.28);
    color: #7de8f7;
    margin-bottom: 10px;
}
.blog-title{
    margin: 0 0 6px;
    font-size: clamp(1.3rem, 4vw, 1.7rem);
    font-weight: 800; color: #fff; letter-spacing: -.01em;
}
.blog-subtitle{
    margin: 0;
    font-size: .95rem;
    color: var(--ink-sub);
}
.blog-date{
    margin: 10px 0 0;
    font-size: .76rem;
    color: rgba(255,255,255,.40);
}

/* Testo articolo */
.blog-para{
    font-size: .93rem;
    line-height: 1.7;
    color: rgba(255,255,255,.82);
    margin: 0 0 14px;
}

/* Griglia prodotti: card arrotondate (fuori dal contesto modal) */
.blog-products{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 20px 0;
}
@media (min-width: 560px){
    .blog-products{ grid-template-columns: 1fr 1fr; }
}
.blog-products .lt-printer-card{
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    transition: all .18s ease;
}
.blog-products .lt-printer-card:hover{
    background: rgba(14,26,44,.96);
    border-color: rgba(19,167,197,.32);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px var(--shadow);
}
/* annulla i bordi "a scacchiera" pensati per la griglia del modal */
.blog-products .lt-printer-card:nth-child(odd){ border-right: 1px solid var(--line); }
.blog-products .lt-printer-img-wrap{ height: 210px; }
.blog-products .lt-printer-img{ max-height: 190px; }
.blog-noimg{
    font-size: 3rem;
    opacity: .5;
}

/* Disclosure affiliazione */
.blog-disclosure{
    margin: 18px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: .74rem;
    line-height: 1.6;
    color: rgba(255,255,255,.40);
}

/* ── Blocchi articolo (content builder) ───────────────────────── */
.blog-prose{
    font-size: .93rem;
    line-height: 1.7;
    color: rgba(255,255,255,.82);
    margin: 0 0 14px;
}
/* Solo gli elementi "di testo" dell'editor (senza classe): i componenti
   dentro il contenuto — card prodotto, callout — hanno i loro stili e
   non vanno sovrascritti (es. il bottone Scopri diventava arancione
   su arancione, e il titolo card ereditava il margine dei titoli). */
.blog-prose p:not([class]){ margin: 0 0 14px; }
.blog-prose a:not([class]){ color: var(--brand); }
.blog-prose ul:not([class]), .blog-prose ol:not([class]){ padding-left: 20px; margin: 0 0 14px; }
.blog-prose h2:not([class]), .blog-prose h3:not([class]){
    color: #fff;
    margin: 22px 0 10px;
    font-size: 1.1rem;
    font-weight: 800;
}

/* Immagini inline dell'editor (quelle delle card hanno la loro classe) */
.blog-prose img:not([class]){
    display:block;
    max-width:100%;
    margin: 18px auto;
    border-radius: 16px;
    border: 1px solid var(--line);
}

/* Tabelle inserite dall'editor (scroll orizzontale se non ci stanno) */
.blog-prose table{
    border-collapse: collapse;
    margin: 18px 0;
    font-size: .88rem;
    line-height: 1.5;
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-radius: 10px;
}
.blog-prose th, .blog-prose td{
    border: 1px solid rgba(255,255,255,.14);
    padding: 8px 12px;
    text-align: left;
    vertical-align: top;
    min-width: 80px;
}
.blog-prose th{
    background: rgba(255,255,255,.08);
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
}
.blog-prose tbody tr:nth-child(even) td{ background: rgba(255,255,255,.03); }
.blog-prose td p, .blog-prose th p{ margin: 0; }

.blog-figure{
    margin: 20px 0;
    text-align: center;
}
.blog-figure img{
    max-width: 100%;
    border-radius: 16px;
    border: 1px solid var(--line);
}
.blog-figure figcaption{
    margin-top: 8px;
    font-size: .76rem;
    color: rgba(255,255,255,.45);
}

.blog-callout{
    margin: 20px 0;
    padding: 16px 18px;
    border-radius: 16px;
    background: rgba(19,167,197,.10);
    border: 1px solid rgba(19,167,197,.28);
}
.blog-callout-head{
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
    color: #7de8f7;
}
.blog-callout-emoji{ font-size: 1.2rem; }

/* Varianti colore del box (palette in CalloutBlock::COLORS) */
.blog-callout--primary{ background: rgba(255,138,0,.10); border-color: rgba(255,138,0,.32); }
.blog-callout--primary .blog-callout-head{ color: #ffb56b; }
.blog-callout--success{ background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.32); }
.blog-callout--success .blog-callout-head{ color: #86efac; }
.blog-callout--warning{ background: rgba(250,204,21,.10); border-color: rgba(250,204,21,.32); }
.blog-callout--warning .blog-callout-head{ color: #fde047; }
.blog-callout--danger{ background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.32); }
.blog-callout--danger .blog-callout-head{ color: #fca5a5; }
.blog-callout .blog-prose{ margin-bottom: 0; }
.blog-callout .blog-prose p:last-child{ margin-bottom: 0; }

/* Paginazione della lista articoli */
.blog-pagination{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 20px;
}