/* =========================================================
   TIMELINE (COMBINED)
   - Includes plugin base styles (header, filters, pagination)
   - Includes center rail + alternating left/right layout (desktop)
   - Mobile: rail left, image on top, text below
========================================================= */

/* =========================
   TIMELINE WRAPPER
========================= */
.tb-timeline {
    width: 100%;
}

.tb-timeline__header {
    text-align: center;
    margin-bottom: 18px;
}

.tb-timeline__title {
    margin: 0;
    font-size: 40px;
    line-height: 1.1;
    font-weight: 800;
    color: var(--tb-title-color, #1c2b39);
}

/* =========================
   FILTERS (YEARS + DIVIDERS)
========================= */
.tb-timeline__filters-wrap {
    display: flex;
    justify-content: center;
    margin: 10px 0 26px;
}

.tb-timeline__filters {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

.tb-timeline .tb-timeline__filter-btn {
    appearance: none;
    border: 0;
    background: var(--tb-filter-bg, #fff) !important;
    cursor: pointer;
    font-weight: 700;
    font-size: 18px;
    padding: 10px 20px;
    border-radius: 10px;
    color: var(--tb-filter-text, #1c2b39) !important;
}


.tb-timeline__filter-btn.is-active {
    background: var(--tb-filter-active-bg, #d7ecff);
    color: var(--tb-filter-active-text, #0b5ea8);
}


/* Hover / focus / active states for filter pills (override theme button styles) */
.tb-timeline .tb-timeline__filter-btn:hover,
.tb-timeline .tb-timeline__filter-btn:focus,
.tb-timeline .tb-timeline__filter-btn:focus-visible,
.tb-timeline .tb-timeline__filter-btn.is-active,
.tb-timeline .tb-timeline__filter-btn.is-active:hover,
.tb-timeline .tb-timeline__filter-btn.is-active:focus,
.tb-timeline .tb-timeline__filter-btn.is-active:focus-visible {
    background: var(--tb-filter-hover-bg, var(--tb-filter-active-bg, #d7ecff)) !important;
    color: var(--tb-filter-hover-text, var(--tb-filter-active-text, #0b5ea8)) !important;
    box-shadow: none !important;
    outline: none !important;
}
.tb-timeline__filter-divider {
    display: inline-block;
    border: 1px solid var(--tb-divider-color, rgba(255,255,255,0.28));
    width: 50px;
}

/* =========================
   EVENTS LIST (base)
========================= */
.tb-timeline__events-list {
    display: flex;
    flex-direction: column;
    gap: 70px;
    padding: 20px 0 40px;
}

.tb-timeline__event {
    position: relative;
    padding-top: 0;
}

/* =========================
   BASE MEDIA + CONTENT
========================= */
.tb-timeline__event-media {
    position: relative;
    width: 100%;
}

.tb-timeline__event-image,
.tb-timeline__event-image--placeholder {
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 20px;
    object-fit: cover;
    display: block;
    border: 1px solid var(--tb-image-border, transparent);
    overflow: hidden;
}

.tb-timeline__event-image img{
    width: 100%;
}

.tb-timeline__event-image--placeholder {
    background: rgba(0, 0, 0, 0.06);
}

.tb-timeline__event-content {
    padding-top: 4px;
    width: 100%;
}


.tb-timeline__event-year,
.tb-timeline__event-title,
.tb-timeline__event-subtitle,
.tb-timeline__event-description{
    font-family: Roboto;
}

.tb-timeline__event-year {
    font-size: 96px;
    line-height: 100%;
    font-weight: 500;
    color: var(--tb-year-color, #0b5ea8);
    margin-bottom: 8px;
}

.tb-timeline__event-title {
    font-weight: 600;
    font-size: 36px;
    line-height: 150%;
    margin-bottom: 20px;
    color: var(--tb-text-color, #1c2b39);
}

.tb-timeline__event-subtitle {
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    margin-bottom: 20px;
    color: var(--tb-text-color, #1c2b39);
}

.tb-timeline__event-description {
    font-weight: 400;
    font-size: 14px;
    line-height: 150%;
    margin-bottom: 0;
    color: var(--tb-text-color, #1c2b39);
    max-width: 520px;
}

/* =========================
   RIGHT-SIDE INDICATOR (disable; timeline doesn’t need it)
========================= */
.tb-timeline__event-scroll-indicator {
    display: none !important;
}

/* =========================
   PAGINATION
========================= */
.tb-timeline__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.tb-timeline__page-btn {
    appearance: none;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: var(--tb-page-btn-bg, #ffffff);
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    color: var(--tb-page-btn-text, #0b5ea8);
}

.tb-timeline__page-btn:hover:not(:disabled) {
    background: var(--tb-page-btn-hover-bg, #d7ecff);
    color: var(--tb-page-btn-hover-text, #1c2b39);
}

.tb-timeline__page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tb-timeline__page-status {
    font-weight: 700;
    opacity: 0.75;
}

/* =========================================================
   DESKTOP: CENTER RAIL + ALTERNATING LEFT/RIGHT
========================================================= */
@media (min-width: 861px) {

    /* 3 columns: LEFT | RAIL | RIGHT */
    .tb-timeline__event-grid {
        display: grid;
        grid-template-columns: minmax(280px, 1fr) 64px minmax(280px, 1fr);
        column-gap: 40px;
        grid-template-areas: "media rail content";
        /* default */
        align-items: start;
    }

    /* Center rail column */
    .tb-timeline__event-rail {
        grid-area: rail;
        position: relative;
        width: 64px;
        display: flex;
        justify-content: center;
        align-self: stretch;
        min-height: 100%;
    }

    /* Connected vertical line (extend into gaps so it feels continuous) */
    .tb-timeline__event-rail-line {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -71px;
        bottom: 0;
        width: 4px;
        border-radius: 999px;
        background: var(--tb-rail-line, #163454);
        /* opacity: 0.30; */
    }

    .tb-timeline__events-list>.tb-timeline__event:first-child .tb-timeline__event-rail-line {
        top: 0;
    }

    .tb-timeline__events-list>.tb-timeline__event:last-child .tb-timeline__event-rail-line {
        bottom: 0;
    }

    /* Dot (near top like your reference) */
    .tb-timeline__event-rail-dot {
        position: absolute;
        top: 34px;
        left: 50%;
        transform: translateX(-50%);
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--tb-rail-dot, #0B63B6);
        z-index: 2;
    }

    /* Halo behind the dot (matches the dot color with reduced opacity) */
    .tb-timeline__event-rail-dot::after {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        background: var(--tb-rail-dot, #0B63B6);
        opacity: 0.12;
        z-index: -1;
    }

    .tb-timeline__event-rail-img-line {
        position: absolute;
        top: 42px;
        left: -6%;
        transform: translateX(-50%);
        width: 70px;
        height: 1px;
        border-radius: 0;
        background: var(--tb-rail-dot, #0B63B6);
        z-index: 2;
    }

    .tb-timeline__events-list>.tb-timeline__event:nth-child(even) .tb-timeline__event-rail-img-line {
        position: absolute;
        top: 42px;
        left: 107%;
        transform: translateX(-50%);
        width: 70px;
        height: 1px;
        border-radius: 0;
        background: var(--tb-rail-dot, #0B63B6);
        z-index: 2;
    }

    /* Place default areas */
    .tb-timeline__event-media {
        grid-area: media;
        justify-self: end;
        align-self: start;
        margin: 0;
        max-width: 520px;
    }

    .tb-timeline__event-content {
        grid-area: content;
        justify-self: start;
        align-self: start;
        margin: 0;
        max-width: 520px;
        text-align: left;
    }

    /* EVEN: swap areas (content LEFT, image RIGHT) */
    .tb-timeline__events-list>.tb-timeline__event:nth-child(even) .tb-timeline__event-grid {
        grid-template-areas: "content rail media";
    }

    .tb-timeline__events-list>.tb-timeline__event:nth-child(even) .tb-timeline__event-content {
        justify-self: end;
        text-align: right;
    }

    .tb-timeline__events-list>.tb-timeline__event:nth-child(even) .tb-timeline__event-media {
        justify-self: start;
    }

    /* Optional stagger for EVEN rows (moves BOTH sides + rail together) */
    .tb-timeline__events-list>.tb-timeline__event:nth-child(even) {
        /*padding-top: 40px; tweak 20–70 */
    }
}

/* =========================================================
   MOBILE: rail left, image on top, text below
========================================================= */
@media (max-width: 860px) {
    /* Use the same variables on mobile so the Style tab applies everywhere. */
    .tb-timeline__event-year { color: var(--tb-year-color, #0b5ea8); }
    .tb-timeline__event-title,
    .tb-timeline__event-subtitle,
    .tb-timeline__event-description { color: var(--tb-text-color, #1c2b39); }
    .tb-timeline__filter-btn { color: var(--tb-filter-text, #1c2b39); }

    .tb-timeline__title {
        font-size: 34px;
    }

    .tb-timeline__event-grid {
        display: grid;
        grid-template-columns: 28px 1fr;
        gap: 14px;
        grid-template-areas:
            "rail media"
            "rail content";
        align-items: start;
    }

    .tb-timeline__event-rail {
        grid-area: rail;
        position: relative;
        width: 28px;
        display: flex;
        justify-content: center;
    }

    .tb-timeline__event-rail-line { 
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 0;
        bottom: 0;
        width: 4px;
        border-radius: 999px;
        background: var(--tb-rail-line, #163454);
        /* opacity: 0.30; */
        height: auto;
    }

    .tb-timeline__events-list>.tb-timeline__event:first-child .tb-timeline__event-rail-line {
        top: 0;
    }

    .tb-timeline__events-list>.tb-timeline__event:last-child .tb-timeline__event-rail-line {
        bottom: 0;
    }

    .tb-timeline__event-rail-dot {
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--tb-rail-dot, #0B63B6);
    }

    /* Halo behind the dot (matches the dot color with reduced opacity) */
    .tb-timeline__event-rail-dot::after {
        content: "";
        position: absolute;
        inset: -6px;
        border-radius: 50%;
        background: var(--tb-rail-dot, #0B63B6);
        opacity: 0.12;
        z-index: -1;
    }

    .tb-timeline__event-media {
        grid-area: media;
        margin-top: 0 !important;
    }

    /* Keep your “floating card” feel if you want it */
    .tb-timeline__event-content {
        grid-area: content;
        text-align: left !important;
        background: #fff;
        border-radius: 14px;
        padding: 16px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        width: 90%;
        margin: -100px auto 0 auto !important;
        z-index: 99;
    }

    /* Remove stagger on mobile */
    .tb-timeline__events-list>.tb-timeline__event:nth-child(even) {
        padding-top: 0;
    }

    .tb-timeline__event-year {
        font-size: 56px;
    }
}