/* ================================================================
   NextWeb OS — Global Responsive Fixes
   ================================================================ */

/* ── TYPOGRAPHY ── */
@media (max-width: 768px) {
  h1 { font-size: clamp(3.2rem, 8vw, 4.5rem) !important; line-height: 1.1 !important; }
  h2 { font-size: clamp(2.6rem, 6vw, 3.6rem) !important; line-height: 1.2 !important; }
  .sh { font-size: clamp(2.8rem, 6vw, 3.8rem) !important; }
  .sd { font-size: 1.5rem !important; }
}

/* ── LAYOUT ── */
@media (max-width: 1024px) {
  .hero-inner, .why-layout, .crm-inner, .mkt-inner, .analytics-inner, .automation-inner, .fig {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 4rem !important;
  }
  
  .hero-right, .hero-img-wrap, .viz-right {
    display: flex;
    justify-content: center;
    order: 2;
  }
  
  .hero-left, .content-left {
    order: 1;
  }
  
  .hbtns, .cta-btns {
    justify-content: center !important;
  }
  
  .hero-desc, .sd {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 768px) {
  .sec, section {
    padding: 6rem 2rem !important;
  }
  
  .card-grid, .results-grid, .tgrid, .stats-row {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  
  .stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .ind-layout {
    grid-template-columns: 1fr !important;
  }
  
  .ind-tiles {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .ind-tiles {
    grid-template-columns: 1fr !important;
  }
  
  .stats-row {
    grid-template-columns: 1fr !important;
  }
  
  .hero-img {
    height: 25rem !important;
  }
}

/* ── COMPONENT FIXES ── */

/* Sticky Nav overlapping */
body {
  padding-top: 0 !important; /* Managed by sticky nav */
}

/* Breadcrumbs overflow */
.breadcrumb {
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.2rem 2rem !important;
}

/* Platform Nav overflow */
.platform-nav {
  padding: 0 2rem !important;
}

/* Modal/Preloader logic */
#preloader {
  z-index: 10000 !important;
}

/* Fix for overlapping cards in some sections */
.card, .result-card, .tcard {
  height: auto !important;
  min-height: 0 !important;
}

/* Image scaling */
img {
  max-width: 100%;
  height: auto;
}

/* ================================================================
   ULTRAWIDE / LARGE DISPLAY CONTAINMENT
   Prevents content from stretching endlessly on large screens.
   Backgrounds remain full-width; inner content centers inside a cap.
   Breakpoints: 1440 / 1920 / 2560 / 3840.
================================================================ */

/* Generic full-width band helper */
.zip-public-body nav,
.zip-public-body .ann {
  width: 100%;
  box-sizing: border-box;
}

/* Real overflow sources — cap them explicitly so we don't rely on
   overflow-x:hidden alone. */
.zip-public-body img,
.zip-public-body video,
.zip-public-body iframe,
.zip-public-body canvas,
.zip-public-body svg {
  max-width: 100%;
  height: auto;
}
.zip-public-body * {
  box-sizing: border-box;
}
.zip-public-body .hero,
.zip-public-body .sec,
.zip-public-body section,
.zip-public-body .stats-row,
.zip-public-body footer {
  max-width: 100vw;
}

/* Inner content cap (applies to all hero/section grids on every page) */
.zip-public-body .hero-inner,
.zip-public-body .why-layout,
.zip-public-body .crm-inner,
.zip-public-body .mkt-inner,
.zip-public-body .analytics-inner,
.zip-public-body .automation-inner,
.zip-public-body .fig,
.zip-public-body .stats-row,
.zip-public-body .card-grid,
.zip-public-body .results-grid,
.zip-public-body .tgrid,
.zip-public-body .ind-layout,
.zip-public-body .breadcrumb-inner,
.zip-public-body .footer-inner {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 1440px+ — cap inner content to 1320px */
@media (min-width: 1440px) {
  .zip-public-body .hero-inner,
  .zip-public-body .why-layout,
  .zip-public-body .crm-inner,
  .zip-public-body .mkt-inner,
  .zip-public-body .analytics-inner,
  .zip-public-body .automation-inner,
  .zip-public-body .fig,
  .zip-public-body .stats-row,
  .zip-public-body .card-grid,
  .zip-public-body .results-grid,
  .zip-public-body .tgrid,
  .zip-public-body .ind-layout,
  .zip-public-body .footer-inner {
    max-width: 82.5rem !important; /* 1320px */
  }
}

/* 1600px+ — pad outer sections so backgrounds stay full-width */
@media (min-width: 1600px) {
  .zip-public-body nav,
  .zip-public-body .hero,
  .zip-public-body .crm-section,
  .zip-public-body .sec,
  .zip-public-body section.sec,
  .zip-public-body .stats-row,
  .zip-public-body footer {
    padding-left: max(4rem, calc((100vw - 90rem) / 2)) !important;
    padding-right: max(4rem, calc((100vw - 90rem) / 2)) !important;
  }
}

/* 1920px+ — cap inner to 1440px */
@media (min-width: 1920px) {
  .zip-public-body .hero-inner,
  .zip-public-body .why-layout,
  .zip-public-body .crm-inner,
  .zip-public-body .mkt-inner,
  .zip-public-body .analytics-inner,
  .zip-public-body .automation-inner,
  .zip-public-body .fig,
  .zip-public-body .stats-row,
  .zip-public-body .card-grid,
  .zip-public-body .results-grid,
  .zip-public-body .tgrid,
  .zip-public-body .ind-layout,
  .zip-public-body .footer-inner {
    max-width: 90rem !important; /* 1440px */
  }
  .zip-public-body nav,
  .zip-public-body .hero,
  .zip-public-body .crm-section,
  .zip-public-body .sec,
  .zip-public-body section.sec,
  .zip-public-body .stats-row,
  .zip-public-body footer {
    padding-left: max(4rem, calc((100vw - 96rem) / 2)) !important;
    padding-right: max(4rem, calc((100vw - 96rem) / 2)) !important;
  }
}

/* 2560px+ (QHD/ultrawide) — cap inner to 1600px */
@media (min-width: 2560px) {
  .zip-public-body .hero-inner,
  .zip-public-body .why-layout,
  .zip-public-body .crm-inner,
  .zip-public-body .mkt-inner,
  .zip-public-body .analytics-inner,
  .zip-public-body .automation-inner,
  .zip-public-body .fig,
  .zip-public-body .stats-row,
  .zip-public-body .card-grid,
  .zip-public-body .results-grid,
  .zip-public-body .tgrid,
  .zip-public-body .ind-layout,
  .zip-public-body .footer-inner {
    max-width: 100rem !important; /* 1600px */
  }
  .zip-public-body nav,
  .zip-public-body .hero,
  .zip-public-body .crm-section,
  .zip-public-body .sec,
  .zip-public-body section.sec,
  .zip-public-body .stats-row,
  .zip-public-body footer {
    padding-left: max(5rem, calc((100vw - 110rem) / 2)) !important;
    padding-right: max(5rem, calc((100vw - 110rem) / 2)) !important;
  }
}

/* 3840px+ (4K/TV) — cap inner to 1800px */
@media (min-width: 3840px) {
  .zip-public-body .hero-inner,
  .zip-public-body .why-layout,
  .zip-public-body .crm-inner,
  .zip-public-body .mkt-inner,
  .zip-public-body .analytics-inner,
  .zip-public-body .automation-inner,
  .zip-public-body .fig,
  .zip-public-body .stats-row,
  .zip-public-body .card-grid,
  .zip-public-body .results-grid,
  .zip-public-body .tgrid,
  .zip-public-body .ind-layout,
  .zip-public-body .footer-inner {
    max-width: 112.5rem !important; /* 1800px */
  }
  .zip-public-body nav,
  .zip-public-body .hero,
  .zip-public-body .crm-section,
  .zip-public-body .sec,
  .zip-public-body section.sec,
  .zip-public-body .stats-row,
  .zip-public-body footer {
    padding-left: max(6rem, calc((100vw - 125rem) / 2)) !important;
    padding-right: max(6rem, calc((100vw - 125rem) / 2)) !important;
  }
}

/* Hero specifically: ensure 2-col grid children stay contained on ultrawide.
   Replaces the previous loose `.hero > *` rule with explicit children. */
@media (min-width: 1600px) {
  .zip-public-body .hero .hero-inner,
  .zip-public-body .hero .hero-left,
  .zip-public-body .hero .hero-right,
  .zip-public-body .hero .hero-img-wrap,
  .zip-public-body .hero .hero-content {
    max-width: 100%;
  }
  .zip-public-body .hero .hero-right,
  .zip-public-body .hero .hero-img-wrap {
    margin-left: auto;
  }
}

/* Last-resort guard against horizontal overflow (root causes capped above). */
html, body { overflow-x: hidden; max-width: 100vw; }