/* ========================================
   MOBILE RESPONSIVENESS FIXES
   ========================================
   This file contains critical mobile fixes
   to resolve layout and overflow issues
   UNIFIED WITH MAIN SPACING SYSTEM
   ======================================== */

/* Mobile spacing variables - consistent with index.html */
@media (max-width: 768px) {
  :root {
    --mobile-section-gap: 30px;
    --mobile-padding: 5%;
    --mobile-element-gap: 20px;
  }
}

/* ========================================
   1. PREVENT HORIZONTAL OVERFLOW
   ======================================== */

/* Force all content to stay within viewport */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  position: relative !important;
}

/* Ensure body doesn't create horizontal scroll */
body {
  width: 100% !important;
}

/* Fix sections with 100vw that cause overflow */
@media (max-width: 768px) {
  .features,
  .resources {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
    box-sizing: border-box !important;
  }
}

/* ========================================
   2. FIX HERO SECTION ON MOBILE
   ======================================== */

@media (max-width: 768px) {
  .hero {
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    padding: 2rem 5% !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .hero-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    order: 1 !important;
  }

  .hero-content h1 {
    font-size: clamp(1.75rem, 5vw, 2.5rem) !important;
    line-height: 1.2 !important;
    margin-bottom: var(--mobile-element-gap) !important;
    word-wrap: break-word !important;
  }

  .hero-content p {
    font-size: clamp(1rem, 3.5vw, 1.25rem) !important;
    line-height: 1.5 !important;
    margin-bottom: var(--mobile-element-gap) !important;
  }

  .hero-image {
    width: 100% !important;
    max-width: 100% !important;
    order: 2 !important;
    box-sizing: border-box !important;
  }

  .hero-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
    object-fit: contain !important;
    display: block !important;
  }
}

/* ========================================
   3. FIX FEATURES SECTION ON MOBILE
   ======================================== */

@media (max-width: 768px) {
  .features-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .features-image {
    width: 100% !important;
    max-width: 100% !important;
    order: 1 !important;
    position: relative !important;
    top: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .features-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
    object-fit: contain !important;
    display: block !important;
  }

  .features-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    order: 2 !important;
    box-sizing: border-box !important;
  }

  .feature-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.5rem !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ========================================
   4. FIX WHO ITS FOR SECTION
   ======================================== */

