/* ================================================================
   GLOBAL RESPONSIVENESS & CROSS-DEVICE COMPATIBILITY OVERRIDES
   Provides bulletproof layouts across all viewport sizes
   ================================================================ */

/* 1. VIEWPORT SAFEGUARDS & RESET */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  width: 100% !important;
}

*, *::before, *::after {
  box-sizing: border-box !important;
}

/* 2. FLUID MEDIA & IMAGES */
img, video, canvas, svg, iframe {
  max-width: 100% !important;
  height: auto;
}

/* Override any explicitly hardcoded widths that break mobile view */
[style*="width: 400px"], 
[style*="width: 437px"], 
[style*="width: 461px"], 
[style*="width: 500px"], 
[style*="width: 600px"], 
[style*="width: 700px"], 
[style*="width: 800px"],
.hardcoded-width {
  max-width: 100% !important;
}

/* 3. FLUID TYPOGRAPHY CLAMPING */
/* Prevent text overflow and awkward wrapping on small devices */
h1, .h1 { font-size: clamp(2rem, 5vw, 4rem) !important; }
h2, .h2 { font-size: clamp(1.75rem, 4vw, 3rem) !important; line-height: 1.2 !important; }
h3, .h3 { font-size: clamp(1.5rem, 3.5vw, 2.25rem) !important; }
h4, .h4 { font-size: clamp(1.25rem, 3vw, 1.75rem) !important; }
p, a, span, li, div {
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* 4. FLEXBOX & GRID ALIGNMENT FIXES */
/* (Removed aggressive flex-wrap override that broke sliders) */

/* Convert rigid service grids into highly fluid CSS Grid layouts */
.services-grid, .solutions-grid, .features-grid, .cards-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 30px !important;
  width: 100% !important;
}

/* Ensure flex children don't overflow */
.flex-item, .col, [class*="col-"] {
  max-width: 100% !important;
}

/* 5. FORMS, MODALS, AND INPUTS */
.io-modal-container, .modal-dialog, .glassy-contact-form {
  max-width: 95vw !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

input, textarea, select, .io-modal-input, .form-control {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 6. BUTTON ALIGNMENT (Mobile Optimization) */
@media (max-width: 767px) {
  .btn, .io-btn-primary, .io-btn-secondary, .button-group a {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 15px !important;
    text-align: center !important;
  }
  
  .solution-pill-actions, .hero-actions, .global-cta-actions, .button-group {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }
}

/* 7. PADDING AND MARGIN NORMALIZATION (Mobile Optimization) */
@media (max-width: 767px) {
  section, .section-padding, .hero-section, .global-cta-section {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  .container, .container-fluid, .container-xl {
    padding-left: 15px !important;
    padding-right: 15px !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }
}

/* 8. MEGA MENU & NAVIGATION COLLAPSE SAFEGUARDS */
@media (max-width: 991px) {
  .incepbio-header__nav {
    max-height: 100vh !important;
    overflow-y: auto !important;
    width: 100% !important;
    padding-bottom: 100px !important; /* Allow scroll past bottom items */
  }
  
  /* Prevent submenu from blowing out the width */
  .incepbio-header__mega-menu, .dropdown-menu {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    top: 0 !important;
    left: 0 !important;
    box-shadow: none !important;
  }
  
  .navbar-collapse {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
}

/* 9. TIMELINES, TABS & ACCORDIONS */
.timeline, .timeline-item, .nav-tabs, .accordion {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

@media (max-width: 767px) {
  .nav-tabs {
    display: flex !important;
    flex-direction: column !important;
  }
  
  .nav-tabs .nav-item {
    width: 100% !important;
    margin-bottom: 5px !important;
  }
}

/* 10. SLIDERS & CAROUSELS (Prevent Swiper Overflow) */
.swiper-container, .slider-track, .testimonial-slider {
  max-width: 100vw !important;
  overflow: hidden !important;
}