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

@keyframes kenburns {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.1);
	}
}

.home-hero {
	position: relative;
	height: calc(80vh - 7.5rem);
	max-height: 70rem;
	overflow: hidden;

	@include media-breakpoint-down(sm) {
		height: calc(70vh - 3.5rem);
	}

	@include media-breakpoint-down(xs) {
		max-height: 32rem;
	}

	&__expanded {
		height: calc(80vh - 2.5rem);
	}

	&.no-border {
		border: 0;
	}

	.hero-content {
		position: absolute;
		width: 100%;
		bottom: 2rem;
		max-width: calc(50vw - 3.125rem);
		z-index: 20;
		left: 3.125rem;

		@include media-breakpoint-down(lg) {
			max-width: calc(65vw - 3.125rem);
		}

		@include media-breakpoint-down(sm) {
			left: 2rem;
		}

		@include media-breakpoint-down(xs) {
			max-width: calc(100vw - 7rem);
			left: 1rem;
		}

		h1,
		h2 {
			color: $body;
			max-width: 70vw;

			.cherry {
				color: $red;
			}

			div {
				background: #fff;
				padding: 10px 0;
				display: inline;
				box-shadow: 1.5rem 0 0 0 #fff, -1.5rem 0 0 0 #fff;
				left: 28px;
				position: relative;
				line-height: 1.5;

				@include media-breakpoint-down(lg) {
					padding: 10px 0;
					box-shadow: 1rem 0 0 0 #fff, -1rem 0 0 0 #fff;
				}

				@include media-breakpoint-down(md) {
					line-height: 1.75;
				}
			}
		}

		h2 {
			margin-bottom: 2rem;

			div {
				line-height: 1;
			}
		}
	}

	video,
	img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	img {
		animation: kenburns 5s ease-in-out forwards;
		object-position: top;
	}
}

.home-hero-links {
	display: flex;
	position: relative;
	z-index: 5;
	margin-top: -1rem;
	padding-top: 1rem;

	@include media-breakpoint-down(sm) {
		overflow: scroll;
	}

	.home-hero-link {
		flex-grow: 1;
		width: 33%;
		flex-shrink: 0;
		padding: 3rem;
		height: 18rem;
		color: $body;
		display: block;
		position: relative;
		margin-left: -1px;

		@include media-breakpoint-down(sm) {
			width: 20rem;
			padding: 2rem;
			height: 16rem;

			&:last-child {
				padding-right: 5rem;

				.arrow {
					right: 5rem;
				}
			}
		}

		&__reduced {
			height: 8rem;
			padding: 1.5rem;

			p {
				margin-bottom: 0.8rem;
			}

			@include media-breakpoint-down(md) {
				height: 16rem;
			}

		}


		&:after {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			content: "";
			background: var(--theme-colour);
			z-index: -1;
			transition: height 0.3s ease-in-out;
		}

		p {
			font-weight: normal;
			margin-bottom: 0.5rem;
		}

		.arrow {
			position: absolute;
			bottom: 1rem;
			right: 3rem;
			display: flex;
			align-items: center;
			font-size: 1rem;
			transform: translateX(-0.25rem);
			opacity: 0;
			transition: all 0.3s ease-in-out;

			@include media-breakpoint-down(md) {
				font-size: 16px;
				bottom: 2.875rem;
			}

			img {
				transform: rotate(90deg);
				margin-left: 1rem;
				transition: transform 0.3s ease-in-out;
			}
		}

		&:hover {
			&:after {
				height: calc(100% + 1rem);
			}

			.arrow {
				transform: translateX(0);
				opacity: 1;
			}
		}
	}
}

.home-hero-links-wrap {
	position: relative;

	.scroll {
		overflow: auto;
		-ms-overflow-style: none;
		scrollbar-width: none;

		&::-webkit-scrollbar {
			display: none;
		}

		.home-hero-link:last-child {
			padding-right: 5rem;

			.arrow {
				right: 5rem;
			}
		}
	}

	.scroll-for-more {
		display: none;
		position: absolute;
		background: $red;
		color: $white;
		left: 100%;
		top: calc(1rem + 1px);
		text-align: center;
		font-weight: 500;
		font-size: 1rem;
		padding: 0.75rem;
		line-height: 1;
		width: calc(18rem - 2px);
		transform: rotate(90deg);
		transform-origin: top left;
		z-index: 6;

		&.show {
			display: block;
		}

		@include media-breakpoint-down(sm) {
			width: calc(16rem - 2px);
			display: block;
		}
	}
}

.single-hero {
	position: relative;
	padding: 14rem 0;
	margin-bottom: 10rem;
	height: auto;
	max-height: unset;

	@include media-breakpoint-down(lg) {
		padding: 8rem 0;
		margin-bottom: 6rem;
	}

	@include media-breakpoint-down(md) {
		padding: 6rem 0;
		margin-bottom: 3rem;
	}

	&.less-mb {
		margin-bottom: 6rem;

		@include media-breakpoint-down(md) {
			margin-bottom: 3rem;
		}
	}

	.container {
		position: relative;
		z-index: 2;
		margin: 0 auto;
	}

	.hero-content {
		position: static;
		margin: 0 auto;
	}

	img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.hero-content h1 {
		color: $red;
		max-width: none;

		div {
			left: auto;
		}
	}

	.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;
			}
		}
	}
}