<style>
    /* 1. Luodaan uusi ankkuri, joka ottaa sarakkeen todellisen leveyden */
    .timeline-container {
        position: relative !important;
        width: 100% !important;
        display: block !important;
        clear: both !important;
    }

    /* TÄMÄ ON RATKAISU: Tehdään tästä tyhjä korkeusankkuri */
    .timeline-anchor {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 330px; /* Säädä tätä korttien korkeuden mukaan (esim. 380px-420px) */
        overflow: hidden !important;
    }

    /* 2. Pakotetaan wrapper irrottautumaan kaikista teeman flex-säännöistä */
    .timeline-wrapper {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important; /* NYT TÄMÄ LEIKKAA VARMASTI! */
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. Korttijono saa olla niin pitkä kuin haluaa */
    .timeline {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        transition: transform 0.6s ease !important;
    }

    /* 4. Kortit pysyvät tasan 25% leveydessä */
    .timeline-item {
        flex: 0 0 25% !important;
        width: 25% !important;
        min-width: 25% !important;
        max-width: 25% !important;
        box-sizing: border-box !important;
        padding: 0.5rem !important;
    }

    .timeline-card {
        background-color: #f8f9fa;
        border-radius: 1rem;
        box-shadow: 0 0 8px rgba(0,0,0,0.05);
        padding: 1rem;
        height: 100%;
        text-align: center;
    }

    .timeline-controls {
        text-align: center;
        margin-top: 1rem;
    }

    .timeline-controls button {
        margin: 0 0.5rem;
    }

    .timeline-icon {
        display: grid;
        width: 48px;
        height: 48px;
        line-height: 48px;
        border-radius: 50%;
        background-color: #fff;
        border: 2px solid #2563eb;
        color: #2563eb;
        font-size: 1.3rem;
        margin: 0 auto 1rem auto;
        place-items: center;       /* keskittää sekä pysty- että vaakasuunnassa */
        position: relative;
        z-index: 3;
    }

    .timeline-date {
        color: #6c757d;
        font-size: 0.9rem;
        margin-bottom: .5rem;
    }
    .timeline-title {
        font-weight: 600;
        color: #0d6efd;
        font-size: 1rem;
        margin-bottom: .3rem;
    }
    .timeline-subtitle {
        color: #495057;
        font-size: 0.9rem;
        margin-bottom: .5rem;
    }
    .timeline-content {
        font-size: 0.85rem;
        color: #212529;
    }
</style>
