/* =====================================================================
   UnlockChina.co — Article visual system
   Paste into Ghost Admin -> Settings -> Code injection -> Site Header,
   inside a style tag. Pairs with article-enhance.js (Site Footer).
   Goal: turn text-wall intel reports into scannable, visual reports.
   ===================================================================== */

/* Note: design tokens live in screen.css :root (canonical, Design System v1.0).
   article.css uses them via var() — do not redefine here. */

/* ---- Reading column & base typography ----
   V3.3 (2026-06-27): Newsreader serif for editorial feel ("field note", not
   "AI/Markdown report"). UI chrome (tables, checklists, callout labels) keeps
   system sans — see overrides further down + in screen.css. */
.gh-content,
.uc-article {
  font-family: 'Newsreader', Georgia, serif;
  font-size: 19px;
  line-height: 1.72;
  color: var(--uc-ink-body);
  max-width: 720px;
  margin: 0 auto;
}
.uc-article p { margin: 0 0 1.1em; }
/* lead-in line (usually bold, ends with ":") should hug the list it introduces */
.uc-article p + ul,
.uc-article p + ol { margin-top: -0.5em; }
/* UI chrome inside article keeps sans for legibility */
.uc-article .uc-table-wrap,
.uc-article .checklist,
.uc-article .check-item,
.uc-article .difficulty-callout,
.uc-article .evidence-card .attribution,
.uc-article .evidence-card .source-link,
.uc-article .cta-box,
.uc-article .warn-card,
.uc-article .caution-card,
.uc-article .tip-card,
.uc-article .tldr-card,
.uc-article .uc-three-tool,
.uc-article .uc-net-cards,
.uc-article .uc-provider-list,
.uc-article .uc-bottom-line { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

/* ==== V3.3 article components (2026-06-27) — eSIM uses these 4 ==== */

/* 1. Top three-tool card (replaces feature image; doubles as quick answer).
   .uc-three-tool is a grid container; .utt-cell are direct children; .utt-footer
   spans all columns via grid-column:1/-1. Background of the parent shows through
   the 1px gap, creating the cell separators. */
.uc-article .uc-three-tool { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px; background:var(--uc-line); border:1px solid var(--uc-line); border-radius:20px; overflow:hidden; margin:1.4em 0 2em; max-width:none; }
.uc-article .uc-three-tool .utt-cell { padding:22px 22px 24px; }
.uc-article .uc-three-tool .utt-cell.utt-green { background:#f1faf5; }
.uc-article .uc-three-tool .utt-cell.utt-ink   { background:#fff; }
.uc-article .uc-three-tool .utt-cell.utt-orange{ background:#fff; }
.uc-article .uc-three-tool .utt-footer { grid-column:1/-1; padding:13px 24px; font-size:13px; color:var(--uc-green-dark); font-weight:700; background:#eef7f2; border-top:1px solid var(--uc-line); }
.uc-article .uc-three-tool .utt-num { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:8px; color:#fff; font-size:13px; font-weight:800; margin-right:9px; vertical-align:middle; }
.uc-article .uc-three-tool .utt-cell.utt-green  .utt-num { background:var(--uc-green-dark); }
.uc-article .uc-three-tool .utt-cell.utt-ink    .utt-num { background:var(--uc-ink); }
.uc-article .uc-three-tool .utt-cell.utt-orange .utt-num { background:var(--uc-orange-700); }
.uc-article .uc-three-tool .utt-tag { display:inline-block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:800; vertical-align:middle; }
.uc-article .uc-three-tool .utt-cell.utt-green  .utt-tag { color:var(--uc-green-dark); }
.uc-article .uc-three-tool .utt-cell.utt-ink    .utt-tag { color:var(--uc-muted); }
.uc-article .uc-three-tool .utt-cell.utt-orange .utt-tag { color:var(--uc-orange-700); }
.uc-article .uc-three-tool h3 { font-family:'Newsreader',Georgia,serif; font-size:26px; font-weight:600; margin:12px 0 4px; padding:0; border:none; line-height:1.2; }
.uc-article .uc-three-tool h3::before { content:none; display:none; }
.uc-article .uc-three-tool p { font-size:14px; color:#4f5d58; line-height:1.5; margin:0; }

/* 2. Two network-state cards (#s2) */
.uc-article .uc-net-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:1em 0 1.2em; max-width:none; }
.uc-article .uc-net-cards .unc { border-radius:14px; padding:18px; }
.uc-article .uc-net-cards .unc.unc-green  { border:1px solid #cfe9dd; background:#f1faf5; }
.uc-article .uc-net-cards .unc.unc-orange { border:1px solid #ecd6c5; background:#fbf3ec; }
.uc-article .uc-net-cards .unc-label { display:block; font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:800; margin-bottom:10px; }
.uc-article .uc-net-cards .unc.unc-green  .unc-label { color:var(--uc-green-dark); }
.uc-article .uc-net-cards .unc.unc-orange .unc-label { color:var(--uc-orange-700); }
.uc-article .uc-net-cards h3 { font-family:'Newsreader',Georgia,serif; font-size:20px; font-weight:600; margin:0 0 4px; padding:0; border:none; line-height:1.25; }
.uc-article .uc-net-cards h3::before { content:none; display:none; }
.uc-article .uc-net-cards p { font-size:14px; color:#4f5d58; line-height:1.5; margin:0; }

/* 3. Provider recommendation list (#s4) */
.uc-article .uc-provider-list { display:grid; gap:11px; margin:1.2em 0; max-width:none; }
.uc-article .uc-provider-list .upl-row { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:baseline; border:1px solid var(--uc-line); border-radius:13px; padding:16px 18px; }
.uc-article .uc-provider-list .upl-name { font-size:17px; font-weight:800; color:var(--uc-ink); min-width:90px; }
.uc-article .uc-provider-list .upl-green .upl-name { color:var(--uc-green-dark); }
.uc-article .uc-provider-list p { font-size:14px; color:var(--uc-ink-soft); flex:1 1 200px; line-height:1.5; margin:0; }
.uc-article .uc-provider-list .upl-check { color:var(--uc-muted-2); }
.uc-article .uc-provider-list code { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; background:#f1f3f2; padding:1px 5px; border-radius:4px; }

/* 4. Bottom-line dark callout (replaces "## The Bottom Line" H2) */
.uc-article .uc-bottom-line { margin:2em 0; background:var(--uc-dark); border-radius:16px; padding:26px clamp(20px,3vw,30px); color:#fff; max-width:none; }
.uc-article .uc-bottom-line .ubl-tag { display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:var(--uc-mint-300); margin-bottom:10px; }
.uc-article .uc-bottom-line .ubl-formula { font-family:'Newsreader',Georgia,serif; font-size:clamp(22px,3.2vw,28px); line-height:1.3; font-weight:600; margin:0 0 10px; color:#fff; }
.uc-article .uc-bottom-line .ubl-body { font-size:16px; color:rgba(255,255,255,.78); line-height:1.6; margin:0; }

/* ---- Section headings with accent bar ---- */
.uc-article h2 {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.4px;
  margin: 2.2em 0 0.7em;
  padding-top: 1.1em;
  border-top: 1px solid var(--uc-line);
}
.uc-article h2::before {
  content: "";
  display: block;
  width: 38px;
  height: 4px;
  border-radius: 4px;
  background: var(--uc-green);
  margin-bottom: 14px;
}
.uc-article h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 1.8em 0 0.5em;
  padding-left: 14px;
  border-left: 3px solid var(--uc-green);
  line-height: 1.3;
}

/* ---- Section dividers (--- in markdown): light, not noisy ---- */
.uc-article hr {
  border: none;
  height: 1px;
  background: #f0f0f0;
  margin: 2.2em 0;
}
/* avoid double line when hr sits right before an h2 (which has its own top border) */
.uc-article hr + h2 { border-top: none; padding-top: 0; margin-top: 1em; }

/* ---- Lead paragraph (first paragraph after the difficulty callout) ---- */
.uc-article .difficulty-callout + p {
  font-size: 20px;
  line-height: 1.6;
  color: #2c2c2c;
}

/* ---- TL;DR / Quick answer card (solution-first hook at the top) ---- */
.uc-article .tldr-card {
  background: linear-gradient(180deg, var(--uc-green-tint), #effaf4);
  border: 1px solid #bfe8d8;
  border-radius: 14px;
  padding: 20px 24px;
  margin: 0 0 1.6em;
  font-size: 17px;
  line-height: 1.62;
  color: #123a2d;
}
.uc-article .tldr-card strong { color: #0c3025; }
.uc-article .tldr-card a { color: var(--uc-green-dark); font-weight: 600; }

/* ---- Color callouts (traffic-light): warning / heads-up / tip ----
   Authored in markdown as a blockquote led by ⚠️ / 👀 / 💡; JS tags the class. */
.uc-article .warn-card,
.uc-article .caution-card,
.uc-article .tip-card {
  border-radius: 12px;
  padding: 15px 20px;
  margin: 1.6em 0;
  font-size: 16px;
  line-height: 1.6;
}
.uc-article .warn-card p,
.uc-article .caution-card p,
.uc-article .tip-card p { margin: 0; }
.uc-article .warn-card    { background: #fdf3f1; border: 1px solid #f0c9c2; border-left: 4px solid #d9534f; color: #5a2620; }
.uc-article .warn-card strong    { color: #b23b34; }
.uc-article .caution-card { background: #fff8ec; border: 1px solid #f0dcb0; border-left: 4px solid #d99a2b; color: #5a4420; }
.uc-article .caution-card strong { color: #9c6f17; }
.uc-article .tip-card     { background: var(--uc-green-tint); border: 1px solid #bfe8d8; border-left: 4px solid var(--uc-green); color: #123a2d; }
.uc-article .tip-card strong     { color: var(--uc-green-dark); }

/* ---- Difficulty callout (the intro "Challenge Difficulty: X/10" block) ---- */
.uc-article .difficulty-callout {
  background: linear-gradient(180deg, var(--uc-green-800), #14463604);
  background: var(--uc-green-800);
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 22px 24px;
  margin: 0 0 2em;
  font-size: 15px;
  line-height: 1.6;
}
.uc-article .difficulty-callout strong {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #5DCAA5;
}
.uc-article .difficulty-callout p { margin: 0.4em 0 0; color: rgba(255,255,255,0.66); }

/* ---- Evidence card: quote + attribution + source link grouped ---- */
.uc-article .evidence-card {
  background: #fff;
  border: 1px solid #dCEbe5;
  border-left: 5px solid var(--uc-green);
  border-radius: 14px;
  padding: 20px 24px 18px;
  margin: 1.9em 0;
  box-shadow: 0 6px 22px rgba(13,43,34,0.07);
}
/* Source badge on every evidence card — the differentiator.
   Reddit cards (most) say "Verified Reddit report"; official-source cards say "Verified source". */
.uc-article .evidence-card::before {
  content: "📋 Verified source";
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--uc-green-dark);
  margin-bottom: 12px;
}
.uc-article .evidence-card.evidence-reddit::before { content: "💬 Verified Reddit report"; }
.uc-article .evidence-card blockquote {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-size: 18px;
  line-height: 1.6;
  font-style: italic;
  color: var(--uc-ink);
}
.uc-article .evidence-card blockquote p { margin: 0; }
.uc-article .evidence-card .attribution {
  margin: 12px 0 0;
  font-size: 13.5px;
  font-style: normal;
  color: var(--uc-muted);
  font-weight: 500;
}
.uc-article .evidence-card .source-link a,
.uc-article a.source-link,
.uc-article .source-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--uc-green-dark);
  background: var(--uc-green-tint);
  border-radius: 100px;
  padding: 3px 12px;
  text-decoration: none;
}

/* ---- Plain blockquotes (fallback, not grouped) ---- */
.uc-article blockquote {
  border-left: 4px solid var(--uc-green);
  background: var(--uc-bg-soft);
  border-radius: 0 12px 12px 0;
  margin: 1.6em 0;
  padding: 14px 22px;
  font-style: italic;
  color: #333;
}

/* ---- Tables ---- */
/* JS wraps every table in .uc-table-wrap so wide tables scroll horizontally
   inside their own box instead of overflowing the whole page on mobile. */
.uc-article .uc-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.8em 0;
  border-radius: 12px;
}
/* width:auto + min-width:100% = small tables fill the column, wide ones grow
   past it and the wrapper scrolls (instead of cells cramming/wrapping). */
.uc-article .uc-table-wrap > table { margin: 0; width: auto; min-width: 100%; }
/* wide comparison tables: keep every cell on one line so rows align cleanly
   and the table scrolls horizontally (JS adds .uc-table-compare for 5+ cols) */
.uc-article .uc-table-compare th,
.uc-article .uc-table-compare td { white-space: nowrap; vertical-align: middle; }
.uc-article table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: 1.8em 0;
  border: 1px solid var(--uc-line);
  border-radius: 12px;
  overflow: hidden;
}
.uc-article thead th {
  background: var(--uc-green-tint);
  color: var(--uc-green-dark);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  text-align: left;
  padding: 11px 14px;
}
.uc-article tbody td { padding: 11px 14px; border-top: 1px solid var(--uc-line); vertical-align: top; }
.uc-article tbody tr:nth-child(even) { background: #fafcfb; }

/* ---- Checklist / ordered steps ---- */
.uc-article ol { counter-reset: step; list-style: none; padding-left: 0; margin: 0.2em 0 1.3em; }
.uc-article ol > li {
  position: relative;
  padding: 0 0 0 44px;
  margin: 0 0 14px;
  line-height: 1.6;
  min-height: 28px;
}
.uc-article ol > li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 28px; height: 28px;
  background: var(--uc-green);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ---- Unordered (bullet) lists ---- */
.uc-article ul { padding-left: 1.35em; margin: 0.2em 0 1.15em; }
.uc-article ul li { margin-bottom: 0.45em; line-height: 1.55; padding-left: 0.2em; }
.uc-article ul li::marker { color: var(--uc-green); }
.uc-article ul li:last-child { margin-bottom: 0; }
.uc-article ul li > ul { margin: 0.4em 0 0; }

/* ---- Checklist: markdown "- [ ] item" → square checkbox (JS tags it) ---- */
.uc-article ul.checklist { list-style: none; padding-left: 0; }
.uc-article ul.checklist li.check-item {
  list-style: none;
  position: relative;
  padding: 0 0 0 32px;
  margin-bottom: 12px;
  line-height: 1.5;
}
.uc-article ul.checklist li.check-item::before {
  content: "";
  position: absolute;
  left: 0; top: 0.18em;
  width: 19px; height: 19px;
  border: 2px solid var(--uc-green);
  border-radius: 6px;
  background: #fff;
  box-sizing: border-box;
}
.uc-article ul.checklist li.check-item.checked::before { background: var(--uc-green); }
.uc-article ul.checklist li.check-item.checked::after {
  content: "✓";
  position: absolute;
  left: 3.5px; top: 0.05em;
  color: #fff; font-size: 13px; font-weight: 800; line-height: 19px;
}

/* ---- CTA box (bottom Pack CTA — matches the sidebar .rail-cta: dark + green button) ---- */
.uc-article .cta-box {
  background: var(--uc-dark);
  color: rgba(255,255,255,0.75);
  border: none;
  border-radius: 16px;
  padding: 28px 28px 26px;
  margin: 2.4em 0;
  text-align: center;
  font-size: 15.5px;
  font-style: normal;
  line-height: 1.6;
}
.uc-article .cta-box strong { display: block; color: #fff; font-size: 20px; margin-bottom: 14px; }
.uc-article .cta-box a {
  display: block;
  width: fit-content;
  margin: 0 auto 4px;
  background: var(--uc-green);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: 10px;
  padding: 12px 26px;
}

/* ---- Images ---- */
/* In-body images default to a comfortable column-width — feature image lives
   outside .post-body (see post.hbs) so it stays full-width. For an occasional
   wide screenshot, author it as a Ghost image card with width=wide. */
.gh-content img,
.uc-article img {
  display: block;
  max-width: 560px;
  height: auto;
  margin: 18px auto 0;
  border-radius: 12px;
}
/* Escape hatch: Ghost image cards explicitly set to wide reclaim the full column. */
.gh-content .kg-width-wide img,
.uc-article .kg-width-wide img { max-width: 100%; }

/* ---- Figure captions ----
   Authors write captions as `*Figure: …*` directly under the image; Ghost may
   render that as <img> + <p><em>…</em></p> OR wrap the image in <figure> with a
   <figcaption>. Covering all three shapes so the style lands no matter what. */
.gh-content img + p em,
.gh-content figure + p em,
.gh-content figcaption,
.uc-article img + p em,
.uc-article figure + p em,
.uc-article figcaption {
  display: block;
  text-align: center;
  font-size: 14px;
  line-height: 1.45;
  color: #6f7d78;
  font-style: italic;
  margin: 8px auto 22px;
  max-width: 560px;
}

/* ---- Mobile ---- */
@media (max-width: 600px) {
  .gh-content, .uc-article { font-size: 17px; }
  .uc-article h2 { font-size: 23px; }
  .uc-article h3 { font-size: 19px; }
  /* tighter list indent so wrapped lines don't crowd the right edge */
  .uc-article ul { padding-left: 1.15em; }
  .uc-article ol > li { padding-left: 40px; }
  /* shrink the comparison tables so 3 columns stop cramming into a phone width */
  .uc-article table { font-size: 13px; }
  .uc-article thead th { padding: 9px 10px; font-size: 11px; letter-spacing: 0.4px; }
  .uc-article tbody td { padding: 9px 10px; }
  /* give cards back some breathing room on narrow screens */
  .uc-article .tldr-card,
  .uc-article .difficulty-callout,
  .uc-article .evidence-card,
  .uc-article .cta-box { padding-left: 18px; padding-right: 18px; }
  .uc-article blockquote { padding-left: 16px; padding-right: 16px; }
}