/* ==========================================================================
   article.css - Forensic Alignment Fix
   ========================================================================== */

/* 1. Outer Hero: Full-bleed dark background across entire browser width */
.article-hero {
  width: 100%;
  background: var(--navy);
  color: #ffffff;
  padding: clamp(40px, 6vw, 64px) 0;
  margin-bottom: clamp(32px, 5vw, 48px);
}

/* 2. Standard Container: Guarantees Hero text & Article Body line up identically */
.article-shell {
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(20px, 5vw, 64px) !important;
  padding-right: clamp(20px, 5vw, 64px) !important;
  width: 100%;
  box-sizing: border-box;
}

/* 3. Hero Typography Alignment */
.article-hero h1 {
  color: #ffffff;
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-top: 0;
  margin-bottom: 16px;
  max-width: 100%;
}

.article-hero .lead {
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.5;
  margin-bottom: 0;
  max-width: 100%;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.65);
  font-size: 13.5px;
}

.article-meta .dot { color: var(--gold); }

/* 4. Executive Summary Card Alignment */
.brief-card {
  background: var(--paper);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 34px);
  margin-bottom: clamp(32px, 5vw, 48px);
  width: 100%;
  box-sizing: border-box;
}

.brief-card .eyebrow { margin-bottom: 10px; }
.brief-card p { color: var(--muted); font-size: 17px; margin-bottom: 14px; }
.brief-card p:last-child { margin-bottom: 0; }

/* 5. Main Body Copy */
.article-body { font-size: 18px; color: #263042; line-height: 1.7; width: 100%; }
.article-body h2 {
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.02em;
  margin: 48px 0 12px;
  color: var(--ink);
}
.article-body h2 + .eyebrow { display: none; }
.article-body .eyebrow {
  margin-top: 44px;
  margin-bottom: 0;
}
.article-body .eyebrow:first-child { margin-top: 0; }

/* FIX: Overrides the 48px margin-top on h2 when it comes right after an eyebrow */
.article-body .eyebrow + h2 {
  margin-top: 6px;
}

.article-body p { margin-bottom: 20px; }

/* Blockquote Gap Fix */
.article-body blockquote {
  margin-bottom: 32px; /* Set to your preferred gap spacing (e.g., 32px or 40px) */
}

.article-body blockquote p:last-child {
  margin-bottom: 0;
}

/* Feature Grid inside Article */
.stack-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 24px 0 40px;
}
.stack-grid .step { min-height: auto; }

/* Conclusion Panel Callout */
.conclusion-panel {
  background: var(--paper); /* Or #f8f9fa */
  color: var(--muted, #4b5563);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 34px);
  margin: 24px 0 40px;
}
.conclusion-panel .eyebrow {
  color: var(--ink);           /* Matches main body text color */
  font-size: 18px;             /* Exact same font size as .article-body */
  font-weight: 700;            /* Bold weight */
  text-transform: none;        /* Optional: stops forced uppercase if set globally */
  letter-spacing: normal;      /* Optional: resets tracking to normal body spacing */
  margin-bottom: 12px;
}
.conclusion-panel p { 
  color: inherit;
  font-size: 17px;
  margin-bottom: 14px; 
}
.conclusion-panel p:last-child { margin-bottom: 0; }

@media (max-width: 720px) {
  .stack-grid { grid-template-columns: 1fr; }
}