/*
 * Site-wide content width contract.
 *
 * The approved news overview is the single width reference for every page:
 * 1368px maximum content width, 32px desktop gutters, 18px tablet gutters
 * and 14px phone gutters. Header, page mastheads, main content and footer use
 * the same horizontal boundary without changing any page structure.
 */

:root {
  --site-width-sync-max: 1368px;
  --site-width-sync-gutter: 64px;
}

/* Global top and bottom boundaries. */
html body .site-header.site-header.site-header .header-inner.container,
html body .site-footer > .container.footer-main,
html body .site-footer > .container.footer-bottom,

/* Portal mastheads and overview content. */
html body main.hemu-portal-main > .hemu-portal-masthead .masthead-grid,
html body main.hemu-portal-main > .portal-content.hemu-portal-shell,

/* Home sections and conventional page containers. */
html body main > .container,
html body main > :is(header, nav, div, section).container,
html body main > :is(header, nav, div, section):not(.tool-archive-hero) > .container,

/* Shared section-level shells. */
html body main :is(
  .sp-shell,
  .service-container,
  .inner-container,
  .news-shell,
  .rh-shell,
  .feedback-shell,
  .feedback-admin-shell,
  .about-shell
),

/* Full page frames and special workspaces. */
html body main.about-reference-layout,
html body main > .tool-archive-hero,
html body main.plotcat-page > :is(.plotcat-heading, .plotcat-status, .plot-template-library, .plotcat-shell),
html body main > .ad-index-desk,
html body main > :is(.workbench-container, .research-editorial-shell),
html body main > :is(nav, section, div) > .workbench-container,
html body main > :is(nav, section, div) > :is(.plotcat-status, .research-editorial-shell),
html body main > .portal-story-shell {
  width: min(calc(100% - var(--site-width-sync-gutter)), var(--site-width-sync-max)) !important;
  max-width: none !important;
  margin-inline: auto !important;
}

/* Archive heroes are themselves the aligned surface. Their immediate content
   must fill that surface instead of receiving a second gutter reduction. */
html body main > .tool-archive-hero > :is(.container, .workbench-container, .inner-container) {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

/* Compact navigation rails remain horizontally scrollable on small screens,
   but their content starts and ends on the same line as the page body. */
html body main :is(.service-local-nav, .studio-switcher) > :is(.service-container, .container) {
  width: min(calc(100% - var(--site-width-sync-gutter)), var(--site-width-sync-max)) !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-inline: auto !important;
}

/* A few workbench components declare their own high-specificity mobile
   gutters. Normalize only their outer content surfaces so internal cards and
   controls keep their component spacing without creating a second page shell. */
html body[data-page="data-analysis"] main .analysis-lab-section > .container,
html body:is([data-page="spatial"], [data-page="calculation"]) main .inner-section > .inner-container {
  width: min(calc(100% - var(--site-width-sync-gutter)), var(--site-width-sync-max)) !important;
  max-width: none !important;
  margin-inline: auto !important;
}

/* The homepage service image used the previous 1240px frame, leaving a
   visible blank strip at the right edge after the site shell was widened.
   Keep its left-hand composition while extending it to the new 1368px line. */
@media (min-width: 961px) {
  html[data-theme] body[data-page="home"] main .home-collaboration-media {
    right: max(
      calc(var(--site-width-sync-gutter) / 2),
      calc((100% - var(--site-width-sync-max)) / 2)
    ) !important;
    width: min(52vw, 725px) !important;
  }
}

@media (max-width: 1080px) {
  :root { --site-width-sync-gutter: 36px; }
}

@media (max-width: 520px) {
  :root { --site-width-sync-gutter: 28px; }
}