/* Desktop / mobile visual parity for the ERP home landing.
 *
 * Rule: landing enhancements that users see on one viewport must ship on the
 * other unless they are explicitly mobile-only chrome. The hero KPI mosaic
 * stays hidden on tablet (901–1099px) so the stacked hero can centre; desktop
 * (≥1100px) restores the original split layout (copy left, mosaic right).
 */

/* ── Tablet only: hide the KPI mosaic so a stacked hero can centre.
   Desktop (≥1100px) restores the original split layout in
   erp-landing-desktop-restore.css. ─────────────────────────────────────── */
@media (width >= 901px) and (width < 1100px) {
  html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .erp-cc-dashboard,
  html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .erp-cc-dashboard,
  html body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .erp-cc-dashboard,
  html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .erp-hero-inner > .erp-hero-visual,
  html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .erp-hero-visual,
  html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .erp-hero-visual,
  html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .erp-cc-kpi-row,
  html body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .erp-hero-inner > .erp-hero-visual,
  html body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .erp-hero-visual,
  html body.erp-body #landing .erp-hero.erp-hero--command-center .erp-hero-visual,
  html body.erp-body #landing .erp-hero.erp-hero--command-center .erp-cc-kpi-row,
  html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .erp-command-center,
  html body.erp-body #landing .erp-hero.erp-hero--command-center .erp-command-center {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    max-height: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  /* Same stacked, centred hero as phones once the mosaic is gone.
     Selectors omit data-active-module so they still win on first paint. */
  html body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .erp-hero-inner,
  html body.erp-body #landing .erp-hero.erp-hero--command-center .erp-hero-inner,
  html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .erp-hero-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    text-align: center !important;
  }

  html body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .erp-hero-content,
  html body.erp-body #landing .erp-hero.erp-hero--command-center .erp-hero-content,
  html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .erp-hero-content {
    width: 100% !important;
    max-width: 52rem !important;
    align-items: center !important;
    text-align: center !important;
  }

  html body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .erp-hero-title,
  html body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .erp-hero-subtitle,
  html body.erp-body #landing .erp-hero.erp-hero--command-center .erp-hero-title,
  html body.erp-body #landing .erp-hero.erp-hero--command-center .erp-hero-subtitle,
  html body.erp-body #landing .erp-hero .erp-hero-title,
  html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .erp-hero-title,
  html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center .erp-hero-subtitle {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .erp-hero-cta,
  html body.erp-body #landing .erp-hero.erp-hero--command-center .erp-hero-cta,
  html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero.erp-hero--command-center .erp-hero-cta {
    justify-content: center !important;
  }
}

/* ── Language selector: keep the 3-letter code + chevron in the viewport ─ */
@media (width >= 901px) {
  html body.erp-body #util-bar,
  html body.erp-body #navbar.erp-shell-navbar #util-bar {
    padding-right: 0.75rem !important;
    box-sizing: border-box !important;
  }

  html body.erp-body #util-bar .util-bar-inner,
  html body.erp-body #navbar.erp-shell-navbar #util-bar .util-bar-inner {
    padding-right: 1.25rem !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  html body.erp-body #util-bar .util-bar-inner > .util-lang-wrap,
  html body.erp-body #util-bar .util-bar-inner > #utilLangWrapper {
    flex-shrink: 0 !important;
    margin-right: 0.5rem !important;
    padding-right: 1rem !important;
    overflow: visible !important;
    transform: translateX(-16px) !important;
  }

  html body.erp-body #util-bar .util-lang-btn,
  html body.erp-body #util-bar #currentLangDisplay {
    max-width: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
  }

  html body.erp-body #util-bar #currentLangText {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
}

/* Insurance keeps the same photographic poster as every other module card;
   its art is declared with the rest in css/erp-landing-module-cards.css. */