/* =================================================================
   Mobile Responsive Fixes for Landing Pages
   Override inline styles from database HTML that break on mobile
   ================================================================= */

.landing-page-content {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

/* Mobile styles */
@media (max-width: 767px) {
    /* ============================================
       HERO SECTION FIXES
       ============================================ */

    /* Force hero grid to stack on mobile */
    .landing-page-content .grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Fix min-h-screen sections */
    .landing-page-content .min-h-screen {
        min-height: auto !important;
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Fix hero section heights - override inline height styles */
    .landing-page-content [style*="height: 700px"],
    .landing-page-content [style*="height:700px"] {
        height: auto !important;
        min-height: 450px !important;
        padding-bottom: 2rem !important;
    }

    .landing-page-content [style*="height: 650px"],
    .landing-page-content [style*="height:650px"] {
        height: auto !important;
        min-height: 400px !important;
    }

    .landing-page-content [style*="height: 600px"],
    .landing-page-content [style*="height:600px"],
    .landing-page-content .lg\:h-\[600px\] {
        height: auto !important;
        min-height: 350px !important;
    }

    .landing-page-content [style*="height: 550px"],
    .landing-page-content [style*="height:550px"] {
        height: auto !important;
        min-height: 300px !important;
    }

    .landing-page-content [style*="height: 500px"],
    .landing-page-content [style*="height:500px"] {
        height: auto !important;
        min-height: 280px !important;
    }

    /* Fix lg:h-[XXXpx] classes */
    .landing-page-content .lg\:h-\[800px\],
    .landing-page-content .lg\:h-\[700px\],
    .landing-page-content .lg\:h-\[650px\],
    .landing-page-content .lg\:h-\[600px\],
    .landing-page-content .lg\:h-\[500px\] {
        height: auto !important;
    }

    /* ============================================
       PRODUCT IMAGE FIXES
       ============================================ */

    /* Fix product image sizes */
    .landing-page-content img.float-product,
    .landing-page-content img[class*="float-product"] {
        height: 250px !important;
        max-height: 280px !important;
        width: auto !important;
        max-width: 90% !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* Fix lg:h-[XXXpx] image classes */
    .landing-page-content img.lg\:h-\[650px\],
    .landing-page-content img.lg\:h-\[600px\],
    .landing-page-content img.lg\:h-\[500px\] {
        height: auto !important;
        max-height: 280px !important;
    }

    /* ============================================
       SVG AND DECORATIVE ELEMENT FIXES
       ============================================ */

    /* Hide large decorative SVGs on mobile */
    .landing-page-content svg[style*="width: 600px"],
    .landing-page-content svg[style*="width:600px"],
    .landing-page-content svg[style*="width: 500px"],
    .landing-page-content svg[style*="width:500px"],
    .landing-page-content svg.w-\[600px\],
    .landing-page-content svg.w-\[500px\] {
        display: none !important;
    }

    /* Fix circular SVG text that surrounds product images */
    .landing-page-content svg[class*="animate-"] {
        width: 200px !important;
        height: 200px !important;
        opacity: 0.05 !important;
    }

    /* Hide absolute background blobs on mobile for cleaner look */
    .landing-page-content .absolute.w-\[500px\],
    .landing-page-content .absolute.w-\[600px\],
    .landing-page-content .absolute.w-\[400px\] {
        display: none !important;
    }

    /* ============================================
       FLOATING CARDS / GLASS PANELS
       ============================================ */

    /* Fix absolute positioned glass panels */
    .landing-page-content .glass-panel.absolute,
    .landing-page-content .absolute.glass-panel {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        top: auto !important;
        transform: none !important;
        margin: 0.5rem auto !important;
        display: inline-block !important;
    }

    /* Make floating stats display inline on mobile */
    .landing-page-content .relative.flex.justify-center {
        flex-wrap: wrap !important;
    }

    /* ============================================
       GRID LAYOUTS
       ============================================ */

    /* Make all grids stack on mobile */
    .landing-page-content .grid-cols-2,
    .landing-page-content .grid-cols-3,
    .landing-page-content .grid-cols-4,
    .landing-page-content .md\:grid-cols-2,
    .landing-page-content .md\:grid-cols-3,
    .landing-page-content .md\:grid-cols-4,
    .landing-page-content .lg\:grid-cols-2,
    .landing-page-content .lg\:grid-cols-3,
    .landing-page-content .lg\:grid-cols-4,
    .landing-page-content .lg\:grid-cols-12 {
        grid-template-columns: 1fr !important;
    }

    /* Fix col-span classes */
    .landing-page-content .lg\:col-span-5,
    .landing-page-content .lg\:col-span-7 {
        grid-column: span 1 !important;
    }

    /* ============================================
       TYPOGRAPHY
       ============================================ */

    /* Fix large text sizes */
    .landing-page-content .text-6xl,
    .landing-page-content .text-7xl,
    .landing-page-content .text-8xl,
    .landing-page-content .md\:text-7xl,
    .landing-page-content .lg\:text-8xl {
        font-size: 2rem !important;
        line-height: 2.25rem !important;
    }

    .landing-page-content .text-5xl,
    .landing-page-content .md\:text-5xl {
        font-size: 1.75rem !important;
        line-height: 2rem !important;
    }

    .landing-page-content .text-4xl,
    .landing-page-content .md\:text-4xl {
        font-size: 1.5rem !important;
        line-height: 1.875rem !important;
    }

    .landing-page-content .text-3xl,
    .landing-page-content .md\:text-3xl {
        font-size: 1.25rem !important;
        line-height: 1.625rem !important;
    }

    /* ============================================
       SPACING
       ============================================ */

    /* Fix padding that's too large on mobile */
    .landing-page-content .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .landing-page-content .px-12,
    .landing-page-content .px-16,
    .landing-page-content .px-20 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .landing-page-content .py-16,
    .landing-page-content .py-20,
    .landing-page-content .py-24 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .landing-page-content .p-8,
    .landing-page-content .p-10,
    .landing-page-content .p-12 {
        padding: 1rem !important;
    }

    /* Fix gap on mobile */
    .landing-page-content .gap-12,
    .landing-page-content .gap-16,
    .landing-page-content .lg\:gap-16 {
        gap: 1.5rem !important;
    }

    /* ============================================
       CONTAINER WIDTHS
       ============================================ */

    .landing-page-content .max-w-7xl,
    .landing-page-content .max-w-6xl,
    .landing-page-content .max-w-5xl,
    .landing-page-content .max-w-4xl,
    .landing-page-content .max-w-md {
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* ============================================
       IMAGES AND MEDIA
       ============================================ */

    /* Ensure all images don't overflow */
    .landing-page-content img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* ============================================
       FLEXBOX FIXES
       ============================================ */

    .landing-page-content .flex-row,
    .landing-page-content .md\:flex-row {
        flex-direction: column !important;
    }

    .landing-page-content .flex.gap-4,
    .landing-page-content .flex.gap-6 {
        flex-wrap: wrap !important;
    }

    /* ============================================
       BUTTONS AND CTA
       ============================================ */

    /* Make buttons full width on mobile but centered */
    .landing-page-content .flex.gap-4 button,
    .landing-page-content .flex.gap-4 a[class*="rounded"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Center CTA buttons */
    .landing-page-content .flex-col.md\:flex-row {
        align-items: center !important;
    }

    /* ============================================
       TABLES
       ============================================ */

    .landing-page-content table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ============================================
       SPECIFIC COMPONENT FIXES
       ============================================ */

    /* Fix glass panel pricing boxes */
    .landing-page-content .glass-panel {
        max-width: 100% !important;
    }

    /* Fix feature cards */
    .landing-page-content .feature-card {
        width: 100% !important;
    }

    /* Fix comparison cards with rounded corners */
    .landing-page-content .rounded-\[2\.5rem\] {
        border-radius: 1rem !important;
        padding: 1.5rem !important;
    }

    /* Hide center divider on mobile */
    .landing-page-content .hidden.md\:flex.absolute {
        display: none !important;
    }
}

/* ============================================
   TABLET STYLES (768px - 1023px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    .landing-page-content .lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    .landing-page-content .lg\:h-\[800px\],
    .landing-page-content .lg\:h-\[700px\],
    .landing-page-content .lg\:h-\[650px\],
    .landing-page-content .lg\:h-\[600px\] {
        height: auto !important;
        min-height: 400px !important;
    }

    .landing-page-content img.float-product,
    .landing-page-content img[class*="float-product"] {
        max-height: 350px !important;
    }

    .landing-page-content .grid-cols-3,
    .landing-page-content .md\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .landing-page-content svg.w-\[600px\],
    .landing-page-content svg[style*="width: 600px"] {
        width: 350px !important;
        height: 350px !important;
    }

    .landing-page-content .text-6xl,
    .landing-page-content .text-7xl,
    .landing-page-content .text-8xl {
        font-size: 3rem !important;
        line-height: 3.5rem !important;
    }
}