/* ==========================================================
   TIMELINE PAGE
========================================================== */

.timeline-page {

    /*
    Timeline historically used these local aliases.
    Keep them explicit so the page remains self-contained
    after the CSS split.
    */
    --surface-color:
        var(--surface-primary);

    --border-color:
        var(--border-primary);

    --text-color:
        var(--text-primary);

    --card-shadow:
        0 14px 30px
        rgba(40,57,87,.09);

    width:
        min(
            var(--content-wide),
            calc(100% - var(--page-gutter))
        );

    margin: 0 auto;

    padding: 0 0 80px;

}

.timeline-heading {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 14px;

    margin-bottom: 42px;

    text-align: center;

}

.timeline-heading h1 {

    margin: 0;

    font-size: clamp(2.6rem, 4vw, 3.6rem);

}

.timeline-heading p {

    max-width: 640px;

    margin: 0;

}


/* ==========================================================
   LATEST COLLABORATION
========================================================== */

.timeline-latest {

    margin-bottom: 48px;

}

.timeline-loading-card {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 240px;

    border: 1px solid var(--border-color);

    border-radius: 28px;

    background: var(--surface-color);

    box-shadow: var(--card-shadow);

    color: var(--text-muted);

}



/* ==========================================================
   TIMELINE CONTENT
========================================================== */

.timeline-content {

    display: flex;

    flex-direction: column;

    gap: 48px;

}

.timeline-loading {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 280px;

    border: 1px solid var(--border-color);

    border-radius: 28px;

    background: var(--surface-color);

    box-shadow: var(--card-shadow);

    color: var(--text-muted);

}



/* ==========================================================
   EMPTY / ERROR
========================================================== */

.timeline-empty,

.timeline-error {

    margin-top: 48px;

    padding: 40px;

    border: 1px solid var(--border-color);

    border-radius: 28px;

    background: var(--surface-color);

    box-shadow: var(--card-shadow);

    text-align: center;

}


/* ==========================================================
   FEATURED COLLABORATION
========================================================== */

.timeline-featured-card {

    width:
        min(
            calc(100% - 48px),
            var(--content-default)
        );

    margin-inline:
        auto;

    /*
    The page background stays visible around the collaboration.
    Only the collaboration card itself carries a surface.
    */
    padding:
        0;

    border:
        0;

    border-radius:
        0;

    background:
        transparent;

    box-shadow:
        none;

}

.timeline-featured-heading {
    margin-bottom: 18px;
}


/* ==========================================================
   YEARS
========================================================== */

.timeline-year {
    /*
    Years are structural groups, not cards.
    Keep the global page gradient visible and let each
    collaboration card provide its own visual separation.
    */
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.timeline-year-heading {
    width: 100%;
    display: grid;
    grid-template-columns:
        max-content
        max-content
        minmax(0, 1fr);
    align-items: center;
    column-gap: 6px;
    padding: 22px 26px;
    border: 0;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    font: inherit;
    font-size: 1.55rem;
    font-weight: 800;
    text-align: left;
}


.timeline-year-heading::after {
    content: none;
}

.timeline-year-heading > span:first-child {
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1;
}

.timeline-year-chevron {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #8b8fa6;

    margin-left: 5px;
    margin-right: 5px;

    font-size: 1rem;
    font-weight: 700;

    transform: translateY(-1px);

    transition:
        transform 180ms ease,
        color 180ms ease;

}

.timeline-year-heading:hover
.timeline-year-chevron {

    color: #7666e8;

}

.timeline-year.is-collapsed
.timeline-year-chevron {

    transform: rotate(-90deg);

}


/* ==========================================================
   MONTHS
========================================================== */

.timeline-month {
    position: relative;
    display: grid;

    grid-template-columns:
        170px minmax(0, 1fr);

    gap:
        24px;

    padding:
        28px 0;
}

.timeline-month-marker {
    position: relative;
    padding-left: 32px;
}

.timeline-month-marker::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: -56px;
    left: 8px;
    width: 2px;
    background: rgba(118, 102, 232, 0.18);
}

.timeline-month:last-child
.timeline-month-marker::before {
    bottom: 0;
}

.timeline-month-marker > span {
    position: absolute;
    top: 4px;
    left: 1px;
    width: 16px;
    height: 16px;
    border: 4px solid var(--surface-color);
    border-radius: 50%;
    background: #7666e8;
    box-shadow:
        0 0 0 2px
        rgba(118, 102, 232, 0.22);
}

