/* ─── Blog Hero ────────────────────────────────────────────────────────── */
.blog-hero {
  background: linear-gradient(135deg, var(--emerald-deep) 0%, var(--emerald) 60%, var(--sky) 100%);
  padding: 64px 0 44px; color: var(--white);
}
.blog-hero h1 { color: var(--white); margin-bottom: 10px; }
.blog-hero p { color: rgba(255,255,255,0.72); font-size: 1rem; }

/* ─── Filter tabs ──────────────────────────────────────────────────────── */
.blog-filter-tabs { display: flex; gap: 8px; padding: 28px 0 20px; flex-wrap: wrap; }
.blog-tab {
  padding: 8px 20px; border-radius: var(--radius-full);
  border: 1.5px solid #E2E8F0; background: var(--white);
  cursor: pointer; font-family: 'DM Sans', sans-serif;
  font-size: 0.88rem; font-weight: 500;
  transition: all var(--transition); color: var(--ink);
}
.blog-tab.active, .blog-tab:hover {
  background: var(--emerald); color: var(--white);
  border-color: var(--emerald); box-shadow: 0 2px 8px rgba(13,122,85,0.25);
}

/* ─── Blog grid ────────────────────────────────────────────────────────── */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; padding-bottom: 80px; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card { text-decoration: none; color: inherit; display: block; }
.blog-card .card-img-area {
  background: linear-gradient(135deg, var(--emerald-deep) 0%, var(--emerald) 100%);
  height: 148px;
}
.blog-card:nth-child(3n+2) .card-img-area { background: linear-gradient(135deg,#1E3A5F 0%,#2563EB 60%,#60A5FA 100%); }
.blog-card:nth-child(3n+3) .card-img-area { background: linear-gradient(135deg,#7C2D12 0%,#C2410C 60%,#F97316 100%); }
.blog-card .card-body { padding: 22px; }
.blog-cat { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--amber); font-weight: 700; margin-bottom: 10px; }
.blog-card h3 { font-size: 1.08rem; margin-bottom: 8px; line-height: 1.4; color: var(--ink); }
.blog-card .blog-meta { font-size: 0.8rem; color: var(--muted); }
.blog-card .blog-excerpt { font-size: 0.87rem; color: var(--muted); margin-top: 10px; line-height: 1.6; }

/* ─── Blog post ────────────────────────────────────────────────────────── */
.post-hero {
  background: linear-gradient(135deg, var(--emerald-deep) 0%, var(--emerald) 60%, var(--sky) 100%);
  padding: 64px 0 36px; color: var(--white);
}
.post-hero h1 { color: var(--white); margin-bottom: 14px; line-height: 1.2; }
.post-meta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; color: rgba(255,255,255,0.72); font-size: 0.88rem; }
.post-meta .badge { background: var(--amber); }

.post-body {
  max-width: 760px; margin: 0 auto;
  padding: 60px 24px;
}
.post-body h1, .post-body h2, .post-body h3 { margin-top: 36px; margin-bottom: 14px; }
.post-body p { margin-bottom: 20px; line-height: 1.8; }
.post-body ul, .post-body ol { padding-left: 24px; margin-bottom: 18px; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li { margin-bottom: 6px; line-height: 1.65; }
.post-body blockquote {
  border-left: 4px solid var(--emerald);
  padding: 14px 22px; background: var(--emerald-pale);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 28px 0;
  font-style: italic; color: var(--emerald-deep);
}
.post-body img { border-radius: var(--radius-md); margin: 28px 0; }
.post-body a { color: var(--emerald); text-decoration: underline; }

.post-share { padding: 32px 0; border-top: 1px solid rgba(0,0,0,0.08); }
.post-related { padding: 64px 0; background: var(--white); }
.post-related h3 { margin-bottom: 28px; }
.post-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 600px) { .post-related-grid { grid-template-columns: 1fr; } }