/* V43 · one final geometry for every section hero.
   This stylesheet is intentionally loaded LAST, after page-specific bundles.
   It prevents legacy Analytics/Dashboard/Warehouse fixed heights from changing
   the top banner size from one section to another. */

:root {
  --app-shared-hero-ratio: 0.1322916667; /* 508 / 3840 */
}

@media (min-width: 981px) {
  html body.app-modern-shell {
    /* One exact outer rectangle for every desktop section. The width is the
       viewport minus the shared page gutters; the height follows 3840×508. */
    --app-shared-hero-width: calc(100vw - (2 * var(--app-page-pad, 28px)));
    --app-shared-hero-height: clamp(
      188px,
      calc(var(--app-shared-hero-width) * var(--app-shared-hero-ratio)),
      270px
    );
  }

  html body.app-modern-shell .hero-banner-enhanced {
    box-sizing: border-box !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: var(--app-shared-hero-width) !important;
    max-width: var(--app-shared-hero-width) !important;
    height: var(--app-shared-hero-height) !important;
    min-height: var(--app-shared-hero-height) !important;
    max-height: var(--app-shared-hero-height) !important;
    aspect-ratio: auto !important;
    margin-top: 0 !important;
    margin-right: calc((100% - var(--app-shared-hero-width)) / 2) !important;
    margin-bottom: 14px !important;
    margin-left: calc((100% - var(--app-shared-hero-width)) / 2) !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  /* Analytics was the only top-level area intentionally broken out of its
     normal content box in V42. That made its gutter and height differ from
     Main. Keep the analytics canvas full-width and let the shared hero use the
     exact same page gutters as every other section. */
  html body.analytics-page-body .analytics-hub {
    width: 100% !important;
    max-width: none !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;
    transform: none !important;
  }

  /* Full-bleed artwork must always fill the same outer geometry. */
  html body.app-modern-shell .hero-banner-enhanced > img,
  html body.app-modern-shell .hero-banner-enhanced > .supplied-section-hero__art,
  html body.app-modern-shell .hero-banner-enhanced > .warehouse-section-hero__art,
  html body.app-modern-shell .hero-banner-enhanced > .orders-marketplace-hero__art,
  html body.app-modern-shell .hero-banner-enhanced > .offline-orders-hero__art,
  html body.app-modern-shell .hero-banner-enhanced > .knowledge-hero__art,
  html body.app-modern-shell .hero-banner-enhanced > .settings-heading__art,
  html body.app-modern-shell .hero-banner-enhanced > .integrations-modern-heading__art,
  html body.app-modern-shell .hero-banner-enhanced > .page-hero__reference-art {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    border-radius: inherit !important;
  }
}

@media (max-width: 980px) and (min-width: 621px) {
  html body.app-modern-shell .hero-banner-enhanced {
    box-sizing: border-box !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
    aspect-ratio: auto !important;
    border-radius: 22px !important;
  }
  html body.analytics-page-body .analytics-hub { width: 100% !important; max-width: none !important; }
}

@media (max-width: 620px) {
  html body.app-modern-shell .hero-banner-enhanced {
    box-sizing: border-box !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    height: 158px !important;
    min-height: 158px !important;
    max-height: 158px !important;
    aspect-ratio: auto !important;
    border-radius: 20px !important;
  }
  html body.analytics-page-body .analytics-hub { width: 100% !important; max-width: none !important; }
}