/* V863 · stable desktop composition under browser zoom-out.
   Browser zoom-out increases the CSS viewport width.  The previous shell used
   that entire virtual width, so cards, hero banners and whitespace stretched
   away from one another.  Keep one bounded desktop canvas instead: below the
   cap nothing changes, while on very wide/zoomed-out viewports the whole
   composition stays proportional and simply becomes visually smaller.

   IMPORTANT: this is intentionally desktop-only.  Zoom-in reduces the CSS
   viewport, therefore the existing responsive breakpoints continue to adapt
   the application exactly as before.  No transform/zoom is applied here. */

@media (min-width: 1121px) {
  html body.app-modern-shell {
    --app-desktop-layout-max: 1760px;
    --app-layout-viewport: min(100vw, var(--app-desktop-layout-max));

    /* hero-banner-unified-v43 used raw 100vw.  Tie it to the bounded desktop
       canvas so the banner scales with the rest of the page at zoom-out. */
    --app-shared-hero-width: calc(
      var(--app-layout-viewport) - (2 * var(--app-page-pad, 28px))
    );
  }

  html body.app-modern-shell > .site-shell {
    position: relative !important;
    width: 100% !important;
    max-width: var(--app-desktop-layout-max) !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
  }

  /* Keep the chrome and content on the same canvas.  These explicit bounds
     also neutralise older section-specific max-width:none rules. */
  html body.app-modern-shell .app-header,
  html body.app-modern-shell.products-modern-body .app-header,
  html body.app-modern-shell main.page-container,
  html body.app-modern-shell.products-modern-body main.page-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  html body.app-modern-shell main.page-container,
  html body.app-modern-shell.products-modern-body main.page-container {
    margin-inline: 0 !important;
  }

  /* Desktop heroes are the one shared component whose historical geometry is
     viewport-based rather than container-based.  Re-assert the bounded width
     at the final cascade position for every section, including Analytics. */
  html body.app-modern-shell .hero-banner-enhanced {
    width: var(--app-shared-hero-width) !important;
    max-width: var(--app-shared-hero-width) !important;
    margin-left: calc((100% - var(--app-shared-hero-width)) / 2) !important;
    margin-right: calc((100% - var(--app-shared-hero-width)) / 2) !important;
  }

  html body.analytics-page-body .analytics-hub__hero-banner.hero-banner-enhanced,
  html body.analytics-page-body .analytics-diagnostics-page__hero-banner.hero-banner-enhanced {
    left: auto !important;
    right: auto !important;
    width: var(--app-shared-hero-width) !important;
    max-width: var(--app-shared-hero-width) !important;
    margin-left: calc((100% - var(--app-shared-hero-width)) / 2) !important;
    margin-right: calc((100% - var(--app-shared-hero-width)) / 2) !important;
    transform: none !important;
  }
}