/* Mobile Responsiveness Fixes */

/* Prevent horizontal overflow on all screens */
* {
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden;
  width: 100%;
}

/* Fix text overflow and word breaking */
.break-words {
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* Ensure images don't overflow */
img {
  max-width: 100%;
  height: auto;
}

/* Mobile-specific utility classes */
@media (max-width: 639px) {
  /* Reduce large padding on mobile */
  .mobile-px-reduce {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
  /* Fix swiper navigation buttons on mobile */
  .swiper-button-prev,
  .swiper-button-next {
    width: 35px !important;
    height: 35px !important;
  }
  
  /* Ensure grid items don't overflow */
  .grid > * {
    min-width: 0;
  }
  
  /* Fix font sizes for very small screens */
  h1 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
  
  h2 {
    font-size: 1.25rem !important;
    line-height: 1.4 !important;
  }
  
  h3 {
    font-size: 1.125rem !important;
    line-height: 1.4 !important;
  }
  
  /* Ensure buttons are touch-friendly */
  button, .btn, a[role="button"] {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 1rem;
  }
}

/* Extra small screens */
@media (max-width: 380px) {
  .container, .max-w-7xl {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  /* Further reduce spacing */
  .space-y-6 > * + * {
    margin-top: 1rem !important;
  }
  
  .space-y-8 > * + * {
    margin-top: 1.5rem !important;
  }
}

/* Fix hero navigation arrows positioning */
.hero-prev,
.hero-next {
  z-index: 10;
}

@media (max-width: 639px) {
  .hero-prev {
    left: 0.5rem !important;
  }
  
  .hero-next {
    right: 0.5rem !important;
  }
}

/* Ensure swiper content doesn't overflow */
.swiper-wrapper {
  align-items: stretch;
}

.swiper-slide {
  height: auto;
  display: flex;
  flex-direction: column;
}