/* ============================================================
   Timeline for Elementor — CSS strutturale
   Colori e tipografia si impostano da Elementor.
   ============================================================ */

/* ── base ── */
.me-tl-wrap  { position: relative; }
.me-tl-body  { position: relative; }

/* ══════════════════════════════════════════════════════════
   LAYOUT CENTRALE (default)
   Linea al centro, voci alternate sx/dx.
   Anno + titolo + testo stanno TUTTI nella stessa colonna.
   ══════════════════════════════════════════════════════════ */

/* linea */
.me-tl-wrap.layout-center .me-tl-spine {
    position: absolute;
    left: 50%;
    top: 0; bottom: 0;
    width: 1px;
    transform: translateX(-50%);
    background-color: rgba(255,255,255,.2);
}
.me-tl-spine-fill {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 0%;
    background-color: #5BB8D4;
    transition: height .9s ease;
}

/* griglia: colonna-contenuto | dot | colonna-vuota */
.me-tl-wrap.layout-center .me-tl-item {
    display: grid;
    grid-template-columns: 1fr 40px 1fr;
    align-items: start;
    margin-bottom: 44px;
    position: relative;
}
.me-tl-wrap.layout-center .me-tl-item:last-child { margin-bottom: 0; }

/* dot sempre al centro */
.me-tl-wrap.layout-center .me-tl-dot-col {
    grid-column: 2;
    display: flex;
    justify-content: center;
    padding-top: 4px;
    position: relative;
    z-index: 2;
}

/* ODD: contenuto a DESTRA del dot, sinistra vuota */
.me-tl-wrap.layout-center .me-tl-item.tl-odd .me-tl-card-col {
    grid-column: 3;
    grid-row: 1;
    padding-left: 20px;
    text-align: left;
}
.me-tl-wrap.layout-center .me-tl-item.tl-odd .me-tl-spacer {
    grid-column: 1;
    grid-row: 1;
}

/* EVEN: contenuto a SINISTRA del dot, destra vuota */
.me-tl-wrap.layout-center .me-tl-item.tl-even .me-tl-card-col {
    grid-column: 1;
    grid-row: 1;
    padding-right: 20px;
    text-align: right;
}
.me-tl-wrap.layout-center .me-tl-item.tl-even .me-tl-spacer {
    grid-column: 3;
    grid-row: 1;
}

/* ══════════════════════════════════════════════════════════
   LAYOUT BANDIERA SINISTRA
   Linea fissa a sinistra, tutte le voci sulla stessa colonna.
   ══════════════════════════════════════════════════════════ */

.me-tl-wrap.layout-left .me-tl-spine {
    position: absolute;
    left: 20px;
    top: 0; bottom: 0;
    width: 1px;
    background-color: rgba(255,255,255,.2);
}

.me-tl-wrap.layout-left .me-tl-item {
    display: flex;
    align-items: start;
    margin-bottom: 44px;
    padding-left: 56px;
    position: relative;
}
.me-tl-wrap.layout-left .me-tl-item:last-child { margin-bottom: 0; }

.me-tl-wrap.layout-left .me-tl-dot-col {
    position: absolute;
    left: 14px;
    top: 4px;
    z-index: 2;
}

.me-tl-wrap.layout-left .me-tl-card-col {
    flex: 1;
    text-align: left;
}

/* spacer inutile nel layout bandiera */
.me-tl-wrap.layout-left .me-tl-spacer { display: none; }

/* dot finale */
.me-tl-wrap.layout-left .me-tl-end {
    justify-content: flex-start;
    padding-left: 16px;
}

/* ══════════════════════════════════════════════════════════
   CONTENUTO CARD: anno, titolo, testo
   ══════════════════════════════════════════════════════════ */

.me-tl-year {
    display: inline-block;
    margin-bottom: 4px;
}
.me-tl-title {
    display: block;
    margin-bottom: 5px;
}
.me-tl-text {
    display: block;
}

/* ══════════════════════════════════════════════════════════
   DOT
   ══════════════════════════════════════════════════════════ */

