// Variables
$cy-spacer: ocyannumber("row-spacer", "rem");
$cy-font-size: 1.25rem;
$button-wrapper-margin: 2rem;
$header-spacer: 0;
$easing-2: cubic-bezier(.19,.89,.25,1.03);

@if $header-background == $body-bg{
    $header-spacer: 0;
}@else{
    $header-spacer: $cy-spacer;
}

@import "coyote_sections";
@import "coyote/all/image_with_text";
@import "coyote/homepage/icon_with_text";
@import "coyote/homepage/logo_slider";


@keyframes fade-up{
    from{ transform: translateY(30px); opacity: 0;}
    to{ transform: translateY(0); opacity: 1;}
}
@keyframes fade-in{
    from{ opacity: 0;}
    to{ opacity: 1;}
}
@keyframes overlay{
    from{ transform: scale(1.2); opacity: 0;}
    to{ transform: translateY(1); opacity: 1;}
}

.badge{
    border-radius: 30px !important;
}

.coyote-block-wrapper{
    padding-top: ($cy-spacer * 3);
    padding-bottom: ($cy-spacer * 3);
    @include media-breakpoint-down(xl){
        padding-top: $cy-spacer;
        padding-bottom: $cy-spacer;
    }
}

.tablet-container-fluid{
    @include media-breakpoint-down(xl){
        max-width: unset;
        .css-slider{
            margin-right: calc(var(--bs-gutter-x, .5rem) * -1);
            margin-left: calc(var(--bs-gutter-x, .5rem) * -1);
            padding-left: var(--bs-gutter-x, .5rem);
        }
    }
}

.badge{
    font-weight: 400 !important;
}

.carbasa-icons{
    .css-slider{
        @include media-breakpoint-down(xl){
            & > div{
                width: 60% !important;
                min-width: unset !important;
            }
            display: flex !important;
            flex-wrap: nowrap !important;
        }
    }
    .icon-outer{
        .icons-wrapper{
            font-size: 3rem;
            position: relative;
            display: block;
            z-index: 3;
            i{
                &:nth-child(1){
                    opacity: .05;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-70%, -70%);
                    z-index: -1;
                }
            }
        }
    }
}

.container-fluid-mobile{
    @include media-breakpoint-down(xl){
        margin: unset;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        .row{
            margin-left: 0 !important;
            margin-right: 0 !important;
        }
    }
}

.image_with_text{
    img{
        border-radius: $border-radius-lg;
    }
    .layout-lead{
        .counter{
            h2, .h2{
                font-weight: $headings-font-weight;
                font-size: 2.5rem;
                margin-bottom: 0;
            }
            p{
                font-weight: 400;
            }
        }
    }
}

