/**
 * SABO HUB — Wide desktop layout (≥1280px / ≥1440px)
 * Used by: flagship/index.html, biz-*.html
 * Mobile & tablet (<1280px): no overrides — page inline styles apply.
 */

:root {
  --prose-max: 42rem;
  --hero-cluster-max: 1280px;
}

/* ---- Hero: centered content cluster (bg photo stays full-bleed) ---- */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero .wrap,
.hero .wrap.hero-grid {
  width: 100%;
  max-width: var(--hero-cluster-max);
  margin-left: auto;
  margin-right: auto;
}

.hero .wrap.hero-grid {
  gap: clamp(48px, 4vw, 64px);
}

/* ---- Container: ~85–90% viewport, cap 1440px ---- */
@media (min-width: 1280px) {
  :root {
    --container-max: clamp(1280px, 90vw, 1440px);
    --container-gutter: clamp(24px, 2.5vw, 40px);
  }

  .wrap,
  .foot-in,
  .nav-in {
    max-width: var(--container-max);
    padding-left: var(--container-gutter);
    padding-right: var(--container-gutter);
  }

  /* Hero inner grid stays narrower — columns sit together, not edge-stretched */
  .hero .wrap,
  .hero .wrap.hero-grid {
    max-width: var(--hero-cluster-max);
  }

  .foot-in {
    padding-left: 0;
    padding-right: 0;
  }

  footer {
    padding-left: var(--container-gutter);
    padding-right: var(--container-gutter);
  }

  /* Readable line length for intro copy — cards use full container */
  .sec-lead {
    max-width: min(var(--prose-max), 100%);
  }

  /* Manufacturing hero BOM diagram */
  .bom {
    max-width: 600px;
  }

  /* Flagship 3D ticker card */
  .card3d {
    width: min(94%, 500px);
  }

  /* Pricing / picker grids breathe with container */
  .picker-grid,
  .pricing-grid {
    gap: 20px;
  }

  .enterprise-box {
    max-width: 900px;
  }
}

@media (min-width: 1440px) {
  .bom {
    max-width: 660px;
  }

  .card3d {
    width: min(94%, 540px);
  }

  .enterprise-box {
    max-width: 960px;
  }

  .picker-grid,
  .pricing-grid {
    gap: 22px;
  }
}