/* ===== BLOG LISTING ===== */
.blog-hero {
  padding: 7rem 1.5rem 3rem; text-align: center;
  border-bottom: 1px solid var(--border-subtle);
}
.blog-hero-title {
  font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: -0.03em;
  font-family: 'Plus Jakarta Sans', sans-serif; margin-bottom: 0.75rem;
}
.blog-hero-desc {
  font-size: 1.0625rem; color: var(--text-secondary); max-width: 550px; margin: 0 auto;
}

.blog-listing { padding: 3rem 1.5rem 5rem; }
.blog-listing-inner { max-width: 900px; margin: 0 auto; }

.blog-filters {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 2.5rem;
  justify-content: center;
}
.blog-filter {
  padding: 6px 16px; border-radius: 100px; border: 1px solid var(--border-subtle);
  background: transparent; color: var(--text-secondary); font-family: inherit;
  font-size: 0.8125rem; font-weight: 500; cursor: pointer; transition: var(--transition);
}
.blog-filter:hover { border-color: var(--purple); color: var(--text-primary); }
.blog-filter.active {
  background: var(--purple-glow); border-color: var(--purple); color: var(--purple-light);
}

.blog-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }

.blog-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--bg-glass); backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--border-subtle); border-radius: var(--radius);
  padding: 28px; transition: var(--transition);
}
.blog-card:hover {
  border-color: var(--border-glow); transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(167, 139, 250, 0.08);
}
.blog-card-meta {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
  font-size: 0.75rem; color: var(--text-muted);
}
.blog-card-category {
  padding: 2px 10px; border-radius: 100px;
  background: var(--purple-glow); color: var(--purple-light);
  font-weight: 600; font-size: 0.6875rem; text-transform: uppercase;
  letter-spacing: 0.08em;
}
.blog-card-title {
  font-size: 1.25rem; font-weight: 700; margin-bottom: 10px; line-height: 1.35;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.blog-card-excerpt {
  font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7;
  margin-bottom: 14px;
}
.blog-card-read {
  font-size: 0.8125rem; font-weight: 600; color: var(--purple);
  transition: color var(--transition);
}
.blog-card:hover .blog-card-read { color: var(--purple-light); }

@media (min-width: 640px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== ARTICLE PAGE ===== */
.article-hero {
  padding: 7rem 1.5rem 2.5rem;
  border-bottom: 1px solid var(--border-subtle);
}
.article-hero-inner { max-width: 720px; margin: 0 auto; }
.article-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 1.5rem;
}
.article-breadcrumb a { color: var(--text-muted); text-decoration: none; transition: color var(--transition); }
.article-breadcrumb a:hover { color: var(--text-secondary); }
.article-breadcrumb-sep::before { content: '/'; }
.article-category {
  display: inline-block; padding: 4px 14px; border-radius: 100px;
  background: var(--purple-glow); color: var(--purple-light);
  font-weight: 600; font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.1em; margin-bottom: 1rem;
}
.article-title {
  font-size: clamp(1.75rem, 4.5vw, 2.5rem); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 1.25rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.article-meta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 0.8125rem; color: var(--text-muted);
}
.article-meta-divider { color: var(--border-subtle); }

/* Article body */
.article-body { padding: 3rem 1.5rem 4rem; }
.article-body-inner { max-width: 720px; margin: 0 auto; }

.article-body h2 {
  font-size: 1.5rem; font-weight: 700; margin: 2.5rem 0 1rem;
  letter-spacing: -0.01em; font-family: 'Plus Jakarta Sans', sans-serif;
}
.article-body h3 {
  font-size: 1.125rem; font-weight: 700; margin: 2rem 0 0.75rem;
}
.article-body p {
  font-size: 1.0625rem; color: var(--text-secondary); line-height: 1.85;
  margin-bottom: 1.25rem;
}
.article-body p:last-child { margin-bottom: 0; }
.article-body a { color: var(--purple-light); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--purple); }

.article-body strong { color: var(--text-primary); font-weight: 600; }

.article-body ul, .article-body ol {
  margin: 0 0 1.25rem 1.25rem;
  color: var(--text-secondary); font-size: 1.0625rem; line-height: 1.85;
}
.article-body li { margin-bottom: 0.5rem; }
.article-body li::marker { color: var(--purple); }

/* Callout / stat block */
.article-callout {
  background: var(--bg-glass); backdrop-filter: var(--glass-blur-sm); -webkit-backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--border-subtle); border-left: 3px solid var(--purple);
  border-radius: var(--radius-sm); padding: 20px 24px; margin: 1.5rem 0;
}
.article-callout p { font-size: 1rem; margin-bottom: 0.5rem; }
.article-callout p:last-child { margin-bottom: 0; }
.article-callout .callout-source {
  font-size: 0.75rem; color: var(--text-muted); font-style: italic;
}

.article-callout--danger { border-left-color: var(--danger); }
.article-callout--mint { border-left-color: var(--mint); }

/* Checklist */
.article-checklist {
  list-style: none; margin: 1.25rem 0; padding: 0;
}
.article-checklist li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0; font-size: 1rem; color: var(--text-secondary); line-height: 1.7;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.article-checklist li:last-child { border-bottom: none; }
.article-checklist-icon {
  width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; background: var(--purple-glow);
}
.article-checklist-icon svg { width: 14px; height: 14px; stroke: var(--purple); }

/* CTA block */
.article-cta {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.08), rgba(110, 231, 183, 0.06));
  border: 1px solid rgba(167, 139, 250, 0.2); border-radius: var(--radius);
  padding: 32px; margin: 2.5rem 0; text-align: center;
}
.article-cta-title {
  font-size: 1.25rem; font-weight: 700; margin-bottom: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.article-cta-text {
  font-size: 0.9375rem; color: var(--text-secondary); margin-bottom: 1.25rem;
  line-height: 1.6;
}
.article-cta .cta-button {
  font-size: 0.9375rem; padding: 14px 36px;
}

/* Sources */
.article-sources {
  margin-top: 3rem; padding-top: 2rem;
  border-top: 1px solid var(--border-subtle);
}
.article-sources h2 {
  font-size: 1rem; font-weight: 700; margin-bottom: 1rem;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em;
}
.article-sources ol {
  margin: 0 0 0 1.25rem; padding: 0;
}
.article-sources li {
  font-size: 0.875rem; color: var(--text-muted); line-height: 1.7;
  margin-bottom: 0.5rem;
}
.article-sources a { color: var(--text-secondary); }

/* Related articles */
.article-related {
  padding: 3rem 1.5rem 4rem;
  border-top: 1px solid var(--border-subtle);
}
.article-related-inner { max-width: 720px; margin: 0 auto; }
.article-related h2 {
  font-size: 1.25rem; font-weight: 700; margin-bottom: 1.5rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.article-related-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

@media (min-width: 640px) {
  .article-related-grid { grid-template-columns: repeat(2, 1fr); }
}