Related Articles

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

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

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

        @include media-breakpoint-down(md) {
            margin-top: 0;
            padding-top: 3rem;
        }
        &: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: 32rem;
    
                @include media-breakpoint-down(md) {
                    max-height: 28rem;
                }
                @include media-breakpoint-down(sm) {
                    max-height: 22rem;
                }
            }
        }
    }
    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;
        }
    }
    .related-articles-carousel-control {
        position: absolute;
        top: 50%;

        @include media-breakpoint-down(md) {
            img {
                width: 24px;
                height: 24px;
            }
        }
    }
    .related-articles-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;
        }
    }
    .related-articles-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;
        }
    }
    .related-articles-carousel {
        position: relative;

        &.count-3 {
            .related-articles-carousel-control {
                display: none;

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

.js-related-articles-carousel {
    display: flex;
}

.related-articles-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-related-articles-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-related-articles-carousel-next').click(function(e) {
        e.preventDefault();
        $(this).parents('.related-articles-carousel').find('.js-related-articles-carousel').slick('slickNext');
    });
    $('.js-related-articles-carousel-prev').click(function(e) {
        e.preventDefault();
        $(this).parents('.related-articles-carousel').find('.js-related-articles-carousel').slick('slickPrev');
    });

});