/* ============================================================
   BLOG — tema claro e neutro, herdando o header da marca
   Carregado DEPOIS de styles.css. O header/nav continua igual
   ao resto do site; só o corpo do blog muda de tema.
   ============================================================ */

body.blog-page{
  --blog-bg:#FAF9F6;
  --blog-surface:#FFFFFF;
  --blog-ink:#1F2430;
  --blog-ink-soft:#5B6472;
  --blog-border:#E7E4DE;
  background:var(--blog-bg);
  color:var(--blog-ink);
}

body.blog-page a{ color:inherit; }

/* Header/nav overrides so they read well against the light body below them
   (the header itself keeps the dark brand background — this only affects
   the thin seam where content meets it) */
body.blog-page main{ display:block; }

/* ---------- BLOG HERO ---------- */
.blog-hero{ padding:64px 0 8px; }
.blog-hero .eyebrow{
  border-color:rgba(255,107,74,0.3);
  background:rgba(255,107,74,0.06);
}
.blog-hero h1{
  font-family:'Space Grotesk', sans-serif; font-weight:700;
  font-size:48px; color:var(--blog-ink); letter-spacing:-0.01em;
  margin-bottom:16px;
}
.blog-hero p{
  color:var(--blog-ink-soft); font-size:17px; line-height:1.6; max-width:560px;
}

/* ---------- POST GRID (index) ---------- */
.post-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:28px;
  padding:48px 0 100px;
}
.post-card{
  background:var(--blog-surface);
  border:1px solid var(--blog-border);
  border-radius:16px;
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .15s ease, box-shadow .15s ease;
}
.post-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 32px -16px rgba(31,36,48,0.16);
}
.post-card .post-cover-wrap{
  width:100%; height:200px; background:#EFEDE7; overflow:hidden;
}
.post-card .post-cover-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
.post-card .post-body{ padding:24px; flex:1; display:flex; flex-direction:column; }
.post-date{
  font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--coral);
  letter-spacing:0.04em; text-transform:uppercase;
}
.post-card h2{
  font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:20px;
  color:var(--blog-ink); margin:10px 0 10px; line-height:1.3;
}
.post-card p{
  color:var(--blog-ink-soft); font-size:14.5px; line-height:1.6; flex:1;
}
.post-card .read-more{
  margin-top:16px; font-size:13.5px; font-weight:700; color:var(--coral);
  display:inline-flex; align-items:center; gap:6px;
}

.blog-state{
  padding:60px 32px; text-align:center; color:var(--blog-ink-soft); font-size:15px;
  max-width:720px; margin:0 auto;
}

/* ---------- SINGLE POST ---------- */
.post-header{ padding:56px 0 0; border-bottom:1px solid var(--blog-border); padding-bottom:36px; }
.back-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--blog-ink-soft);
  margin-bottom:28px;
}
.back-link:hover{ color:var(--coral); }
.post-title{
  font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:42px;
  color:var(--blog-ink); line-height:1.15; letter-spacing:-0.01em; margin-bottom:16px;
  max-width:820px;
}
.post-cover{
  width:100%; max-height:440px; object-fit:cover;
  border-radius:16px; margin:36px 0 8px;
}
.post-content{
  max-width:720px; margin:40px auto 0; font-size:17px; line-height:1.8; color:var(--blog-ink);
  padding-bottom:110px;
}
.post-content h2{
  font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:27px;
  margin:40px 0 16px; color:var(--blog-ink);
}
.post-content h3{
  font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:21px;
  margin:32px 0 14px; color:var(--blog-ink);
}
.post-content p{ margin-bottom:22px; }
.post-content a{ color:var(--coral); text-decoration:underline; text-underline-offset:3px; }
.post-content ul, .post-content ol{ margin:0 0 22px 22px; }
.post-content li{ margin-bottom:8px; }
.post-content img{ width:100%; border-radius:12px; margin:28px 0; display:block; }
.post-content blockquote{
  border-left:3px solid var(--coral); padding:4px 0 4px 22px; margin:28px 0;
  color:var(--blog-ink-soft); font-style:italic; font-size:18px;
}
.post-content code{
  background:#F1EFEA; padding:2px 7px; border-radius:5px;
  font-family:'IBM Plex Mono', monospace; font-size:0.88em;
}
.post-content pre{
  background:#1F2430; color:#EFEDFA; padding:22px; border-radius:12px;
  overflow-x:auto; margin:28px 0;
}
.post-content pre code{ background:none; padding:0; color:inherit; }
.post-content hr{ border:none; border-top:1px solid var(--blog-border); margin:40px 0; }

@media (max-width:860px){
  .post-grid{ grid-template-columns:1fr; }
  .blog-hero{ text-align:center; }
  .blog-hero .eyebrow{ margin-left:auto; margin-right:auto; }
  .blog-hero h1{ font-size:32px; }
  .blog-hero p{ margin-left:auto; margin-right:auto; }

  .post-header{ text-align:center; }
  .post-header .back-link{ justify-content:center; }
  .post-title{ font-size:28px; margin-left:auto; margin-right:auto; }
  .post-content{ font-size:16px; text-align:left; }

  .blog-state{ padding:40px 24px; }
}