/* Responsive CSS for SQL Practice Landing Page */

/* Mobile First - Small screens (≤767px) */
@media (max-width: 767px) {
    .hero {
        padding: var(--space-xl) 0;
    }
    
    .app-icon img {
        width: 100px;
        height: 100px;
    }
    
    .testimonials-grid {
        gap: var(--space-sm);
        max-width: 100%;
        padding: var(--space-xs) 0;
    }
    
    .testimonial-card {
        padding: var(--space-md);
        min-width: 260px;
    }
    
    .screenshot-frame {
        margin: 0 var(--space-sm) var(--space-md);
    }
    
    .app-store-buttons {
        flex-direction: column;
        gap: var(--space-sm);
    }
    
    .app-store-btn {
        min-width: 200px;
        justify-content: center;
    }
    
    .app-store-image {
        width: 200px;
        max-width: 100%;
    }
    
    /* Add scroll hint for testimonials on mobile */
    .testimonials-grid::after {
        content: '';
        min-width: 20px;
        height: 1px;
    }
    
    /* Mobile screenshot sizing */
    .screenshot-frame img {
        width: 95%;
        max-width: 500px;
    }
}

/* Tablet - Medium screens (768px - 1199px) */
@media (min-width: 768px) {
    .hero {
        padding: var(--space-2xl) 0;
    }
    
    .testimonials-grid {
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    }
    
    /* Tablet screenshot sizing */
    .screenshot-frame img {
        width: auto;
        max-width: 600px;
    }
    
    /* Desktop: Show scrollbar for mouse users */
    .testimonials-grid::-webkit-scrollbar {
        height: 8px;
        display: block;
    }
    
    .testimonials-grid::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
    }
    
    .testimonials-grid::-webkit-scrollbar-thumb {
        background: var(--accent-cyan);
        border-radius: 4px;
        transition: background var(--transition);
    }
    
    .testimonials-grid::-webkit-scrollbar-thumb:hover {
        background: var(--accent-magenta);
    }
    
    /* Enable mouse wheel scrolling on desktop */
    .testimonials-grid {
        scroll-behavior: smooth;
    }
    
    /* Desktop: Show scroll hint */
    .testimonials::after {
        content: '← Scroll to explore →';
    }
    
    /* Desktop: Show scrollbar for mouse users */
    .testimonials-grid::-webkit-scrollbar {
        height: 8px;
        display: block;
    }
    
    .testimonials-grid::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
    }
    
    .testimonials-grid::-webkit-scrollbar-thumb {
        background: var(--accent-cyan);
        border-radius: 4px;
        transition: background var(--transition);
    }
    
    .testimonials-grid::-webkit-scrollbar-thumb:hover {
        background: var(--accent-magenta);
    }
    
    /* Enable mouse wheel scrolling on desktop */
    .testimonials-grid {
        scroll-behavior: smooth;
    }
}

/* Desktop - Large screens (≥1200px) */
@media (min-width: 1200px) {
    .app-icon img {
        width: 140px;
        height: 140px;
    }
    
    /* Desktop screenshot sizing */
    .screenshot-frame img {
        width: auto;
        max-width: 600px;
    }
}

/* Mobile: Hide scrollbar for drag experience */
@media (max-width: 767px) {
    .testimonials-grid {
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }
    
    .testimonials-grid::-webkit-scrollbar {
        display: none; /* Chrome/Safari/Opera */
    }
}