@mixin btn-go{
    i{
        display: inline-block;
        transform: rotate(-45deg);
        margin-left: 0.25rem;
    }
}
.banner-block{
    margin-bottom: 4rem;
    margin-top: 4rem;
    .banner{
        color: white;
        text-decoration: unset;
        display: block;
        position: relative;
        width: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        min-height: 650px;
        z-index: 3;
        overflow: hidden;
        cursor: pointer;
        @include media-breakpoint-down(lg){
            min-height: 400px;
        }
        .background-image{
            position: absolute;
            top: 0%;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
            -webkit-filter: brightness(.85) contrast(.85);
            filter: brightness(.85) contrast(.85);
            transition: 1s $easing-2 filter, 3s $easing-2 transform;
        }
        .banner-info{
            padding: 1rem 5rem;
            padding-bottom: 2rem;
            text-align: center;
        }
        &:hover{
            .background-image{
                -webkit-filter: brightness(.65) contrast(1);
                filter: brightness(.65) contrast(1);
                -webkit-transform: scale(1.25);
                transform: scale(1.25);
            }
        }
    }
    .row{
        & > div{
            &:nth-child(1) .banner{
                @include media-breakpoint-up(lg){
                    border-top-left-radius: $border-radius;
                    border-bottom-left-radius: $border-radius;
                }
                @include media-breakpoint-down(lg){
                    border-top-left-radius: $border-radius;
                    border-top-right-radius: $border-radius;
                }
            }
            &:nth-child(2) .banner{
                @include media-breakpoint-up(lg){
                    border-top-right-radius: $border-radius;
                    border-bottom-right-radius: $border-radius;
                }
                @include media-breakpoint-down(lg){
                    border-bottom-left-radius: $border-radius;
                    border-bottom-right-radius: $border-radius;
                }
            }
        }
    }
}
.hero{
    &.image-hero, &.video.layout1{
        position: relative;
        min-height: 60vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        z-index: 1;
        overflow: hidden;
        @if $border-radius-lg > .5rem{
            margin-top: $cy-spacer / 2;
        }
        @include media-breakpoint-up(xl){
            padding-left: 2rem;
            padding-right: 2rem;
        }
        .btn{
            @include btn-go;
        }
        .image-wrapper{
            position: absolute;
            top: 0%;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -1;
            @include media-breakpoint-down(lg){
                img{
                    filter: brightness(.5) contrast(85%);
                }
            }
            &.has-overlay{
                img{
                    filter: grayscale(1);
                }
            }
            svg{
                position: absolute;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                width: 100%;
                height: 100%;
                padding-top: 2rem;
                opacity: .1;
                z-index: 2;
            }
            .background-image{
                object-fit: cover;
                z-index: 1;
                width: 100%;
                height: 120%;
                top: -10%;
                left: 0;
                position: absolute;
            }
            @include media-breakpoint-up(xl){
                @if $border-radius-lg > .5rem{
                    max-width: calc(100% - 4rem);
                }
                border-radius: $border-radius-lg;
            }
        }
        .container{
            display: flex;
            flex-direction: row;
            align-items: flex-end;
            justify-content: flex-end;
            padding-bottom: 4rem;
            padding-top: 4rem;
            &.text-center{
                @include media-breakpoint-up(xl){
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    row-gap: 2rem;
                    .hero-lead{
                        margin-right: unset;
                    }
                }
                @include media-breakpoint-down(xl){
                    text-align: left;
                }
            }
            @include media-breakpoint-down(xl){
                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-start;
            }
            .hero-lead{
                display: block;
                width: 100%;
                max-width: 600px;
                margin-right: auto;
                .rich-text{
                    *:last-child{
                        margin-bottom: 0;
                    }
                }
                *{
                    color: white;
                }
            }
            .buttons-wrapper{
                flex-wrap: wrap;
                @include media-breakpoint-down(xl){
                    margin-top: $button-wrapper-margin;
                }
            }
        }
    }

    &.content{
        &.layout1{
            position: relative;
            background: lighten($primary, 45%);
            z-index: 1;
            padding-top: 6rem;
            padding-bottom: 6rem;
            .outer-images{
                height: 100%;
                a{
                    color: black;
                    text-decoration: unset;
                    i{
                        color: var(--bs-primary);
                    }
                }
                & > div{
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-end;
                    .h-80{
                        height: 80%;
                        margin-top: auto;
                    }
                    picture{
                        flex: 1;
                        display: flex;
                        img{
                            flex: 1;
                            object-fit: cover;
                            animation: 6s hoverImage ease-in-out infinite;
                            border-radius: $border-radius;
                        }
                    }
                    &:nth-child(2){
                        img{
                            animation-delay: -1.2s;
                        }
                    }
                }
            }
        }
        &.layout2{
            position: relative;
            min-height: 90vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            @include media-breakpoint-down(xl){
                display: flex;
                flex-direction: row;
                column-gap: 0;
            }
            .btn{
                @include btn-go;
            }
            & > .container{
                @include media-breakpoint-down(xl){
                    order: 1;
                }
            }
            .image-wrapper{
                z-index: 3;
                pointer-events: none;
                object-fit: cover;
                @include media-breakpoint-down(xl){
                    order: 4;
                    width: 10px;
                    height: 150px;
                    flex-grow: 1;
                }
                @include media-breakpoint-up(xl){
                    position: absolute;
                }
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: $border-radius;
                    transition: .1s ease;
                }
                @include media-breakpoint-up(xl){
                    &.primary{
                        bottom: 5rem;
                        left: 0;
                        height: 80%;
                        width: 25vw;
                        img{
                            border-top-left-radius: 0;
                            border-bottom-left-radius: 0;
                        }
                    }
                    &.secondary{
                        right: calc(100% - 32vw);
                        top: 40%;
                        transform: translateY(-50%);
                        height: 70%;
                        width: 25vw;
                    }
                    &.tertiary{
                        top: 50%;
                        transform: translateY(-50%);
                        width: 40vw;
                        height: 40vw;
                        left: calc(100% - 20vw);
                    }
                }
            }
        }
        @include media-breakpoint-down(xl){
            display: flex;
            flex-wrap: wrap;
            column-gap: 1.5rem;
            justify-content: center;
        }
        .rich-text{
            *{
                color: color-contrast($light);
            }
        }
        .container{
            @include media-breakpoint-down(xl){
                display: flex;
            }
        }
        .hero-lead{
            position: relative;
            z-index: 3;
            display: flex;
            flex-direction: column;
            justify-content: center;
            @include media-breakpoint-down(xl){
                min-width: 100%;
                padding-left: 0;
                padding-top: 0;
                padding-bottom: 0;
                padding: 2rem 1rem;
            }
            .hero-lead-inner{
                max-width: 600px;
            }
        }
        .buttons-wrapper{
            flex-wrap: wrap;
            margin-top: $button-wrapper-margin;
        }
    }

    &.video{
        &.layout1{
            overflow: hidden;
            position: relative;
            margin: 0 auto;
            @include media-breakpoint-up(xl){
                @if $border-radius > 0{
                    max-width: calc(100% - #{$cy-spacer * 2});
                    margin-top: $header-spacer;
                    @if $border-radius > 1{
                        border-radius: $border-radius;
                    }@else{
                        border-radius: $border-radius-lg;
                    }
                }
            }
            &.has-overlay{
                .overlay{
                    opacity: .35;
                }
            }
            svg{
                position: absolute;
                top: 50%;
                left: 50%;
                z-index: 3;
                opacity: .1;
                transform: translateX(-50%) translateY(-50%);
                min-width: 1600px;
                width: 100%;
                pointer-events: none;
            }
            iframe{
                position: absolute;
                width: 130%;
                left: 50%;
                height: 130%;
                top: 50%;
                transform: translate(-50%, -50%) scale(1.5);
                object-fit: cover;
                z-index: -1;
                animation: fade-in 1s ease both;
                animation-delay: 1s;
                pointer-events: none;
                @media screen and (max-width: 991px){
                    height: 300vw;
                    width: 400vw;
                }
            }
            .container{
                position: relative;
                z-index: 3;
            }
        }
        &.layout2{
            .hero-lead{
                padding-right: 5rem;
                .rich-text{
                    *{
                        color: $body-color;
                    }
                }
            }
            & > div:first-child{
                position: absolute;
                top: 0;
                right: 0;
                width: 50vw;
                height: 100%;
                overflow: hidden;
                iframe{
                    position: absolute;
                    top: -8%;
                    left: -30%;
                    height: 116%;
                    width: 160%;
                    pointer-events: none;
                    user-select: none;
                }
            }
        }
    }
    .overlay{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: $gray-900;
        opacity: .85;
        z-index: 1;
    }
}