.me-tl-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #5BB8D4;
    background: transparent;
    transition: transform .4s ease, box-shadow .4s ease;
    flex-shrink: 0;
}
.me-tl-item.tl-visible .me-tl-dot {
    transform: scale(1.2);
    box-shadow: 0 0 0 5px rgba(91,184,212,.2);
}

/* ══════════════════════════════════════════════════════════
   ANIMAZIONI ENTRATA
   ══════════════════════════════════════════════════════════ */

.me-tl-card {
    opacity: 0;
    transition: opacity .55s ease .1s, transform .55s cubic-bezier(.16,1,.3,1) .1s;
}

/* centro: odd entra da destra, even da sinistra */
.me-tl-wrap.layout-center .me-tl-item.tl-odd  .me-tl-card { transform: translateX(-14px); }
.me-tl-wrap.layout-center .me-tl-item.tl-even .me-tl-card { transform: translateX( 14px); }

/* bandiera: tutte le voci entrano da sinistra */
.me-tl-wrap.layout-left .me-tl-card { transform: translateX(-14px); }

.me-tl-item.tl-visible .me-tl-card { opacity: 1; transform: translateX(0); }

/* ══════════════════════════════════════════════════════════
   DOT INIZIALE
   ══════════════════════════════════════════════════════════ */

.me-tl-start {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
}

/* layout bandiera: dot iniziale allineato a sinistra come quello finale */
.me-tl-wrap.layout-left .me-tl-start {
    justify-content: flex-start;
    padding-left: 16px;
}

.me-tl-start-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background-color: #5BB8D4;
    opacity: 0;
    transform: scale(0);
    transition: opacity .4s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}

/* ══════════════════════════════════════════════════════════
   DOT FINALE
   ══════════════════════════════════════════════════════════ */

.me-tl-end {
    display: flex;
    justify-content: center;
    margin-top: 16px;
    position: relative;
    z-index: 2;
}
.me-tl-end-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background-color: #5BB8D4;
    opacity: 0;
    transform: scale(0);
    transition: opacity .4s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}

/* ══════════════════════════════════════════════════════════
   EDITOR ELEMENTOR: tutto visibile, niente animazioni
   ══════════════════════════════════════════════════════════ */

.me-tl-is-editor .me-tl-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}
.me-tl-is-editor .me-tl-dot {
    transform: scale(1.1) !important;
    border-color: #5BB8D4 !important;
    box-shadow: 0 0 0 4px rgba(91,184,212,.2) !important;
    transition: none !important;
}
.me-tl-is-editor .me-tl-spine-fill {
    height: 100% !important;
    transition: none !important;
}
.me-tl-is-editor .me-tl-end-dot,
.me-tl-is-editor .me-tl-start-dot {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE — sotto 560px tutto a bandiera sinistra
   ══════════════════════════════════════════════════════════ */

@media (max-width: 560px) {

    .me-tl-wrap.layout-center .me-tl-spine { left: 16px; transform: none; }

    .me-tl-wrap.layout-center .me-tl-item {
        display: flex;
        align-items: start;
        padding-left: 44px;
    }
    .me-tl-wrap.layout-center .me-tl-dot-col {
        position: absolute;
        left: 9px; top: 4px;
        display: block;
        padding: 0;
    }
    .me-tl-wrap.layout-center .me-tl-item.tl-odd  .me-tl-card-col,
    .me-tl-wrap.layout-center .me-tl-item.tl-even .me-tl-card-col {
        flex: 1;
        text-align: left;
        padding: 0;
        grid-column: unset;
    }
    .me-tl-wrap.layout-center .me-tl-spacer { display: none; }
    .me-tl-wrap.layout-center .me-tl-end,
    .me-tl-wrap.layout-center .me-tl-start  { justify-content: flex-start; padding-left: 12px; }

    .me-tl-wrap.layout-center .me-tl-card,
    .me-tl-wrap.layout-center .me-tl-item.tl-even .me-tl-card { transform: translateX(-10px); }
    .me-tl-wrap.layout-center .me-tl-item.tl-visible .me-tl-card { transform: translateX(0); }
}