/* O blog usa o mesmo estilo.css do site. Aqui ficam só as peças que
   existem apenas no blog: o cartão da lista e o corpo do post. */

/* ---------- lista de posts ---------- */
.posts{
  display:grid; gap:1.4rem; margin-top:2.4rem;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
@media(min-width:980px){
  .posts{grid-template-columns:repeat(3,1fr)}
}
.post-cartao{
  display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--linha); border-radius:13px;
  overflow:hidden; text-decoration:none;
  transition:border-color .24s var(--suave), transform .24s var(--suave);
}
.post-cartao:hover{border-color:var(--acao); transform:translateY(-3px)}
.post-cartao img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block}
.post-cartao .dentro{padding:1.2rem 1.3rem 1.4rem; display:flex; flex-direction:column; flex:1}
.post-cartao .ep{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--brasa-forte);
}
.post-cartao h3{
  margin:.6rem 0 .5rem; font-family:var(--display); font-weight:400;
  font-size:1.2rem; line-height:1.25; letter-spacing:-.012em;
}
.post-cartao p{margin:0; font-size:.93rem; color:var(--tinta-2); flex:1}
.post-cartao .quando{
  margin-top:1rem; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.08em; color:var(--tinta-3);
}

/* ---------- o post ---------- */
.post-cab{padding-top:clamp(2.6rem,7vw,4.6rem)}
.post-cab h1{
  margin:1rem 0 0; font-size:clamp(2rem,1.4rem + 2.6vw,3.1rem);
  letter-spacing:-.02em; max-width:22ch;
}
.post-meta{
  margin-top:1.1rem; font-family:var(--mono); font-size:.66rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--tinta-3);
}
.post .moldura{
  position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden;
  background:var(--panel); border:1px solid var(--linha);
}
.post .moldura iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.post-corpo{margin-top:2rem; font-size:1.08rem; line-height:1.7}
.post-corpo p{margin:0 0 1.1rem}
.post-corpo p:last-child{margin-bottom:0}
.post-corpo h2{
  margin:2.4rem 0 .8rem;
  font-size:clamp(1.4rem,1.15rem + 1.1vw,1.9rem); letter-spacing:-.015em;
  color:var(--brasa-forte);
}
.post-corpo figure{margin:2.2rem 0}
.post-corpo figure img{width:100%; border-radius:12px; border:1px solid var(--linha)}
.post-lede{
  margin-top:1.6rem; font-size:1.16rem; line-height:1.6; color:var(--tinta);
  padding-left:1.2rem; border-left:2px solid var(--acao);
}

/* ---------- apresentação pessoal, "Olá, eu sou" ---------- */
.autor{
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(1.4rem,4vw,2.4rem);
  margin-top:2.2rem; padding:clamp(1.6rem,4vw,2.4rem);
  border-radius:15px; background:var(--panel);
  border:1px solid var(--linha); border-top:2px solid var(--brasa);
}
.autor img{
  width:132px; height:132px; flex:0 0 auto; object-fit:cover;
  border-radius:16px; border:1px solid var(--linha-forte);
}
.autor-txt{flex:1 1 320px}
.autor-txt h2{
  margin:0 0 .8rem; font-family:var(--display); font-weight:400;
  font-size:clamp(1.5rem,1.25rem + 1vw,1.9rem); letter-spacing:-.014em;
}
.autor-txt p{margin:0 0 .9rem; font-size:.98rem; line-height:1.6; color:var(--tinta-2)}
.autor-txt p:last-child{margin-bottom:0}
.autor-txt .cargo{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brasa-forte); margin-bottom:.5rem; display:block;
}