/* Blog index + post pages */

.container--narrow { max-width: 760px; }

/* ── Index ─────────────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--sp-8);
}

.blog-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface, #fff);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.blog-card__img-wrap { aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-gray-100); }
.blog-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.blog-card__tag {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--color-sage);
}
.blog-card__title { font-family: var(--font-heading); font-size: var(--text-xl); line-height: 1.3; margin: 0; }
.blog-card__title a { color: var(--color-text-primary); text-decoration: none; }
.blog-card__title a:hover { color: var(--color-sage); }
.blog-card__desc { color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-loose); margin: 0; flex: 1; }
.blog-card__meta { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ── Post ──────────────────────────────────────────────── */
.blog-post { padding: var(--sp-10) 0 var(--sp-16); }
.blog-breadcrumb { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--sp-6); }
.blog-breadcrumb a { color: var(--color-sage); text-decoration: none; }
.blog-breadcrumb a:hover { text-decoration: underline; }
.blog-post__tag {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--color-sage);
  margin-bottom: var(--sp-2);
}
.blog-post__title {
  font-family: var(--font-heading);
  font-size: clamp(var(--text-3xl), 4.5vw, var(--text-4xl));
  line-height: 1.2;
  margin: 0 0 var(--sp-3);
}
.blog-post__meta { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--sp-8); }
.blog-post__hero { display: block; margin-bottom: var(--sp-10); }
.blog-post__hero img { width: 100%; height: auto; border-radius: var(--radius-lg); display: block; }

.blog-post__body { font-size: var(--text-md); line-height: var(--leading-loose); color: var(--color-text-primary); }
.blog-post__body h2 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  margin: var(--sp-10) 0 var(--sp-4);
  line-height: 1.3;
}
.blog-post__body p { margin: 0 0 var(--sp-5); }
.blog-post__body ul, .blog-post__body ol { margin: 0 0 var(--sp-5); padding-left: var(--sp-6); }
.blog-post__body li { margin-bottom: var(--sp-2); }
.blog-post__body a { color: var(--color-sage); }
.blog-post__body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-6) 0;
  font-size: var(--text-sm);
}
.blog-post__body th, .blog-post__body td {
  border: 1px solid var(--color-border);
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
}
.blog-post__body th { background: var(--color-gray-50); font-weight: 700; }
.blog-post__body tr:nth-child(even) td { background: var(--color-gray-50); }

.blog-post__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  background: var(--color-gray-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-8);
  margin: var(--sp-12) 0 var(--sp-6);
}
.blog-post__cta-title { font-family: var(--font-heading); font-size: var(--text-xl); margin: 0 0 var(--sp-1); }
.blog-post__cta-sub { color: var(--color-text-secondary); font-size: var(--text-sm); margin: 0; }
.blog-post__cta-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.blog-post__back { margin-bottom: var(--sp-4); }
.blog-post__back a { color: var(--color-sage); text-decoration: none; font-size: var(--text-sm); }
.blog-post__back a:hover { text-decoration: underline; }

/* Wide tables scroll on small screens instead of breaking layout */
@media (max-width: 640px) {
  .blog-post__body table { display: block; overflow-x: auto; white-space: nowrap; }
}