/* Mobile Carousel Fixes */

/* Fix carousel controls on mobile */
@media (max-width: 768px) {
  .hero-carousel {
    height: auto !important;
    min-height: 80vh !important;
  }
  
  .carousel-container {
    height: auto !important;
    min-height: 80vh !important;
  }
  
  .carousel-slide {
    height: auto !important;
    min-height: 80vh !important;
    padding: 2rem 0 !important;
  }
  
  /* Fix overlapping slides */
  .carousel-slide .geo-content {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    text-align: center !important;
    padding: 0 1rem !important;
  }
  
  .carousel-slide .geo-visual {
    order: 1 !important;
    height: 250px !important;
  }
  
  .carousel-slide .geo-text {
    order: 2 !important;
  }
  
  /* Fix carousel controls positioning */
  .carousel-prev,
  .carousel-next {
    top: 40% !important;
    padding: 0.75rem !important;
    font-size: 1.2rem !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100 !important;
    position: absolute !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  
  .carousel-prev {
    left: 1rem !important;
  }
  
  .carousel-next {
    right: 1rem !important;
  }
  
  /* Fix carousel dots */
  .carousel-dots {
    bottom: 1rem !important;
  }
  
  /* Fix image size in carousel */
  .geo-image-container {
    width: 200px !important;
    height: 200px !important;
  }
  
  /* Fix text sizing */
  .geo-title {
    font-size: 2.2rem !important;
    line-height: 1.1 !important;
  }
  
  .geo-subtitle {
    font-size: 1rem !important;
    max-width: 100% !important;
  }
  
  /* Fix CTA buttons */
  .geo-cta-group {
    justify-content: center !important;
  }
  
  .geo-cta-primary {
    padding: 0.75rem 1.5rem !important;
    font-size: 0.9rem !important;
  }
}

@media (max-width: 480px) {
  .hero-carousel {
    min-height: 70vh !important;
  }
  
  .carousel-container {
    min-height: 70vh !important;
  }
  
  .carousel-slide {
    min-height: 70vh !important;
    padding: 1.5rem 0 !important;
  }
  
  .carousel-slide .geo-content {
    padding: 0 0.5rem !important;
    gap: 1.5rem !important;
  }
  
  .carousel-slide .geo-visual {
    height: 200px !important;
  }
  
  .geo-image-container {
    width: 150px !important;
    height: 150px !important;
  }
  
  .geo-title {
    font-size: 1.8rem !important;
  }
  
  .geo-subtitle {
    font-size: 0.9rem !important;
  }
  
  /* Make carousel controls smaller on very small screens */
  .carousel-prev,
  .carousel-next {
    width: 38px !important;
    height: 38px !important;
    padding: 0.5rem !important;
    font-size: 1rem !important;
    z-index: 100 !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  
  .carousel-prev {
    left: 0.5rem !important;
  }
  
  .carousel-next {
    right: 0.5rem !important;
  }
}

/* Add touch support for mobile swiping */
.carousel-container {
  touch-action: pan-y pinch-zoom;
}

.carousel-slide {
  user-select: none;
}

/* Ensure proper z-index stacking */
.carousel-prev,
.carousel-next,
.carousel-dots {
  z-index: 100 !important;
}

/* Mobile carousel dots specific styling */
.mobile-carousel-dots {
  z-index: 100 !important;
  position: relative !important;
}

.mobile-carousel-dots .carousel-dot {
  z-index: 100 !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  min-width: 8px !important;
  min-height: 8px !important;
}

/* Ensure mobile controls are clickable */
@media (max-width: 768px) {
  .mobile-prev,
  .mobile-next {
    z-index: 20 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }
  
  .mobile-dot {
    z-index: 20 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }
}

/* ENABLE background effects on mobile */
@media (max-width: 768px) {
  /* Allow mobile background effects to show */
  .carousel-slide [style*="position:absolute"][style*="top:"] {
    display: block !important;
  }
  
  /* Make gi pattern more visible on mobile */
  .gi-pattern-bg {
    opacity: 0.4 !important;
  }
  
  /* Ensure mobile background effects are visible */
  .mobile-hero [style*="position:absolute"] {
    display: block !important;
    z-index: 5 !important;
  }
  
  /* OVERRIDE geometric-banners.css hiding rules for hero background effects */
  .hero-carousel .geo-flow,
  .hero-carousel .geo-belt-path,
  .hero-carousel .geo-wave,
  .hero-carousel .geo-control,
  .hero-carousel .geo-grip,
  .hero-carousel .geo-grip-line {
    display: block !important;
  }
  
  /* Enable hero background effect elements specifically */
  .hero-carousel .hero-line,
  .hero-carousel .hero-dot,
  .hero-carousel .hero-gi-bg {
    display: block !important;
  }
  
  /* Make sure all inline styled absolute positioned elements in mobile hero are visible */
  .mobile-hero [style*="position:absolute"][style*="z-index:5"] {
    display: block !important;
    z-index: 5 !important;
  }
  
  /* Force show all mobile hero background effects */
  .mobile-hero div[style*="position:absolute"] {
    display: block !important;
  }
  
  /* Override any hiding rules specifically for mobile carousel background effects */
  .carousel-slide.mobile-hero * {
    max-width: none !important;
  }
}

/* Additional mobile overrides to ensure visibility */
@media (max-width: 480px) {
  .mobile-hero [style*="position:absolute"] {
    display: block !important;
    z-index: 5 !important;
  }
  
  .gi-pattern-bg {
    opacity: 0.3 !important;
  }
}