/**
 * blog-v2.css: /blog e /blog/{slug} no design da /sites.
 * Camada própria sobre sites/sites.css + portfolio-v2/portfolio-v2.css (carregados antes pelo _theme_lp, NÃO editados).
 * Prefixos: bg- (listagem) e bd- (artigo e .bd-prose). Só tokens do DS (var(--...)).
 * Reaproveita pf-hero, pf-h1, pf-lead, pf-bar, pf-chip, pf-cover/pf-ph, pf-cta*, pf-crumb, pf-empty, pf-reset, pf-count,
 * pf-title/pf-link/pf-sum/pf-more, hm-path e hm-reveal. NÃO usa .pf-card, #pf-grid nem data-filter (o filtro do portfolio agiria aqui).
 */

/* ---------- listagem: grid e card ---------- */
.bg-hero .pf-h1{ max-width:18ch; }
.bg-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,19.5rem),1fr)); gap:clamp(1.2rem,3vw,2rem); }
.bg-card{ padding:clamp(1.1rem,2vw,1.5rem); overflow:hidden; }
.bg-card[hidden]{ display:none; }
.bg-card .hm-path-top{ flex-wrap:wrap; justify-content:flex-start; gap:.5rem; margin-bottom:1.1rem; }
.bg-card .pf-cover{ margin-bottom:1.2rem; }
.bg-card:hover .pf-cover img{ transform:scale(1.03); }
.bg-card .pf-title{ font-size:clamp(1.2rem,1.9vw,1.5rem); }
.bg-meta{ margin:0 0 1rem; display:flex; flex-wrap:wrap; gap:.2rem .7rem; max-width:none; }
.bg-body{ display:flex; flex-direction:column; flex:1; min-width:0; }

/* destaque: card largo (2 colunas) no mesmo grid, capa à esquerda e texto à direita */
.bg-grid:not(.is-filtered) .bg-card--hero{ grid-column:span 2; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(1.2rem,3vw,2.4rem); align-items:center; }
.bg-grid:not(.is-filtered) .bg-card--hero .pf-cover{ margin:0; }
.bg-grid:not(.is-filtered) .bg-card--hero .pf-title{ font-size:clamp(1.5rem,2.6vw,2.1rem); }
.bg-grid:not(.is-filtered) .bg-card--hero .pf-sum{ -webkit-line-clamp:5; }

.bd-badge-feat{ color:var(--color-primary-400); border-color:rgba(var(--color-primary-rgb),.45); }

/* ---------- artigo ---------- */
.bd-progress{
    position:fixed; top:0; left:0; right:0; height:3px; z-index:61;
    background:var(--color-primary-400);
    transform:scaleX(0); transform-origin:0 50%;
    pointer-events:none;
}
.bd-progress.is-animated{ transition:transform var(--trans-fast); }

.bd-article{ max-width:56rem; }
.bd-head{ max-width:46rem; }
.bd-h1{ max-width:24ch; font-size:clamp(1.9rem,4.2vw,3rem); line-height:1.08; }
.bd-head .pf-lead{ margin-top:1.2rem; max-width:52ch; }
.bd-meta{ list-style:none; margin:1.6rem 0 0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1rem; font-size:.86rem; color:var(--text-secondary); }
.bd-meta li + li::before{ content:'·'; margin-right:1rem; color:var(--text-tertiary); }
.bd-meta strong{ color:var(--text-primary); font-weight:600; }
.bd-tags{ list-style:none; margin:1.2rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.bd-tag{
    display:inline-block; padding:.3em .8em; border-radius:var(--radius-full);
    border:1px solid var(--border-default); color:var(--text-secondary);
    font-size:.78rem; background:color-mix(in srgb, var(--surface-card) 70%, transparent);
}
.bd-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; margin-top:1.4rem; }
.bd-copy-status{ font-size:.82rem; color:var(--text-secondary); min-height:1.4em; }
.bd-cover{ margin-top:clamp(2rem,5vh,3rem); margin-bottom:0; border:1px solid var(--border-default); border-radius:var(--radius-xl); }

/* sumário automático */
.bd-toc{
    max-width:46rem; margin-top:clamp(2rem,5vh,2.8rem); padding:1.2rem 1.5rem 1.3rem;
    border:1px solid var(--border-default); border-radius:var(--radius-lg);
    background:color-mix(in srgb, var(--surface-card) 82%, transparent);
}
.bd-toc-h{ margin:0 0 .7rem; max-width:none; }
.bd-toc ol{ margin:0; padding:0 0 0 1.4rem; display:grid; gap:.4rem; }
.bd-toc li{ color:var(--text-tertiary); }
.bd-toc a{ color:var(--text-secondary); }
.bd-toc a:hover{ color:var(--text-accent); }

