/* ==========================================================================
   Páginas públicas do blog (blog.html — listagem, post.html — artigo).
   Reaproveita os tokens/header/footer do site. Ver js/blog-render.js.
   ========================================================================== */

.blog-hero{ padding:calc(var(--space-10) + 40px) 0 var(--space-6); text-align:center; background:var(--bg-primary); }
@media (max-width:1023px){ .blog-hero{ padding:calc(var(--space-6) + 40px) 0 var(--space-4); } }
.blog-hero-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(2.2rem,4.5vw,3.2rem); letter-spacing:-0.02em; color:var(--text-primary); }
.blog-hero-sub{ margin:14px auto 0; max-width:560px; font-size:16px; line-height:1.55; color:var(--text-secondary); }

.blog-preview-notice, .post-preview-notice{
  display:inline-flex; align-items:center; gap:8px; margin:20px auto 0;
  background:#FFF7E6; border:1px solid #F3D98B; color:#7A5A00;
  border-radius:999px; padding:8px 16px; font-size:12.5px; font-weight:600;
}
.post-preview-notice{ display:flex; margin:0 0 24px; border-radius:12px; }

.blog-list-section{ padding:0 0 var(--space-10); background:var(--bg-primary); }
@media (max-width:1023px){ .blog-list-section{ padding-bottom:var(--space-6); } }

.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:8px; }
@media (max-width:1023px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .blog-grid{ grid-template-columns:1fr; } }

.blog-card{
  display:block; background:var(--surface-white); border:1px solid var(--border-light); border-radius:18px;
  overflow:hidden; transition:transform var(--motion-fast) var(--ease-premium), box-shadow var(--motion-fast) var(--ease-premium);
}
.blog-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(11,20,34,.10); }
.blog-card-cover{ width:100%; height:180px; object-fit:cover; display:block; background:var(--surface-soft); }
.blog-card-cover--empty{ background:linear-gradient(135deg, var(--surface-soft), var(--border-light)); }
.blog-card-body{ padding:20px; }
.blog-card-date{ font-size:12px; color:var(--text-muted); margin-bottom:8px; }
.blog-card-title{ font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--text-primary); line-height:1.3; margin-bottom:8px; }
.blog-card-excerpt{ font-size:14px; line-height:1.5; color:var(--text-secondary); }

.blog-empty{ text-align:center; color:var(--text-muted); padding:48px 0; }

/* ---------- Artigo individual ---------- */
.post-wrap{ max-width:760px; padding-top:calc(var(--space-8) + 40px); padding-bottom:var(--space-10); }
.post-back{ display:inline-block; font-size:14px; font-weight:600; color:var(--brand-teal-600); margin-bottom:24px; }
.post-back:hover{ color:var(--brand-teal-500); }
.post-date{ font-size:13px; color:var(--text-muted); margin-bottom:10px; }
.post-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.9rem,3.6vw,2.8rem); letter-spacing:-0.02em; color:var(--text-primary); line-height:1.2; margin-bottom:28px; }
.post-cover{ width:100%; max-height:420px; object-fit:cover; border-radius:18px; margin-bottom:32px; }
.post-body{ font-size:17px; line-height:1.75; color:var(--text-secondary); }
.post-body p{ margin-bottom:22px; }
.post-body p:last-child{ margin-bottom:0; }
.post-h2{ font-family:var(--font-display); font-size:23px; font-weight:700; color:var(--text-primary); margin:36px 0 16px; line-height:1.3; }
.post-h2:first-child{ margin-top:0; }

.post-notfound{ text-align:center; padding:calc(var(--space-10) + 40px) 0 var(--space-10); }
.post-notfound h1{ font-family:var(--font-display); font-size:28px; font-weight:700; color:var(--text-primary); margin-bottom:12px; }
.post-notfound p{ color:var(--text-secondary); margin-bottom:24px; }