/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Blog — Public content section
   Hub index + article detail layout
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Hub page ──────────────────────────────────────── */
.blog-hub {
  position: relative;
  z-index: 1;
  padding: var(--pix-48) var(--pix-24);
}

.blog-hub-container {
  max-width: 800px;
  margin: 0 auto;
}

.blog-hub h1 {
  font-family: var(--hz-font-body);
  font-size: var(--font-36);
  font-weight: 400;
  letter-spacing: -1px;
  color: var(--hz-text-primary);
  margin-bottom: var(--pix-8);
}

.blog-hub-subtitle {
  color: var(--hz-text-secondary);
  font-size: var(--font-16);
  margin-bottom: var(--pix-32);
}

/* ── Section grouping ──────────────────────────────── */
.blog-section {
  margin-bottom: var(--pix-32);
}

.blog-section-title {
  font-size: var(--font-14);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--hz-text-muted);
  margin-bottom: var(--pix-12);
  padding-bottom: var(--pix-8);
  border-bottom: 1px solid var(--hz-border);
}

/* ── Article cards ─────────────────────────────────── */
.blog-cards {
  display: flex;
  flex-direction: column;
  gap: var(--pix-12);
}

.blog-card {
  display: block;
  padding: var(--pix-16) var(--pix-20);
  background: var(--hz-bg-card);
  border: 1px solid var(--hz-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}

.blog-card:hover {
  border-color: var(--hz-accent-teal);
  background: var(--hz-bg-card-hover);
}

.blog-card-title {
  font-size: var(--font-18);
  font-weight: 600;
  color: var(--hz-text-primary);
  margin-bottom: var(--pix-4);
}

.blog-card-desc {
  font-size: var(--font-14);
  color: var(--hz-text-secondary);
  margin-bottom: var(--pix-8);
  line-height: 1.5;
}

.blog-card-date {
  font-size: var(--font-12);
  color: var(--hz-text-muted);
  font-family: var(--hz-font-mono);
}

/* ── Tags ──────────────────────────────────────────── */
.blog-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pix-4);
  margin-top: var(--pix-8);
}

.blog-tag {
  font-size: var(--font-11);
  font-family: var(--hz-font-mono);
  color: var(--hz-accent-teal);
  background: var(--hz-bg-deep);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hz-border);
}

/* ── Article page ──────────────────────────────────── */
.blog-article-page {
  position: relative;
  z-index: 1;
  padding: var(--pix-32) var(--pix-24);
}

.blog-article-container {
  max-width: 800px;
  margin: 0 auto;
}

.blog-article-nav {
  margin-bottom: var(--pix-24);
}

.blog-article-nav a {
  color: var(--hz-text-secondary);
  text-decoration: none;
  font-size: var(--font-14);
  transition: color 0.15s;
}

.blog-article-nav a:hover {
  color: var(--hz-accent-teal);
}

.blog-article-header {
  margin-bottom: var(--pix-32);
}

.blog-article-header h1 {
  font-family: var(--hz-font-body);
  font-size: var(--font-32);
  font-weight: 400;
  letter-spacing: -0.5px;
  line-height: 1.15;
  color: var(--hz-text-primary);
  margin-bottom: var(--pix-12);
}

.blog-article-date {
  font-size: var(--font-13);
  color: var(--hz-text-muted);
  font-family: var(--hz-font-mono);
}

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 768px) {
  .blog-hub,
  .blog-article-page {
    padding-inline: var(--pix-16);
  }

  .blog-hub h1 {
    font-size: var(--font-28);
  }

  .blog-article-header h1 {
    font-size: var(--font-24);
  }
}