/* ============================================================
   ARTICLE — static, server-rendered blog posts at /blog/<slug>.
   Loaded after services.css, which supplies the hero (.svc-hero),
   the table (.tq-table), the FAQ (.faq) and .sr-only. This file only
   adds the reading column, the CTA box and the related-guides list.
   ============================================================ */

.article { background: var(--white); padding: var(--sp-8) 0 var(--sp-9); }

.article__wrap { max-width: 740px; margin: 0 auto; }

.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--sand-500);
  margin: 0 0 var(--sp-6);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--blue-100);
}

.article__body {
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--sand-700);
}
.article__body h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-xl), 3vw, var(--fs-2xl));
  line-height: 1.2;
  color: var(--blue-900);
  margin: var(--sp-7) 0 var(--sp-3);
}
.article__body h3 {
  font-size: var(--fs-lg);
  color: var(--blue-900);
  margin: var(--sp-5) 0 var(--sp-2);
}
.article__body p { margin: 0 0 var(--sp-4); }
.article__body ul,
.article__body ol { margin: 0 0 var(--sp-4) var(--sp-5); padding: 0; }
.article__body li { margin-bottom: var(--sp-2); }
.article__body a {
  color: var(--blue-700);
  text-decoration: underline;
  text-decoration-color: var(--blue-300);
  text-underline-offset: 3px;
}
.article__body a:hover { text-decoration-color: var(--blue-700); }
.article__body strong { color: var(--blue-900); }

.article__table { overflow-x: auto; margin: 0 0 var(--sp-5); }
.article__table .tq-table { margin-top: var(--sp-3); }

.article__note {
  background: var(--blue-50);
  border-left: 4px solid var(--blue-600);
  border-radius: 0 14px 4px 14px;
  padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-sm);
}
.article__note p:last-child { margin-bottom: 0; }

/* CTA box at the foot of the article */
.article-cta {
  margin: var(--sp-7) 0 0;
  padding: var(--sp-6);
  background: var(--blue-900);
  color: var(--white);
  border-radius: var(--r-asym-3);
}
.article-cta h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: 1.2;
  color: var(--white);
  margin: 0 0 var(--sp-3);
}
.article-cta p { color: var(--blue-100); margin: 0 0 var(--sp-5); }
.article-cta a:not(.btn) { color: var(--white); }
.article-cta__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.article-cta .btn-ghost { color: var(--white); border-color: rgba(255,255,255,.5); }
.article-cta .btn-ghost:hover { background: rgba(255,255,255,.12); color: var(--white); }

/* Related guides */
.article-related { margin: var(--sp-7) 0 0; }
.article-related h2 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--blue-900);
  margin: 0 0 var(--sp-4);
}
.article-related ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
.article-related a {
  display: block;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--blue-100);
  border-radius: var(--r-asym-1);
  color: var(--blue-900);
  text-decoration: none;
  font-weight: 600;
  transition: border-color .2s ease, background-color .2s ease;
}
.article-related li:nth-child(even) a { border-radius: var(--r-asym-2); }
.article-related a:hover { border-color: var(--blue-600); background: var(--blue-50); }
.article-related a span {
  display: block;
  font-weight: 400;
  font-size: var(--fs-sm);
  color: var(--sand-500);
  margin-top: 2px;
}

@media (max-width: 600px) {
  .article { padding: var(--sp-6) 0 var(--sp-8); }
  .article-cta { padding: var(--sp-5); }
}
@media (prefers-reduced-motion: reduce) {
  .article-related a { transition: none; }
}