/*******************************************************

    polo.gr POLO's Timeline post (inc/functions/polo-timeline.php): film,
    the milestones on a vertical line, the museum card. Header, links,
    videos and page frame: css/polo.page.css.

 *******************************************************/



    .polo-timeline {
        --polo-timeline-line: 28%; /* where the line runs, from the left */
    }

    .polo-timeline__film {
        margin-bottom: clamp( 48px, 6vw, 96px );
    }



    /* Milestones */

    .polo-timeline-page .polo-timeline__list {
        position: relative;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* The line. */
    .polo-timeline__list::before {
        position: absolute;
        top: 10px;
        bottom: 0;
        left: var( --polo-timeline-line );
        width: 2px;
        margin-left: -1px;
        background: linear-gradient( to bottom, var( --polo-red ), var( --polo-red ) 85%, transparent );
        content: "";
    }

    .polo-timeline__item {
        position: relative;
        display: grid;
        grid-template-columns: var( --polo-timeline-line ) minmax( 0, 1fr );
        margin: 0;
        padding-bottom: clamp( 48px, 6vw, 88px );
    }

    /* The dot on the line. */
    .polo-timeline__item::before {
        position: absolute;
        top: 12px;
        left: var( --polo-timeline-line );
        z-index: 1;
        width: 16px;
        height: 16px;
        margin-left: -8px;
        border: 3px solid var( --polo-red );
        border-radius: 50%;
        background-color: var( --polo-white );
        content: "";
    }

    .polo-timeline__when {
        position: sticky;
        top: 120px;
        align-self: start;
        padding-right: clamp( 24px, 3vw, 48px );
        text-align: right;
    }

    .polo-timeline__year {
        display: block;
        color: var( --polo-black );
        font-family: var( --polo-font-zona );
        font-size: clamp( 40px, 5vw, 72px );
        font-weight: 800;
        line-height: 0.95;
    }

    .polo-timeline-page .polo-timeline__event {
        margin: 12px 0 0;
        color: #45494d;
        font-family: var( --polo-font-roboto );
        font-size: 15px;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 1.5;
        text-align: right;
        text-transform: none;
    }

    .polo-timeline__story {
        padding-left: clamp( 28px, 4vw, 64px );
    }

    .polo-timeline-page .polo-timeline__headline {
        margin: 4px 0 10px;
        color: var( --polo-black );
        font-family: var( --polo-font-gotham );
        font-size: clamp( 20px, 2vw, 26px );
        font-weight: 700;
        line-height: 1.25;
    }

    .polo-timeline-page .polo-timeline__text {
        max-width: 620px;
        margin: 0 0 22px;
        color: #2b2f33;
        font-size: 16px;
        line-height: 1.7;
    }

    .polo-timeline__photos {
        display: grid;
        gap: 12px;
        max-width: 640px;
    }

    .polo-timeline__photos--2 {
        grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
        align-items: center;
    }

    .polo-timeline-page .polo-timeline__photos img {
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
        border-radius: 8px;
        background-color: var( --polo-page-soft );
    }



    /* Museum */

    /* .polo-frame in the selector: beats Storefront's link styles (.hentry .entry-content a). */
    .polo-timeline-page .polo-frame .polo-timeline__museum {
        display: flex;
        align-items: center;
        gap: 24px;
        margin-top: clamp( 8px, 2vw, 24px );
        padding: 20px 28px 20px 20px;
        border-radius: 8px;
        background-color: var( --polo-black );
        color: var( --polo-white );
        text-decoration: none;
    }

    .polo-timeline-page .polo-timeline__museum img {
        flex: 0 0 auto;
        width: 96px;
        height: 96px;
        margin: 0;
        object-fit: contain;
        transition: transform 0.3s var( --polo-ease );
    }

    .polo-timeline__museum > span {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        gap: 4px;
    }

    .polo-timeline__museum-title {
        font-family: var( --polo-font-zona );
        font-size: clamp( 22px, 2.4vw, 32px );
        font-weight: 800;
        line-height: 1.1;
        text-transform: uppercase;
    }

    .polo-timeline__museum-text {
        color: #d6d8da;
        font-size: 15px;
    }

    .polo-timeline__museum .polo-page-icon {
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        transition: transform 0.2s var( --polo-ease );
    }

    .polo-timeline__museum:hover img {
        transform: rotate( -6deg ) scale( 1.05 );
    }

    .polo-timeline__museum:hover .polo-page-icon {
        transform: translateX( 4px );
    }

    .polo-timeline__museum:focus-visible {
        outline: 3px solid var( --polo-black );
        outline-offset: 3px;
    }



    .polo-timeline__more {
        margin-top: clamp( 48px, 6vw, 88px );
    }

    .polo-timeline-page .polo-timeline__heading {
        margin: 0 0 20px;
        color: var( --polo-black );
        font-family: var( --polo-font-gotham );
        font-size: clamp( 22px, 2vw, 28px );
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1.2;
        text-align: left;
        text-transform: none;
    }

    .polo-timeline-page .polo-timeline__more .polo-page-links {
        margin-top: 0;
    }



    /* Phones and small tablets: the line on the left, year above the story. */
    @media ( max-width: 900px ) {

        .polo-timeline {
            --polo-timeline-line: 9px;
        }

        .polo-timeline__item {
            grid-template-columns: minmax( 0, 1fr );
            padding: 0 0 48px 36px;
        }

        .polo-timeline__item::before {
            top: 8px;
        }

        .polo-timeline__when {
            position: static;
            padding: 0;
            text-align: left;
        }

        .polo-timeline-page .polo-timeline__event {
            margin-bottom: 16px;
            text-align: left;
        }

        .polo-timeline__story {
            padding-left: 0;
        }

        .polo-timeline-page .polo-frame .polo-timeline__museum {
            gap: 16px;
            padding: 16px;
        }

        .polo-timeline-page .polo-timeline__museum img {
            width: 72px;
            height: 72px;
        }

    }

    @media ( prefers-reduced-motion: reduce ) {

        .polo-timeline img,
        .polo-timeline .polo-page-icon {
            transition: none;
        }

    }