/**
 * MOBILE OPTIMIZATIONS
 * Ensure images and visual elements display properly on mobile
 */

/* ============================================
   MOBILE IMAGE VISIBILITY & SIZING
   ============================================ */

/* Hero section mobile optimization */
@media (max-width: 991px) {
    .hero-visual {
        max-width: 100% !important;
        padding: var(--space-lg) !important;
    }

    .hero-visual img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* Hide floating stat cards on mobile for cleaner look */
    .hero-visual .glass-card {
        display: none !important;
    }

    /* Adjust hero section order - image after text on mobile */
    .cyber-hero .row {
        flex-direction: column !important;
    }

    .cyber-hero .col-lg-6:first-child {
        order: 1 !important;
    }

    .cyber-hero .col-lg-6:last-child {
        order: 2 !important;
        margin-top: var(--space-2xl) !important;
    }
}

/* Security section mobile optimization */
@media (max-width: 991px) {
    .section-cyber .col-lg-6 img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* Adjust security section - keep floating stats on mobile but smaller */
    .section-cyber .col-lg-6 .glass-card {
        padding: var(--space-sm) !important;
        font-size: 0.875rem !important;
    }

    .section-cyber .col-lg-6 .counter-animate {
        font-size: 1.25rem !important;
    }
}

/* Ensure all images are responsive */
@media (max-width: 768px) {
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Remove excessive padding on mobile */
    .hero-content {
        padding: 0 !important;
    }

    /* Stack feature cards on mobile */
    .hero-content>div[style*="grid"] {
        grid-template-columns: 1fr !important;
    }

    /* Adjust decorative elements on mobile */
    .cyber-hero>div[style*="position: absolute"] {
        width: 100px !important;
        height: 100px !important;
    }
}

/* Very small mobile devices */
@media (max-width: 576px) {
    .hero-visual {
        padding: var(--space-md) !important;
    }

    /* Hide decorative floating orbs on very small screens */
    .cyber-hero>div[style*="position: absolute"][style*="background: radial-gradient"] {
        display: none !important;
    }

    /* Make text more readable on small screens */
    h1 {
        font-size: 2rem !important;
    }

    .section-title h2 {
        font-size: 1.75rem !important;
    }
}

/* Landscape mobile orientation */
@media (max-width: 991px) and (orientation: landscape) {
    .hero-visual {
        max-width: 50% !important;
        margin: 0 auto !important;
    }
}

/* ============================================
   ENSURE IMAGES LOAD PROPERLY
   ============================================ */

/* Force image visibility */
.hero-visual img,
.section-cyber img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Prevent image overflow */
.hero-visual,
.section-cyber .col-lg-6>div {
    overflow: visible !important;
}

/* Fix any transform issues on mobile */
@media (max-width: 991px) {
    .hero-visual>div[style*="perspective"] {
        perspective: none !important;
    }

    .hero-visual>div[style*="transform-style"] {
        transform-style: flat !important;
        transform: none !important;
    }
}