.icons_with_text{
    .css-slider{
        @include media-breakpoint-down(xl){
            flex-wrap: nowrap;
        }
    }
    .container{
        @extend .tablet-container-fluid;
        .col-xl-4{
            max-width: 720px;
            margin: 0 auto;
        }
    }
    &.layout3 {
        padding-top: 4rem;
        .row .row{
            @include media-breakpoint-up(xl){
                display: grid;
                gap: 30px;
                margin-left: 0;
                margin-right: 0;
                grid-template:
                    "a b c" 1fr
                    "a d d" 1fr
                    "e e f" 1fr
                    "g h i" 1fr
                    "j j i" 1fr;
                &[data-count="2"]{
                    grid-template:
                    "a a b b" 1fr;
                }
                &[data-count="3"]{
                    grid-template:
                    "a c c" 1fr
                    "b c c" 1fr;
                }
                &[data-count="4"]{
                    grid-template:
                    "a b c" 1fr
                    "a d d" 1fr;
                }
                &[data-count="5"]{
                    grid-template:
                    "a b c" 1fr
                    "a d d" 1fr
                    "e e e" 1fr;
                }
                &[data-count="6"]{
                    grid-template:
                    "a b c" 1fr
                    "a d d" 1fr
                    "e e f" 1fr;
                }
                grid-auto-flow: dense;
                grid-template-rows: auto;
                $listtemplates:a, b, c, d, e, f, g, h, i, j;
                @for $i from 1 through length($listtemplates) {
                    $c: nth($listtemplates, $i);
                    & > div{
                        &:nth-child(#{$i}){
                            grid-area: $c;
                        }
                    }
                }
                & > div{
                    padding: 0;
                    margin: 0;
                    overflow: hidden;
                }
                div{
                    width: 100% !important;
                }
            }
            .icon-block{
                border-radius: $border-radius !important;
            }
        }
        .icon-block{
            padding-bottom: 1rem !important;
            padding-top: 15rem !important;
            text-align: left !important;
            justify-content: flex-end !important;
            border-radius: 0 !important;
            .info-wrapper{
                color: black !important;
                h4, p{ color: black !important; margin-bottom: 0; font-size: 1rem;}
                position: absolute;
                bottom: 1rem;
                left: 50%;
                transform: translateX(-50%);
                width: auto;
                display: inline-block;
                z-index: 3;
                padding: .25rem 1rem;
                background: white;
                color: black;
                border-radius: $border-radius;
                transition: .75s $easing-2;
                font-size: 1rem;
                text-align: center;
                @include media-breakpoint-down(xl){
                    width: calc(100% - 2rem) !important;
                }
            }
            img{
                border-radius: 0;
                transition: 2.5s $easing-2;
                filter: unset !important;
            }
            span.d-block.mt-auto.fw-bold{
                display: none;
            }
            &:hover{
                @include media-breakpoint-up(xl){
                    img{
                        transform: scale(1.25);
                    }
                }
            }
            &:hover{
                @include media-breakpoint-up(xl){
                    img{
                        transform: scale(1.25);
                    }
                    .info-wrapper{
                        transform: translateX(-50%) translateY(-50%) scale(1.2);
                    }
                }
            }
        }
        .col-lg-4{
            display: none;
        }
        .col-lg-7{
            width: 100%;
        }
    }
    &.layout1 {
        .col-lg-7{
            .icon-block{
                padding-bottom: 1rem !important;
                padding-top: 15rem !important;
                text-align: left !important;
                justify-content: flex-end !important;
                position: relative;
                overflow: hidden;
                h4{
                    color: white !important;
                }
                img{
                    border-radius: 0;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: -1;
                    object-fit: cover;
                    filter: brightness(0.75);
                    transition: 1s $easing-2;
                    margin-top: 0 !important;
                }
                span.d-block.mt-auto.fw-bold{
                    display: none;
                }
                &:hover{
                    img{
                        filter: brightness(0.5);
                        transform: scale(1.05);
                    }
                    p{
                        color: white !important;
                    }
                }
            }
        }
        .col-lg-4{
            @include media-breakpoint-up(xl){
                position: sticky;
                top: 2rem;
                height: 100%;
            }
        }
    }
    &.background_body{
        --icon-block-background: #{$gray-900} !important;
        --icon-block-color-hover: #{color-contrast($gray-900)} !important;
        --icon-block-color: #{color-contrast($gray-900)} !important;
        --icon-block-background-hover: #{lighten($gray-900, 5%)} !important;
    }
}

