/* ============================================
   HORIZONTAL SCROLL ROWS single source of truth
   #updates-grid (non-home) · legacy #skills-grid
   .skills-madison__grid scroll handled in madison.css
   ============================================ */

:root {
    --bp-wide: 1100px;
    --bp-tablet: 1024px;
    --bp-mobile: 768px;
    --bp-phone: 480px;
    --scroll-card-width: min(82vw, 340px);
}

/* Desktop grid layout for scroll rows */
@media (min-width: 1025px) {
    #updates-grid:not(.updates-grid--home) {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: var(--space-xl);
    }

    #updates-grid.updates-grid--home {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
    }

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

/* Tablet + mobile horizontal scroll (exclude Madison skills grid) */
@media (max-width: 1024px) {
    #updates-grid:not(.updates-grid--home),
    #skills-grid:not(.skills-madison__grid) {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        gap: 0.85rem;
        padding: 2px 0.25rem 0.75rem;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0.25rem;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    #updates-grid:not(.updates-grid--home) .update-card,
    #updates-grid:not(.updates-grid--home) .card,
    #skills-grid:not(.skills-madison__grid) .skill-category,
    #skills-grid:not(.skills-madison__grid) .skill-panel {
        flex: 0 0 var(--scroll-card-width);
        min-width: var(--scroll-card-width);
        max-width: var(--scroll-card-width);
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    #updates-grid:not(.updates-grid--home)::-webkit-scrollbar,
    #skills-grid:not(.skills-madison__grid)::-webkit-scrollbar {
        height: 6px;
    }

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

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

@media (max-width: 768px) {
    :root {
        --scroll-card-width: min(88vw, 320px);
    }
}

@media (max-width: 480px) {
    :root {
        --scroll-card-width: min(92vw, 300px);
    }
}