.hero-home {
}

.image-card-list--tips {
    --icon-fill: var(--colour-secondary-2);
}

.image-card-list--posts {
    --icon-fill: var(--colour-secondary-light);
}


/* ------------------------------------ */
.section--home-promo {
    background-color: var(--colour-secondary-alt-8);
}

.hero.hero-promo {
    background-image: url(/img/home-promo-chr.webp);
    height: 28.125vw;
    background-color: #fff;
    color: #2D3233;
    margin: 0 auto;
    max-width: 200rem;
    max-height: 28rem;
    box-shadow: var(--elevation-z20);
    position: relative;
    min-height: 24rem;
    align-items: start;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.hero.hero-promo::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.5rem;
    background-color: var(--colour-darken-66);
}

.hero-promo--link {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}


.hero-promo--heading {
    display: flex;
    flex-direction: column;
    gap: 0rem;
}

.hero-promo--header {
    --text-wght: var(--font-weight-light);
    font-family: var(--font-body);
    font-weight: var(--font-weight-light);
    font-size: var(--fs-1-rem);
    line-height: 1;
    text-transform: uppercase;
    font-feature-settings: var(--font-settings), "cpsp" 1;
    margin: 0.5em 0 0 0;
}

.hero-promo--heading .hero-promo--price {
    --text-wght: var(--font-weight-bold);
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--fs-1-rem);
    line-height: 1;
}

.hero-promo--offer-box {
    margin: 3rem 0 0 0;
    padding: 1.666667rem 1.25rem;
    display: inline-flex;
    flex-direction: column;
    background-color: rgba(227, 0, 4, 0.8);
    color: #fff;
    background-blend-mode: hard-light;
    transform: translateX(-1em);
}

.hero-promo--offer-box p {
    margin: 0;
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
}

.hero-promo--offer-box .hero-promo--price {
    --text-wght: var(--font-weight-bold);
    --text-opsz: 32;
    font-size: var(--fs-xl-rem);
    font-weight: var(--font-weight-bold);
}

.hero-promo-details {
    padding: 1.66rem 0 0 0;
    background-color: #32768C;
    background-image: linear-gradient(to bottom, #567F8D, 95%, #4d727f);
    color: #fff;
    position: relative;
}

.hero-promo-details--heading {
    margin-top: 0;
    margin-bottom: 0.5em;
    /* font-size: var(--fs-4-rem); */
}

.labelled-price--append .asterisk:last-child {
    margin-left: 0.1em;
}

.hero-promo-details--heading .asterisk:first-child {
    margin-right: 0;
    text-align: left;
    margin-left: -0.6em;
    width: 0.6em;
    font-size: 0.8em;
}



.hero-promo-details--finance {
    margin: 0 0 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    justify-content: stretch;
}

.hero-promo-details--finance ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    flex: 0 0 100%;
}

.hero-promo-details--finance li {
    margin: 0;
    padding: 0.5em 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
}

.hero-promo-details--finance li .item-value {
    margin-left: auto;
}

.hero-promo--features {
    --text-wght: 550;
    /* text-shadow: 0 0 3px #fff; */
    align-self: start;
    padding: 0 0.2em;
    /* background-color: var(--colour-lighten-5); */
    background-color: #fff;
}

.hero-promo-details--cta {
    margin: 2rem 0 0 0;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(rgba(0,0,0,0.15), 50%, rgba(0, 0, 0,0.1));
    position: relative;
}

@media screen and (min-width: 24rem) {
    .hero.hero-promo {
        /* background-position: top, 100% calc(50% + 17.5vw); */
        background-position: 100% 70%;
    }
}

@media screen and (min-width: 28rem) {
    .hero.hero-promo {
        /* background-position: top, 100% calc(50% + 7vw); */
    }
}

