/* Math League — blog layer: article detail + news hub grid (riso tokens from tailwind.css :root) */

/* ======================================================================
   ARTICLE HERO  (aligned to the same 1080 container as the body)
   ====================================================================== */
/* ① 垂直间距放在 inner-wrap（非 wp-site-blocks 直接子元素），
   避免 baseline style.css ".wp-site-blocks > *{padding-top:0!important}" 清零 */
.ml-art-hero{background:var(--ml-paper);}
.ml-art-hero-wrap{max-width:760px;margin:0 auto;padding:52px 28px 0;box-sizing:border-box;}
.ml-art-crumb{display:flex;gap:9px;align-items:center;font-family:var(--ml-mono);font-size:12px;color:var(--ml-mute);margin-bottom:24px;}
.ml-art-crumb a{color:var(--ml-mute);text-decoration:none;}
.ml-art-crumb a:hover{color:var(--ml-red);}
.ml-art-crumb span{opacity:.45;}
.ml-art-cat{display:inline-block;font-family:var(--ml-mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:#fff;background:var(--ml-red);padding:5px 12px;border-radius:999px;margin-bottom:20px;}
.ml-art-title{font-family:var(--ml-head);font-weight:900;font-size:clamp(29px,4.2vw,46px);line-height:1.08;letter-spacing:-.01em;color:var(--ml-ink);max-width:880px;margin:0 0 22px;font-variation-settings:'opsz' 96;}
/* ② meta 行下方加分隔线，把标题区和正文区分开 */
.ml-art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:var(--ml-mono);font-size:12.5px;color:var(--ml-ink-soft);padding-bottom:26px;border-bottom:1px solid var(--ml-hair);}
.ml-art-byline{color:var(--ml-ink);font-weight:700;}
.ml-art-dot{width:3px;height:3px;border-radius:50%;background:var(--ml-mute);opacity:.5;}

/* ======================================================================
   ARTICLE SHELL  (prose reading column + sticky TOC sidebar)
   ====================================================================== */
/* Content is CENTERED (as if no TOC). The TOC floats in the left gutter via
   position:fixed, so it NEVER shifts or squeezes the content (L112: TOC floats LEFT,
   does not affect content layout · content centered). */
/* L115: shell is a direct .wp-site-blocks child → padding-top/bottom stripped.
   Use padding on .ml-article-col (inner element, not stripped). */
.ml-article-shell{max-width:760px;margin:0 auto;padding:0 28px;box-sizing:border-box;}
.ml-article-col{min-width:0;padding-top:42px;padding-bottom:56px;}
.ml-article-col > .wp-block-post-content.ml-prose-article{max-width:100% !important;margin:0 !important;padding:0 !important;}

/* ③④ TOC — floats LEFT gutter · hidden by default · shows when prose enters view · hides after last para */
.ml-toc-wrap{
  position:fixed;top:104px;left:calc((100vw - 760px) / 2 - 260px);width:220px;
  max-height:calc(100vh - 150px);overflow-y:auto;
  /* design: card-style with subtle border */
  background:#fff;border:1px solid var(--ml-hair);border-radius:14px;padding:18px 16px;
  box-shadow:0 4px 22px -8px rgba(22,34,74,.10);
  /* default hidden · fade in/out via JS adding .is-visible */
  opacity:0;pointer-events:none;transform:translateX(-8px);
  transition:opacity .28s,transform .28s;
}
.ml-toc-wrap.is-visible{opacity:1;pointer-events:auto;transform:translateX(0);}
.ml-toc-title{font-family:var(--ml-mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--ml-mute);margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--ml-hair);}
.ml-toc-list{border-left:2px solid var(--ml-hair);}
.ml-toc-link{display:block;font-family:var(--ml-body);font-size:13px;line-height:1.4;color:var(--ml-ink-soft);text-decoration:none;padding:6px 0 6px 14px;border-left:2px solid transparent;margin-left:-2px;transition:color .15s,border-color .15s;}
.ml-toc-link:hover{color:var(--ml-ink);}
.ml-toc-link.is-active{color:var(--ml-red);border-left-color:var(--ml-red);font-weight:600;}

/* ======================================================================
   ARTICLE PROSE  (.hl-prose.ml-prose-article)
   ====================================================================== */
