/* Blog: complementa style.css (mesmos tokens). Nao altera a home. */

/* Header sempre escuro: nao ha hero atras dele nas paginas do blog */
header.blog-header{
  background:rgba(232,231,227,0.92);
  border-bottom:1px solid rgba(165,157,148,0.25);
  padding:14px 0;
}
header.blog-header .logo-mark span,
header.blog-header .nav-links a,
header.blog-header .nav-cta{color:var(--brand-dark);}
header.blog-header .nav-cta{border-color:var(--brand-dark);}
header.blog-header .nav-cta:hover{color:var(--branco);}
header.blog-header .menu-btn span,
header.blog-header .menu-btn span::before,
header.blog-header .menu-btn span::after{background:var(--brand-dark);}

/* Rodape sempre no fim da janela, mesmo com pouco conteudo */
body{min-height:100vh;display:flex;flex-direction:column;}
.blog-main{flex:1 0 auto;padding:150px 0 100px;}
footer{flex-shrink:0;}
.blog-main section{padding:0;}

/* Listagem */
.blog-head{max-width:640px;margin-bottom:56px;}
.blog-head h1{font-size:clamp(32px,4vw,52px);line-height:1.12;}
.blog-head p{margin-top:16px;color:var(--brand-mid);font-weight:300;font-size:17px;}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:40px 32px;}
.post-card a{display:block;}
.post-card-img{aspect-ratio:3/2;background:var(--cinza);overflow:hidden;border-radius:2px;}
.post-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.post-card a:hover .post-card-img img{transform:scale(1.03);}
.post-meta{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-mid);margin-top:18px;}
.post-card h2{font-size:23px;line-height:1.25;margin-top:8px;}
.post-card p{margin-top:10px;font-size:15px;color:var(--brand-mid);font-weight:300;}
.blog-empty{color:var(--brand-mid);font-size:17px;font-weight:300;}

/* Artigo */
.post{max-width:720px;margin:0 auto;}
.post-back{display:inline-block;font-size:13px;letter-spacing:.04em;color:var(--brand-mid);margin-bottom:32px;}
.post-back:hover{color:var(--brand-dark);}
.post h1{font-size:clamp(30px,4.2vw,48px);line-height:1.14;margin-top:6px;}
.post-cover{margin:36px 0 8px;border-radius:2px;overflow:hidden;}
.post-body{margin-top:36px;font-size:18px;line-height:1.75;font-weight:300;}
.post-body > * + *{margin-top:1.3em;}
.post-body h2{font-size:30px;line-height:1.2;margin-top:2em;}
.post-body h3{font-size:23px;line-height:1.25;margin-top:1.8em;}
.post-body a{text-decoration:underline;text-decoration-color:var(--terracota);text-underline-offset:3px;}
.post-body a:hover{color:var(--terracota-escuro);}
.post-body ul,.post-body ol{padding-left:1.4em;}
.post-body li + li{margin-top:.4em;}
.post-body blockquote{border-left:2px solid var(--terracota);padding-left:20px;color:var(--brand-mid);font-style:italic;}
.post-body img{border-radius:2px;}
.post-body hr{border:0;border-top:1px solid var(--cinza);margin:2.4em 0;}
.post-cta{margin-top:72px;padding:36px;background:var(--branco);border-top:1px solid var(--terracota);}
.post-cta h2{font-size:24px;}
.post-cta p{margin:10px 0 24px;color:var(--brand-mid);font-weight:300;}

@media (max-width:640px){
  .blog-main{padding:120px 0 72px;}
  .post-body{font-size:17px;}
  .post-cta{padding:26px;}
}