@charset "UTF-8";
@use "sass:color";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../vendor/grid/breakpoints' as breakpoint;
@use '../../vendor/baseline/plumber' as plumber;

// NOTE: this compnent is dependant on the glider.scss component
// The Glider components is dependant on JS-classes and is therefore not namespaced

.glider-hero-contain {
	display: flex;
	position: relative;
	align-items: center;
	margin: 0;

	@include bem.e(text) {
		position: absolute;
		top: func.rhythm(2);
		left: func.rhythm(2);
		z-index: func.z_index(background);
		padding-right: func.rhythm(2);
		max-width: 95%;

		@include breakpoint.bp-up(sm-xs) {
			top: func.rhythm(3);
			left: func.rhythm(3);
			padding-right: func.rhythm(3);
			max-width: 90%;
		}


		@include breakpoint.bp-up(sm) {
			top: func.rhythm(4);
			left: func.rhythm(4);
			padding-right: func.rhythm(4);
			max-width: 80%;
		}

		@include breakpoint.bp-up(md) {
			top: func.rhythm(6);
			left: func.rhythm(6);
			padding-right: func.rhythm(6);
			max-width: 70%;
		}

		@include breakpoint.bp-up(lg) {
			top: func.rhythm(7);
			left: func.rhythm(7);
			padding-right: 0;
			max-width: 60%;
		}

		@include breakpoint.bp-up(xl) {
			top: func.rhythm(8);
			left: func.rhythm(8);
		}

		> h1 {
			color: colors.$color-snow;

			> span {
				background-color: rgba(0,0,0,0.6);
			}

			@include plumber.plumber(
				var.$font-size: 2,
				$line-height: 3,
				$leading-bottom: 1
			);

			@include breakpoint.bp-up(sm) {
				@include plumber.plumber(
					var.$font-size: 2.3,
					$line-height: 3,
					$leading-bottom: 1
				);
			}

			@include breakpoint.bp-up(md) {
				@include plumber.plumber(
					var.$font-size: 3,
					$line-height: 4,
					$leading-bottom: 2
				);
			}

			@include breakpoint.bp-up(lg) {
				@include plumber.plumber(
					var.$font-size: 4,
					$line-height: 5,
					$leading-bottom: 2
				);
			}

			@include breakpoint.bp-up(xl) {
				@include plumber.plumber(
					var.$font-size: 5,
					$line-height: 6,
					$leading-bottom: 3
				);
			}
		}

		> p {
			color: colors.$color-snow;

			> span {
				background-color: rgba(0,0,0,0.6);
			}

			@include plumber.plumber(
				var.$font-size: 1.5,
				$line-height: 2,
			);

			@include breakpoint.bp-up(sm) {
				@include plumber.plumber(
					var.$font-size: 2,
					$line-height: 3,
				);
			}

			@include breakpoint.bp-up(lg) {
				@include plumber.plumber(
					var.$font-size: 2.5,
					$line-height: 3,
				);
			}

			@include breakpoint.bp-up(xl) {
				@include plumber.plumber(
					var.$font-size: 3,
					$line-height: 4,
				);
			}
		}
	}

	.glider {
		visibility: hidden;

		&[data-glider-initialized="true"] {
			visibility: visible;
		}
	}
}

.glider-slide {
	width: 100vw;

	@include bem.m(hero) {
		margin: 0;
		padding: 0;
		position: relative;

		&::after {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(colors.$color-black, 0) 35%, rgba(colors.$color-black, 1) 100%);
		}

		@include bem.e(image) {
			display: block;
			object-fit: cover;
			object-position: 50% 50%;
			width: 100%;
			height: 100%;

			@include breakpoint.bp-up(sm) {
				min-height: func.to_rem(500px);
				max-height: 75vh;
			}
		}

		@include bem.e(text) {
			position: absolute;
			z-index: 1;
			bottom: func.rhythm(2);
			left: func.rhythm(2);
			padding-right: func.rhythm(2);
			color: colors.$color-snow;
			font-family: var.$font-family-bold;
			max-width: 95%;

			> span {
				//text-shadow: 0 0 20px rgba(0,0,0,0.8);

				> a {
					position: relative;
					z-index: 1;

					&:hover {
						text-decoration: none;
						color: colors.$color-cyberspace !important;
						text-shadow: none;
					}

					&::before {
						content: '';
						position: absolute;
						z-index: -1;
						width: 100%;
						height: 100%;
						background-color: colors.$color-snow;
						bottom: 0;
						left: 0;
						transform-origin: right;
						transform: scaleX(0);
						transition: transform .3s ease-in-out;
					}

					&:hover::before {
						transform-origin: left;
						transform: scaleX(1);
					}
				}
			}

			@include plumber.plumber(
				var.$font-size: 2.3,
				$line-height: 3,
				$leading-bottom: 0,
				$baseline: var.$headings-baseline
			);

			@include breakpoint.bp-up(sm-xs) {
				bottom: func.rhythm(3);
				left: func.rhythm(3);
				padding-right: func.rhythm(3);
				max-width: 90%;

				@include plumber.plumber(
					var.$font-size: 3,
					$line-height: 4,
					$leading-bottom: 0
				);
			}


			@include breakpoint.bp-up(sm) {
				bottom: func.rhythm(4);
				left: func.rhythm(4);
				padding-right: func.rhythm(4);
				max-width: 80%;

				@include plumber.plumber(
					var.$font-size: 4,
					$line-height: 5,
					$leading-bottom: 0
				);
			}

			@include breakpoint.bp-up(md) {
				bottom: func.rhythm(6);
				left: func.rhythm(6);
				padding-right: func.rhythm(6);
				max-width: 70%;

				@include plumber.plumber(
					var.$font-size: 5,
					$line-height: 6,
					$leading-bottom: 0
				);
			}

			@include breakpoint.bp-up(lg) {
				bottom: func.rhythm(7);
				left: func.rhythm(7);
				padding-right: 0;
				max-width: 60%;

				@include plumber.plumber(
					var.$font-size: 6,
					$line-height: 8,
					$leading-bottom: 0
				);
			}

			@include breakpoint.bp-up(xl) {
				bottom: func.rhythm(8);
				left: func.rhythm(8);

				@include plumber.plumber(
					var.$font-size: 7,
					$line-height: 9,
					$leading-bottom: 0
				);
			}
		}
	}
}

