/* Hero Mobile Overrides (mobile-first adjustments). Keep this file small
   and focused to avoid large overwrites in the main stylesheet. */

@media (max-width: 768px) {
    /* CRITICAL: Force mobile toggle to be visible and clickable above everything */
    .mobile-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10061 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        background: rgba(40, 36, 97, 0.12) !important;
        border: 1px solid rgba(40, 36, 97, 0.2) !important;
    }
    
    .mobile-toggle span {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: none !important;
    }
    
    /* Hide floating achievement cards on mobile - too cluttered */
    .hero-achievements {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Mobile hero sizing - account for fixed header via body padding */
    .hero-section {
        min-height: 100vh !important;
        height: auto !important;
        overflow: visible !important;
        margin-top: 0 !important;
    }
    
    .hero-swiper {
        min-height: 100vh !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    .swiper-wrapper,
    .swiper-slide {
        min-height: auto !important;
        height: auto !important;
    }

   /* Avoid fixed background-attachment on mobile — many Android browsers
      render fixed backgrounds incorrectly and they can appear cropped.
      Anchor the hero content to the top to prevent center-based cropping. */
   .hero-slide {
      background-attachment: scroll !important;
      padding: 80px 0 60px !important;
      align-items: flex-start !important;
      animation: none !important; /* stop zoom/crop animations on mobile */
      transform: none !important;
      overflow: visible !important;
      min-height: auto !important;
      height: auto !important;
   }

    /* Keep decorative pseudo-elements on mobile but optimize them */
    .hero-slide::before,
    .hero-slide::after {
        display: block !important;
        visibility: visible !important;
        opacity: 0.6 !important;
    }

    /* Tighter content area and spacing for mobile */
    .hero-content { 
        max-width: calc(100% - 40px) !important; 
        padding: 20px 15px !important;
        margin: 0 auto !important;
    }
    .hero-badge {
        font-size: 13px !important;
        padding: 8px 16px !important;
        margin-bottom: 16px !important;
    }
    .hero-title { 
        font-size: 1.9rem !important;
        line-height: 1.3 !important;
        margin-bottom: 16px !important;
    }
    .hero-description { 
        font-size: 0.98rem !important;
        line-height: 1.6 !important;
        margin-bottom: 24px !important;
    }

    /* Show and optimize decorative circles on mobile */
    .hero-slide > div[style*="border-radius: 50%"] {
        display: block !important;
        visibility: visible !important;
        opacity: 0.5 !important;
    }
    
    /* Adjust circle positioning and sizing for mobile */
    .hero-slide > div[style*="top: 20%"] {
        width: 80px !important;
        height: 80px !important;
        left: 5% !important;
        top: 10% !important;
    }
    
    .hero-slide > div[style*="bottom: 15%"] {
        width: 100px !important;
        height: 100px !important;
        right: 5% !important;
        bottom: 20% !important;
    }

    /* Stack CTAs and make buttons easy to tap */
    .hero-buttons { 
        flex-direction: column !important; 
        gap: 12px !important; 
        align-items: stretch !important;
        margin-bottom: 30px !important;
    }
    .hero-buttons .btn { 
        width: 100% !important; 
        padding: 14px 20px !important; 
        font-size: 15px !important;
        justify-content: center !important;
    }
    
    /* Make hero stats responsive on tablet/mobile */
    .hero-stats {
        display: flex !important;
        flex-wrap: wrap;
        gap: 15px !important;
        margin-top: 30px !important;
        justify-content: center !important;
    }
    
    .hero-stats .stat-item {
        flex: 0 0 calc(33.333% - 10px) !important;
        min-width: 100px !important;
        text-align: center !important;
        padding: 15px 10px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        backdrop-filter: blur(10px) !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
    
    .hero-stats .stat-item h3 {
        font-size: 28px !important;
        color: #fff !important;
        margin-bottom: 5px !important;
        font-weight: 700 !important;
    }
    
    .hero-stats .stat-item p {
        font-size: 13px !important;
        color: rgba(255, 255, 255, 0.9) !important;
        margin: 0 !important;
    }

    /* Use pagination on mobile and hide the large arrow controls to avoid
       overlap with the primary CTAs. Arrows will remain visible on larger
       viewports where there is room. */
    .hero-swiper .swiper-button-next,
    .hero-swiper .swiper-button-prev { display: none !important; }

    /* Make pagination dots visible and larger for easier tapping */
    .hero-section .swiper-pagination { 
        position: relative !important;
        bottom: 0 !important;
        margin-top: 20px !important;
        margin-bottom: 10px !important;
    }
    .hero-section .swiper-pagination-bullet { 
        width: 12px !important; 
        height: 12px !important;
        margin: 0 6px !important;
    }
}

@media (max-width: 768px) {
    .hero-slide {
        padding: 60px 0 50px !important;
    }
    .hero-content {
        padding: 15px 10px !important;
    }
    .hero-title { 
        font-size: 1.7rem !important;
    }
    .hero-description { 
        font-size: 0.95rem !important;
    }
    
    /* Optimize stats for mobile */
    .hero-stats {
        gap: 12px !important;
        margin-top: 25px !important;
    }
    
    .hero-stats .stat-item {
        flex: 0 0 calc(33.333% - 8px) !important;
        padding: 12px 8px !important;
    }
    
    .hero-stats .stat-item h3 {
        font-size: 24px !important;
    }
    
    .hero-stats .stat-item p {
        font-size: 11px !important;
    }
}

@media (max-width: 480px) {
    .hero-slide {
        padding: 50px 0 40px !important;
    }
    .hero-title { 
        font-size: 1.5rem !important;
    }
    .hero-description { 
        font-size: 0.92rem !important;
    }
    .hero-buttons .btn {
        padding: 13px 18px !important;
        font-size: 14px !important;
    }
    
    /* Stack stats vertically on very small screens or keep in row */
    .hero-stats {
        gap: 10px !important;
        margin-top: 20px !important;
    }
    
    .hero-stats .stat-item {
        flex: 0 0 calc(33.333% - 7px) !important;
        min-width: 90px !important;
        padding: 10px 5px !important;
    }
    
    .hero-stats .stat-item h3 {
        font-size: 22px !important;
        margin-bottom: 3px !important;
    }
    
    .hero-stats .stat-item p {
        font-size: 10px !important;
        line-height: 1.3 !important;
    }
}

/* Android-specific fixes for consistent display */
@media (max-width: 767px) {
    /* Ensure no gaps between sections */
    .hero-section {
        margin-bottom: 0 !important;
    }
    
    /* Fix container spacing */
    .hero-slide .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Ensure content fits within viewport */
    .hero-content {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Fix decorative circles that might cause overflow */
    .hero-slide > div[style*="position: absolute"] {
        display: none !important;
    }
    
    /* Ensure buttons are fully tappable */
    .hero-buttons .btn {
        min-height: 48px !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
    }
    
    /* Hide pagination if not needed */
    .hero-section .swiper-pagination {
        padding: 10px 0 !important;
        margin-top: 15px !important;
        margin-bottom: 0 !important;
    }
    
    /* Ensure stats are visible and properly styled */
    .hero-stats {
        display: flex !important;
        margin-top: 20px !important;
    }
    
    .hero-stats .stat-item {
        background: rgba(255, 255, 255, 0.12) !important;
    }
}

/* Extra small devices (Android portrait) */
@media (max-width: 360px) {
    .hero-slide {
        padding: 40px 0 35px !important;
    }
    
    .hero-content {
        padding: 10px 5px !important;
    }
    
    .hero-badge {
        font-size: 12px !important;
        padding: 6px 12px !important;
        margin-bottom: 12px !important;
    }
    
    .hero-title {
        font-size: 1.4rem !important;
        margin-bottom: 12px !important;
    }
    
    .hero-description {
        font-size: 0.88rem !important;
        margin-bottom: 20px !important;
    }
    
    .hero-buttons {
        gap: 10px !important;
    }
    
    .hero-buttons .btn {
        font-size: 13px !important;
        padding: 12px 16px !important;
    }
    
    /* Extra small stats styling */
    .hero-stats {
        gap: 8px !important;
        margin-top: 18px !important;
    }
    
    .hero-stats .stat-item {
        flex: 0 0 calc(33.333% - 6px) !important;
        min-width: 85px !important;
        padding: 8px 4px !important;
        border-radius: 10px !important;
    }
    
    .hero-stats .stat-item h3 {
        font-size: 20px !important;
    }
    
    .hero-stats .stat-item p {
        font-size: 9px !important;
    }
}