/* Responsive design styles */

/* Force side-by-side layout on desktop */
@media (min-width: 769px) {
    .playground-content {
        display: flex !important;
        flex-direction: row !important;
        height: 100% !important;
    }
    
    .editor-section, .output-section {
        flex: 1 !important;
        height: auto !important;
        max-height: none !important;
        flex-grow: 1 !important;
        flex-shrink: 1 !important;
    }
}

@media (max-width: 768px) {
    .hero {
        min-height: 150px;
        padding: 15px;
    }
    
    .hero-content h1 {
        font-size: 24px;
    }
    
    .hero-tagline {
        font-size: 16px;
    }
    
    .hero-features {
        flex-direction: column;
        gap: 8px;
    }
    
    .hero-features li {
        font-size: 12px;
    }
    
    .example-selector {
        padding: 0 15px;
    }
    
    .playground-content {
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
    
    .editor-section, .output-section {
        height: 50vh !important;
        min-height: 200px !important;
        max-height: 50vh !important;
        flex: none !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .output-section {
        border-right: none;
        border-top: 1px solid #e2e8f0;
    }
    
    .output-container {
        height: 100% !important;
        max-height: calc(50vh - 50px) !important;
        overflow: hidden !important;
    }
    
    .output-panel {
        height: 100% !important;
        max-height: 100% !important;
        overflow: hidden !important;
    }

    .CodeMirror {
        font-size: 12px;
    }
}

/* Hide line numbers on very small screens */
@media (max-width: 480px) {
    .hero {
        min-height: 120px;
    }
    
    .hero-content h1 {
        font-size: 20px;
    }
    
    .hero-tagline {
        font-size: 14px;
    }
    
    .CodeMirror-linenumbers {
        display: none;
    }
    
    .editor-section, .output-section {
        height: 45vh !important;
        max-height: 45vh !important;
    }
}