/* ============================================================
   AICA Insights article pages (insights/[slug].html)
   Loaded after site.css. Editorial column on a white sheet.
   ============================================================ */

.article-page { background: #fff; padding: 64px 0 100px; }
.article-col { max-width: 760px; margin: 0 auto; padding: 0 24px; }

.article-back-top { margin-bottom: 44px; }
.article-back { margin-top: 44px; }

/* ---- Header ---- */
.article-head { border-bottom: 1px solid var(--hairline); padding-bottom: 34px; margin-bottom: 40px; }
.article-head .kicker { margin-bottom: 14px; }
.article-head h1 { font-size: clamp(31px, 4.4vw, 44px); line-height: 1.18; letter-spacing: -.4px; margin-bottom: 18px; }
.article-lead { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-size: 20px; line-height: 1.55; color: var(--body); }

/* ---- Body typography ---- */
.article-body { font-size: 17.5px; line-height: 1.7; color: #39435e; }
.article-body p { margin: 0 0 24px; }
.article-body strong { color: var(--ink); font-weight: 600; }
.article-body h2 { font-size: clamp(24px, 2.6vw, 29px); line-height: 1.25; margin: 50px 0 18px; letter-spacing: -.2px; }
.article-body h3 { font-size: clamp(19px, 2vw, 22px); line-height: 1.3; margin: 38px 0 14px; }
.article-body h2:first-child { margin-top: 0; }
.article-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; background: var(--paper-2); border: 1px solid var(--hairline); padding: 2px 6px; border-radius: 3px; }

/* ---- Lists: restore markers (site.css resets padding globally) ---- */
.article-body ul, .article-body ol { margin: 0 0 26px; padding-left: 26px; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: 10px; padding-left: 4px; }
.article-body li::marker { color: var(--gold); }
.article-body ol > li::marker { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---- Tables: thin editorial rules ---- */
.table-wrap { overflow-x: auto; margin: 32px 0 36px; -webkit-overflow-scrolling: touch; }
.article-body table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 14.5px; line-height: 1.55; }
.article-body th { font-family: 'Inter', Arial, sans-serif; font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 600; color: var(--ink); text-align: left; padding: 12px 14px 12px 0; border-bottom: 2px solid var(--ink); vertical-align: bottom; }
.article-body td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; color: #39435e; }
.article-body td strong { color: var(--ink); }

/* ---- Related-certification CTA ---- */
.article-cta { margin-top: 60px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 36px 0; }
.article-cta h2 { font-size: 25px; line-height: 1.25; margin-bottom: 12px; }
.article-cta p { font-size: 15.5px; line-height: 1.65; margin-bottom: 22px; max-width: 640px; }
.article-cta-links { display: flex; gap: 34px; flex-wrap: wrap; }

/* ---- Prev / next crawl mesh ---- */
.article-pagenav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; }
.pagenav-item { display: block; text-decoration: none; min-width: 0; }
.pagenav-next { text-align: right; }
.pagenav-label { display: block; font-size: 10.5px; letter-spacing: 2.4px; text-transform: uppercase; font-weight: 600; color: var(--gold); margin-bottom: 8px; }
.pagenav-title { display: block; font-family: 'Playfair Display', Georgia, serif; font-size: 17.5px; line-height: 1.35; color: var(--ink); transition: color .2s ease; }
a.pagenav-item:hover .pagenav-title { color: var(--gold); }

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .article-page { padding: 44px 0 72px; }
  .article-col { padding: 0 20px; }
  .article-body { font-size: 17px; }
  .article-lead { font-size: 18.5px; }
  .article-pagenav { grid-template-columns: 1fr; gap: 20px; }
  .pagenav-next { text-align: left; }
  .article-cta-links { flex-direction: column; gap: 18px; }
  .article-cta-links .textlink { align-self: flex-start; }
}

/* ---- B2B article callout (insights -> for-organizations funnel) ----
   Lives here, not rebrand.css: article pages load site.css + article.css only,
   and loading rebrand.css would apply its 5-column .foot-grid to the 4-column
   article footer. Reuses site.css tokens + the .btn/.btn-gold and .kicker patterns. */
.insight-b2b-cta { margin: 46px 0; background: var(--paper-2); border: 1px solid var(--hairline); border-left: 3px solid var(--gold); padding: 30px 32px; }
.insight-b2b-cta .kicker { margin-bottom: 12px; }
.article-body .insight-b2b-cta h2 { font-size: 23px; line-height: 1.28; margin: 0 0 12px; }
.article-body .insight-b2b-cta p { font-size: 15.5px; line-height: 1.65; margin: 0 0 22px; max-width: 640px; }
.insight-b2b-cta .btn { display: inline-block; }
@media (max-width: 640px) { .insight-b2b-cta { padding: 24px 22px; } }