/* Estilos específicos do Blog — reaproveita css/style.css (tokens, header, footer, botões) */

.blog-hero{
  background: var(--olive-dark);
  color: var(--cream-text);
  padding: 70px 0 50px;
  text-align:center;
}
.blog-hero h1{ font-size: clamp(2rem,4vw,2.8rem); }
.blog-hero p{ max-width: 560px; margin: 10px auto 0; color: rgba(255,255,255,.85); }

.blog-main{ background: var(--cream); padding-block: 60px; min-height: 50vh; }

.post-list{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
}
.post-card{
  background:#fff; border-radius: var(--radius-md); overflow:hidden;
  box-shadow: 0 8px 20px rgba(43,35,19,.10);
  display:flex; flex-direction:column;
  transition: transform .15s ease;
}
.post-card:hover{ transform: translateY(-4px); }
.post-card__img{
  height: 180px; background: linear-gradient(135deg, var(--olive), var(--forest));
  background-size: cover; background-position:center;
}
.post-card__body{ padding: 20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.post-card__body h2{ font-size: 1.15rem; margin:0; }
.post-card__body p{ color: var(--ink-soft); font-size:.92rem; margin:0; flex:1; }
.post-card__date{ font-size:.78rem; color: var(--terracotta); font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.post-card__link{ margin-top:10px; font-weight:700; color: var(--terracotta); }

.empty-state{ text-align:center; color: var(--ink-soft); padding: 60px 20px; }

/* Post individual */
.post-article{ max-width: 760px; margin: 0 auto; background:#fff; border-radius: var(--radius-lg); padding: 40px; box-shadow: 0 8px 24px rgba(43,35,19,.10); }
.post-article__img{ width:100%; height:320px; border-radius: var(--radius-md); background-size:cover; background-position:center; margin-bottom: 26px; }
.post-article h1{ font-size: clamp(1.8rem,3.4vw,2.4rem); }
.post-article__meta{ color: var(--terracotta); font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom: 20px; }
.post-article__content{ color: var(--ink-soft); font-size: 1.05rem; }
.post-article__content p{ margin-bottom: 1.2em; }
.post-article__content img{ border-radius: var(--radius-md); margin: 1.2em 0; }
.back-link{ display:inline-block; margin-bottom: 24px; font-weight:700; color: var(--terracotta); }

@media (max-width: 900px){
  .post-list{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 600px){
  .post-list{ grid-template-columns: 1fr; }
  .post-article{ padding: 24px; }
}