/* =============================================================================
   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); }

/* --- Readable, centered text column inside the full-width card --- */
.news-detail .mu-hero-article > p,
.news-detail .mu-hero-article > h2,
.news-detail .mu-hero-article > h3,
.news-detail .mu-hero-article > h4,
.news-detail .mu-hero-article > ul,
.news-detail .mu-hero-article > ol,
.news-detail .mu-hero-article > blockquote,
.news-detail .mu-hero-article > .mu-note,
.news-detail .mu-hero-article > .mu-table-wrap,
.news-detail .mu-hero-article > figure{
  max-width:820px;
  margin-left:auto;
  margin-right:auto;
}

/* --- 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; }

/* --- On small screens the column is just the card padding --- */
@media (max-width:600px){
  .news-detail .mu-hero-article > p,
  .news-detail .mu-hero-article > h2,
  .news-detail .mu-hero-article > h3,
  .news-detail .mu-hero-article > h4,
  .news-detail .mu-hero-article > ul,
  .news-detail .mu-hero-article > ol,
  .news-detail .mu-hero-article > blockquote,
  .news-detail .mu-hero-article > .mu-note,
  .news-detail .mu-hero-article > .mu-table-wrap{
    max-width:100%;
  }
}