/* Timeline container styles */
.timeline-container {
    margin: 3rem 0;
    width: 100%;
    position: relative;
}

.timeline-image {
    width: 100%;
    height: auto;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.mobile-scroll-hint {
    display: none;
}

/* Mobile optimizations for timeline */
@media (max-width: 768px) {
    .timeline-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Add a subtle shadow on the sides to indicate scrolling */
        background: linear-gradient(to right, white 30%, rgba(255,255,255,0)),
                    linear-gradient(to right, rgba(255,255,255,0), white 70%) 100% 0;
        background-size: 50px 100%, 50px 100%;
        background-repeat: no-repeat;
        /* Hide scrollbar for cleaner look */
        scrollbar-width: none; 
        -ms-overflow-style: none;
        padding-bottom: 1.5rem; /* Space for the hint text if placed below, or just breather */
    }
    
    .timeline-container::-webkit-scrollbar { 
        display: none; 
    }

    .timeline-image {
        /* Force the image to stay large enough to read text */
        width: auto; 
        min-width: 800px; 
        max-width: none;
    }

    .mobile-scroll-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        font-size: 0.85rem;
        color: var(--muted);
        margin-bottom: 0.5rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    
    .mobile-scroll-hint i {
        font-size: 1.2rem;
        color: var(--flame);
    }
}