/* ═══════════════════════════════════════════════════
   SBV — Blog Post Page
   ═══════════════════════════════════════════════════ */

/* ── Post Hero ── */
.post-hero {
  background: hsl(var(--color-midnight-hsl));
  padding: 5rem 0 3.5rem;
  border-bottom: 1px solid hsl(var(--color-ivory-hsl) / 0.08);
}
.post-hero .eyebrow span:not(.line) { color: hsl(var(--color-ember-hsl)); }
.post-hero h1 {
  font-size: 2rem;
  line-height: 1.2;
  color: hsl(var(--color-ivory-hsl));
  max-width: 42rem;
  margin-bottom: 1.25rem;
}
@media (min-width: 768px) { .post-hero h1 { font-size: 2.75rem; } }
.post-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.8125rem;
  font-family: var(--font-body);
  color: hsl(var(--color-clay-hsl) / 0.7);
}
.post-meta .author { color: hsl(var(--color-ember-hsl)); font-weight: 600; }

/* ── Post Featured Image ── */
.post-thumb {
  width: 100%;
  max-height: 440px;
  object-fit: cover;
  display: block;
}

/* ── Post Body Layout ── */
.post-layout {
  padding: 4rem 0 5rem;
}
.post-grid {
  display: grid;
  gap: 4rem;
  max-width: 72rem;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .post-grid { grid-template-columns: 1fr 280px; align-items: start; }
}

/* ── Article Content ── */
.post-content { max-width: 680px; }
.post-content p {
  font-size: 1rem;
  font-family: var(--font-body);
  color: hsl(var(--muted-foreground));
  line-height: 1.75;
  margin-bottom: 1.25rem;
}
.post-content h2 {
  font-size: 1.5rem;
  color: hsl(var(--foreground));
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.25;
}
.post-content h3 {
  font-size: 1.125rem;
  color: hsl(var(--foreground));
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}
.post-content ul, .post-content ol {
  margin: 0 0 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content li {
  font-size: 1rem;
  font-family: var(--font-body);
  color: hsl(var(--muted-foreground));
  line-height: 1.7;
}
.post-content strong { font-weight: 700; color: hsl(var(--foreground)); }

/* ── Back link ── */
.post-back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-family: var(--font-body);
  font-weight: 600;
  color: hsl(var(--accent));
  margin-bottom: 2.5rem;
  transition: opacity 0.15s;
}
.post-back:hover { opacity: 0.75; }

/* ── Sidebar ── */
.post-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 1024px) { .post-sidebar { position: sticky; top: 7rem; } }
.sidebar-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1.75rem;
}
.sidebar-card h4 {
  font-size: 1rem;
  color: hsl(var(--foreground));
  margin-bottom: 0.625rem;
}
.sidebar-card p {
  font-size: 0.875rem;
  font-family: var(--font-body);
  color: hsl(var(--muted-foreground));
  line-height: 1.625;
  margin-bottom: 1.25rem;
}
.sidebar-card .btn-ember { width: 100%; justify-content: center; font-size: 0.875rem; }
.sidebar-sub {
  font-size: 10px;
  font-family: var(--font-body);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  text-align: center;
  margin-top: 0.5rem;
  display: block;
}