Sectors Intro

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

.sectors-intro {
    margin-top: 7.5rem;
    margin-bottom: 7.5rem;

    @include media-breakpoint-down(sm) {
        margin-top: 4rem;
        margin-bottom: 4rem;
    }
    .sectors-intro-title {
        margin-bottom: 3rem;
    }
    ul {
        padding: 0;
        margin: 0 0 2rem 0;

        li {
            padding: 0;
            margin: 0 0 1.1875rem 0;
            list-style: none;
        }
    }
    .sectors-intro-right {
        display: flex;
        align-items: center;
    }
    .sectors-intro-content {
        padding-left: 3rem;

        @include media-breakpoint-down(md) {
            padding-left: 0;
        }
        p {
            font-size: 0.9375rem;
        }
    }
    .sectors-intro-control {
        color: $greyishbrown;
        font-size: 1.25rem;
        padding: 0;
        background: none;
        border: 0;
        text-align: left;
        min-width: auto;
        font-weight: normal;
        display: flex;
        align-items: center;

        .dot {
            display: block;
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 100%;
            margin-right: 1rem;
            background: #d8d8d8;
            transition: background-color 0.3s ease-in-out;
        }
        &:hover {
            color: $greyishbrown;
            font-weight: bold;

            .dot {
                background: $greyishbrown;
            }
        }
        &.active {
            color: $greyishbrown;
            font-weight: bold;

            .dot {
                background: $greyishbrown;
            }
        }
    }
    .sector-image {
        padding-right: 15rem;

        @include media-breakpoint-down(lg) {
            padding-right: 12rem;
        }
        @include media-breakpoint-down(sm) {
            padding-right: 8rem;
            margin-bottom: 3rem;
        }
        &.slick-active {
            .foreground-image {
                transform: translateY(-50%) translateX(0);
            }
        }
    }
    .foreground-image {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%) translateX(-1rem);
        width: 22.5rem;
        height: 22.5rem;
        transition: all 0.7s ease-in-out;
        transition-delay: 0.3s;

        @include media-breakpoint-down(lg) {
            width: 16rem;
            height: 16rem;
        }
        @include media-breakpoint-down(sm) {
            width: 12rem;
            height: 12rem;
        }
    }
}

jQuery(function($){

    $('.js-sectors-intro-carousel').slick({
        speed: 500,
        autoplay: true,
        autoplaySpeed: 2000,
        cssEase: 'ease-in-out',
        slidesToShow: 1,
        slidesToScroll: 1,
        infinite: true,
        fade: true,
        initialSlide: 1,
        arrows: false,
        buttons: false,
        pauseOnHover: false,
        rows: 0
    });

    $('.js-sectors-intro-carousel').on('beforeChange', function(event, slick, currentSlide, nextSlide){
        var slide = nextSlide;
        $('.js-sectors-intro-control').removeClass('active');
        $('.js-sectors-intro-control[data-slide="' + slide + '"]').addClass('active');
    });

    $( ".js-sectors-intro-control" ).hover(function() {
        var slide = $(this).attr('data-slide');
        $('.js-sectors-intro-carousel').slick('slickGoTo', slide);
    });

});