/* BCS hero spacing contract: background shell > one padded content container.
   Shared by the public site, ERP and standalone customer views. Screen only. */
:root {
  --bcs-hero-space: clamp(48px, 6vw, 88px);
  --bcs-mini-hero-space: clamp(24px, 4vw, 48px);
  --bcs-hero-mobile-inset: 24px;
  --bcs-app-heading-inset: 24px;
}
@media screen {
  :is(#page-wrapper .page-banner, #page-wrapper .home-hero,
      #page-wrapper .bcs-local-hero, .hero-section, .bcs-mini-hero) {
    padding: 0 !important; /* Defeat legacy inline/section utilities at the shell only. */
  }
  :is(#page-wrapper .page-banner, #page-wrapper .home-hero,
      #page-wrapper .bcs-local-hero, .hero-section) > .container {
    padding-block: var(--bcs-hero-space) !important;
  }
  .bcs-mini-hero > :is(.container, .bcs-hero-inner) {
    padding-block: var(--bcs-mini-hero-space) !important;
  }
  .bcs-mini-hero > .bcs-hero-inner {
    box-sizing: border-box; width: 100%; min-width: 0;
    padding-inline: var(--bcs-hero-mobile-inset);
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 16px;
  }
  .bcs-mini-hero > .bcs-hero-inner > * { min-width: 0; }
  .bcs-mini-hero > .bcs-hero-inner > div:not(.hero__icon) { flex: 1 1 240px; }
  .wv-hero-graphic { padding: 0 !important; }
  .wv-hero-graphic > div {
    box-sizing: border-box; width: 100%; min-width: 0;
    padding: var(--bcs-app-heading-inset);
  }
  /* ERP card/page shell already surrounds these compact inner headers.
     Keep DOM/action selectors intact; never pad the title and each action twice. */
  body:not(.landing-body) .main-content.app-content :is(.bcs-workspace-header,
      .bcs-page-header, .page-header-breadcrumb, .ops-header, .erp-page-header, .page-header) {
    padding: var(--bcs-app-heading-inset) !important;
    min-width: 0; gap: 12px;
  }
  body:not(.landing-body) .main-content.app-content :is(.bcs-workspace-header,
      .bcs-page-header, .page-header-breadcrumb, .ops-header, .erp-page-header, .page-header) > * {
    min-width: 0; max-width: 100%;
  }
}
@media screen and (max-width: 767.98px) {
  :root { --bcs-app-heading-inset: 20px; }
  :is(#page-wrapper .page-banner, #page-wrapper .home-hero,
      #page-wrapper .bcs-local-hero, .hero-section, .bcs-mini-hero) > .container {
    padding-inline: var(--bcs-hero-mobile-inset) !important;
  }
  body:not(.landing-body) .main-content.app-content :is(.bcs-workspace-header,
      .bcs-page-header, .page-header-breadcrumb, .ops-header, .erp-page-header, .page-header) {
    flex-wrap: wrap;
  }
}