/*
  Shared content width v1.
  Gives content pages more room without changing header, hero or footer structure.
*/

body.home-index,
body.about-page,
body.contact-page,
body.news-page,
body.legal-page {
  --oh-content-wide: min(1680px, calc(100vw - 44px));
}

body.about-page .page,
body.contact-page .page,
body.news-page .page,
body.legal-page .site-shell {
  width: var(--oh-content-wide) !important;
  max-width: var(--oh-content-wide) !important;
}

body.about-page .page-shell,
body.contact-page .page-shell,
body.news-page .page-shell,
body.about-page .section,
body.contact-page .section,
body.news-page .section,
body.news-page .article-shell,
body.news-page .news-command,
body.news-page .news-toolbar,
body.news-page .metrics {
  max-width: var(--oh-content-wide) !important;
}

body.news-page {
  --wrap: min(1680px, calc(100vw - 44px)) !important;
}

body.contact-page .contact-layout {
  grid-template-columns: minmax(320px, .62fr) minmax(0, 1.38fr) !important;
  gap: 18px !important;
}

body.about-page .why-news-clean {
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr) !important;
  gap: 24px !important;
}

body.news-page .news-layout,
body.news-page .article-layout {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 360px) !important;
}

body.legal-page .legal-wrap {
  grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) minmax(280px, 320px) !important;
  gap: 24px !important;
}

@media (max-width: 1180px) {
  body.about-page .page,
  body.contact-page .page,
  body.news-page .page,
  body.legal-page .site-shell {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }

  body.contact-page .contact-layout,
  body.about-page .why-news-clean,
  body.news-page .news-layout,
  body.news-page .article-layout,
  body.legal-page .legal-wrap {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  body.about-page .page,
  body.contact-page .page,
  body.news-page .page,
  body.legal-page .site-shell {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}