.ml-prose-article{font-family:var(--ml-body);color:var(--ml-ink-soft);font-size:17.5px;line-height:1.78;}
.ml-prose-article > *:first-child{margin-top:0;}
.ml-prose-article p{margin:0 0 20px;}
/* ⑤ lead: dark, readable, slightly larger — override the baseline body.page rule that grays first-p */
.ml-prose-article .ml-art-lead,.ml-prose-article > p:first-child{
  font-size:19px !important;line-height:1.7 !important;
  color:var(--ml-ink) !important;font-weight:500 !important;
  border-bottom:none !important;padding-bottom:0 !important;
  margin-bottom:26px !important;
}
.ml-prose-article h2{font-family:var(--ml-head);font-weight:800;font-size:clamp(23px,3vw,29px);color:var(--ml-ink);line-height:1.18;margin:46px 0 14px;font-variation-settings:'opsz' 52;scroll-margin-top:90px;}
.ml-prose-article h2:first-of-type{margin-top:12px;}
.ml-prose-article h3{font-family:var(--ml-head);font-weight:700;font-size:21px;color:var(--ml-ink);margin:30px 0 10px;scroll-margin-top:90px;}
.ml-prose-article h2 em,.ml-prose-article h3 em{font-style:italic;color:var(--ml-red);}
.ml-prose-article a{color:var(--ml-red);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px;}
.ml-prose-article a:hover{color:var(--ml-red-deep);}
.ml-prose-article strong{color:var(--ml-ink);font-weight:700;}
.ml-prose-article ul,.ml-prose-article ol{margin:0 0 22px;padding-left:0;list-style:none;}
.ml-prose-article ul li{position:relative;padding-left:26px;margin-bottom:10px;}
.ml-prose-article ul li::before{content:"";position:absolute;left:2px;top:11px;width:8px;height:8px;background:var(--ml-teal);border-radius:2px;transform:rotate(45deg);}
.ml-prose-article ol{counter-reset:mlp;}
.ml-prose-article ol li{position:relative;padding-left:38px;margin-bottom:12px;counter-increment:mlp;}
.ml-prose-article ol li::before{content:counter(mlp);position:absolute;left:0;top:0;width:25px;height:25px;background:var(--ml-ink);color:#fff;border-radius:50%;font-family:var(--ml-mono);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.ml-prose-article blockquote{margin:30px 0;padding:6px 0 6px 24px;border-left:4px solid var(--ml-yellow);font-family:var(--ml-head);font-style:italic;font-size:21px;line-height:1.5;color:var(--ml-ink);}
.ml-prose-article .ml-note{background:#fff;border:1px solid var(--ml-hair);border-left:4px solid var(--ml-red);border-radius:0 12px 12px 0;padding:18px 22px;margin:28px 0;font-size:16px;line-height:1.7;}
.ml-prose-article .ml-note strong{display:block;font-family:var(--ml-head);font-size:16px;margin-bottom:4px;color:var(--ml-ink);}

/* ======================================================================
   ARTICLE CTA  (.ml-art-cta--card) — ONE light-card style for BOTH mid + end.
   mid = injected after 3rd paragraph · end = after the last paragraph.
   Both sit inside the centered reading column.
   ====================================================================== */
.ml-art-cta--card{
  background:#fff;border:1px solid var(--ml-hair);
  border-left:4px solid var(--ml-red);border-radius:4px 14px 14px 4px;
  box-sizing:border-box;width:100%;overflow:hidden;
}
.ml-art-cta--card .ml-wrap{max-width:100% !important;margin:0;padding:0;display:block;box-sizing:border-box;}
/* tighter: text + a thin divider + QR, all vertically centered (no loose middle gap) */
.ml-art-cta--card .ml-art-cta-inner{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;padding:22px 26px;}
.ml-art-cta--card .ml-art-cta-text{max-width:none;}
.ml-art-cta--card .ml-art-cta-kicker{display:block;font-family:var(--ml-head);font-size:18px;font-weight:800;color:var(--ml-ink);letter-spacing:0;text-transform:none;line-height:1.2;}
.ml-art-cta--card .ml-art-cta-text p{font-size:14.5px;color:var(--ml-ink-soft);margin:6px 0 0;line-height:1.6;max-width:46ch;}
.ml-art-cta--card h2{display:none;}
.ml-art-cta--card .ml-art-cta-bullets{list-style:none;padding:0;margin:9px 0 0;display:flex;flex-wrap:wrap;gap:6px;}
.ml-art-cta--card .ml-art-cta-bullets li{font-family:var(--ml-mono);font-size:11px;color:var(--ml-ink);background:rgba(22,34,74,.07);border-radius:999px;padding:4px 12px;}
/* WhatsApp click-to-chat button — standard CTA action */
.ml-art-cta--card .ml-art-cta-wa{display:inline-flex;align-items:center;gap:8px;margin-top:14px;background:#25D366;color:#fff;font-family:var(--ml-body);font-size:14px;font-weight:700;padding:9px 18px;border-radius:999px;text-decoration:none;transition:background .15s,transform .15s;}
.ml-art-cta--card .ml-art-cta-wa:hover{background:#1ebe57;transform:translateY(-1px);}
.ml-art-cta--card .ml-art-cta-wa .ml-wa-ic{flex:none;}
.ml-art-cta--card .ml-art-back{display:inline-block;margin-top:14px;margin-left:16px;font-family:var(--ml-mono);font-size:12.5px;font-weight:700;color:var(--ml-red);text-decoration:none;border-bottom:1px solid var(--ml-hair);padding-bottom:2px;}
.ml-art-cta--card .ml-art-back:hover{border-color:var(--ml-red);}
/* QR column: thin left divider; holds the shared .ml-dualqr component */
.ml-art-cta--card .ml-art-cta-qr{display:flex;align-items:flex-start;padding-left:26px;border-left:1px solid var(--ml-hair);}

/* =========================================================================
   DUAL QR  (.ml-dualqr) — WhatsApp + WeChat, white cards + labels.
   ONE component used in article CTA, footer, contact hero, page CTA bands.
   Each item is a white card so it reads on ANY background (navy/red/teal/cream).
   ====================================================================== */
.ml-dualqr{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;}
.ml-dualqr-item{display:flex;flex-direction:column;align-items:center;gap:7px;background:#fff;border:1px solid var(--ml-hair);border-radius:12px;padding:10px 10px 8px;box-sizing:border-box;}
.ml-dualqr-box{width:104px;height:104px;display:flex;align-items:center;justify-content:center;}
.ml-dualqr--sm .ml-dualqr-box{width:88px;height:88px;}
.ml-dualqr--lg .ml-dualqr-box{width:132px;height:132px;}
.ml-dualqr-box img,.ml-dualqr-box .hl-site-qr{width:100%;height:100%;object-fit:contain;display:block;}
.ml-dualqr-box .hl-site-qr ~ .ph{display:none;}
.ml-dualqr-cap{font-family:var(--ml-mono);font-size:10.5px;font-weight:700;color:var(--ml-ink);text-align:center;line-height:1.3;letter-spacing:.02em;}
@media(max-width:480px){.ml-dualqr{gap:10px;}.ml-dualqr--lg .ml-dualqr-box,.ml-dualqr--md .ml-dualqr-box{width:96px;height:96px;}}
/* mid = vertical margin inside prose flow; end = a little more top room after nav/prose */
.ml-art-cta--mid{margin:34px 0;}
.ml-art-cta--end{margin:30px 0 4px;}
@media(max-width:760px){
  /* single column: text on top, QR block centered below (top divider instead of left) */
  .ml-art-cta--card .ml-art-cta-inner{grid-template-columns:1fr;gap:20px;padding:22px 22px 26px;justify-items:center;text-align:center;}
  .ml-art-cta--card .ml-art-cta-text{width:100%;}
  .ml-art-cta--card .ml-art-cta-text p{max-width:none;}
  .ml-art-cta--card .ml-art-cta-bullets{justify-content:center;}
  .ml-art-cta--card .ml-art-cta-qr{justify-content:center;justify-self:stretch;padding-left:0;border-left:0;border-top:1px solid var(--ml-hair);padding-top:20px;width:100%;}
  .ml-art-cta--card .ml-dualqr{justify-content:center;}
}

/* ======================================================================
   PREVIOUS / NEXT
   ====================================================================== */
.ml-art-nav{display:flex;gap:18px;margin-top:46px;padding-top:32px;border-top:1px solid var(--ml-hair);}
.ml-art-navcard{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;padding:18px 20px;border:1px solid var(--ml-hair);border-radius:13px;background:#fff;text-decoration:none;transition:border-color .15s,transform .15s,box-shadow .15s;}
.ml-art-navcard:hover{border-color:var(--ml-ink);transform:translateY(-2px);box-shadow:0 12px 26px -16px rgba(22,34,74,.35);}
.ml-art-navcard.next{text-align:right;}
.ml-art-navcard .dir{font-family:var(--ml-mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ml-red);}
.ml-art-navcard .t{font-family:var(--ml-head);font-weight:700;font-size:16.5px;color:var(--ml-ink);line-height:1.25;}
.ml-art-navcard.empty{display:none;}

/* ======================================================================
   RELATED  ("More from the guide")
   ====================================================================== */
/* ⑥ L115: .ml-related is a direct .wp-site-blocks child → padding/margin stripped.
   Vertical spacing goes on the inner .ml-wrap (not stripped). */
.ml-related{background:var(--ml-paper);border-top:1px solid var(--ml-hair);}
.ml-related .ml-wrap{max-width:760px;margin:0 auto;padding:52px 28px 64px;display:block;box-sizing:border-box;}
.ml-related .ml-newsgrid{grid-template-columns:repeat(auto-fit,minmax(290px,1fr));}
.ml-related-head{margin-bottom:26px;}
.ml-related-head .ml-seclabel{display:block;font-family:var(--ml-mono);font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--ml-red);}
.ml-related-title{font-family:var(--ml-head);font-weight:800;font-size:27px;color:var(--ml-ink);margin-top:5px;}

/* (legacy navy .ml-art-cta block removed — both CTAs now use .ml-art-cta--card above) */

/* ======================================================================
   NEWS HUB GRID  (reused by /news/, home strip, related)
   ====================================================================== */
.ml-newsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.ml-newscard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--ml-hair);border-top:4px solid var(--ml-red);border-radius:14px;padding:24px 24px 20px;text-decoration:none;transition:transform .18s,box-shadow .18s;min-height:206px;}
.ml-newscard:hover{transform:translateY(-3px);box-shadow:0 14px 30px -16px rgba(22,34,74,.35);}
.ml-newscard.nc-2{border-top-color:var(--ml-yellow);}
.ml-newscard.nc-3{border-top-color:var(--ml-teal);}
.ml-newscard.nc-4{border-top-color:var(--ml-ink);}
.ml-newscard-cat{font-family:var(--ml-mono);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ml-red);margin-bottom:10px;}
.ml-newscard.nc-2 .ml-newscard-cat{color:#B7860B;}
.ml-newscard.nc-3 .ml-newscard-cat{color:var(--ml-teal);}
.ml-newscard.nc-4 .ml-newscard-cat{color:var(--ml-ink);}
.ml-newscard-title{font-family:var(--ml-head);font-weight:800;font-size:20px;line-height:1.2;color:var(--ml-ink);margin:0 0 10px;}
.ml-newscard-exc{font-family:var(--ml-body);font-size:14.5px;line-height:1.6;color:var(--ml-ink-soft);margin:0 0 16px;flex:1;}
.ml-newscard-meta{font-family:var(--ml-mono);font-size:11.5px;color:var(--ml-mute);margin-top:auto;}
.ml-news-empty{background:#fff;border:1px dashed var(--ml-hair);border-radius:14px;padding:30px;text-align:center;color:var(--ml-ink-soft);}
.ml-news-empty a{color:var(--ml-red);font-weight:700;}

/* ======================================================================
   RESPONSIVE
   ====================================================================== */
/* hide the floating TOC whenever the left gutter is too narrow to hold it (would overlap content) */
@media(max-width:1279px){ .ml-toc-wrap{display:none;} }
@media(max-width:980px){
  .ml-article-shell{padding:36px 24px 8px;}
  .ml-art-hero-wrap,.ml-related .ml-wrap,.ml-art-cta .ml-wrap{padding-left:24px;padding-right:24px;}
}
@media(max-width:760px){
  .ml-newsgrid{grid-template-columns:1fr;}
  .ml-art-nav{flex-direction:column;}
  .ml-art-navcard.next{text-align:left;}
  .ml-art-navcard.empty{display:none;}
  .ml-art-cta-inner{grid-template-columns:1fr;gap:26px;}
  .ml-art-cta-qr{justify-self:start;text-align:left;}
}