/* ===========================
   ARTICLE.CSS
   Layout for standard article pages
   (healthcare, legal, accounting articles).
   Loads after page-common.css.
   =========================== */

/* ───────────────────────────
   HERO OVERRIDE
   ─────────────────────────── */
.hero { padding: 72px 0 64px; }
.hero-inner { max-width: 800px; }

h1 {
  font-size: clamp(30px, 4.5vw, 54px);
  line-height: 1.05;
  margin: 0 0 20px;
  letter-spacing: -1.5px;
}

/* ───────────────────────────
   ARTICLE LAYOUT
   ─────────────────────────── */
.article-layout {
  padding: 72px 0;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 60px;
  align-items: start;
}

.article-body h2 {
  font-size: 28px;
  color: var(--navy);
  margin: 44px 0 16px;
  letter-spacing: -.5px;
  line-height: 1.2;
}

.article-body h2:first-child { margin-top: 0; }

.article-body p {
  font-size: 18px;
  line-height: 1.85;
  color: #3a454f;
  margin: 0 0 20px;
}

/* ───────────────────────────
   TIP BOX
   ─────────────────────────── */
.tip-box {
  background: var(--soft);
  border: 1px solid var(--border);
  border-left: 5px solid var(--orange);
  border-radius: 0 12px 12px 0;
  padding: 24px 28px;
  margin: 28px 0;
}

.tip-box h4 {
  font-size: 15px;
  font-weight: 900;
  color: var(--navy);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: .6px;
}

.tip-box p { font-size: 15px; color: var(--gray); margin: 0; line-height: 1.65; }

/* ───────────────────────────
   CALLOUT STAT
   ─────────────────────────── */
.callout-stat {
  background: var(--navy);
  color: var(--white);
  border-radius: 14px;
  padding: 32px 36px;
  margin: 32px 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
}

.callout-stat strong {
  display: block;
  font-size: 56px;
  font-weight: 900;
  color: var(--orange);
  line-height: 1;
}

.callout-stat span {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .6px;
  display: block;
  margin-top: 4px;
}

.callout-stat p {
  font-size: 17px;
  color: rgba(255,255,255,.85);
  line-height: 1.65;
  margin: 0;
}

/* ───────────────────────────
   ARTICLE SIDEBAR
   ─────────────────────────── */
.article-sidebar { position: sticky; top: 100px; }

/* ───────────────────────────
   TOC LIST
   ─────────────────────────── */
.toc-list { list-style: none; padding: 0; margin: 0; }

.toc-list li a {
  display: block;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  font-weight: 700;
  color: var(--dark);
  text-decoration: none;
}

.toc-list li:last-child a { border-bottom: none; }
.toc-list li a:hover { color: var(--orange); }

/* ───────────────────────────
   RESPONSIVE
   ─────────────────────────── */
@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-sidebar { position: static; }
  .callout-stat { grid-template-columns: 1fr; }
  h1 { font-size: 34px; }
}