/* ==========================================================================
   EQUIDEM DESIGN SYSTEM - ARTICLES (pages/articles.css)
   Shared presentation for investigative articles.
   ========================================================================== */

.article-container {
  width: 100%;
}

.article-hero {
  color: var(--color-text-inverse);
  background: linear-gradient(90deg, var(--color-primary-dark) 0%, var(--color-primary) 62%, #0d3257 100%);
  border-bottom: 3px solid var(--color-civic-crimson);
  padding: var(--space-6) 0;
  margin-top: calc(-1 * var(--space-4));
  /* Bleed the masthead to the viewport edges of the padded main shell. */
  margin-left: calc(-1 * clamp(var(--space-4), 3vw, var(--space-8)));
  margin-right: calc(-1 * clamp(var(--space-4), 3vw, var(--space-8)));
}

.article-hero .container {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.article-category {
  text-transform: uppercase;
  font-family: var(--font-subheader);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-caps-wide);
  font-weight: var(--font-weight-semibold);
  color: inherit;
  opacity: 0.85;
}

.article-title {
  font-family: var(--font-header), 'Alfa Slab One', serif;
  font-weight: var(--font-weight-display);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: var(--line-height-tight);
  letter-spacing: 1px;
  color: inherit;
}

.article-lead {
  max-width: 820px;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-snug);
  color: inherit;
}

.article-meta {
  font-size: var(--font-size-sm);
  color: inherit;
  opacity: 0.8;
}

.article-content {
  font-size: 1.02rem;
  line-height: var(--line-height-relaxed);
  color: var(--color-text-body);
}

.article-content h2,
.article-content h3 {
  margin-top: var(--space-8);
}

.article-content img {
  max-width: 100%;
  height: auto;
}

.article-text {
  font-size: 1.02rem;
  line-height: var(--line-height-relaxed);
}

.verdict-box {
  background: var(--color-warning-light);
  border: 1px solid rgba(180, 83, 9, 0.32);
  border-left: 3px solid var(--color-warning);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}

.timeline-label {
  font-size: 0.78rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.chart-container {
  width: 100%;
  max-width: 700px;
  margin: auto;
}

.c-article-share {
  margin-top: var(--space-6);
}

@media (max-width: 768px) {
  .article-hero {
    padding: var(--space-4) 0;
  }
}