/** =====================================================================
 *  This Hero component is NOT re-usable for other projects then Rentman,
 *  despite the 'settings' it is fixed for the specific Rentman design
 *  ================================================================== */

$c-hero-offset-smallest:	100px;
$c-hero-offset-small:		60px;
$c-hero-offset-top:			80px;
$c-hero-offset-bottom: 		150px;
$c-hero-swirl-height: 		2.7976vw; // aspect ratio of swirl image (1680x42)

.c-hero {
	@include z(z-hero);
	position: relative;
	//background-color: palette(secondary);

	// When header is in the light state
	.is-header-light & {
		background-color: palette(secondary);
	}

	#customers & {
		padding-bottom: 5.0223vw;
	}

	&:not(.c-hero--no-pull) {
		padding-top: $overflow-menu-header-height + $c-hero-offset-small;
		padding-bottom: calc(#{$c-hero-swirl-height} + #{$c-hero-offset-small} + 30px); // height of swirl + offset

		@include mq($header-large-bp) {
			margin-top: -#{$header-height};
			padding-top: $header-height + $c-hero-offset-top;
			padding-bottom: calc(#{$c-hero-swirl-height} + #{$c-hero-offset-bottom}); // height of swirl + offset
		}
	}
}

.c-hero--small-text {
	.c-hero__text {
		p, ul {
			font-size: 1.125rem;
		}
	}
}

.c-hero.c-hero--partial {
	@include mq($max: $header-large-bp) {
		display: flex;
		flex-direction: column-reverse;
		padding-bottom: 0;
	}

	@include mq($header-large-bp) {
		padding-bottom: 80px;
	}
}

.c-hero--no-padding-bottom {
	padding-bottom: 0 !important;
}

.c-hero--pull-up-small {
	$c-hero-push-down-bg: 110px;
	margin-bottom: calc(-#{$c-hero-push-down-bg});
	padding-bottom: calc(#{$c-hero-offset-small} + #{$c-hero-push-down-bg} + #{$c-hero-swirl-height});

	@include mq($header-large-bp) {
		padding-bottom: calc(250px + #{$c-hero-swirl-height});
	}
}

.c-hero--pull-up {
	$c-hero-push-down-bg: 220px;
	margin-bottom: calc(-#{$c-hero-push-down-bg});
	padding-bottom: calc(#{$c-hero-offset-small} + #{$c-hero-push-down-bg} + #{$c-hero-swirl-height});

	@include mq($header-large-bp) {
		padding-bottom: calc(250px + #{$c-hero-swirl-height});
	}
}

.c-hero--pull-up-more {
	$c-hero-push-down-bg: 240px;
	margin-bottom: calc(-#{$c-hero-offset-small} - #{$c-hero-push-down-bg});
	padding-bottom: calc(#{$c-hero-push-down-bg} + #{$c-hero-swirl-height});

	@include mq($header-large-bp) {
		padding-bottom: calc(90px + #{$c-hero-push-down-bg} + #{$c-hero-swirl-height});
	}
}

.c-hero--book-a-demo {
	padding-top: $overflow-menu-header-height + $c-hero-offset-small;
	margin-bottom: -80px;

	@include mq($max: $mobile-styling-overrule) {
		margin-bottom: -40px;
	}

	@include mq($header-large-bp) {
		margin-top: -#{$header-height};
		padding-top: $header-height + $c-hero-offset-top;
	}
}

.c-hero--less-space-till-blocks {
	margin-bottom: -285px;
}

.c-hero--collapse {
	position: absolute;
	top: 0;
	width: 100%;
	height: 42vmin;
	margin: 0;
	padding: 0;
}

.c-hero--x-collapse {
	position: absolute;
	top: 0;
	width: 100%;
	height: 32vmin;
	margin: 0;
	padding: 0;
}

.c-hero--light-bg {
	background-color: palette(secondary, 75);
}

.c-hero--simple {
	margin-top: 100px;
	margin-bottom: 100px;
}

.c-hero__images {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;

	.c-hero--impression &{
		overflow: hidden;
		opacity: 0.6;
	}

	.c-hero--partial & {
		@include mq($header-large-bp) {
			position: absolute;
			left: 60%;
			height: auto;
		}

		height: 350px;
		position: relative;
	}
}

.c-hero__figure {
	position: absolute;
	width: 100%;
	height: 100%;
	grid-row: 1;
	grid-column: 1;
	opacity: 0;
	transition: opacity 0.8s;

	&.is-active {
		opacity: 1;
	}

	.c-hero--blur &{
		overflow: hidden;
		filter: blur(3px);
	}
}

.c-hero__image {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: 50% 50%;
	display: none;
}

@include mq($max: 820) {
	.c-hero__image--medium { display: block; }
}
@include mq(820, $max: 1460) {
	.c-hero__image--large { display: block; }
}
@include mq(1460) {
	.c-hero__image--huge { display: block; }
}


.c-hero__body {
	@include l-grid;
	position: relative;
	z-index: 1; // So it sits on top the swirl and the background image

	.c-hero--tight & {
		margin-bottom: #{$c-hero-offset-small * -1};

		@include mq($header-large-bp) {
			margin-bottom: -120px;
		}
	}

	.c-hero--tighter & {
		margin-bottom: #{$c-hero-offset-smallest * -1};

		@include mq($header-large-bp) {
			margin-bottom: -120px;
		}
	}
}

.c-hero__body--constrain{
	@include l-grid--constrain;
}

.c-hero__body--asym {
	.c-hero__text {
		text-align: left;
		margin: 0 0 40px;

		@include mq(940) {
			width: 60%;
		}
	}
	//display: block;
}

.c-hero__heading {
	text-align: center;
}

.c-hero__title {
	@include font(x4-large, 75);
	color: palette(secondary);

	.on-dark & {
		color: white;
	}

	@include mq($mobile-styling-overrule) {
		body:lang(ru) & {
			@include font(x2-large, 52);
		}
	}

	@include mq($mobile-styling-overrule) {
		#about & {
			@include font-size(x3-large);
			max-width: 1000px;
			margin-left: auto;
			margin-right: auto;
		}
	}

	@include mq($max: $mobile-styling-overrule) { @include font-size(36); }
	@include mq($max: $small-mobile-styling-overrule) { @include font-size(32); }
}

.c-hero__title--small {
	@include font(x2-large, 56);

	@include mq($max: $mobile-styling-overrule) { @include font-size(28); }
	@include mq($max: $small-mobile-styling-overrule) { @include font-size(26); }
}

.c-hero__subtitle {
	@include font(mid, 30);
	//@include font-family(primary);
	color: palette(secondary);
	margin-top: 12px;
	margin-bottom: 10px;

	.on-dark & {
		color: white;
	}

	@include mq($max: $mobile-styling-overrule) { @include font-size(20); }
	@include mq($max: $small-mobile-styling-overrule) { @include font-size(18); }
}

.c-hero__subtitle--small{
	margin-top: 15px;
	@include font(base, 28);
}

.c-hero__buttons {
	margin-top: 30px;

	@include mq(650) {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	> * {
		margin: 10px;
	}
}

//.c-hero__button {
//	margin-top: 20px;
//}

.c-hero__action {
	margin: 30px 0 10px;
}

.c-hero__form-area {
	margin-top: 30px;
}

.c-hero__form {
	position: relative;
	margin: auto;
	max-width: 270px;
}

.c-hero__form-value {
	border-color: palette(primary);
	border-radius: 25px;
	@include font-size(m-base);
	line-height: 45px;

	&::placeholder {
		@include font-size(m-base);
	}

	&:focus {
		box-shadow: 0 0 0 2px scale_color(palette(primary), $lightness: -20%);
	}
}

.c-hero__form-submit {
	position: absolute;
	right: 0;
	top: 0;
	order: 3;
	margin-left: 6px;
	padding: 15px 13px 12px 16px;
	border-color: transparent !important;

	&:hover:not(:disabled) {
		background-color: palette(primary);
		color: white;
	}
}

// Swirl aligned to the bottom
.c-hero__swirl {
	height: $c-hero-swirl-height;
	width: 100%;
	position: absolute;
	bottom: -1px; // little offset to prevent a hairline gap because of half pixels through rounding
	left: 0;
	pointer-events: none;
	overflow: hidden; // Needed for IE

	& > svg {
		position: absolute;
		bottom: 0;
		left: 0;
	}
}

// Scoped element containing RTE content

.c-hero__grid {
	display: grid;
	margin-bottom: 40px;
	//gap: clamp(20px, 5vw, 96px);

	@include mq(800) {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}

	&.is-reversed {
		@include mq(800) {
			direction: rtl;

			& > * {
				direction: ltr;
			}
		}
	}
}


/**
 * Scoped classes because RTE content will be dropped in here
 * .s-text class cannot be used because of inherited colors
 */

.c-hero__text {
	margin: 0 auto;
	text-align: center;
	color: palette(secondary) !important;
	@include font-family(base);
	@include font(mid, 32);

	//.is-header-light & {
	//	color: palette(secondary) !important;
	//}

	& > h1 {
		//@include font-size(x4-large);

		#home & {
			font-weight: 700;
		}


		@include mq($mobile-styling-overrule){
			body:lang(ru) & {
				@include font-size(x2-large);
			}
		}

		@include mq($max: $mobile-styling-overrule) { @include font-size(36); }
	}

	//& > p {
	//	color: rgba(palette(light), 0.8) !important;
	//
	//	.is-header-light & {
	//		color: palette(secondary) !important;
	//	}
	//}

	& > h1,
	& > h2,
	& > h3,
	& > h4,
	& > h5,
	& > h6 {
		margin-bottom: 1.5rem;
	}

	& > * + * {
		margin-top: 1.5rem;
	}

	p {
		@include font-size(mid);
		@include mq($max: 800) {
			font-size: 1.115rem;
		}
	}

	@include mq(800) {
		padding-right: #{ $grid-column-width-px / 2};

		.is-reversed &{
			padding-left: #{ $grid-column-width-px / 2};
			padding-right: 0;
		}
	}

	@include mq($constrainable-bp) {
		max-width: 974px;
		padding: 0 #{ $grid-column-width-px / 2} 0 0;
	}

	// Reset alignment when in c-hero__grid
	.c-hero__grid & {
		text-align: left;
	}

	@include mq($max: 800) {
		font-size: 1.115rem;
	}
}


/**
 * Scoped classes because RTE content will be dropped in here
 * .s-text class cannot be used because of inherited colors
 */

.c-heroV2__text {
	margin: 0 auto;
	text-align: center;
	color: palette(secondary) !important;
	@include font-family(base);
	@include font(mid, 32);

	display: flex;
	flex-direction: column;
	align-items: center;


	& > h1 {
		//@include font-size(x4-large);

		#home & {
			font-weight: 700;
		}


		@include mq($mobile-styling-overrule){
			body:lang(ru) & {
				@include font-size(x2-large);
			}
		}

		@include mq($max: $mobile-styling-overrule) { @include font-size(36); }
	}

	& > h1,
	& > h2,
	& > h3,
	& > h4,
	& > h5,
	& > h6 {
		margin-bottom: 1.5rem;
	}

	& > * + * {
		margin-top: 1.5rem;
	}

	p {
		@include font-size(mid);
	}
}


.c-heroV2__description {
	display: flex;
	flex-direction: column;
	//max-width: 656px;
	gap: clamp(20px, 5vw, 32px);
	margin-top: 0;
}

.c-heroV2__label {
	color: #FF6729;
	font-weight: 700;
	font-size: 18px;
	@include font-family(primary);
}

.c-heroV2__mw {
	max-width: 800px;
	margin-top: 16px;
	h1 {
		margin-bottom: 32px;
	}
}

.c-heroV2__column {
	margin-top: 96px;
}

.c-heroV2__column--contained {
	margin-top: 96px;
	max-width: 800px;
}





.c-hero__column--additional-col {
	grid-row: 1;
	margin-bottom: 40px;
	@include mq(800) {
		padding-top: 66px; // We reserve the height of two announcements
		grid-row: unset;
		margin-bottom: 0;
		> * {
			width: calc(100% / 6 * 7);
		}
	}
}