/*
 * sKal Desktop Protection Layer v1.0
 * Ensures desktop layouts are NEVER affected by mobile optimizations
 * 
 * 🛡️ DESKTOP FIREWALL: Prevents any mobile CSS leakage
 * Applied ONLY to desktop screens (769px and above)
 */

/* 🖥️ DESKTOP PROTECTION: Lock desktop styles */
@media screen and (min-width: 769px) {
    
    /* Lock Desktop Grid Systems */
    .output-showcase {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .dna-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .adaptation-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
    }
    
    /* Lock Desktop Typography */
    .output-title {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
    }
    
    .section-title {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
    }
    
    /* Lock Desktop Spacing */
    .step-content {
        padding: 4rem 2rem !important;
    }
    
    .upload-card {
        padding: 4rem 2rem !important;
    }
    
    /* Lock Desktop Buttons */
    .action-buttons button {
        width: auto !important;
        padding: 1rem 2rem !important;
    }
    
    /* Lock Desktop Navigation */
    .step-nav {
        display: flex !important;
        flex-direction: row !important;
    }
    
    /* Prevent Mobile Overrides */
    * {
        /* Reset any mobile forced properties */
    }
}

/* 🚫 MOBILE STYLE BLOCKER: Prevent mobile CSS from affecting desktop */
@media screen and (min-width: 769px) {
    /* Block common mobile override patterns */
    [class*="mobile-"] {
        display: initial !important;
    }
    
    /* Preserve desktop interactions */
    button:not(.mobile-button) {
        width: auto !important;
        min-width: auto !important;
    }
    
    /* Preserve desktop layout flexibility */
    .grid, [class*="grid"] {
        display: grid !important;
    }
    
    .flex, [class*="flex"] {
        display: flex !important;
    }
}