/* Cronkite Section Styles */

/* Desktop: 3-wide grid */
.cronkite-section .stories-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* Tablet and Mobile - horizontal scroller - match architecture scroller styling */
@media (max-width: 1200px) {
    .cronkite-section .stories-grid {
        display: flex;
        flex-direction: row;
        gap: 2rem;
        overflow-x: auto;
        overflow-y: hidden;
        width: 100%;
        padding-bottom: 16px; /* Space for scrollbar */
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }

    .cronkite-section .story-item {
        flex: 0 0 450px; /* Match architecture-scroll-item width */
        display: flex;
        flex-direction: column;
        position: relative;
    }

    /* Custom scrollbar styling - match architecture scroll */
    .cronkite-section .stories-grid::-webkit-scrollbar {
        height: 8px;
    }

    .cronkite-section .stories-grid::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    .cronkite-section .stories-grid::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 4px;
    }

    .cronkite-section .stories-grid::-webkit-scrollbar-thumb:hover {
        background: #a1a1a1;
    }
}

/* Mobile - match architecture scroll dimensions */
@media (max-width: 768px) {
    .cronkite-section .stories-grid {
        gap: 2rem;
    }

    .cronkite-section .story-item {
        flex: 0 0 350px; /* Match architecture-scroll-item mobile width */
    }
}

@media (max-width: 480px) {
    .cronkite-section .stories-grid {
        gap: 2rem;
    }

    .cronkite-section .story-item {
        flex: 0 0 300px; /* Match architecture-scroll-item small mobile width */
    }
}