/**
 * Grid Scroll Section — Alias strutturali
 *
 * Aggiunge i selettori strutturali grid-scroll-* e section-container/section-grid
 * come alias delle classi visive evidenza-* definite in evidenza-section.css.
 *
 * Gli elementi HTML hanno entrambe le classi (dual-class, es.
 * "evidenza-container grid-scroll-container section-container"), quindi
 * entrambi i file CSS si applicano senza conflitti.
 *
 * Questo file sarà il CSS definitivo quando le classi evidenza-* verranno
 * rimosse dall'HTML in una fase successiva del refactoring.
 *
 * Version: 1.0.0
 */

/* Container scrollabile */
.grid-scroll-container,
.section-container {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2rem;
    padding-top: 1rem;
}

/* Grid degli articoli */
.grid-scroll-grid,
.section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

/* Scrollbar */
.grid-scroll-container::-webkit-scrollbar {
    width: 8px;
}

.grid-scroll-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.grid-scroll-container::-webkit-scrollbar-thumb {
    background: var(--evidenza-color, #e74c3c);
    border-radius: 4px;
}

.grid-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #e67e22;
}

/* Responsive */
@media (max-width: 1024px) {
    .grid-scroll-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .grid-scroll-container {
        padding: 1.5rem;
        padding-top: 1rem;
    }

    .grid-scroll-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .grid-scroll-container {
        padding: 1rem;
        padding-top: 0.5rem;
    }
}