/* ============================================
   APHELION ITS - MOBILE RESPONSIVE STYLES
   Covers: 1024px (tablet) and 768px (mobile)
============================================ */

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* Container padding on mobile */
@media (max-width: 768px) {
    .container { padding: 0 20px; }
}

/* ---- TABLET (max 1024px) ---- */
@media (max-width: 1024px) {

    /* Hero */
    .hero .container { flex-direction: column; text-align: center; padding-top: 60px; gap: 40px; }
    .hero-content { flex: 0 0 100%; max-width: 100%; padding-right: 0; }
    .hero-actions { justify-content: center; flex-wrap: wrap; }
    .hero-footer { justify-content: center; }
    .hero-visual { display: none !important; }

    /* Services grid (what we do) */
    .services-grid { grid-template-columns: repeat(3, 1fr) !important; }

    /* Challenge */
    .challenge-grid { grid-template-columns: 1fr !important; gap: 40px; }
    .challenge-visual { position: relative !important; width: 100% !important; height: 380px !important; right: auto !important; }

    /* Flagship */
    .flagship-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
    .flagship-benefits { flex-wrap: wrap; gap: 20px; }
    .benefit-item { flex: 0 0 calc(50% - 10px) !important; border-right: none !important; }

    /* Services full */
    .services-row { flex-wrap: wrap; }
    .service-card-mini { flex: 0 0 calc(33.333% - 12px) !important; }

    /* Industries */
    .industries-row { flex-direction: column; gap: 30px; }
    .industries-left { flex: 0 0 auto; }

    /* CTA */
    .cta-card { flex-direction: column !important; }
    .cta-visual { position: relative !important; width: 100% !important; height: 260px !important; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 40px !important; }
}