.coyote-wrapper{
    .centertext{
        position: relative;
        overflow: hidden;
        z-index: 3;
        svg{
            padding-top: 2rem;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: .1;
        }
    }
}

.hero-go-down{
    width: 85px;
    height: 85px;
    transform: translateY(-50%);
    display: flex;
    border-radius: 100%;
    align-items: center;
    justify-content: center;
    background: $body-bg;
    color: color-contrast($body-bg);
    text-decoration: unset;
    position: relative;
    z-index: 3;
    transition: .3s ease;
    box-shadow: 0 0 20px -20px $body-bg;
    &:hover, &:active{
        color: color-contrast($body-bg);
    }
    &:hover{
        box-shadow: 0 0 60px 0px $body-bg;
    }
    i{
        transform: rotate(90deg);
        font-size: 2rem;
    }
}

.block-centered_content{
    .buttons-wrapper{
        display: flex;
        margin-bottom: 0 !important;
        margin-top: 1rem;
    }
}

section.tabs{
    .tab-content{
        .image-wrapper{
            min-height: 300px;
            img{
                height: 300px;
                object-fit: cover;
                border-radius: $border-radius-lg;
            }
        }
    }
    .nav-pills{
        position: relative;
        padding: 0;
        &:before{
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            height: calc(100% - 1rem);
            border-left: 2px solid var(--counter-color);
            opacity: 1;
        }
        button{
            background: transparent !important;
            color: var(--counter-color) !important;
            font-weight: $font-weight-bold;
            padding: .5rem 2rem;
            position: relative;
            &:before{
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 0px;
                height: 100%;
                background: $primary;
            }
            &.active{
                &:before{
                    width: 2px;
                }
            }
            @extend .h5;
        }
    }
}

