/* EMERGENCY TIMELINE FIX FOR iPAD */
/* This file forces timeline to work on tablets */

/* For all tablets and iPads */
@media only screen and (min-width: 768px) and (max-width: 1366px) and (pointer: coarse) {
    #timelineWrapper,
    .timeline-wrapper {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: scroll !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        touch-action: pan-x !important;
        transform: none !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        gap: 1rem !important;
        padding: 1rem 1rem 3rem 1rem !important;
    }

    .timeline-card {
        flex: 0 0 70vw !important;
        min-width: 70vw !important;
        max-width: 70vw !important;
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        transition: none !important;
        position: relative !important;
        pointer-events: auto !important;
        display: block !important;
    }
    
    /* Remove any absolute positioning */
    .timeline-card * {
        position: relative !important;
    }

    /* Hide progress indicators */
    .timeline-progress-container,
    .timeline-progress,
    .timeline-dots-container,
    .timeline-dot {
        display: none !important;
    }

    /* Ensure timeline section doesn't interfere */
    .timeline-section {
        overflow: visible !important;
        height: auto !important;
        min-height: auto !important;
    }

    .timeline-container {
        height: auto !important;
        overflow: visible !important;
    }
}

/* Specific for devices that identify as iPad */
@supports (-webkit-touch-callout: none) {
    @media only screen and (min-width: 768px) and (max-width: 1366px) {
        #timelineWrapper,
        .timeline-wrapper {
            display: -webkit-box !important;
            display: -webkit-flex !important;
            display: flex !important;
            -webkit-box-orient: horizontal !important;
            -webkit-box-direction: normal !important;
            -webkit-flex-direction: row !important;
            flex-direction: row !important;
            overflow-x: scroll !important;
            -webkit-overflow-scrolling: touch !important;
        }
        
        .timeline-card {
            -webkit-flex: 0 0 70vw !important;
            flex: 0 0 70vw !important;
        }
    }
}

/* Nuclear option - inline styles override */
body.is-ipad #timelineWrapper {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    transform: translateX(0) translateZ(0) !important;
    -webkit-transform: translateX(0) translateZ(0) !important;
}

body.is-ipad .timeline-card {
    flex: 0 0 70vw !important;
    scroll-snap-align: center !important;
    transform: translateX(0) translateZ(0) scale(1) !important;
    -webkit-transform: translateX(0) translateZ(0) scale(1) !important;
    opacity: 1 !important;
}