/* ============================================================
   Blog — Instituto Toledo
   Componentes específicos do blog. Usa os tokens de styles.css.
   ============================================================ */

/* Meta do post (autor, data, leitura) */
.post-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  margin-top:22px;font-size:.9rem;color:var(--texto-suave);justify-content:center;
}
.post-meta .sep{color:var(--borda)}
.post-meta strong{color:var(--verde);font-weight:700}

/* Grid de posts (listagem) */
.post-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}
.post-card{
  display:flex;flex-direction:column;background:var(--creme);
  border:1px solid var(--borda);border-radius:var(--raio);overflow:hidden;
  box-shadow:var(--sombra-sm);transition:transform .2s,box-shadow .2s;
}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.post-card .capa{
  aspect-ratio:16/10;display:grid;place-items:center;padding:24px;text-align:center;
  background:radial-gradient(120% 120% at 30% 20%,var(--verde-claro),var(--verde-fundo));
}
.post-card .capa span{
  font-family:'Fraunces',serif;color:#f3e8d6;font-size:1.18rem;line-height:1.3;
}
.post-card .capa.areia{background:radial-gradient(120% 120% at 70% 20%,var(--areia-2),var(--sage))}
.post-card .capa.areia span{color:var(--verde)}
.post-card .corpo{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.post-card .cat{
  font-size:.72rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--ambar-escuro);margin-bottom:10px;
}
.post-card h3{font-size:1.18rem;margin-bottom:10px;line-height:1.25}
.post-card p{font-size:.93rem;margin-bottom:18px}
.post-card .ler{margin-top:auto;font-weight:700;color:var(--verde);font-size:.92rem}
.post-card .ler::after{content:" →";color:var(--ambar)}

/* Índice (TOC) */
.toc{
  background:var(--creme);border:1px solid var(--borda);border-left:4px solid var(--ambar);
  border-radius:12px;padding:22px 26px;margin:0 0 34px;box-shadow:var(--sombra-sm);
}
.toc b{display:block;font-family:'Fraunces',serif;color:var(--verde);font-size:1.05rem;margin-bottom:12px}
.toc ol{margin:0 0 0 18px;color:var(--verde-claro)}
.toc li{margin-bottom:7px}
.toc a{color:var(--verde-claro)}
.toc a:hover{color:var(--ambar-escuro)}

/* Caixa do autor */
.autor-box{
  display:flex;gap:20px;align-items:flex-start;background:var(--areia-2);
  border:1px solid var(--borda);border-radius:var(--raio);padding:24px 26px;margin:42px 0 10px;
}
.autor-box .foto{
  flex:0 0 76px;width:76px;height:76px;border-radius:50%;background-size:cover;
  background-position:center 18%;box-shadow:var(--sombra-sm);
  background-color:var(--verde);
}
.autor-box .info b{font-family:'Fraunces',serif;color:var(--verde);font-size:1.12rem;display:block}
.autor-box .info .crp{font-size:.76rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--ambar-escuro);font-weight:700;margin:2px 0 8px}
.autor-box .info p{font-size:.93rem;margin-bottom:0}

/* Referências */
.referencias{margin:38px 0 0;padding:22px 26px;background:var(--creme);border:1px solid var(--borda);border-radius:12px}
.referencias b{display:block;font-family:'Fraunces',serif;color:var(--verde);margin-bottom:10px}
.referencias ol{margin:0 0 0 18px;font-size:.86rem;color:var(--texto-suave)}
.referencias li{margin-bottom:6px}

/* Tags */
.post-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.post-tags a{
  font-size:.8rem;font-weight:600;color:var(--verde);background:var(--sage);
  padding:6px 14px;border-radius:999px;
}
.post-tags a:hover{background:var(--ambar);color:#fff}

/* Aviso de saúde dentro do artigo */
.aviso-saude{
  background:rgba(58,107,90,.08);border:1px dashed var(--verde-claro);border-radius:12px;
  padding:18px 22px;margin:30px 0;font-size:.92rem;color:var(--verde);
}
.aviso-saude b{color:var(--verde)}

/* Filtros de categoria (index) */
.cat-filtros{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:42px}
.cat-filtros span{
  font-size:.85rem;font-weight:600;color:var(--verde);background:var(--creme);
  border:1px solid var(--borda);padding:8px 18px;border-radius:999px;
}

@media(max-width:880px){
  .post-grid{grid-template-columns:1fr 1fr}
  .autor-box{flex-direction:column}
}
@media(max-width:560px){
  .post-grid{grid-template-columns:1fr}
}