/* ================================================================
   NextWeb OS — Large Screen Fixes (v3)
   Targets: 1440px+ (QHD 2560×1440, 4K, 25-40" monitors)

   PROBLEMS IDENTIFIED:
   1. At 2560px the base font (56.25% = 9px) stays tiny — everything
      looks miniaturised and bunched in the centre.
   2. Hero 1fr 1fr grid gives each column ~1280px — too wide for text.
   3. Images fixed height + width:100% = squashed/distorted.
   4. No breakpoints exist above 1024px.

   STRATEGY:
   • Scale font size progressively with viewport width
   • Max-width + auto-margin on all inner content blocks
   • aspect-ratio replaces fixed image heights
   • Breakpoints at 1280, 1440, 1600, 1920, 2560px
================================================================ */


/* ================================================================
   1. PROGRESSIVE FONT SCALING
   Original base: 56.25% = 9px — way too small on QHD/4K.
   We increase the root font-size so every rem-based value
   (spacing, text, image heights) grows naturally with the screen.
================================================================ */
@media (min-width: 1280px) { html { font-size: 58%;   } }
@media (min-width: 1440px) { html { font-size: 62.5%; } }  /* 1rem = 10px */
@media (min-width: 1920px) { html { font-size: 68%;   } }
@media (min-width: 2560px) { html { font-size: 75%;   } }


/* ================================================================
   2. INNER CONTENT MAX-WIDTH
   Inner grids get a max-width so text columns don't become
   unreadably wide on 2560px screens. Background colours still
   fill edge-to-edge because this is on inner wrappers.
================================================================ */
.crm-inner,
.mkt-inner,
.analytics-inner,
.automation-inner,
.fig,
.ind-layout,
.tgrid,
.ft,
.stats-row,
.tstrip {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

/* ================================================================
   2b. CRM PIPELINE RIGHT-COLUMN WIDTH CAP
   The base grid is "42rem 1fr" — on large screens the 1fr column
   becomes enormous (900px–1300px+). We switch to equal columns at
   1280px+ and hard-cap the pipeline card so it never looks too wide.
================================================================ */
.crm-inner {
  grid-template-columns: 1fr 1fr;
}

.pipeline-viz {
  max-width: 72rem;   /* never wider than ~720px regardless of viewport */
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}


/* ================================================================
   3. HERO MAX-WIDTH
   The hero itself IS the layout block — constrain it directly.
================================================================ */
.hero {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}


/* ================================================================
   4. IMAGE STRETCH FIX
   Replaces fixed heights with aspect-ratio so images scale
   proportionally instead of stretching at large widths.
================================================================ */
.hero-img {
  height: auto !important;
  aspect-ratio: 4 / 3;
  max-height: 58rem;
  object-fit: cover;
  width: 100%;
}

.hero-right {
  height: auto !important;
}

.fimg {
  height: auto !important;
  aspect-ratio: 4 / 3;
  max-height: 54rem;
  object-fit: cover;
  width: 100%;
}

.ind-detail-img {
  height: auto !important;
  aspect-ratio: 16 / 7;
  max-height: 28rem;
  object-fit: cover;
  width: 100%;
}


/* ================================================================
   5. 1440px — QHD screens (2560×1440 at 100% or large laptops)
================================================================ */
@media (min-width: 1440px) {
  nav { padding: 0 6rem; }

  .hero {
    padding: 9rem 6rem 7rem;
    gap: 7rem;
  }

  .crm-section,
  .mkt-section,
  .analytics-section,
  .automation-section,
  .feat-img-sec,
  .ind-sec,
  .testi         { padding-left: 6rem; padding-right: 6rem; }

  .cta-sec       { padding: 11rem 6rem; }
  footer         { padding: 7rem 6rem 4rem; }

  .hero h1       { font-size: 7rem; }
  h2.sh          { font-size: 5.4rem; }

  .orbit-wrap    { width: 42rem; height: 42rem; }
  .ring1         { width: 25rem; height: 25rem; }
  .ring2         { width: 36rem; height: 36rem; }

  /* CRM: balanced equal columns, pipeline card capped */
  .crm-inner     { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .pipeline-viz  { max-width: 68rem; }
}


/* ================================================================
   6. 1600px — Large 27" monitors
================================================================ */
@media (min-width: 1600px) {
  nav { padding: 0 8rem; }

  .hero {
    padding: 10rem 8rem 8rem;
    gap: 8rem;
    max-width: 1600px;
  }

  .crm-section,
  .mkt-section,
  .analytics-section,
  .automation-section,
  .feat-img-sec,
  .ind-sec,
  .testi         { padding-left: 8rem; padding-right: 8rem; }

  .cta-sec       { padding: 12rem 8rem; }
  footer         { padding: 8rem 8rem 4rem; }

  .hero h1       { font-size: 7.5rem; }
  h2.sh          { font-size: 5.8rem; }

  .crm-inner,
  .mkt-inner,
  .analytics-inner,
  .automation-inner,
  .fig,
  .ind-layout,
  .tgrid,
  .ft,
  .stats-row,
  .tstrip        { max-width: 1560px; }

  /* CRM: keep equal columns, pipeline card stays capped */
  .crm-inner     { grid-template-columns: 1fr 1fr; }
  .pipeline-viz  { max-width: 70rem; }

  .orbit-wrap    { width: 46rem; height: 46rem; }
  .ring1         { width: 28rem; height: 28rem; }
  .ring2         { width: 40rem; height: 40rem; }
}


/* ================================================================
   7. 1920px+ — 4K and 32-40" monitors
   Padding auto-calculates so content stays centred in a fixed
   column and never floats in empty space.
================================================================ */
@media (min-width: 1920px) {
  nav,
  .hero,
  .crm-section,
  .mkt-section,
  .analytics-section,
  .automation-section,
  .feat-img-sec,
  .ind-sec,
  .testi,
  .cta-sec,
  footer {
    padding-left:  max(8rem, calc((100vw - 1760px) / 2)) !important;
    padding-right: max(8rem, calc((100vw - 1760px) / 2)) !important;
  }

  .crm-inner,
  .mkt-inner,
  .analytics-inner,
  .automation-inner,
  .fig,
  .ind-layout,
  .tgrid,
  .stats-row,
  .hero,
  .ft {
    max-width: 1760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* CRM: equal columns, hard cap on pipeline card at 4K */
  .crm-inner    { grid-template-columns: 1fr 1fr !important; }
  .pipeline-viz { max-width: 72rem !important; }

  .hero h1 { font-size: 8rem; }
  h2.sh    { font-size: 6.2rem; }
  .hero-img { max-height: 65rem; }
  .fimg     { max-height: 60rem; }
}