/* ---------- prosa do artigo (.bd-prose) ---------- */
.bd-prose{ max-width:46rem; margin-top:clamp(2rem,5vh,3rem); font-size:1.04rem; line-height:1.75; color:var(--text-secondary); overflow-wrap:break-word; }
.bd-prose > *:first-child{ margin-top:0; }
.bd-prose p{ max-width:none; margin:0 0 1.3em; }
.bd-prose p:has(> br:only-child){ display:none; }
.bd-prose h2,
.bd-prose h3,
.bd-prose h4{ color:var(--text-primary); scroll-margin-top:calc(var(--layout-hh) + 1.5rem); text-wrap:balance; }
.bd-prose h2{ margin:2.6rem 0 1rem; font-size:clamp(1.45rem,2.6vw,1.9rem); line-height:1.15; letter-spacing:-.03em; }
.bd-prose h3{ margin:2rem 0 .8rem; font-size:clamp(1.15rem,2vw,1.4rem); line-height:1.25; }
.bd-prose h4{ margin:1.6rem 0 .6rem; font-size:1.05rem; font-weight:700; line-height:1.3; }
.bd-prose strong,
.bd-prose b{ color:var(--text-primary); font-weight:700; }
.bd-prose a{ color:var(--text-accent); text-decoration:underline; text-underline-offset:3px; }
.bd-prose a:hover{ color:var(--color-primary-400); }
.bd-prose ul,
.bd-prose ol{ margin:0 0 1.3em; padding-left:1.6rem; }
.bd-prose li{ margin:.4em 0; padding-left:.2rem; }
.bd-prose li > ul,
.bd-prose li > ol{ margin:.4em 0 .6em; }
.bd-prose blockquote{
    margin:1.8rem 0; padding:.2rem 0 .2rem 1.4rem;
    border-left:3px solid var(--color-primary-400); color:var(--text-primary);
}
.bd-prose blockquote p:last-child{ margin-bottom:0; }
.bd-prose code{
    font-family:ui-monospace,'SFMono-Regular','Cascadia Mono','Roboto Mono',monospace; font-size:.88em;
    padding:.15em .45em; border-radius:var(--radius-sm); background:var(--surface-elevated); color:var(--text-primary);
}
.bd-prose pre{
    margin:1.6rem 0; padding:1.1rem 1.3rem; overflow-x:auto; max-width:100%;
    border:1px solid var(--border-default); border-radius:var(--radius-md);
    background:var(--surface-elevated); font-size:.9rem; line-height:1.6;
}
.bd-prose pre code{ padding:0; background:none; border-radius:0; font-size:inherit; white-space:pre; }
.bd-prose img{ max-width:100%; height:auto; margin:1.8rem 0; border-radius:var(--radius-lg); }
.bd-prose figure{ margin:1.8rem 0; }
.bd-prose figure img{ margin:0; }
.bd-prose figcaption{ margin-top:.6rem; font-size:.84rem; color:var(--text-tertiary); }
.bd-prose hr{ margin:2.4rem 0; border:0; border-top:1px solid var(--border-default); }
.bd-table-wrap{ margin:1.8rem 0; overflow-x:auto; max-width:100%; border:1px solid var(--border-default); border-radius:var(--radius-md); }
.bd-table-wrap:focus-visible{ outline:2px solid var(--border-accent); outline-offset:3px; }
.bd-prose table{ width:100%; min-width:32rem; border-collapse:collapse; font-size:.92rem; }
.bd-prose th,
.bd-prose td{ padding:.7rem 1rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--border-subtle); }
.bd-prose th{ background:var(--surface-elevated); color:var(--text-primary); font-weight:700; }
.bd-prose tr:last-child td{ border-bottom:0; }
.bd-prose s,
.bd-prose del{ color:var(--text-tertiary); }

/* ---------- relacionados ---------- */
.bd-related{ max-width:74rem; margin:0 auto; padding:0 clamp(1.2rem,5vw,3rem) clamp(4rem,10vh,7rem); }
.bd-related-h{ font-size:clamp(1.5rem,3vw,2.2rem); margin-bottom:1.6rem; }

/* ---------- responsivo (desktop-first) ---------- */
@media (max-width:760px){
    .bg-grid{ grid-template-columns:1fr; gap:1.4rem; }
    .bg-grid:not(.is-filtered) .bg-card--hero{ grid-column:auto; display:flex; }
    .bg-grid:not(.is-filtered) .bg-card--hero .pf-cover{ margin:0 0 1.2rem; }
    .bd-actions .btn{ width:100%; }
    .bd-toc{ padding:1rem 1.1rem 1.1rem; }
    .bd-prose{ font-size:1rem; }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
    .bg-card:hover .pf-cover img{ transform:none; }
    .bd-progress.is-animated{ transition:none; }
}