/* blog.css — só o que falta no base.css do site.
   As cores, fontes e o header/footer vêm de site/b/base.*.css; aqui é layout de blog. */

.page.blog .wrap{max-width:820px}
.blog-index .wrap{max-width:860px}

/* ---- navegação de migalha */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 18px;font-size:13px;color:var(--ink-3)}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--brand);text-decoration:underline}
.crumbs span[aria-current]{color:var(--ink-2)}

/* ---- cabeçalho do post */
.post-meta{margin:14px 0 0;padding-bottom:18px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink-3)}

/* ---- corpo do artigo */
.post-body{margin-top:28px;max-width:720px}
.post-body p,.post-body li{font-size:16.5px;line-height:1.68;color:var(--ink-2)}
.post-body p{margin:0 0 16px}
.post-body h2{font-size:24px;margin:34px 0 12px;color:var(--ink)}
.post-body h3{font-size:18.5px;margin:26px 0 8px;color:var(--ink)}
.post-body ul,.post-body ol{margin:0 0 18px;padding-left:22px;display:flex;flex-direction:column;gap:7px}
.post-body li{padding-left:2px}
.post-body strong,.post-body b{color:var(--ink);font-weight:600}
.post-body a{text-underline-offset:2px;text-decoration-thickness:1px}
.post-body code{font:0.92em var(--font-mono);background:var(--brand-tint);color:var(--brand-strong);padding:1px 5px;border-radius:5px}
.post-body hr{border:0;border-top:1px solid var(--line);margin:30px 0}
.post-body .callout{margin:22px 0;padding:14px 18px;background:var(--brand-tint);border-left:3px solid var(--brand);border-radius:0 10px 10px 0}
.post-body .callout p{margin:0;color:var(--ink);font-size:15.5px}

/* ---- caixa de chamada para o produto */
.post-cta{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:space-between;
  margin:40px 0 0;padding:26px 28px;border-radius:var(--r-lg);background:var(--panel);color:var(--panel-text)}
.post-cta b{display:block;font:700 19px/1.2 var(--font-display);letter-spacing:-.01em;color:#fff}
.post-cta>div:first-child{flex:1 1 340px;min-width:0}
.post-cta-actions{flex:0 0 auto}
.post-cta p{margin:8px 0 0;max-width:48ch;font-size:14.5px;line-height:1.6;color:var(--panel-muted)}
.post-cta-actions{display:flex;flex-wrap:wrap;gap:10px}
.post-cta .btn-ghost{color:#fff;border-color:#ffffff45;background:transparent}
.post-cta .btn-ghost:hover{background:#ffffff14;border-color:#ffffff70}

.post-source{margin:22px 0 0;max-width:70ch;font-size:13px;line-height:1.6;color:var(--ink-3)}

/* ---- lista de posts */
.post-grid{display:grid;gap:16px;margin:30px 0 0}
.post-card{display:block;padding:22px 24px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);text-decoration:none;color:inherit;
  transition:border-color .18s,box-shadow .25s,transform .25s var(--ease-out, ease)}
.post-card:hover{border-color:#b6c8d0;box-shadow:var(--shadow);transform:translateY(-2px)}
.post-card:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.card-cat{font:600 11px/1 var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--brand)}
.post-card h2,.post-card h3{margin:11px 0 0;font-size:21px;line-height:1.25;color:var(--ink);letter-spacing:-.015em}
.post-card p{margin:9px 0 0;font-size:15px;line-height:1.6;color:var(--ink-2);max-width:64ch}
.card-meta{display:block;margin-top:14px;font-size:12.5px;color:var(--ink-3)}

/* ---- relacionados */
.related{margin-top:48px;padding-top:6px;border-top:1px solid var(--line)}
.related h2{margin:22px 0 0;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-family:var(--font-body);font-weight:600}
.related .post-grid{margin-top:16px}
.related .post-card h3{font-size:18px}

@media(max-width:720px){
  .page.blog,.blog-index{padding-top:34px}
  .post-body p,.post-body li{font-size:16px}
  .post-body h2{font-size:21px}
  .post-cta{padding:20px;gap:14px}
  .post-cta>div:first-child{flex:1 1 100%}
  .post-cta-actions{flex:1 1 100%}
  .post-cta-actions .btn{flex:1 1 100%}
  .post-card{padding:18px 18px}
  .post-card h2,.post-card h3{font-size:19px}
}