@media screen and (min-width: 35.5rem) {
    .hero.hero-promo {
        background-image: url(/img/gradient-curve.svg), url(https://cdn.imagin.studio/getImage?customer=cacars&make=toyota&modelFamily=c-hr&modelRange=c-hr&modelVariant=od&bodySize=5&modelYear=2024&paintId=pspc0077&angle=23&zoomType=fullscreen&surrounding=sur2&viewPoint=1&aspectRatio=2:1&overlayArea=left&width=1600);
        height: 28.125vw;
        background-color: #fff;
        color: #2D3233;
        margin: 0 auto;
        max-width: 200rem;
        max-height: 28rem;
        box-shadow: var(--elevation-z20);
        position: relative;
        min-height: 21rem;
        background-position: 50% -1rem, 50% 50%;
        background-size: contain, cover;
    }

    .hero-promo-details {
        /* border-top: 0.5rem solid #68cef4; */
    }

    .hero-promo-details--finance {
        flex-wrap: nowrap;
        gap: 1rem;
    }

    .hero-promo-details--finance ul {
        flex: 0 1 50%;
    }

    .hero-promo--offer-box {
        margin: 2rem 0 0 0;
        transform: none;
    }
}

@media screen and (min-width: 48rem) {
    .hero-promo-details--finance {
        gap: 2rem;
    }
}

@media screen and (min-width: 64rem) {
    .hero-promo--offer-box {
        margin: 3rem 0 0 0;
    }

    .hero.hero-promo {
        min-height: 26rem;
        background-position: 50% -2rem, 50% 50%;
        background-size: cover, cover;
    }
}

@media screen and (min-width: 80rem) {
    .hero.hero-promo {
        background-image: url(/img/gradient-curve.svg), url(https://cdn.imagin.studio/getImage?customer=cacars&make=toyota&modelFamily=c-hr&modelRange=c-hr&modelVariant=od&bodySize=5&modelYear=2024&paintId=pspc0077&angle=23&zoomType=fullscreen&surrounding=sur2&viewPoint=1&aspectRatio=32:9&overlayArea=left&width=1600);
        height: 28.125vw;
        background-color: #fff;
        color: #2D3233;
        margin: 0 auto;
        max-width: 200rem;
        max-height: 28rem;
        box-shadow: var(--elevation-z20);
        position: relative;
    }
}
/* ------------------------------------------------------------------------------------------------------------ */

.section--home-promos {
    background-color: #C4DB70;
    background-color: #B9D947;
}

.section--home-promos::after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1rem;
    height: 1rem;
    content: "";
    /* background: linear-gradient(to top, rgba(0,0,0,0), 90%, rgba(0, 0, 0, 0.3)); */
    background-color: rgba(0, 0, 0, 0.05);
    z-index: 3;
}

.section--home-promos-container {
    padding: 0;
}

.promos-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.promos-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: #fff;
    --item-padding: 1.5em;
}

.promos-item-header {
    padding: var(--item-padding);
    flex: 0 0 auto;
    position: relative;
    background-color: #fff;
    color: #2D3233;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    display: flex;
    flex-direction: column;
}

.promos-item-heading {
    /* margin-top: -0.667em; */
    /* transform: translateY(-0.667em);
            margin: 0 0 -0.667em 0; */
    margin: 0;
    --text-wght: var(--font-weight-bold);
    font-weight: var(--text-wght);
    font-size: calc(var(--fs-1-rem) * 0.88);
    line-height: 1;
}

.promos-item-car-price {
    display: flex;
    gap: 3em;
    justify-content: flex-start;
    margin-top: 1em;
    padding-top: 1em;
    border-top: 1px solid var(--colour-darken-1);
}

.promos-item-detail {
    padding: var(--item-padding);
    min-height: 26rem;
    flex: 1 0 auto;
}

.promos-item-img {
    /* width: calc(100% - var(--item-padding) * 2);
            position: absolute;
            left: var(--item-padding);
            top: 0; */
    max-width: 100%;
    margin-top: calc(-1 * var(--item-padding));
}

.promos-item .hero-promo--header {
    font-size: var(--fs-2-rem);
}

.promos-item .hero-promo-details--finance li {
    flex-direction: column;
    gap: 0;
}

.promos-item .hero-promo-details--finance li .item-value {
    --text-wght: var(--font-weight-bold);
    font-weight: var(--text-wght);
    margin: 0;
}

table.promos-item-detail--finance-table {
}

table.promos-item-detail--finance-table tbody > tr > td:first-child {
    padding-left: 0;
}

table.promos-item-detail--finance-table tbody > tr > td + td {
    padding-right: 0;
}

.promos-item .hero-promo--offer-box {
    position: absolute;
    top: 9rem;
    left: 0;
}

.promos-item .hero-promo--price {
    --text-wght: var(--font-weight-bold);
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--fs-1-rem);
    line-height: 1;
}

.promos-item--voucher .promos-item-header {
    @* background-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, 80%, rgba(0,0,0,0.66)), url(/img/voucher.webp);
    *@ background-image: url(/img/voucher-grad.webp);
    color: #fff;
}

