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

.hero {
	padding-top: 18rem;

	@include media-breakpoint-down(lg) {
		padding-top: 12rem;
	}
	.container {
		position: relative;
	}
	.breadcrumbs {
		font-weight: bold;
		display: flex;
		align-items: center;

		img {
			margin-right: 0.375rem;
		}
		a {
			color: $body;

			&:hover {
				color: $red;
			}
		}
		.separator {
			color: $red;
		}
	}
	.hero-content {
		position: absolute;
		width: calc(100% - 5rem);
		top: 100%;
		max-width: calc(100vw - 30px);
		transform: translateY(-7.75rem);
		z-index: 20;
		left: 5rem;
		padding-left: 15px;

		@include media-breakpoint-down(md) {
			transform: translateY(-6.875rem);
		}
		@include media-breakpoint-down(xs) {
			width: 100%;
			left: 15px;
			transform: translateY(-6.25rem);
		}
		h1 {
			color: $body;

			.cherry {
				color: $red;
			}
			> span {
				background: #fff;
				padding: 0.75rem 1rem;
				transform: translateX(-15px);
				display: inline-block;
			}
		}
	}
	.scrolling-text {
		background: var(--theme-colour);
		padding-bottom: 0.75rem;

		p {
			margin: 0;
			color: #fff;
			flex-shrink: 0;
			opacity: 0;
			visibility: hidden;
			padding: 0.675rem;
			line-height: 1;

			@include media-breakpoint-down(xs) {
				padding: 0.5rem;
			}
		}
		.scrolling-text-line {
			width: 100%;
			display: flex;
			overflow: hidden;

			&.middle {
				p {
					direction: ltr;
				}
			}
		}
		.slick-initialized {
			p {
				opacity: 0.3;
				visibility: visible;
			}
		}
	}
}

.box-hero {
	margin: 5rem 0;
	position: relative;

	@include media-breakpoint-down(md) {
		margin: 3rem 0;
	}
	.hero-content {
		padding-top: 12rem;
		padding-bottom: 12rem;
		position: relative;
		z-index: 2;

		@include media-breakpoint-down(md) {
			padding-top: 6rem;
			padding-bottom: 6rem;
		}
	}
	img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	h1 {
		color: $body;

		.cherry {
			color: $red;
		}
		div {
			background: #fff;
			padding: 20px 0;
			display: inline;
			box-shadow: 2rem 0 0 0 #fff, -2rem 0 0 0 #fff;
			position: relative;
			line-height: 1.75;

			@include media-breakpoint-down(lg) {
				padding: 10px 0;
				box-shadow: 1rem 0 0 0 #fff, -1rem 0 0 0 #fff;
			}
		}
	}
    .cat-date {
        span {
            background: $white;
            padding: 1rem 1rem 0.75rem 1rem;
            position: relative;
            z-index: 2;
            display: inline-block;
        }
        a {
            color: $body;

            &:hover {
                color: $red;
            }
        }
    }
}

jQuery(function($){
    $('.js-scrolling-line-top').slick({
        speed: 50000,
        autoplay: true,
        autoplaySpeed: 0,
        centerMode: true,
        cssEase: 'linear',
        slidesToShow: 1,
        slidesToScroll: 1,
        variableWidth: true,
        infinite: true,
        initialSlide: 1,
        arrows: false,
        buttons: false,
        pauseOnHover: false
    });
    $('.js-scrolling-line-middle').slick({
        speed: 60000,
        autoplay: true,
        autoplaySpeed: 0,
        centerMode: true,
        cssEase: 'linear',
        slidesToShow: 1,
        slidesToScroll: 1,
        variableWidth: true,
        infinite: true,
        initialSlide: 1,
        arrows: false,
        buttons: false,
        pauseOnHover: false,
        rtl: true
    });
    $('.js-scrolling-line-bottom').slick({
        speed: 80000,
        autoplay: true,
        autoplaySpeed: 0,
        centerMode: true,
        cssEase: 'linear',
        slidesToShow: 1,
        slidesToScroll: 1,
        variableWidth: true,
        infinite: true,
        initialSlide: 1,
        arrows: false,
        buttons: false,
        pauseOnHover: false
    });
});