Collaboration Carousel

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/mixins/breakpoints";

.collaboration-carousel-wrap {
    padding-top: 5rem;
    margin-bottom: 7.5rem; // due to controls

    @include media-breakpoint-down(md) {
        padding-top: 3rem;
        margin-bottom: 5rem;
    }
    &.has-bg {
        position: relative;

        &:after {
            content: "";
            position: absolute;
            z-index: -1;
            left: 0;
            top: 0;
            height: 100%;
            max-height: 0;
            width: 100%;
            background: var(--lighter-colour);
            transition: max-height 0.7s cubic-bezier(0.62, 0.38, 0.17, 0.85);
            transition-delay: 0.3s;
        }
        &.aos-animate {
            &:after {
                max-height: 36rem;
    
                @include media-breakpoint-down(md) {
                    max-height: 26rem;
                }
                @include media-breakpoint-down(sm) {
                    max-height: 20rem;
                }
            }
        }
    }
    h2 {
        margin-bottom: 4rem;

        @include media-breakpoint-down(md) {
            margin-bottom: 2rem;
        }
    }
    .buttons {
        margin-bottom: 3.5rem;

        @include media-breakpoint-down(md) {
            margin-bottom: 1rem;
        }
    }
    .collaboration-carousel-control {
        position: absolute;
        top: 50%;

        @include media-breakpoint-down(md) {
            img {
                width: 24px;
                height: 24px;
            }
        }
    }
    .collaboration-carousel-prev {
        transform: rotate(-90deg) translateX(50%);
        left: -4rem;

        @media (max-width: 1700px) {
            left: -2rem;
        }
        @media (max-width: 1500px) {
            left: calc(50% - 3rem);
            top: auto;
            bottom: -3rem;
        }
    }
    .collaboration-carousel-next {
        transform: rotate(90deg) translateX(-50%);
        right: -4rem;

        @media (max-width: 1700px) {
            right: -2rem;
        }
        @media (max-width: 1500px) {
            right: calc(50% - 3rem);
            top: auto;
            bottom: -3rem;
        }
    }
    .collaboration-carousel {
        position: relative;

        &.count-1 {
            .collaboration-carousel-control {
                display: none;
            }
        }
        &.count-2 {
            display: flex;
            justify-content: center;

            .collaboration-carousel-control {
                @media (min-width: 641px){
                    display: none;
                }
            }
        }
        &.count-3 {
            .collaboration-carousel-control {
                display: none;

                @media (max-width: 1022px){
                    display: block;
                }
            }
        }
    }
}

.js-collaboration-carousel,
.js-collaboration-carousel-mob {
    display: flex;
}

.js-collaboration-carousel-mob {
    width: 100%;
}

.collaboration-card {
    margin: 0 1.5rem;
    text-align: center;
    display: none;
    transition: transform 0.3s ease-in-out;

    &:nth-child(1),
    &:nth-child(2),
    &:nth-child(3) {
        display: block;
    }
    img {
        margin: 0 auto 1.25rem auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }
    p {
        font-size: 1rem;
        font-weight: bold;
        color: $body;
        transition: color 0.3s ease-in-out;
    }
    &:hover {
        transform: translateY(-0.25rem);

        p {
            color: $red;
        }
    }
}

jQuery(function($){
    
    $('.js-collaboration-carousel').slick({
        speed: 500,
        autoplay: false,
        centerMode: true,
        slidesToScroll: 1,
        slidesToShow: 3,
        infinite: true,
        arrows: false,
        buttons: false,
        pauseOnHover: false,
        rows: 0,
        centerPadding: '0px',
        responsive: [
            {
                breakpoint: 1023,
                settings: {
                    slidesToShow: 2,
                }
            },
            {
                breakpoint: 640,
                settings: {
                    slidesToShow: 1,
                }
            }
        ]
    });

    $('.js-collaboration-carousel-next').click(function(e) {
        e.preventDefault();
        $(this).parents('.collaboration-carousel').find('.js-collaboration-carousel, .js-collaboration-carousel-mob').slick('slickNext');
    });
    $('.js-collaboration-carousel-prev').click(function(e) {
        e.preventDefault();
        $(this).parents('.collaboration-carousel').find('.js-collaboration-carousel, .js-collaboration-carousel-mob').slick('slickPrev');
    });

    var $mobCollaboration;
    $mobCollaboration = false;
    function mobCollaborationSlider(){
        if($(window).width() <= 640){
            setTimeout(function(){
                if(!$mobCollaboration){
                    $('.js-collaboration-carousel-mob').slick({
                        speed: 400,
                        autoplay: false,
                        fade: false,
                        cssEase: 'cubic-bezier(0, 0, 0.04, 0.98)',
                        slidesToShow: 1,
                        draggable: true,
                        centerMode: true,
                        infinite: true,
                        arrows: false,
                        buttons: false,
                        pauseOnHover: false,
                        rows: 0,
                        dots: false,
                        centerPadding: 0
                    });
                    $mobCollaboration = true;
                }
            }, 500);
        } else if($(window).width() > 640){
            if($mobCollaboration){
                $('.js-collaboration-carousel-mob').slick('unslick');
                $mobCollaboration = false;
            }
        }
    }

    $(document).ready(function(){
        mobCollaborationSlider();
    });
    $(window).on('resize', function(){
        mobCollaborationSlider();
    });

});