.promos-item--voucher .promos-item-detail {
    background: linear-gradient(to bottom, #E6FFF6, #D8EBCC);
    color: #2D3233;
    display: flex;
    flex-direction: column;
}

.promos-item--car .promos-item-detail {
    background-color: var(--colour-darken-05);
    color: var(--colour-secondary-alt-01);
}

.promos-item--voucher .promos-item-heading {
    margin-top: auto;
    color: #fff;
    line-height: 1;
    margin-bottom: 0;
}

.voucher-heading {
    font-size: var(--fs-1-rem);
    --text-wght: var(--font-weight-semibold);
    line-height: 1.1;
    font-weight: var(--text-wght);
}

@media screen and (min-width: 48rem) {
    .section--home-promos {
        padding: 1.5rem;
    }

    .promos-wrapper {
        display: flex;
        flex-direction: row;
        gap: 1.5rem;
        justify-content: stretch;
        align-items: stretch;
        flex-wrap: wrap;
    }

    .promos-item {
        flex-direction: row;
        flex: 0 0 100%;
        /* border: 1rem solid #fff;
                border-radius: var(--border-radius-5); */
        box-shadow: var(--elevation-z3);
        /* --item-padding: 1em; */
    }

    .promos-item .hero-promo--offer-box {
        top: 13rem;
    }

    .promos-item-header {
        flex: 0 0 50%;
        /* padding: 1rem; */
        /* border-top-left-radius: var(--border-radius-4);
                border-top-right-radius: var(--border-radius-4); */
    }

    .promos-item-detail {
        flex: 0 0 50%;
        /* border-bottom-left-radius: var(--border-radius-4);
                border-bottom-right-radius: var(--border-radius-4); */
    }

    .promos-item--voucher .promos-item-header {
        @* background-image: linear-gradient(to top, rgba(0,0,0,0) 50%, 80%, rgba(0,0,0,0.66)), url(/img/voucher.webp);
        *@
    }

    .promos-item--voucher .promos-item-heading {
        margin-top: 1rem;
    }
}

@media screen and (min-width: 64rem) {
    .section--home-promos {
        padding: 2rem;
    }

    .promos-wrapper {
        flex-wrap: nowrap;
    }

    .promos-item {
        flex-direction: column;
        flex: 0 1 50%;
        --item-padding: 1.5em;
    }

    .promos-item-header {
        /* padding: 1.5rem; */
        /* height: 32rem; */
        flex: 0 0 auto;
    }

    .promos-item-detail {
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: start;
    }

    .voucher-heading {
        font-size: calc(var(--fs-1-rem)* 0.618);
    }

    .promos-item--voucher .promos-item-header {
        @* background-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, 80%, rgba(0,0,0,0.66)), url(/img/voucher.webp);
        *@
    }

    .promos-item--voucher .promos-item-heading {
        margin-top: auto;
    }
}

@media screen and (width < 48rem) {
    .promos-wrapper {
        /* flex-direction: column-reverse; */
        gap: 0;
    }

    .promos-item {
        border-bottom: 0.2rem solid var(--colour-secondary-alt-8);
    }

    .promos-item-header {
        /* height: 22rem; */
    }
}

}

@media screen and (width < 64rem) {
    .promos-item--voucher h2 {
        font-size: var(--fs-xxl-rem);
        line-height: 1.1;
    }
}

@media screen and (min-width: 48rem) and (width < 64em) {
    .promos-item-img {
        margin-top: 15%;
    }
}

@media screen and (min-width: 35.5em) and (width < 64em) {
    .promos-item-heading {
        font-size: calc(var(--fs-1-rem) * 1.2);
    }
}

/* ------------------------------------------------------------------------------------------------------------ */

.hero.hero-sale {
    flex-flow: column;
    align-items: stretch;
    background-color: #fff;
}

.hero-split-top {
    background-color: #40484d;
    color: #fff;
    clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 100%, 0 calc(100% - 3rem));
}

.hero-split-bottom {
    position: relative;
    padding: 0 0 4rem 0;
    background-color: #fff;
    color: var(--colour-body);
}

.hero-split-top .heading {
    --text-opsz: 32;
    --text-wght: 700;
    font-size: 1.5rem;
    line-height: 1.2;
}

.hero-split-bottom .heading {
    --text-opsz: 32;
    --text-wght: 500;
    font-size: 1.2rem;
    line-height: 1.2;
    margin-top: -1rem;
}

.hero-split-top .container {
    padding-top: 2rem;
    padding-bottom: 6rem;
    background-image: url(/img/special/bg-25-sale.webp);
    background-repeat: no-repeat;
    background-position: 50% 61%;
    background-size: cover;
}

