.timeline-item-wrapper {
    /* MANTIENI QUI LE TUE REGOLE ES: margin-bottom, border-top etc. */
}

.timeline-date h2 {
    margin: 0;
    text-align: center;
    margin-bottom: 8px;
    color: var(--marrone-peck-darker);
}

/* Contenitore del blocco con testo e immagine */
.timeline-item {
    display: flex;
    align-items: stretch;
    /* Allinea gli elementi per avere la stessa altezza */
}

/* Stili per i due layout alternati */

.timeline-image,
.timeline-content {
    flex: 1 1 50%;
}

.timeline-content {
    font-size: .875rem;
}

/* Layout A: Immagine a sinistra, Testo a destra (default) */
.layout-a {
    flex-direction: row;
    /* Direzione standard */
}

.layout-a .timeline-image {
    padding: 16px 40px 40px 0;
    /* border-right: 1px solid var(--marrone-peck-darker); */
}

.layout-a .timeline-content {
    padding: 16px 0px 40px 40px;
}

/* Layout B: Immagine a destra, Testo a sinistra */
.layout-b {
    flex-direction: row-reverse;
    /* Inverte l'ordine degli elementi */
}

.layout-b .timeline-image {
    padding: 16px 0px 40px 40px;
    /* border-left: 1px solid var(--marrone-peck-darker); */
}

.layout-b .timeline-content {
    padding: 16px 40px 40px 0px;
}


/* Per i dispositivi mobili, mettiamo tutto in colonna */
@media (max-width: 768px) {

    .timeline-date h2 {
        margin-top: 8px;
        text-align: left;
    }

    .timeline-item {
        flex-direction: column !important;
        /* Mette gli elementi uno sopra l'altro */
    }

    .timeline-image {
        max-height: 340px;
        overflow: hidden;

        img {
            object-fit: contain;
            object-position: center;
        }
    }

    /* Su mobile, rimuoviamo i bordi laterali e sistemiamo il padding */
    .layout-a .timeline-image,
    .layout-b .timeline-image {
        border-right: none;
        border-left: none;
        padding: 0 0 0 24px;
        /* border-left: 1px solid var(--marrone-peck-darker); */
        /* Padding verticale */
    }

    .layout-a .timeline-content,
    .layout-b .timeline-content {
        padding: 0 0 0 24px;
        /* border-left: 1px solid var(--marrone-peck-darker); */
        /* Padding verticale */
    }
}


.timeline-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Per effetto comparsa con JS */
.timeline-item-wrapper {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.timeline-item-wrapper.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/*  PARTE NUOVA */
/* 1. Diamo una posizione relativa ai contenitori per posizionare il bordo */
.timeline-image,
.timeline-content {
    position: relative;
}

/* 2. Creiamo il nostro finto bordo con uno pseudo-elemento */
.layout-a .timeline-image::after,
.layout-b .timeline-image::after,
.layout-a .timeline-content::after,
.layout-b .timeline-content::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    width: 1px;
    background-color: var(--marrone-peck-darker);
    
    /* Stato iniziale: il bordo è "schiacciato" verticalmente (invisibile) */
    transform: scaleY(0);
    transform-origin: top; /* L'animazione partirà dall'alto verso il basso */
    
    /* Transizione per l'animazione di crescita */
    transition: transform 0.6s ease-out;
    transition-delay: 0.4s; /* Un piccolo ritardo per farla partire dopo il fade-in */
}

/* 3. Posizioniamo i bordi correttamente su DESKTOP */
.layout-a .timeline-image::after {
    right: 0; /* Bordo a destra per il layout A */
}
.layout-b .timeline-image::after {
    left: 0; /* Bordo a sinistra per il layout B */
}

/* Nascondiamo i bordi non necessari su desktop (quelli del testo) */
.layout-a .timeline-content::after,
.layout-b .timeline-content::after {
    display: none;
}

/* 4. Gestiamo il layout MOBILE */
@media (max-width: 768px) {
    /* Su mobile, riattiviamo i bordi per il testo e li mettiamo tutti a sinistra */
    .layout-a .timeline-content::after,
    .layout-b .timeline-content::after {
        display: block;
    }

    .layout-a .timeline-image::after,
    .layout-b .timeline-image::after,
    .layout-a .timeline-content::after,
    .layout-b .timeline-content::after {
        left: 0;
        right: auto;
    }
}

/* 5. ATTIVAZIONE: Quando il wrapper diventa visibile, il bordo cresce */
.timeline-item-wrapper.is-visible .timeline-image::after,
.timeline-item-wrapper.is-visible .timeline-content::after {
    transform: scaleY(1); /* Stato finale: il bordo ha la sua altezza completa */
    height: 100%;
}