/* ---- MOBILE (max 768px) ---- */
@media (max-width: 768px) {

    /* Nav */
    .nav-links, .site-header .btn-outline { display: none !important; }
    .mobile-toggle { display: flex !important; font-size: 22px; cursor: pointer; }

    /* Hero */
    .hero { 
        padding-top: 100px !important; 
        padding-bottom: 40px !important; 
        background: linear-gradient(180deg, #FFFFFF 0%, #F4F9FF 100%) !important;
    }
    .hero .container { padding-top: 0 !important; gap: 20px; }
    .hero-content h1 { font-size: 28px !important; line-height: 1.25 !important; color: var(--text-main); }
    .hero-content h1 span { color: var(--hover-blue) !important; }
    .hero-content .eyebrow { color: var(--hover-blue) !important; margin-bottom: 12px !important; }
    .hero-content .sub { font-size: 14px !important; max-width: 100%; margin-bottom: 40px !important; line-height: 1.7 !important; }
    
    /* Added to enforce solutions-hero sub text alignment globally */
    .solutions-hero { padding-top: 160px !important; padding-bottom: 32px !important; }
    .solutions-hero .sub { text-align: justify !important; text-justify: inter-word !important; }
    
    /* Reduced margin-bottom from 48px to 0 to fix the massive gap after the button */
    .hero-actions { flex-direction: column !important; gap: 16px !important; align-items: stretch !important; margin-bottom: 0 !important; }
    .hero-actions .btn { width: 100% !important; justify-content: center !important; }
    .hero-footer { white-space: nowrap !important; font-size: 12px !important; justify-content: center !important; }
    
    /* Force reduced padding on solutions grid specifically on mobile to remove whitespace */
    .solutions-grid { padding-top: 10px !important; }

    /* Logos band */
    .logos-band { padding: 40px 0 !important; background: #fff !important; }
    .logos-band .container { 
        flex-direction: row !important; 
        flex-wrap: wrap !important;
        gap: 24px 16px !important; 
        align-items: flex-start !important; 
        justify-content: flex-start !important;
    }
    .logos-title { 
        flex: 0 0 100% !important;
        max-width: 100%; 
        margin-right: 0; 
        margin-bottom: 20px !important; 
        text-align: center !important;
        font-size: 12px !important;
        color: var(--text-main) !important;
        opacity: 0.8;
    }
    .logo-item { 
        flex: 0 0 calc(50% - 8px) !important;
        border-left: none !important; 
        padding-left: 0 !important; 
        gap: 10px !important; 
        align-items: flex-start !important;
    }
    .logo-item i { font-size: 24px !important; color: var(--hover-blue) !important; }
    .logo-text-block strong { font-size: 14px !important; }
    .logo-text-block span { font-size: 10px !important; line-height: 1.3 !important; }

    .partner-stat { 
        flex: 0 0 100% !important; 
        justify-content: center !important;
        border-top: 1px solid #F3F4F6 !important;
        padding-top: 20px !important;
        margin-top: 10px !important;
    }
    .partner-stat strong { font-size: 24px !important; }

    /* What we do */
    .what-we-do { padding: 48px 0 !important; }
    .section-header h2 { font-size: 24px !important; }
    .services-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    .service-card { padding: 16px 10px !important; border-radius: 16px !important; min-height: auto !important; }
    .service-card .icon-wrapper { height: 60px !important; margin-bottom: 10px !important; }
    .service-card h3 { font-size: 11px !important; line-height: 1.3 !important; }

    /* Challenge */
    .challenge { min-height: auto !important; padding: 40px 0 !important; display: block !important; }
    .challenge-visual { position: relative !important; right: auto !important; top: auto !important;
        width: 100% !important; height: auto !important; display: flex !important;
        flex-direction: column !important; margin-bottom: 24px !important; padding: 0 20px !important; }
    .challenge-image-container { height: 200px !important; -webkit-mask-image: none !important;
        mask-image: none !important; border-radius: 16px !important; }
    .challenge-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
    .challenge-content h2 { font-size: 24px !important; }
    .spacer { display: none !important; }
    .stat-card { position: relative !important; top: auto !important; left: auto !important;
        right: auto !important; bottom: auto !important; width: 100% !important;
        margin-bottom: 12px !important; display: flex !important; align-items: center !important;
        gap: 16px !important; padding: 14px 16px !important; }
    .stat-card h3 { font-size: 22px !important; margin-bottom: 0 !important; }

    /* Flagship */
    .flagship { padding: 40px 0 !important; }
    .flagship-grid { grid-template-columns: 1fr !important; gap: 30px !important;
        margin-bottom: 32px !important; text-align: left !important; }
    .flagship-content h2 { font-size: 24px !important; }
    .flagship-image-container { min-height: 240px !important; }
    .flagship-benefits { flex-direction: column !important; gap: 0 !important; padding-top: 24px !important; }
    .benefit-item { flex: 0 0 100% !important; border-right: none !important;
        border-bottom: 1px solid #E5E7EB !important; padding: 16px 0 !important; }
    .benefit-item:last-child { border-bottom: none !important; }

    /* CTA */
    .cta-assessment { padding: 20px 0 !important; }
    .cta-card { flex-direction: column !important; border-radius: 20px !important;
        background: #0A0F1C !important; min-height: auto !important; }
    .cta-visual { position: relative !important; width: 100% !important;
        height: 180px !important; order: 1 !important; }
    .cta-img { -webkit-mask-image: none !important; mask-image: none !important; }
    .cta-content { order: 2 !important; padding: 32px 20px !important; text-align: center !important; }
    .cta-content h2 { font-size: 22px !important; color: #fff !important; }
    .white-eyebrow { color: rgba(255,255,255,0.6) !important; }

    /* Services full (7 cards) */
    .services-full { padding: 40px 0 !important; background: #fafafa !important; }
    .section-header-flex { flex-direction: column !important; align-items: center !important;
        gap: 12px !important; margin-bottom: 32px !important; text-align: center !important; }
    .section-header-flex h2 { font-size: 22px !important; }
    .services-row { 
        display: flex !important;
        flex-wrap: wrap !important; 
        gap: 12px !important; 
        justify-content: center !important;
    }
    .service-card-mini { 
        flex: 0 0 calc(50% - 6px) !important; 
        min-height: 140px !important;
        padding: 20px 12px !important; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        background: #fff !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
    }
    .icon-mini { height: 50px !important; margin-bottom: 12px !important; }
    .service-card-mini h4 { font-size: 11px !important; line-height: 1.3 !important; font-weight: 700 !important; }
    .service-card-mini:last-child { flex: 0 0 100% !important; min-height: auto !important; padding: 30px 20px !important; }

    /* Industries */
    .industries { padding: 40px 0 !important; }
    .industries-row { flex-direction: column !important; gap: 24px !important; }
    .industries-header h2 { font-size: 24px !important; }
    .industry-slider { gap: 0 !important; scrollbar-width: none !important; }
    .industry-slider::-webkit-scrollbar { display: none !important; }
    .industry-card { flex: 0 0 100% !important; min-width: 100% !important;
        height: auto !important; flex-direction: column-reverse !important; }
    .ind-visual { width: 100% !important; height: 180px !important; flex: 0 0 180px !important; }
    .ind-visual img { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%) !important;
        mask-image: linear-gradient(to bottom, transparent 0%, black 30%) !important; }
    .ind-visual::before { width: 100% !important; height: 40px !important;
        background: linear-gradient(to bottom, #FFFFFF 0%, transparent 100%) !important; }
    .ind-content { padding: 20px !important; }
    .ind-content h3 { font-size: 16px !important; margin-bottom: 12px !important; }

    /* Footer */
    .site-footer { padding: 48px 0 28px !important; }
    .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; padding-bottom: 28px !important; }
    .footer-bottom { flex-direction: column !important; gap: 12px !important; text-align: center !important; }
    .footer-legal { justify-content: center !important; }
}

/* ---- SMALL MOBILE (max 480px) ---- */
@media (max-width: 480px) {
    .hero-content h1 { font-size: 24px !important; }
    .services-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .service-card-mini { flex: 0 0 calc(50% - 6px) !important; }
    .challenge-content h2 { font-size: 20px !important; }
}