/* ==========================================================================
   Blog — Vítor Zimermann Advocacia Criminal
   Complementa css/styles.css
   ========================================================================== */

/* Cabeçalho do blog (fundo escuro fixo, já que não há herói transparente) */
body.blog .site-header{background:rgba(16,36,66,.96);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
body.blog{background:var(--paper)}
.blog-main{padding-top:104px}

/* ---------- HERO do índice ---------- */
.blog-hero{background:linear-gradient(180deg,#0E2447,var(--ink));color:#fff;padding:56px 0 48px;text-align:center}
.blog-hero h1{font-size:clamp(2.2rem,4vw,3.2rem);margin-bottom:.3em}
.blog-hero p{color:rgba(255,255,255,.72);max-width:60ch;margin:0 auto}

/* ---------- Filtros / categorias ---------- */
.blog-cats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.blog-cats span{border:1px solid var(--line);color:rgba(255,255,255,.8);border-radius:999px;padding:.45rem 1rem;font-size:.85rem}

/* ---------- Grade de posts ---------- */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:64px 0}
.post-card{
  display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line-d);
  border-radius:16px;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s
}
.post-card:hover{transform:translateY(-6px);box-shadow:0 26px 50px -28px rgba(16,36,66,.4);border-color:rgba(183,150,90,.5)}
.post-card .pc-top{padding:26px 24px 10px}
.post-cat{font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;color:var(--gold);font-weight:600}
.post-card h2{font-size:1.35rem;margin:.5rem 0 .4rem;line-height:1.2}
.post-card p{color:var(--muted-d);font-size:.94rem;margin:0}
.post-card .pc-foot{margin-top:auto;padding:16px 24px 22px;display:flex;align-items:center;justify-content:space-between;font-size:.82rem;color:var(--muted-d)}
.post-card .pc-foot a{color:var(--gold);font-weight:600}
.post-card a.stretch{position:absolute;inset:0}
.post-card{position:relative}

/* ==========================================================================
   ARTIGO
   ========================================================================== */
.article-wrap{max-width:760px;margin:0 auto;padding:40px 24px 20px}
.breadcrumb{font-size:.82rem;color:var(--muted-d);margin-bottom:22px}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb span{color:var(--ink)}
.article-head .a-cat{font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;color:var(--gold);font-weight:600}
.article-head h1{font-size:clamp(1.9rem,3.6vw,2.7rem);margin:.4rem 0 .5rem}
.article-meta{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--muted-d);font-size:.85rem;border-bottom:1px solid var(--line-d);padding-bottom:22px;margin-bottom:30px}

.article-body{font-size:1.06rem;line-height:1.75;color:#2b333d}
.article-body h2{font-family:var(--serif);font-size:1.7rem;margin:2rem 0 .6rem;color:var(--ink)}
.article-body h3{font-family:var(--serif);font-size:1.3rem;margin:1.4rem 0 .4rem;color:var(--ink)}
.article-body p{margin:0 0 1.1rem}
.article-body ul,.article-body ol{margin:0 0 1.2rem;padding-left:1.3rem}
.article-body li{margin-bottom:.5rem}
.article-body strong{color:var(--ink)}
.article-body a{color:#12335F;text-decoration:underline;text-underline-offset:2px}

/* Caixa "resumo rápido" */
.takeaways{background:var(--paper-2);border-left:3px solid var(--gold);border-radius:0 12px 12px 0;padding:22px 24px;margin:0 0 34px}
.takeaways h2{font-size:1.15rem!important;margin:0 0 .6rem!important;text-transform:uppercase;letter-spacing:.1em;font-family:var(--sans)!important}
.takeaways ul{margin:0;padding-left:1.1rem}
.takeaways li{color:#333b46}

/* CTA no meio/fim do artigo */
.article-cta{
  background:linear-gradient(120deg,var(--ink),var(--ink-3));color:#fff;border-radius:16px;
  padding:30px 32px;margin:34px 0;text-align:center
}
.article-cta h3{color:#fff;font-size:1.5rem;margin:0 0 .4em}
.article-cta p{color:rgba(255,255,255,.78);margin:0 auto 1.2rem;max-width:52ch}

/* FAQ do artigo (reusa .accordion de styles.css) */
.article-faq{margin:40px 0}
.article-faq h2{font-family:var(--serif);font-size:1.7rem;margin-bottom:1rem}

/* Aviso legal */
.legal-note{font-size:.86rem;color:var(--muted-d);background:#f0efe9;border-radius:12px;padding:18px 22px;margin:30px 0}

/* Relacionados */
.related{background:var(--ink);color:#fff;padding:56px 0}
.related h2{color:#fff;text-align:center;font-size:1.8rem;margin-bottom:28px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.related-card{border:1px solid var(--line);border-radius:12px;padding:22px;transition:.2s}
.related-card:hover{border-color:var(--gold);background:rgba(183,150,90,.08)}
.related-card span{font-size:.7rem;text-transform:uppercase;letter-spacing:.18em;color:var(--gold)}
.related-card h3{color:#fff;font-size:1.15rem;margin:.5rem 0 0;font-family:var(--serif)}

/* Refino UX de leitura (artigo) */
.article-body{font-size:1.075rem;line-height:1.8}
.article-body p{max-width:68ch}
.article-head h1{font-family:var(--serif);font-weight:700;letter-spacing:-.4px}
.article-body h2{font-family:var(--serif);font-weight:700}
.article-body h3{font-family:var(--ui,"Plus Jakarta Sans",sans-serif);font-weight:700;font-size:1.25rem;letter-spacing:-.2px}
.takeaways h2{font-family:var(--ui,"Plus Jakarta Sans",sans-serif)!important;font-weight:800!important}

@media (max-width:900px){
  .post-grid,.related-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .post-grid,.related-grid{grid-template-columns:1fr}
  .article-wrap{padding:28px 18px 10px}
  .article-cta{padding:26px 20px}
}

/* Legibilidade de rótulos pequenos no mobile */
.article-head .a-cat{font-size:.8rem}
.breadcrumb{font-size:.86rem}