/* blog.css — listagem pública do blog (frontend/blog.html).
   Carregado depois de base.css. Fundo claro (papel, o padrão do body) — por
   isso usa .olho/.h2/.lead direto, sem override de cor: essas classes já
   são calibradas pra fundo claro em base.css. Não reusar .btn-linha aqui
   fora de .topo/.rodape/.barra: é calibrada só pra fundo escuro. */

.blog-topo{padding:clamp(2.6rem,6vw,4rem) 0 clamp(1.6rem,4vw,2.2rem)}
.blog-corpo{padding:clamp(1rem,3vw,1.6rem) 0 clamp(3rem,7vw,5rem)}

.blog-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.4rem;margin-top:1.6rem}

.blog-card{display:flex;flex-direction:column;border:1px solid rgba(17,24,35,.1);border-radius:var(--raio);
  overflow:hidden;background:#fff;text-decoration:none;color:inherit;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.blog-card:hover,.blog-card:focus-visible{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(14,30,51,.35);
  border-color:rgba(201,162,75,.5)}
.blog-card-img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--papel-2);display:block}
.blog-card-corpo{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1}
.blog-card-categoria{font-size:.66rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ouro-escuro);margin-bottom:.55rem}
.blog-card-titulo{font-family:var(--serif);font-weight:400;font-size:1.15rem;line-height:1.32;margin-bottom:.5rem;color:var(--tinta)}
.blog-card-resumo{font-size:.88rem;color:var(--suave);line-height:1.55;flex:1;margin-bottom:.9rem}
.blog-card-data{font-size:.78rem;color:var(--suave)}

.blog-carregando,.blog-vazio{color:var(--suave);font-size:.95rem;padding:1.2rem 0}