.hero-split-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: start;
    position: relative;
}

.hero-cars {
    width: calc(100% + 4rem);
    height: auto;
    margin-top: -6rem;
    translate: -2.7rem 0;
}

@media screen and (min-width: 25rem) {
    .hero-cars {
        width: calc(100% + 4rem);
        height: auto;
        margin-top: -7rem;
        translate: -3rem 0;
    }
}

@media screen and (min-width: 35.5rem) {

    .hero-split-top .container {
        padding-top: 2rem;
        padding-bottom: 10rem;
        background-image: url(/img/special/bg-25-sale.webp);
        background-repeat: no-repeat;
        background-position: 50% 61%;
        background-size: cover;
    }

    .hero-split-top .heading {
        --text-opsz: 32;
        --text-wght: 700;
        font-size: 2.4rem;
        line-height: 1.2;
    }

    .hero-split-bottom .heading {
        --text-opsz: 32;
        --text-wght: 500;
        font-size: 1.5rem;
        line-height: 1.2;
        margin-top: -3rem;
    }

    .hero-cars {
        width: 100%;
        height: auto;
        margin-top: -11rem;
        translate: none;
    }
}

@media screen and (min-width: 48rem) {

    .hero-split-top .heading {
        --text-opsz: 32;
        --text-wght: 700;
        /* font-size: 3rem; */
        line-height: 1.2;
    }

    .hero-split-bottom .heading {
        --text-opsz: 32;
        --text-wght: 500;
        font-size: 1.8rem;
        /* line-height: 1.2; */
        margin-top: -4rem;
    }

    .hero-split-top .container {
        /* padding-top: 4rem;
                padding-bottom: 10rem; */
        background-image: url(/img/special/bg-25-sale.webp);
        background-repeat: no-repeat;
        background-position: 50% 61%;
        background-size: cover;
    }
}

@media screen and (min-width: 54rem) {

    .hero-split-top .heading {
        --text-opsz: 32;
        --text-wght: 700;
        font-size: 3rem;
        line-height: 1.2;
    }

    .hero-split-bottom .heading {
        --text-opsz: 32;
        --text-wght: 500;
        font-size: 1.8rem;
        line-height: 1.2;
        /* margin-top: -1rem; */
    }
}

@media screen and (min-width: 64rem) {
    .hero-split-top {
        background-color: #40484d;
        color: #fff;
        clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 100%, 0 calc(100% - 5vw));
    }

    .hero-split-bottom {
        padding-top: 3rem;
    }

    .hero-split-top .container {
        padding-top: 1.8rem;
        padding-bottom: 11rem;
        background-image: url(/img/special/bg-25-sale.webp);
        background-repeat: no-repeat;
        background-position: 50% 61%;
        background-size: cover;
    }

    .hero-split-top .heading {
        --text-opsz: 32;
        --text-wght: 700;
        font-size: 3.5vw;
        line-height: 1.2;
        /* translate: 0 calc(10vw * 0.15); */
    }

    .hero-split-bottom .heading {
        --text-opsz: 32;
        --text-wght: 500;
        font-size: 2.5vw;
        line-height: 1.2;
        margin-top: -1rem;
    }

    .hero-cars {
        position: absolute;
        right: -1rem;
        bottom: calc(8rem - 7vw);
        width: 73vw;
        height: auto;
    }
}

@media screen and (min-width: 80rem) {
    .hero-split-top {
        clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 100%, 0 calc(100% - 4.5rem));
    }

    .hero-split-top .container {
        padding-top: 3rem;
        padding-bottom: 11rem;
        background-image: url(/img/special/bg-25-sale.webp);
        background-repeat: no-repeat;
        background-position: 50% 61%;
        background-size: cover;
    }

    .hero-split-top .heading {
        --text-opsz: 32;
        --text-wght: 700;
        font-size: 3rem;
        line-height: 1.2;
        translate: none;
    }

    .hero-split-bottom .heading {
        --text-opsz: 32;
        --text-wght: 500;
        font-size: 1.8rem;
        line-height: 1.2;
        margin-top: -3rem;
    }

    .hero-cars {
        position: absolute;
        right: -1rem;
        bottom: -0.6rem;
        width: 60rem;
        height: auto;
    }
}

@media screen and (min-width: 90rem) {
    .hero-cars {
        position: absolute;
        right: -1rem;
        bottom: -2remrem;
        width: 64rem;
        height: auto;
    }
}


/* ------------------------------------------------------------------------------------------------------------ */