/*------------------------------------------------------------------
timeline.css
Last edited: 9/18/25
[Table of contents]

100. MEDIA QUERIES
    100a. EXTRA SMALL DEVICES (phones 576px and up)
    100b. SMALL DEVICES (tablets, 768px and up)
    100c. MEDIUM DEVICES (desktops, 992px and up)
    100d. LARGE DEVICES (large desktops, 1200px and up)
    100e. EXTRA LARGE DEVICES (large desktops, 1450px and up)

[Notes]
-------------------------------------------------------------------*/
.band-timeline {
    overflow-x: hidden;
    position: relative;
}
.band-timeline .item-wrapper {
    background-color: var(--theme-color-light);
    margin: 30px auto 40px;
    max-width: 650px;
}
.band-timeline figure {
    position: relative;
}
.band-timeline figcaption {
    font-size: 0.75em;
    padding: 5px 20px;
    position: relative;
}
.band-timeline figcaption:after {
    background-color: var(--theme-color-sky);
    bottom: -10px;
    content: '';
    height: 2px;
    left: 20px;
    position: absolute;
    width: calc(100% - 40px);
}
.band-timeline .card-body {
    padding: 30px 20px;
    position: relative;
}
.band-timeline .years {
    background-color: var(--theme-color-orange);
    color: var(--theme-color-light);
    font-weight: 700;
    margin: 0 0 25px;
    padding: 15px 5px;
    text-align: center;
    width: 170px;
}
.band-timeline .card-body h3 {
    font-weight: 700;
    margin-bottom: 15px;
}
/* collateral card */
.band-timeline .item-wrapper.collateral {
    background-color: var(--theme-color-blue);
    color: var(--theme-color-light);
    display: flex;
    flex-direction: column;
    padding: 40px;
}
.band-timeline .item-wrapper.collateral figure img {
    display: block;
    margin: 0 auto 20px;
    width: auto;
}
.band-timeline .item-wrapper.collateral .card-body {
    display: flex;
    flex-direction: column-reverse;
    margin: 0 auto;
    max-width: 338px;
    padding: 0;
}
.band-timeline .item-wrapper.collateral .btn.years {
    background-color: var(--theme-color-lightblue);
}
.band-timeline .item-wrapper.collateral .btn.years:hover {
    background-color: transparent;
}
/*------------------------------------------------------------------
100. MEDIA QUERIES
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
100a. EXTRA SMALL DEVICES (phones 576px and up)
-------------------------------------------------------------------*/
@media (min-width: 576px) {
    
}
/*------------------------------------------------------------------
100b. SMALL DEVICES (tablets, 768px and up)
-------------------------------------------------------------------*/
@media (min-width: 768px) {
    .band-timeline .item-wrapper.collateral {
        flex-direction: row-reverse;
        padding: 0;
    }
    .band-timeline .item-wrapper.collateral .card-body,
    .band-timeline .item-wrapper.collateral figure {
        flex: 0 0 50%;
    }    
    .band-timeline .item-wrapper.collateral figure img {
        display: block;
        margin: 0;
        width: auto;
    }
    .band-timeline .item-wrapper.collateral .card-body {
        justify-content: start;
        margin: 0;
        max-width: none;
        padding: 30px 20px;
    }
}

/*------------------------------------------------------------------
100c. MEDIUM DEVICES (desktops, 992px and up)
-------------------------------------------------------------------*/
@media (min-width: 992px) {
    .band-timeline .item-wrapper {
        max-width: 500px;
    }
    .band-timeline .years {
        left: -232px;
        position: absolute;
        top: 50px;
    }
    .band-timeline .years::after {
        background-repeat: no-repeat;  
        content: '';
        display: block;
        height: 104px;
        position: absolute;
        right: -65px;
        top: -20px;
        width: 53px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='105' fill='none'%3E%3Cpath fill='%23fff' d='M0 52.5 53.25.971V104.03L0 52.5Z'/%3E%3C/svg%3E");
    }
    .band-timeline .years.right {
        left: auto;
        right: -232px;
    }
    .band-timeline .years.right::after {
        left: -65px;
        right: auto;
        transform: rotate(-180deg);
    }
        .band-timeline .item-wrapper.collateral {
        flex-direction: row-reverse;
        padding: 0;
    }
    .band-timeline .item-wrapper.collateral .card-body {
        flex-direction: column;
        padding: 25px 20px;
    }
    .band-timeline .item-wrapper.collateral .years::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='105' fill='none'%3E%3Cpath fill='%2300467F' d='M0 52.5 53.25.971V104.03L0 52.5Z'/%3E%3C/svg%3E");
    }
}

/*------------------------------------------------------------------
100d. LARGE DEVICES (large desktops, 1200px and up)
-------------------------------------------------------------------*/
@media (min-width: 1200px) {
	.band-timeline .item-wrapper {
        max-width: 650px;
    }
    .band-timeline .card-body {
        padding: 40px;
    }
    .band-timeline figcaption {
        padding: 5px 40px;
    }
    .band-timeline figcaption:after {
        left: 40px;
        width: calc(100% - 80px);
    }
    .band-timeline .years {
        left: -260px;
        width: 190px
    }
    .band-timeline .years::after {
        right: -72px;
    }
    .band-timeline .years.right {
        right: -260px;
    }
    .band-timeline .years.right::after {
        left: -72px;
    }
        .band-timeline .item-wrapper.collateral .card-body {
        padding: 40px;
    }
}

/*------------------------------------------------------------------
100e. EXTRA LARGE DEVICES (large desktops, 1450px and up)
-------------------------------------------------------------------*/
@media screen and (min-width: 1450px) {
   
}