/* ==========================================================================
   MOBILE VIEWPORT OVERFLOW FIX
   Critical fixes to prevent horizontal scrolling on mobile devices
   ========================================================================== */

/* Ensure html and body never exceed viewport width */
html, body {
  max-width: 100vw;
  overflow-x: clip;
}

/* Ensure all major containers stay within bounds */
* {
  box-sizing: border-box;
}

/* Fix any sections that might overflow */
section,
.section,
footer,
.main-footer {
  max-width: 100vw;
  overflow-x: clip;
}

/* Header needs overflow visible on desktop for dropdowns */
header,
.main-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  max-width: 100vw;
}

/* Prevent images from exceeding container */
img {
  max-width: 100%;
  height: auto;
}

/* Ensure hero sections don't overflow */
.hero-home,
.studio-hero-banner,
.academy-hero-banner,
.gallery-wall-hero {
  max-width: 100vw;
  overflow-x: clip;
}

/* Fix gallery carousel */
.gallery-carousel-wrapper,
.gallery-carousel-viewport {
  max-width: 100%;
}

/* Ensure school card track doesn't cause overflow */
.school-card-track {
  max-width: 100%;
}

/* Mobile-only fixes */
@media (max-width: 768px) {
  /* Header stays sticky on mobile */
  header,
  .main-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }
  
  /* Ensure container respects viewport on mobile */
  .container {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Fix navigation wrapper */
  .nav-wrapper {
    max-width: 100%;
    overflow-x: visible;
  }
  
  .hero-grid {
    max-width: 100%;
    overflow-x: hidden;
  }
  
  .hero-divider-art {
    max-width: 100vw;
    overflow-x: hidden;
  }
  
  /* Prevent any absolute positioned elements from causing overflow */
  .blob-shape {
    display: none;
  }
  
  .nav-actions {
    flex-shrink: 1;
    min-width: 0;
  }
  
  .desktop-nav {
    display: none !important;
  }
}