.glider-nav {
	transform: scale(0.7) translateY(-100%);

	@include breakpoint.bp-up(md) {
		transform: scale(1) translateY(-50%);
	}

	@include bem.m(hero) {
		&.disabled {
			display: none;
		}

		&.glider-prev {
			left: 0;

			@include breakpoint.bp-up(md) {
				left: func.rhythm(1);
			}

			@include breakpoint.bp-up(lg) {
				left: func.rhythm(2);
			}
		}

		&.glider-next {
			right: 0;

			@include breakpoint.bp-up(md) {
				right: func.rhythm(1);
			}

			@include breakpoint.bp-up(lg) {
				right: func.rhythm(2);
			}
		}
	}
}

@charset "UTF-8";
@use "sass:color";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../vendor/grid/breakpoints' as breakpoint;

// The Glider components is dependant on JS-classes and is therefore not namespaced

.glider-contain {
	display: flex;
	position: relative;
	align-items: center;
	margin-top: func.rhythm(2);
	margin-bottom: func.rhythm(2);
	padding-right: func.rhythm(8);
	padding-left: func.rhythm(8);
}

.glider {
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	//transform: translateZ(0);
	backface-visibility: hidden;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;

	&.draggable {
		cursor: grab;
		user-select: none;

		@include bem.b(glider-slide) {
			img {
				pointer-events: none;
				user-select: none;
			}
		}
	}

	&.drag {
		cursor: -webkit-grabbing;
		cursor: grabbing;
	}
}

.glider-track {
	display: flex;
	z-index: 1;
	align-items: stretch;
	width: 100%;
	margin: 0;
	padding: 0;
	//transform: translateZ(0);
}

.glider-slide {
	position: relative;
	width: 100%;
	min-width: 150px;
	margin-left: 1px;
	padding: func.rhythm(2) 0;
	overflow: hidden;

	img:not([class]) {
		display: block;
		border-radius: var.$border-radius;
		width: 100%;
	}

	@include breakpoint.bp-only(sm) {
		padding-right: func.rhythm(2);
		padding-left: func.rhythm(2);
	}

	@include breakpoint.bp-up(lg) {
		padding-right: func.rhythm(3);
		padding-left: func.rhythm(3);
	}

	@include bem.m(stretch-items) {
		display: flex;
		align-items: stretch;
	}

	@include breakpoint.bp-up(lg) {
		&:not(.active) {
			&::after {
				content: '';
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				width: 1px;
				background-color: colors.$color-concrete;
			}
		}
	}
}

.glider-nav {
	position: absolute;
	top: 50%;
	left: 0;
	z-index: func.z_index(middleground);
	transform: translateY(-50%);
	transition: background-color 0.25s ease-out;
	user-select: none;
	cursor: pointer;

	&:focus {
		background-color: colors.$color-snow;
	}

	svg {
		transition: opacity 0.25s ease-out;
		opacity: 1;
	}

	&.disabled {
		background-color: colors.$color-ash;
		box-shadow: 0 2px 5px color.adjust(colors.$color-granit, $lightness: 25%);
		pointer-events: none;

		svg {
			opacity: 0.2;
			fill: colors.$color-cyberspace;
		}
	}

	@include breakpoint.bp-up(sm) {
		left: func.rhythm(1);
	}
}

.glider-next {
	right: 0;
	left: auto;

	@include breakpoint.bp-up(sm) {
		right: func.rhythm(1);
	}
}

.glider-course-prev,
.glider-course-next {
	&.disabled {
		display: none;

		+ .glider-course-finish {
			display: inline-flex;
		}
	}
}

.glider-course-finish {
	display: none;
}

.glider-hide {
	opacity: 0;
}

.glider-dots {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	margin: 0 auto;
	padding: 0;
	user-select: none;
}

.glider-dot {
	display: block;
	width: func.to_rem(14px);
	height: func.to_rem(14px);
	margin: func.rhythm(0.5);
	padding: 0;
	border: 0;
	border-radius: 50%;
	outline: none;
	background: colors.$color-concrete;
	cursor: pointer;
	user-select: none;

	&:hover,
	&:focus,
	&.active {
		background: colors.$color-cyberspace;
	}
}