.timeline-month-heading-text {
    display: grid;
    gap: 5px;
}

.timeline-month-heading-text h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.timeline-month-heading-text span {
    color: var(--text-muted);
    font-size: 0.72rem;
}


/* ==========================================================
   EVENT GRID
========================================================== */

.timeline-month-events {
    display: grid;
    grid-template-columns:
        repeat(
            auto-fill,
            260px
        );
    justify-content: start;
    align-items: stretch;
    gap: 18px;
}

.timeline-event-card {
    width: 100%;
    height: 100%;
}

/* ==========================================================
   EVENT CARDS
========================================================== */

.timeline-event-card {
    --timeline-accent: #7666e8;

    overflow: hidden;
    border: 1px solid
        color-mix(
            in srgb,
            var(--timeline-accent) 24%,
            var(--border-color)
        );
    border-top: 4px solid var(--timeline-accent);
    border-radius: 20px;
    background: #f7f8fd;
    transition:
        transform 160ms ease,
        box-shadow 160ms ease;
}

.timeline-event-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(40, 57, 87, 0.13);
}

.timeline-event-thumbnail-link {
    display: block;
}

.timeline-event-thumbnail {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.timeline-event-body {
    display: grid;
    gap: 8px;
    padding: 12px;
}

.timeline-event-date {
    color: var(--timeline-accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.timeline-event-title {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text-color);
    font-size: 0.88rem;
    font-weight: 750;
    line-height: 1.4;
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.timeline-event-title:hover {
    color: var(--timeline-accent);
}

.timeline-talent-filter .cascade-menu {
    min-width: 240px;
}

/* ==========================================================
   PARTICIPANTS
========================================================== */

.timeline-event-participants {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.timeline-participant {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 16px;
    color: var(--text-color);
    text-decoration: none;
}

.timeline-participant:hover span {
    color: var(--timeline-accent);
}

.timeline-participant img {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 2px solid var(--timeline-accent);
    border-radius: 50%;
    object-fit: cover;
}

.timeline-participant span {
    overflow: hidden;
    max-width: 130px;
    font-size: 0.76rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timeline-participant-separator {
    color: var(--text-muted);
    font-weight: 800;
}

.timeline-participant-missing {
    color: var(--text-muted);
    font-size: 0.82rem;
}


/* ==========================================================
   FEATURED CARD
========================================================== */

.timeline-event-card-featured {

    display:grid;

    grid-template-columns:
        minmax(380px, 44%)
        minmax(0, 1fr);

    border-top-width:5px;

}


.timeline-event-card-featured
.timeline-event-thumbnail-link {

    width:100%;

    aspect-ratio:16 / 9;

}


.timeline-event-card-featured
.timeline-event-thumbnail {

    display:block;

    width:100%;
    height:100%;
    min-height:0;

    aspect-ratio:auto;

    object-fit:contain;

}


.timeline-event-card-featured
.timeline-event-body {

    align-content:center;

    padding:24px 30px;

}


.timeline-event-card-featured
.timeline-event-title {

    font-size:1.2rem;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 900px) {

    .timeline-event-card-featured {
        display: block;
    }

    .timeline-event-card-featured
    .timeline-event-thumbnail {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .timeline-month {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .timeline-month-marker {
        padding-left: 26px;
    }

    .timeline-month-marker::before {
        display: none;
    }

    .timeline-month-events {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 600px) {

    .timeline-year-heading {
        padding: 18px 20px;
    }

    .timeline-year-content {
        padding: 0 18px 22px;
    }

    .timeline-featured-card {
        padding: 18px;
    }
}

/* ==========================================================
   TIMELINE — CLEAN LAYOUT OVERRIDES
========================================================== */

/*
Latest Collaboration remains visually independent.
The JavaScript patch in timeline-js-patch.txt makes it
independent from the active filters.
*/

.timeline-page {
    width:
        min(
            var(--content-wide),
            calc(100% - var(--page-gutter))
        );

    margin:
        0 auto;

    padding-bottom:
        90px;
}

.timeline-heading {
    gap: 0;
    padding: 92px 20px 42px;
    text-align: center;
}

.timeline-heading h1 {
    margin: 12px 0 14px;
    font-size: clamp(38px, 6vw, 62px);
    line-height: 1.05;
    letter-spacing: -1.8px;
}

.timeline-heading p {
    max-width: 700px;
    margin: 0 auto;
    color: #667085;
    font-size: 18px;
    line-height: 1.7;
}

/* Latest collaboration before the filters */

.timeline-latest {
    width: 100%;
    margin-top: 28px;
}

/* Separator between Latest Collaboration and filters */

.timeline-filters-divider {
    width: 100%;

    margin:
        38px auto 34px;

    text-align:
        center;
}

.timeline-filters-divider .divider-line {
    width: 600px;
    max-width: 70%;
    height: 4px;

    margin:
        0 auto 20px;

    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            #4da6ff,
            #9b7cff
        );
}

.timeline-filters-divider p {
    margin: 0;
    color: #888;
    font-size: 14px;
    letter-spacing: .3px;
}

/*
Search + Year + Month + Talent + Sort on a single row
on sufficiently wide screens.
*/

.timeline-filters {
    width: 100%;

    margin:
        0 auto 54px;

    padding: 0;

    display: grid;
    grid-template-columns:
        minmax(280px, 1.25fr)
        repeat(4, minmax(170px, 1fr));

    align-items: center;
    gap: 16px;

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.timeline-search-field {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.timeline-search-field input {
    width: 100%;
    height: 45px;
    padding: 0 20px;

    color: var(--text-primary);
    background: var(--surface-primary);

    border: 1px solid var(--border-primary);
    border-radius: 22px;

    font: inherit;
    font-size: 15px;

    transition:
        border-color .25s,
        box-shadow .25s;
}

.timeline-search-field input:hover {
    border-color: var(--text-muted);
}

.timeline-search-field input:focus {
    outline: none;
    border-color: #4da6ff;
    box-shadow:
        0 0 0 4px rgba(77, 166, 255, .15);
}

.timeline-search-field input::placeholder {
    color: var(--text-muted);
}

/*
The HTML keeps .timeline-filter-row around the four dropdowns.
display: contents lets its children participate in the same
five-column grid as the search field.
*/

.timeline-filter-row {
    display: contents;
}

.timeline-filter-row > .dropdown-filter,
.timeline-filter-row > .cascade-filter {
    width: 100%;
    min-width: 0;
}

#timelineYearMenu,
#timelineMonthMenu {
    max-height: 290px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.timeline-filter-row .dropdown-button,
.timeline-filter-row .cascade-button {
    width: 100%;
    height: 45px;
    padding: 0 48px 0 20px;

    border: 1px solid var(--border-primary);
    border-radius: 22px;

    color: var(--text-primary);
    background-color: var(--surface-primary);
    background-position: right 18px center;
    background-size: 18px 18px;

    font-size: 15px;
}

/* Cascade menu keeps a practical width without enlarging the trigger. */

.timeline-filter-row .dropdown-button:hover,
.timeline-filter-row .cascade-button:hover {
    border-color: var(--text-muted);
}

.timeline-talent-filter {
    min-width: 0;
}

.timeline-talent-filter .cascade-menu {
    width: 250px;
    min-width: 250px;
}

/*
==========================================================
RESPONSIVE
==========================================================
*/

@media (max-width: 1250px) {

    .timeline-filters {
        grid-template-columns:
            minmax(260px, 1.2fr)
            repeat(2, minmax(190px, 1fr));
    }

    .timeline-filter-row {
        display: contents;
    }

}

@media (max-width: 820px) {

    .timeline-page {
        width: calc(100% - 24px);
    }

    .timeline-heading h1 {
        font-size: 42px;
    }

    .timeline-filters {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .timeline-search-field {
        grid-column: 1 / -1;
    }

}

@media (max-width: 540px) {

    .timeline-page {
        width: calc(100% - 18px);
    }


    /*
    Compact mobile filter area.
    Keep controls comfortably tappable while avoiding
    almost a full screen of filters.
    */

    .timeline-filters {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 30px;
    }


    .timeline-search-field {
        grid-column: auto;
    }


    .timeline-search-field input {
        height: 44px;
        padding: 0 18px;
        border-radius: 22px;
        font-size: 14px;
    }


    .timeline-filter-row .dropdown-button,
    .timeline-filter-row .cascade-button {
        height: 44px;
        padding: 0 42px 0 18px;
        border-radius: 22px;
        background-position: right 15px center;
        background-size: 16px 16px;
        font-size: 14px;
    }


    .timeline-filters-divider {
        margin: 28px auto 20px;
    }


    .timeline-filters-divider .divider-line {
        max-width: 78%;
        margin-bottom: 14px;
    }


    .timeline-filters-divider p {
        font-size: 13px;
    }

}

/* ==========================================================
   TIMELINE — MONTH CAROUSEL
========================================================== */

.timeline-month-carousel {
    position: relative;
    min-width: 0;
    padding: 0 30px;
}


/* One month = one row */

.timeline-month-events {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 18px;

    width: 100%;
    min-width: 0;
}


/* Navigation */

.timeline-month-navigation {

    position:absolute;

    top:50%;

    z-index:5;

    width:40px;
    height:40px;

    padding:0;

    border:
        1px solid
        rgba(118, 102, 232, .22);

    border-radius:50%;

    background:#fff;

    cursor:pointer;

    transform:
        translateY(-50%);

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        background-color 160ms ease,
        opacity 160ms ease;

    /*
    Remove the HTML character
    */
    color:transparent;

    font-size:0;

    /*
    Important:
    no shadow around the button
    */
    box-shadow:none;

}

.timeline-month-navigation::before {

    content:"";

    position:absolute;

    top:50%;
    left:50%;

    width:8px;
    height:8px;

    border-top:
        2px solid #7666e8;

    border-right:
        2px solid #7666e8;

}

.timeline-month-navigation-previous {

    left:0;

}


.timeline-month-navigation-previous::before {

    transform:
        translate(-35%, -50%)
        rotate(-135deg);

}


.timeline-month-navigation-next {

    right:0;

}


.timeline-month-navigation-next::before {

    transform:
        translate(-65%, -50%)
        rotate(45deg);

}


.timeline-month-navigation:hover:not(:disabled) {

    border-color:
        rgba(118, 102, 232, .5);

    background:
        #f8f7ff;

    transform:
        translateY(-50%)
}

.timeline-month-navigation:disabled {

    opacity:.25;

    cursor:default;

}


.timeline-month-navigation-previous {
    left: 0;
}


.timeline-month-navigation-next {
    right: 0;
}


/* Disabled edge */

.timeline-month-navigation:disabled {
    opacity: 0.25;
    cursor: default;
}

.timeline-month-carousel {
    isolation: isolate;
}


.timeline-month-events {
    position: relative;
    z-index: 1;
}


.timeline-event-card {
    position: relative;
    z-index: 1;
}


.timeline-month-navigation {
    z-index: 20;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1100px) {

    .timeline-month-events {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media (max-width: 600px) {

    .timeline-month-carousel {
        padding: 0 36px;
    }


    .timeline-month-events {
        grid-template-columns: 1fr;
    }


    .timeline-month-navigation {
        width: 32px;
        height: 32px;

        font-size: 1.45rem;
    }

    .timeline-month-navigation-previous {
        left:-6px;
    }

    .timeline-month-navigation-next {
        right:-6px;
    }

}

/* ==========================================================
   TIMELINE — MONTH CAROUSEL ANIMATION
========================================================== */

.timeline-month-events {
    transition:
        opacity 150ms ease,
        transform 150ms ease;
}


/* Leaving toward the left */

.timeline-month-events.is-leaving-next {

    opacity:0;

    transform:
        translateX(-28px);

}


/* Leaving toward the right */

.timeline-month-events.is-leaving-previous {

    opacity:0;

    transform:
        translateX(28px);

}


/* New cards entering from the right */

.timeline-month-events.is-entering-next {

    animation:
        timeline-enter-next
        220ms ease both;

}


/* New cards entering from the left */

.timeline-month-events.is-entering-previous {

    animation:
        timeline-enter-previous
        220ms ease both;

}


@keyframes timeline-enter-next {

    from {

        opacity:0;

        transform:
            translateX(28px);

    }

    to {

        opacity:1;

        transform:
            translateX(0);

    }

}


@keyframes timeline-enter-previous {

    from {

        opacity:0;

        transform:
            translateX(-28px);

    }

    to {

        opacity:1;

        transform:
            translateX(0);

    }

}


/* ==========================================================
   TIMELINE — LARGE DESKTOP EXPANSION
   ==========================================================

   Timeline benefits from additional horizontal space on large
   screens, but the featured collaboration stays intentionally
   narrower than the yearly timeline below it.
*/

@media (min-width: 1800px) {

    .timeline-page {

        width:
            min(
                1900px,
                calc(100% - 96px)
            );

        padding-bottom:
            100px;

    }


    .timeline-page .timeline-heading {

        padding:
            92px 20px 44px;

    }


    .timeline-page .timeline-heading h1 {

        font-size:
            66px;

    }


    .timeline-page .timeline-heading p {

        max-width:
            760px;

        font-size:
            19px;

    }


    .timeline-page .timeline-featured-card {

        width:
            min(
                calc(100% - 80px),
                1450px
            );

    }


    .timeline-page .timeline-filters-divider {

        width:
            min(
                100%,
                1720px
            );

    }


    .timeline-page .timeline-filters-divider .divider-line {

        width:
            640px;

    }


    .timeline-page .timeline-filters {

        width:
            min(
                100%,
                1760px
            );

        gap:
            18px;

        margin:
            0 auto 58px;

    }


    .timeline-page .timeline-month {

        grid-template-columns:
            170px minmax(0, 1fr);

        gap:
            26px;

        padding:
            32px 0;

    }


    .timeline-page .timeline-month-carousel {

        padding:
            0 34px;

    }


    .timeline-page .timeline-month-events {

        gap:
            20px;

    }


    .timeline-page .timeline-year-heading {

        padding:
            24px 30px;

    }

}


@media (min-width: 2400px) {

    .timeline-page {

        width:
            min(
                2200px,
                calc(100% - 128px)
            );

    }


    .timeline-page .timeline-featured-card {

        width:
            min(
                calc(100% - 120px),
                1580px
            );

    }


    .timeline-page .timeline-filters-divider {

        width:
            min(
                100%,
                1940px
            );

    }


    .timeline-page .timeline-filters {

        width:
            min(
                100%,
                1980px
            );

    }


    .timeline-page .timeline-month {

        grid-template-columns:
            180px minmax(0, 1fr);

        gap:
            30px;

    }


    .timeline-page .timeline-month-events {

        gap:
            22px;

    }

}

/* ==========================================================
   TIMELINE — DARK MODE
   ========================================================== */

html[data-theme="dark"] .timeline-page {
    --card-shadow:
        0 16px 34px
        rgba(0,0,0,.20);
}

html[data-theme="dark"] .timeline-heading p,
html[data-theme="dark"] .timeline-filters-divider p {
    color: var(--text-muted);
}

html[data-theme="dark"] .timeline-event-card {
    background: var(--surface-secondary);
}

html[data-theme="dark"] .timeline-event-card:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] .timeline-month-navigation {
    background: var(--surface-secondary);
    border-color: rgba(118, 102, 232, .38);
}

html[data-theme="dark"] .timeline-month-navigation:hover:not(:disabled) {
    background: var(--surface-hover);
    border-color: rgba(157, 144, 255, .68);
}

html[data-theme="dark"] .timeline-month-navigation::before {
    border-color: #9b8cff;
}


/* ==========================================================
   TIMELINE — YEAR HEADING POLISH
   ========================================================== */

.timeline-year-heading > span:first-child,
.timeline-year-chevron {
    flex: 0 0 auto;
}


.timeline-year-line {
    display: block !important;
    width: 100% !important;
    min-width: 0;
    height: 0;
    margin-left: 2px;
    border-top:
        1px solid
        rgba(118, 102, 232, .32);
    background: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none;
    transition:
        border-color 180ms ease;
}

.timeline-year-heading:hover .timeline-year-line {
    border-top-color:
        rgba(118, 102, 232, .58);
}

html[data-theme="dark"] .timeline-year-line {
    border-top-color:
        rgba(157, 144, 255, .32);
}

html[data-theme="dark"] .timeline-year-heading:hover .timeline-year-line {
    border-top-color:
        rgba(157, 144, 255, .60);
}


.timeline-year-heading:focus-visible {
    outline: 2px solid rgba(77, 166, 255, .75);
    outline-offset: -2px;
    border-radius: 12px;
}




/*
==========================================================
TIMELINE CASCADE — VIEWPORT SAFE
==========================================================

Timeline places the talent cascade toward the right side of the filter row.
On desktop, open the first nested level to the left and the talent level
back toward the right. This prevents the third column from escaping the
viewport while keeping the normal mobile stacked behaviour untouched.
*/

@media (min-width: 701px) {

    .timeline-talent-filter > .cascade-menu {
        right: 0;
        left: auto;
    }

    .timeline-talent-filter > .cascade-menu
    > .cascade-item
    > .cascade-submenu {
        right: calc(100% + 6px);
        left: auto;
    }

    .timeline-talent-filter > .cascade-menu
    > .cascade-item
    > .cascade-submenu
    > .cascade-item
    > .cascade-submenu {
        right: auto;
        left: calc(100% + 6px);
    }

}