/* ==========================================================================
   Condition-guide template styles (Figma 1:1506 "Gaming Addiction Treatment in Thailand").
   Generic .cg-* classes so future condition guides can reuse this file
   (front matter: pageCss: gaming, or copy/rename to condition-guide.css).
   Hero, byline, TOC, key facts, FAQ, sources, related and crisis box come from
   site.css and layouts/article.njk (columns: 3). Only site.css custom properties here.
   ========================================================================== */

/* ---------- Inline citation markers: [1] links to #source-1 ---------- */
.prose .cg-cite {
  display: inline-block; margin-left: 2px; padding: 0 2px;
  font-size: 0.72em; line-height: 1; font-weight: 700; vertical-align: super;
  color: var(--color-primary); text-decoration: none;
}
.prose .cg-cite:hover { text-decoration: underline; }

/* ---------- Plain lists with bold lead-ins (signs, treatment, questions) ---------- */
.prose .cg-list { padding-left: 1.4em; list-style: disc; }
.prose .cg-list--numbered { list-style: decimal; }
.prose .cg-list > li { padding-left: var(--space-1); }
.prose .cg-list > li + li { margin-top: var(--space-3); }
.prose .cg-list > li::marker { color: var(--color-primary); font-weight: 700; }
.prose .cg-list strong { color: var(--color-text); }

/* ---------- Outpatient vs residential table (1:1740) ---------- */
/* Fits the centre column on desktop; scrolls sideways on small screens. */
.cg-compare .data-table { min-width: 520px; }
.cg-compare .data-table thead th:first-child,
.cg-compare .data-table tbody th { width: 22%; }

/* ---------- Sidebar: how this guide was made (replaces 1:2020 / 1:1611) ---------- */
.cg-review {
  display: grid; gap: var(--space-3); padding: var(--space-5);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
}
.cg-review__title { font-size: var(--fs-label); line-height: 20px; color: var(--color-text); }
.cg-review__text { font-size: var(--fs-sm); line-height: 22px; color: var(--color-text-soft); }
.cg-review__text strong { color: var(--color-text); }
.cg-review__text a { font-weight: 700; }

/* Key facts: label above value (long values read better than right-aligned wrapping) */
.article-layout--3col .key-facts__row { flex-direction: column; align-items: flex-start; gap: 2px; }
.article-layout--3col .key-facts__row dd { text-align: left; }