/* ============================================
   MOBILE AUTO-SCROLL STYLES
   Latest Updates Section Horizontal Scrolling
   ============================================ */

/* Desktop - keep grid layout */
@media (min-width: 769px) {
    #updates-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: var(--space-xl);
    }

    #skills-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--space-lg);
    }
}

/* Mobile - horizontal scroll */
@media (max-width: 768px) {

    #updates-grid,
    #skills-grid {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        scroll-behavior: smooth;
        gap: var(--space-lg);
        padding-bottom: var(--space-md);
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    #updates-grid::-webkit-scrollbar,
    #skills-grid::-webkit-scrollbar {
        height: 8px;
    }

    #updates-grid::-webkit-scrollbar-track,
    #skills-grid::-webkit-scrollbar-track {
        background: var(--color-bg-secondary);
        border-radius: var(--radius-lg);
    }

    #updates-grid::-webkit-scrollbar-thumb,
    #skills-grid::-webkit-scrollbar-thumb {
        background: var(--gradient-primary);
        border-radius: var(--radius-lg);
    }

    #updates-grid::-webkit-scrollbar-thumb:hover,
    #skills-grid::-webkit-scrollbar-thumb:hover {
        background: var(--color-accent-primary);
    }

    #updates-grid .card {
        min-width: 300px;
        max-width: 300px;
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    #skills-grid .skill-category {
        min-width: 280px;
        max-width: 280px;
        flex-shrink: 0;
        scroll-snap-align: start;
    }
}