/* Module container alignment
 *
 * Every module opens inside the ERP shell's module container (or standalone on
 * a phone). The shared landing hero was built as a two-column desktop grid, and
 * grid/flex children default to `min-width: auto`, so on narrow screens the
 * hero refused to shrink: copy, badges and KPI cards spilled past the container
 * edge and the block sat off-centre.
 *
 * These rules keep module content inside its container and centred both
 * horizontally and vertically at phone/tablet widths.
 */

@media (max-width: 900px) {
  /* ── Shared "lp-" landing hero ─────────────────────────────────────── */
  .lp-hero {
    align-items: center;
    justify-content: center;
    min-height: auto;
    margin: 10px;
  }

  .lp-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 2.75rem 1.15rem;
    gap: 2rem;
    text-align: center;
  }

  .lp-hero-inner > * {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .lp-hero-content,
  .lp-hero-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    max-width: 100%;
  }

  .lp-hero h1,
  .lp-hero-content h1,
  .lp-hero-content h2 {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .lp-hero p,
  .lp-hero-content p {
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
  }

  .lp-hero-badge,
  .lp-hero-content .lp-hero-badge {
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
  }

  .lp-hero-ctas {
    align-items: stretch;
    justify-content: center;
    width: 100%;
  }

  .lp-hero-visual > * {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  /* KPI rows stay left-read inside their own card. */
  .lp-kpi {
    min-width: 0;
    text-align: left;
    flex-wrap: wrap;
    row-gap: 0.5rem;
    align-items: center;
  }

  .lp-kpi > div:not(.lp-kpi-icon),
  .lp-kpi-body {
    flex: 1 1 10rem;
    min-width: 0;
    max-width: 100%;
  }

  .lp-kpi-meta,
  .lp-kpi-val {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
    white-space: normal;
  }

  .lp-kpi-badge {
    flex: 0 0 auto;
    white-space: nowrap;
    margin-left: auto;
  }

  /* ── Body sections ─────────────────────────────────────────────────── */
  .lp-section,
  .lp-stats-band,
  .lp-cta-band {
    padding-right: 1.15rem;
    padding-left: 1.15rem;
  }

  .lp-section,
  .lp-stats-inner,
  .lp-feats,
  .lp-workflow {
    min-width: 0;
    max-width: 100%;
  }

  .lp-section-sub {
    max-width: 100%;
  }

  /* ── Bespoke heroes that do not use the "lp-" scale ────────────────── */
  .hero,
  .hero-inner,
  .hero-copy,
  .hero-visual,
  .hero-content,
  .hero-grid,
  .hero-buttons {
    min-width: 0;
    max-width: 100%;
  }

  .hero-inner,
  .hero-grid {
    justify-items: center;
  }

  .hero-copy,
  .hero-content {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  .hero-buttons,
  .hero-inline-cta {
    justify-content: center;
  }

  /* Pill/eyebrow chips are frequently `white-space: nowrap` with a
     `fit-content` minimum, which alone can force the whole hero wider than the
     phone viewport. */
  .hero-tag,
  .hero-badge,
  .hero-eyebrow,
  .hero-pill {
    min-width: 0;
    max-width: 100%;
    text-align: center;
    white-space: normal;
  }

  .matrix-text-box {
    max-width: 100%;
    overflow: hidden;
  }

  .matrix-text {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  /* ── Generic safety net ────────────────────────────────────────────── */
  /* Landing pages use their own class prefixes (lp-, edu-, mkt-, ...), so
     match on the shared naming instead of enumerating every module. Clearing
     the automatic `min-width: auto` minimum is what actually lets a desktop
     grid collapse into a phone-width column. */
  [class*="hero-inner"],
  [class*="hero-grid"],
  [class*="hero-content"],
  [class*="hero-copy"],
  [class*="hero-visual"],
  [class*="kpi-panel"],
  [class*="stats-inner"],
  [class*="hero-ctas"] {
    min-width: 0;
    max-width: 100%;
  }

  [class*="hero-inner"] > *,
  [class*="hero-grid"] > *,
  [class*="hero-content"] > *,
  [class*="hero-visual"] > *,
  [class*="kpi-panel"] > *,
  [class*="stats-inner"] > *,
  [class*="hero-ctas"] > * {
    min-width: 0;
  }
}

/* Inside the shell frame the container itself provides the padding, so keep
   the hero flush and vertically centred within it. */
html.is-iframed .lp-hero,
body.is-iframed .lp-hero {
  margin: 0;
}