/* Disable image dragging to allow touch scrolling */
.articles-container img,
.articles-content img,
.train__carriage img,
.train__carriage__slide,
.parallax-image img {
    -webkit-user-drag: none !important;
    -khtml-user-drag: none !important;
    -moz-user-drag: none !important;
    -o-user-drag: none !important;
    user-drag: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    pointer-events: none !important;
    -webkit-touch-callout: none !important;
}/* Articles Template Styles */

/* Mobile: Force enable scrolling - VERY AGGRESSIVE */
@media (max-width: 974px) {
    html {
        height: auto !important;
        min-height: 100% !important;
        overflow: auto !important;
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    body {
        height: auto !important;
        min-height: 100% !important;
        overflow: visible !important;
        overflow-y: visible !important;
        position: static !important;
        touch-action: manipulation !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Remove any fixed/absolute positioning that might block scroll */
    #smooth-content,
    #smooth-wrapper,
    .smooth-scroll,
    .scrollbox,
    .scrollbox--story,
    .articles-container,
    .articles-content {
        position: static !important;
        height: auto !important;
        overflow: visible !important;
        transform: none !important;
    }
    
    /* Make sure nothing intercepts touch events */
    .articles-container *,
    .articles-content * {
        touch-action: auto !important;
        pointer-events: auto !important;
    }
}

/* Desktop: Horizontal scrolling train layout */
@media (min-width: 975px) {
    .articles-container {
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }
    
    .articles-content {
        width: 100%;
        height: 100%;
    }
    
    .articles-container .scrollbox {
        width: 100%;
        height: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }
    
    .articles-container .train {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        height: 100%;
    }
    
    .articles-container .train__carriage {
        flex-shrink: 0;
        height: 100%;
    }
}

/* Mobile: Vertical scrolling layout */
@media (max-width: 974px) {
    .articles-container {
        width: 100%;
        height: auto;
        overflow: visible;
    }
    
    .articles-content {
        width: 100%;
        height: auto;
        overflow: visible;
        margin-top: var(--navHeight);
    }
    
    /* Hide horizontal scroll controls on mobile */
    .articles-container .osfc_horizon-prev,
    .articles-container .osfc_horizon-next,
    .articles-content .osfc_horizon-prev,
    .articles-content .osfc_horizon-next {
        display: none !important;
    }
    
    .articles-container .scrollbox,
    .articles-content .scrollbox,
    .scrollbox--story {
        width: 100%;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }
    
    .articles-container .train,
    .articles-content .train,
    .train--story {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        height: auto !important;
        white-space: normal !important;
    }
    
    .articles-container .train__carriage,
    .train--story .train__carriage {
        width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
        min-height: 50vh;
        flex-shrink: 0;
    }
    
    /* Adjust text content for mobile */
    .articles-container .train__carriage__trapezoid__text,
    .articles-container .train__carriage__bgcolor__text {
        padding: 2rem;
        max-width: 100%;
        min-width: 100%;
    }
    
    .articles-container .train__carriage__trapezoid__text__caption--big {
        font-size: 2rem;
    }
    
    .articles-container .parallax-image {
        width: 100%;
        height: auto;
        min-height: 300px;
    }
    
    .articles-container .parallax-image img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
    
    
    /* But keep parent elements interactive for scrolling */
    .parallax-image,
    .train__carriage {
        pointer-events: auto !important;
        touch-action: pan-y !important;
    }

    .train__carriage__slide__caption {
        left: 2rem;
        font-size: 1rem;
    }
    .train__carriage__slide__caption a {
        font-size: 1.2rem;
    }
}