/* Blog page
   Page-specific styles for the blog hero, its tab bar and the category filter
   chips. The article grid and newsletter use their own component CSS. Colour
   and type from tokens.css (marketing theme). */

.dp-blog-hero {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--dp-space-12) var(--dp-space-6) var(--dp-space-6);
}

.dp-blog-hero-title {
  margin: 0 0 var(--dp-space-4);
  font-size: var(--dp-text-5xl);
  line-height: var(--dp-leading-tight);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-navy);
}

.dp-blog-hero-sub {
  max-width: 44ch;
  margin: 0 0 var(--dp-space-8);
  font-size: var(--dp-text-lg);
  color: var(--dp-text-muted);
}

.dp-blog-tabs {
  display: flex;
  gap: var(--dp-space-6);
  border-bottom: 1px solid var(--dp-border);
}

.dp-blog-tab {
  padding: 0 0 var(--dp-space-3);
  margin-bottom: -1px;
  font-size: var(--dp-text-base);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.dp-blog-tab[aria-current="true"] {
  color: var(--dp-navy);
  border-bottom-color: var(--dp-navy);
}

.dp-blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dp-space-2);
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--dp-space-6) var(--dp-space-6) 0;
}

.dp-blog-chip {
  padding: var(--dp-space-2) var(--dp-space-4);
  font-size: var(--dp-text-sm);
  font-weight: var(--dp-weight-bold);
  color: var(--dp-text-muted);
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-radius-full);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.dp-blog-chip:hover { border-color: var(--dp-border-strong); color: var(--dp-navy); }

.dp-blog-chip[aria-current="true"] {
  color: var(--dp-surface);
  background: var(--dp-navy);
  border-color: var(--dp-navy);
}