.carbasa_cta_footer{
    background: $footer-bg;
    color: color-contrast($footer-bg);
}

.carbasa-quotes{
    position: relative;
    .side-image{
        @include media-breakpoint-up(xl){
            position: absolute;
            top: 0;
            left: 0;
            width: calc(50vw - 2rem);
            height: 100%;
            z-index: 3;
            object-fit: cover;
        }
        @include media-breakpoint-down(xl){
            max-width: 100%;
            height: auto;
            max-height: 200px;
            object-fit: cover;
            border-radius: $border-radius;
        }
    }
    .tns-outer{
        position: relative;
        .tns-controls{
            position: absolute;
            bottom: 0;
            right: 0;
            z-index: 3;
            display: flex;
            gap: 1rem;
            button{
                border: 0;
                background: rgba(255,255,255,.8);
                color: black;
                width: 35px;
                height: 35px;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0;
                border-radius: 100%;
            }
        }
    }
    .quotes-row{
        row-gap: 1rem;
        @extend .css-slider;
    }
    .quotes-inner{
        border-radius: $border-radius;
        height: 100%;
        .stars {
            font-size: 24px;
            color: #ccc;
            i {
                color: #ccc;
            }
            &.stars-1 i:nth-child(-n+1),
            &.stars-2 i:nth-child(-n+2),
            &.stars-3 i:nth-child(-n+3),
            &.stars-4 i:nth-child(-n+4),
            &.stars-5 i:nth-child(-n+5) {
                color: #f7a444;
            }
        }
        .person-image{
            width: 50px;
            height: 50px;
            border-radius: 100%;
            object-fit: cover;
        }
        h5{
            font-size: 1rem;
        }
    }
}

section.textlist{
    .rich-text{
        p{
            &:last-child{
                margin-bottom: 0;
            }
        }
    }
}

.accordion-block-wrapper{
    .accordion{
        border-radius: 0;
        .accordion-item{
            border: 0;
            background: transparent;
            border-bottom: 1px solid #b3b3b3;
            border-radius: 0;
        }
        .accordion-header{
            cursor: pointer;
            text-align: left;
            &:not(.collapsed){
                i{
                    &:before{
                        content: '\f039';
                    }
                }
            }
        }
    }
}


@keyframes hoverImage {
    0% {
        transform: translatey(0px);
    }
    40%, 60% {
        transform: translatey(-20px);
    }
    100% {
        transform: translatey(0px);
    }
}

.css-slider{
    @include media-breakpoint-down(xl){
        @include css-slider(75%, 1rem);
    }
}