/* ==================== MOBILE-SPECIFIC WEBSITE PREVIEW ==================== */
/* This is a completely separate mobile implementation optimized for small screens */

/* Force hide desktop preview on mobile */
@media (max-width: 1023px) {
    .preview-viewport-container {
        display: none !important;
    }
    
    /* Mobile Preview Container - Full Height Control */
    .mobile-preview-wrapper {
        display: flex !important;
        flex-direction: column;
        height: 100%;
        padding: 3%;
        gap: 2.5%;
    }
    
    /* Hero Section - Mobile Optimized */
    .mobile-preview-hero {
        flex: 0 0 48%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 1.5% 3%;
        gap: 4px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 12px;
    }
    
    .mobile-preview-hero h1 {
        font-size: 16px;
        line-height: 1.25;
        font-weight: 700;
        color: white;
        margin: 0;
    }
    
    .mobile-preview-hero p {
        font-size: 11px;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.8);
        margin: 0;
    }
    
    .mobile-preview-hero button {
        padding: 6px 16px;
        font-size: 10px;
        font-weight: 600;
        color: white;
        background: linear-gradient(to right, #4D7CFE, #00D4A1);
        border: none;
        border-radius: 6px;
        white-space: nowrap;
        margin-top: 4px;
    }
    
    /* Cards Section - Mobile Optimized */
    .mobile-preview-cards {
        flex: 0 0 46%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2%;
    }
    
    .mobile-preview-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        padding: 6% 3%;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 10px;
    }
    
    .mobile-preview-card-icon {
        width: 14px;
        height: 14px;
        margin-bottom: 4px;
        flex-shrink: 0;
    }
    
    .mobile-preview-card-icon svg {
        width: 100%;
        height: 100%;
    }
    
    .mobile-preview-card h3 {
        font-size: 9px;
        line-height: 1.2;
        font-weight: 700;
        text-transform: uppercase;
        margin: 0 0 3px 0;
        background: linear-gradient(to right, white, rgb(226, 232, 240), rgb(203, 213, 225));
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    .mobile-preview-card p {
        font-size: 7.5px;
        line-height: 1.3;
        color: rgb(226, 232, 240);
        margin: 0;
    }
    
    /* Very Small Screens - Stack Cards */
    @media (max-width: 640px) {
        .mobile-preview-wrapper {
            height: 550px;
        }
        
        .mobile-preview-hero {
            flex: 0 0 35%;
        }
        
        .mobile-preview-cards {
            flex: 0 0 60%;
            grid-template-columns: 1fr;
            gap: 3%;
        }
        
        .mobile-preview-card {
            padding: 6% 5%;
        }
        
        .mobile-preview-card-icon {
            width: 40px;
            height: 40px;
            margin-bottom: 10px;
        }
        
        .mobile-preview-card h3 {
            font-size: 12px;
            margin-bottom: 6px;
        }
        
        .mobile-preview-card p {
            font-size: 10px;
        }
    }
}