@media (max-width: 768px) {
  .who-its-for {
    width: 100% !important;
    max-width: 100% !important;
    padding: 3rem 5% !important;
    margin-top: 2rem !important;
    box-sizing: border-box !important;
  }

  .audience-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .audience-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1.5rem !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ========================================
   5. FIX RESOURCES SECTION
   ======================================== */

@media (max-width: 768px) {
  .resources-carousel-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1rem 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  .resource-card {
    width: 100% !important;
    max-width: 320px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ========================================
   6. FIX CONTAINER WIDTHS
   ======================================== */

@media (max-width: 768px) {
  .main-content-wrapper,
  .features-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 5% !important;
    padding-right: 5% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .section-header {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin-bottom: var(--mobile-element-gap) !important;
    box-sizing: border-box !important;
  }

  .section-header h2 {
    font-size: clamp(1.75rem, 5vw, 2.25rem) !important;
    word-wrap: break-word !important;
  }

  .section-header p {
    font-size: clamp(1rem, 3vw, 1.1rem) !important;
    word-wrap: break-word !important;
  }
}

/* ========================================
   7. FIX BUTTONS ON MOBILE
   ======================================== */

@media (max-width: 768px) {
  .hero-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important;
  }

  .cta-button,
  .app-store-button,
  .hero-buttons a,
  .hero-buttons button {
    width: 100% !important;
    max-width: 100% !important;
    padding: 1rem 1.5rem !important;
    text-align: center !important;
    box-sizing: border-box !important;
    font-size: 1rem !important;
  }

  .availability-note {
    width: 100% !important;
    max-width: 350px !important;
    margin: 0 auto !important;
    padding: 1.5rem 1rem !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
}

/* ========================================
   8. SMALLER MOBILE DEVICES (480px and below)
   ======================================== */

@media (max-width: 480px) {
  .hero {
    padding: 1.5rem 5% !important;
  }

  .hero-content h1 {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }

  .hero-content p {
    font-size: clamp(0.95rem, 4vw, 1.1rem) !important;
  }

  .features,
  .who-its-for,
  .resources {
    padding: 2rem 5% !important;
  }

  .feature-card,
  .audience-card {
    padding: 1.25rem !important;
  }

  .section-header h2 {
    font-size: clamp(1.5rem, 6vw, 1.875rem) !important;
  }

  .availability-note {
    max-width: 280px !important;
    padding: 1.25rem 0.875rem !important;
    font-size: 0.95rem !important;
  }
}

/* ========================================
   9. VERY SMALL DEVICES (360px and below)
   ======================================== */

@media (max-width: 360px) {
  .hero {
    padding: 1rem 3% !important;
  }

  .hero-content h1 {
    font-size: 1.4rem !important;
  }

  .hero-content p {
    font-size: 0.9rem !important;
  }

  .features,
  .who-its-for,
  .resources {
    padding: 1.5rem 3% !important;
  }

  .feature-card,
  .audience-card {
    padding: 1rem !important;
  }

  .section-header h2 {
    font-size: 1.4rem !important;
  }

  .availability-note {
    max-width: 260px !important;
    padding: 1rem 0.75rem !important;
    font-size: 0.875rem !important;
  }
}

/* ========================================
   10. ENSURE ALL IMAGES STAY WITHIN BOUNDS
   ======================================== */

@media (max-width: 768px) {
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Specific image containers */
  .hero-image,
  .features-image,
  .audience-card img,
  .feature-card img,
  .resource-card img {
    overflow: hidden !important;
  }

  .hero-image img,
  .features-image img,
  .audience-card img,
  .feature-card img,
  .resource-card img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
    object-fit: contain !important;
  }
}

/* ========================================
   11. FIX TEXT OVERFLOW AND WRAPPING
   ======================================== */

@media (max-width: 768px) {
  h1, h2, h3, h4, h5, h6, p, span, a, li {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    /* Disable automatic hyphenation so words like
       "connection" don't split as "con-nection" */
    hyphens: none !important;
  }

  /* Still cap elements to viewport width so layout doesn't overflow */
  * {
    max-width: 100%;
  }
}

/* ========================================
   12. SMOOTH SCROLLING AND TOUCH
   ======================================== */

@media (max-width: 768px) {
  /* Improve touch scrolling */
  body {
    -webkit-overflow-scrolling: touch !important;
  }

  /* Ensure smooth horizontal scrolling for carousels */
  .resources-carousel-wrapper,
  .carousel-container {
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
  }

  /* Remove any transforms that might cause positioning issues */
  .hero::before,
  .hero::after,
  .features::before,
  .features::after {
    display: none !important;
  }
}

/* ========================================
   13. ADD MORE SPACE ABOVE AND BELOW MEDICATION IMAGE
   ======================================== */

@media (max-width: 768px) {
  /* Add MORE space above the last slide section (medication) - maximum specificity */
  html body .hero-slide-visual[data-slide="5"],
  body .hero-slide-visual[data-slide="5"],
  .hero-sticky-container .hero-visual-column .hero-slides-track .hero-slide-visual[data-slide="5"] {
    margin-top: 0 !important;
    padding-top: 40px !important;
    margin-bottom: 60px !important;
    padding-bottom: 40px !important;
  }

  /* Add MORE space above and below the medication image container - maximum specificity */
  html body .hero-slide-visual[data-slide="5"] .medication-images-container,
  body .hero-slide-visual[data-slide="5"] .medication-images-container,
  .hero-sticky-container .hero-visual-column .hero-slides-track .hero-slide-visual[data-slide="5"] .medication-images-container {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}