/* =============================================================================
   news-article.css — unified, readable layout for /news/<article> pages.
   -----------------------------------------------------------------------------
   Each legacy article ships its own inline <style> (with its own narrower
   max-width, e.g. 900px). This stylesheet is loaded on article pages and uses
   higher specificity (the .news-detail wrapper) + !important on the container
   so EVERY article renders with one consistent layout that matches the rest of
   the site: a full-container-width white card with a comfortable, readable text
   column inside it. No article markup is changed.
   ========================================================================== */

/* --- Same structure as community: a white SHELL (the <main>) holds the
   breadcrumb, then the article sits inside it as a nested white-box card. --- */
.news-detail{
  margin:2rem auto 2.6rem;
  background:var(--surface-0);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-md);
}
.news-detail .mu-hero-article.white-box,
.news-detail > .white-box{
  max-width:none !important;
  width:100% !important;
  margin:0 0 1.4rem !important;
  padding:clamp(1.1rem, .9rem + 1.2vw, 1.9rem) !important;
  background:var(--surface-1) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r-lg) !important;
  box-shadow:var(--shadow-sm) !important;
}
/* Related-news block is also a nested card */
.news-detail .news-more{ margin-top:1.4rem; }

/* --- Hero banner spans the full card width --- */
.news-detail .mu-hero-banner{ max-width:none; margin-bottom:1.8rem; }
.news-detail .mu-hero-title h1{ font-size:clamp(1.8rem, 2.2vw + 1.1rem, 2.5rem); }

/* --- One reading column: everything after the hero shares one left edge ---
   Three width systems used to fight here: this file centred p/h2/tables at
   820px, citadel.css caps every p/ul/ol inside .news-detail at 78ch (narrower,
   and without auto margins, so lists hugged the left), and each article's own
   callouts, grids, FAQs and CTA rows ran the full card width. Up to five left
   edges stacked down one article. Now the hero (<header class="*-hero"> or
   .mu-hero-banner) is the only full-width block and every other child sits in
   --news-col. The selector weighs (0,4,3) so it beats citadel's (0,2,2) cap
   and the inline `margin:20px 0` shorthands in each article's <style> (0,2,0). */
.news-detail{ --news-col:760px; }
.news-detail .mu-hero-article.white-box > :not(header):not(.mu-hero-banner):not(script):not(style){
  max-width:var(--news-col);
  margin-left:auto;
  margin-right:auto;
}
/* Copy nested in those blocks (FAQ answers, callouts, grid cards) fills its
   block instead of stopping short at citadel's 78ch. */
.news-detail .mu-hero-article.white-box > :not(header):not(.mu-hero-banner) :is(p, ul, ol){
  max-width:none;
}
/* citadel's 78ch ol cap also caught the breadcrumb trail and pushed the
   article title onto a second line. */
.news-detail .breadcrumb-nav .breadcrumb{ max-width:none; }

/* --- Readability typography --- */
.news-detail .mu-hero-article p,
.news-detail .mu-hero-article li{
  font-size:1.06rem;
  line-height:1.75;
  color:var(--text);
}
.news-detail .mu-hero-article > h2{ margin-top:2.1rem; margin-bottom:.6rem; line-height:1.25; }
.news-detail .mu-hero-article > h3{ margin-top:1.6rem; margin-bottom:.5rem; line-height:1.3; color:var(--text-strong); }
.news-detail .mu-hero-article ul,
.news-detail .mu-hero-article ol{ padding-left:1.3rem; }
.news-detail .mu-hero-article li{ margin:.4rem 0; }
.news-detail .mu-hero-article img{ max-width:100%; height:auto; border-radius:12px; }

/* --- Tables: readable + scrollable on small screens --- */
.news-detail .mu-table-wrap{ overflow-x:auto; }
.news-detail table{ width:100%; border-collapse:collapse; }

/* --- Related-news block at the foot of the article --- */
.news-detail .news-more{ margin-top:2.4rem; }