/* ============================================
   IMTA Mobile Responsiveness Fixes
   Fixes inline style issues on mobile
   ============================================ */

/* ========== CRITICAL: Hero Sections ========== */
@media (max-width: 768px) {
    /* Force hero grids to single column */
    .hero-content,
    [style*="grid-template-columns: 1.1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1.1fr"] {
        display: block !important;
        grid-template-columns: 1fr !important;
    }

    /* Reduce hero padding */
    [style*="padding: 10rem"],
    [style*="padding:10rem"],
    [style*="padding: 8rem"],
    [style*="padding:8rem"] {
        padding: 4rem 0 3rem !important;
    }

    /* Reduce large gaps */
    [style*="gap: 5rem"],
    [style*="gap:5rem"],
    [style*="gap: 4rem"],
    [style*="gap:4rem"] {
        gap: 2rem !important;
    }
}

/* ========== CRITICAL: Decorative Elements ========== */
@media (max-width: 768px) {
    /* Hide large decorative blobs on mobile */
    [style*="width: 700px"],
    [style*="width:700px"],
    [style*="width: 600px"],
    [style*="width:600px"],
    [style*="width: 500px"],
    [style*="width:500px"],
    .hero-orb,
    .hero-orb-1,
    .hero-orb-2,
    .hero-orb-3 {
        display: none !important;
    }
}

/* ========== HIGH: Multi-Column Grids ========== */
@media (max-width: 768px) {
    /* Force 4-column grids to 2 columns on tablet, 1 on mobile */
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns:repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    /* Force 3-column grids to single column */
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns: 1fr 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Fixed column grids */
    [style*="grid-template-columns: 300px"],
    [style*="grid-template-columns:300px"] {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    /* 4-column to single column on small mobile */
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns:repeat(4"] {
        grid-template-columns: 1fr !important;
    }
}

/* ========== MEDIUM: Padding & Spacing ========== */
@media (max-width: 768px) {
    /* Reduce section padding */
    [style*="padding: 6rem"],
    [style*="padding:6rem"] {
        padding: 3rem 0 !important;
    }

    [style*="padding: 5rem"],
    [style*="padding:5rem"] {
        padding: 2.5rem 0 !important;
    }

    /* Reduce margins */
    [style*="margin-bottom: 4rem"],
    [style*="margin-bottom:4rem"] {
        margin-bottom: 2rem !important;
    }

    [style*="margin-bottom: 3rem"],
    [style*="margin-bottom:3rem"] {
        margin-bottom: 1.5rem !important;
    }
}

/* ========== MEDIUM: Typography ========== */
@media (max-width: 768px) {
    /* Scale down large fonts */
    [style*="font-size: 4rem"],
    [style*="font-size:4rem"] {
        font-size: 2.5rem !important;
    }

    [style*="font-size: 3.5rem"],
    [style*="font-size:3.5rem"] {
        font-size: 2.25rem !important;
    }

    [style*="font-size: 3rem"],
    [style*="font-size:3rem"] {
        font-size: 2rem !important;
    }

    [style*="font-size: 2.5rem"],
    [style*="font-size:2.5rem"] {
        font-size: 1.75rem !important;
    }

    /* Fix nowrap text */
    [style*="white-space:nowrap"],
    [style*="white-space: nowrap"] {
        white-space: normal !important;
    }
}

/* ========== MEDIUM: Hero Height ========== */
@media (max-width: 768px) {
    /* Fix 100vh issues on mobile browsers */
    [style*="min-height: 100vh"],
    [style*="min-height:100vh"],
    .hero {
        min-height: auto !important;
        min-height: -webkit-fill-available !important;
        padding-top: 5rem !important;
        padding-bottom: 3rem !important;
    }
}

/* ========== Forms on Mobile ========== */
@media (max-width: 768px) {
    /* Two-column form grids to single column */
    [style*="grid-template-columns: 1fr 1fr"][style*="gap"] {
        grid-template-columns: 1fr !important;
    }

    .form-row {
        grid-template-columns: 1fr !important;
    }

    /* Full-width inputs */
    input, select, textarea {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ========== Images ========== */
@media (max-width: 768px) {
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Scale down large fixed-size images */
    [style*="width: 400px"],
    [style*="width:400px"],
    [style*="width: 350px"],
    [style*="width:350px"] {
        width: 100% !important;
        max-width: 300px !important;
    }
}

/* ========== Container Padding ========== */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem !important;
    }

    [style*="padding: 0 2rem"],
    [style*="padding:0 2rem"] {
        padding: 0 1rem !important;
    }
}

/* ========== Stats/Numbers Section ========== */
@media (max-width: 768px) {
    .hero-stats,
    [style*="display:flex"][style*="gap: 3rem"],
    [style*="display: flex"][style*="gap: 3rem"] {
        flex-direction: column !important;
        gap: 1.5rem !important;
        text-align: center !important;
    }
}

/* ========== Cards ========== */
@media (max-width: 768px) {
    [style*="padding: 3rem"],
    [style*="padding:3rem"] {
        padding: 1.5rem !important;
    }

    [style*="padding: 2.5rem"],
    [style*="padding:2.5rem"] {
        padding: 1.25rem !important;
    }
}

/* ========== Buttons ========== */
@media (max-width: 768px) {
    /* Ensure touch-friendly button sizes */
    button,
    .btn,
    [type="submit"] {
        min-height: 44px !important;
        padding: 0.75rem 1.5rem !important;
    }

    /* Stack CTA buttons */
    .hero-cta,
    [style*="display: flex"][style*="gap"] {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .hero-cta a,
    .hero-cta button {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ========== Fix Horizontal Overflow ========== */
html, body {
    overflow-x: hidden;
}

@media (max-width: 768px) {
    * {
        max-width: 100vw;
    }

    section,
    .section,
    [class*="section"] {
        overflow-x: hidden !important;
    }
}

/* ========== RTL Mobile Fixes ========== */
@media (max-width: 768px) {
    [dir="rtl"] .hero-content,
    [dir="rtl"] [style*="grid-template-columns"] {
        direction: rtl;
    }

    [dir="rtl"] .hero-cta {
        align-items: stretch !important;
    }
}