/* Article styles for /learn static pages. Mirrors the inline article CSS that
   news/index.php injects, so standalone /learn pages render identically.
   Relies on CSS variables from /assets/css/style.css (--accent, --surface,
   --surface-2, --border, --text, --text-secondary, --font-heading). */

.article-breadcrumb { font-size:13px; color:var(--text-secondary); margin-bottom:20px; }
.article-breadcrumb a { color:var(--text-secondary); }
.article-breadcrumb a:hover { color:var(--text); }
.article-breadcrumb .sep { margin:0 8px; opacity:0.5; }

.article-outer { max-width:1100px; margin:0 auto; padding:40px 40px 80px; display:grid; grid-template-columns:220px 1fr; gap:60px; align-items:start; }
.article-nav { position:sticky; top:80px; }
.article-nav-back { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-secondary); padding-left:12px; margin-bottom:24px; transition:color .15s; }
.article-nav-back:hover { color:var(--text); }
.article-nav-label { font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent); margin-bottom:16px; padding-left:12px; }
.article-nav-list { list-style:none; border-left:1px solid var(--border); }
.article-nav-list li a { display:block; padding:9px 12px; font-size:12px; line-height:1.4; color:rgba(255,255,255,0.45); text-decoration:none; border-left:2px solid transparent; margin-left:-1px; transition:all .15s; }
.article-nav-list li a:hover { color:rgba(255,255,255,0.8); border-left-color:rgba(255,255,255,0.2); }
.article-nav-list li a.active { color:#fff; border-left-color:var(--accent); }
.article-col { min-width:0; }
.article-hero-fallback { width:100%; height:220px; background:var(--surface-2); border-radius:14px; margin-bottom:36px; display:flex; align-items:center; justify-content:center; }
.article-hero-fallback img { width:140px; height:auto; opacity:0.35; }
.article-meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.article-cat { font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; padding:3px 10px; border-radius:20px; background:rgba(204,255,102,0.12); color:var(--accent); }
.article-date { font-size:13px; color:rgba(255,255,255,0.4); }
.article-title { font-family:var(--font-heading); font-size:clamp(28px,3.8vw,48px); font-weight:500; letter-spacing:-1.5px; line-height:1.1; color:#fff; margin-bottom:28px; }
.article-divider { height:1px; background:var(--border); margin-bottom:40px; }
.article-body { font-size:16px; line-height:1.85; color:rgba(255,255,255,0.78); }
.article-body h1 { font-family:var(--font-heading); font-size:clamp(22px,2.8vw,34px); font-weight:500; color:#fff; margin:48px 0 16px; }
.article-body h2 { font-family:var(--font-heading); font-size:clamp(18px,2.2vw,26px); font-weight:500; color:#fff; margin:44px 0 14px; padding-bottom:10px; border-bottom:1px solid var(--border); scroll-margin-top:80px; }
.article-body h3 { font-family:var(--font-heading); font-size:clamp(16px,1.8vw,21px); font-weight:500; color:#fff; margin:32px 0 12px; }
.article-body h4 { font-size:15px; font-weight:700; color:rgba(255,255,255,0.9); margin:24px 0 8px; }
.article-body p { margin-bottom:18px; }
.article-body a { color:var(--accent); text-decoration:none; border-bottom:1px solid rgba(204,255,102,0.35); }
.article-body a:hover { border-bottom-color:var(--accent); }
.article-body strong { color:#fff; font-weight:600; }
.article-body em { font-style:italic; }
.article-body ul,.article-body ol { margin:0 0 18px 22px; display:flex; flex-direction:column; gap:7px; }
.article-body li { line-height:1.7; }
.article-body ul li { list-style:disc; }
.article-body ol li { list-style:decimal; }
.article-body blockquote { border-left:3px solid var(--accent); margin:24px 0; padding:14px 20px; background:rgba(204,255,102,0.05); border-radius:0 8px 8px 0; }
.article-body blockquote p { margin:0; font-style:italic; }
.article-body img { max-width:100%; height:auto; border-radius:10px; margin:12px 0; display:block; }
.article-body table { width:100%; border-collapse:collapse; margin:24px 0; font-size:14px; }
.article-body th { background:var(--surface); color:rgba(255,255,255,0.55); font-weight:600; font-size:11px; letter-spacing:0.5px; text-transform:uppercase; padding:11px 14px; text-align:left; border-bottom:1px solid var(--border); }
.article-body td { padding:11px 14px; border-bottom:1px solid rgba(255,255,255,0.04); color:rgba(255,255,255,0.72); }
.article-body tr:last-child td { border-bottom:none; }
.article-body code { background:var(--surface-2); padding:2px 6px; border-radius:4px; font-size:13px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--accent); }
.article-body hr { border:none; height:1px; background:var(--border); margin:32px 0; }
.article-footer { margin-top:56px; padding-top:32px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; color:var(--text-secondary); font-size:13px; }
.article-footer a { color:var(--text); font-weight:500; }
.article-footer a:hover { color:var(--accent); }

@media (max-width:900px) {
  .article-outer { grid-template-columns:1fr; gap:0; padding:32px 20px 60px; }
  .article-nav { display:none; }
  .article-body h2 { scroll-margin-top:70px; }
}