/* ============================================
   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; }
    .hero .container { padding-top: 0 !important; gap: 20px; }
    .hero-content h1 { font-size: 28px !important; line-height: 1.25 !important; }
    .hero-content .sub { font-size: 14px !important; max-width: 100%; }
    .hero-actions { flex-direction: column !important; gap: 12px !important; align-items: stretch !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; }

    /* Logos band */
    .logos-band .container { flex-direction: column !important; gap: 16px !important; align-items: flex-start !important; text-align: left !important; }
    .logos-title { max-width: 100%; margin-right: 0; margin-bottom: 4px; }
    .logo-item { border-left: none !important; padding-left: 0 !important; width: 100% !important; gap: 12px; }

    /* 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: 14px !important; }
    .service-card { padding: 28px 14px !important; }
    .service-card .icon-wrapper { height: 80px !important; margin-bottom: 16px !important; }
    .service-card h3 { font-size: 12px !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; }
    .section-header-flex { flex-direction: column !important; align-items: flex-start !important;
        gap: 12px !important; margin-bottom: 28px !important; }
    .section-header-flex h2 { font-size: 22px !important; }
    .services-row { flex-wrap: wrap !important; gap: 12px !important; }
    .service-card-mini { flex: 0 0 calc(50% - 6px) !important; min-height: 180px !important;
        padding: 20px 10px !important; }
    .icon-mini { height: 70px !important; margin-bottom: 12px !important; }
    .service-card-mini h4 { font-size: 10px !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: 1fr !important; }
    .service-card-mini { flex: 0 0 100% !important; }
    .challenge-content h2 { font-size: 20px !important; }
}