/* =========================================================
   Blog — Terapeuta Cida Lima
   Reaproveita tokens de css/styles.css
   ========================================================= */

.blog-hero {
  padding: 150px 0 60px;
  background:
    radial-gradient(circle at 85% 15%, rgba(201, 166, 107, 0.18), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(124, 139, 111, 0.16), transparent 45%),
    var(--cor-fundo);
  text-align: center;
}
.blog-hero .container { display: flex; flex-direction: column; align-items: center; }
.blog-hero h1 { font-size: clamp(2rem, 5vw, 2.8rem); max-width: 720px; }
.blog-hero p { color: var(--cor-texto-suave); max-width: 560px; margin-top: 14px; font-size: 1.05rem; }

.blog-lista { padding-bottom: 100px; }

.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 720px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1020px) {
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
}

.post-card {
  background: var(--cor-branco);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: var(--sombra);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}
.post-card:hover { transform: translateY(-6px); box-shadow: var(--sombra-forte); }

.post-emoji {
  width: 54px; height: 54px;
  border-radius: 14px;
  background: var(--cor-fundo-alt);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  font-size: 1.6rem;
}

.post-categoria {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cor-primaria-escura);
  margin-bottom: 10px;
}

.post-card h3 {
  font-size: 1.15rem;
  margin-bottom: 10px;
  line-height: 1.3;
}

.post-card p {
  color: var(--cor-texto-suave);
  font-size: 0.94rem;
  flex: 1;
  margin-bottom: 16px;
}

.post-data {
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
  opacity: 0.8;
}

.blog-estado {
  text-align: center;
  padding: 60px 20px;
  color: var(--cor-texto-suave);
  grid-column: 1 / -1;
}

/* ---------- Post individual ---------- */
.post-artigo {
  padding: 150px 0 100px;
}
.post-artigo .container { max-width: 760px; }

.post-voltar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--cor-primaria-escura);
  margin-bottom: 30px;
}
.post-voltar svg { width: 16px; height: 16px; }

.post-artigo header h1 {
  font-size: clamp(1.9rem, 4.5vw, 2.6rem);
  margin: 16px 0 18px;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
  margin-bottom: 40px;
}
.post-meta .ponto { opacity: 0.5; }

.post-conteudo p {
  margin-bottom: 22px;
  font-size: 1.06rem;
  color: var(--cor-texto);
  line-height: 1.75;
}

.post-cta {
  margin-top: 50px;
  padding: 34px;
  background: var(--cor-fundo-alt);
  border-radius: var(--radius);
  text-align: center;
}
.post-cta p { color: var(--cor-texto-suave); margin-bottom: 18px; }