// ============================================================================
// :: SETTINGS
// ============================================================================
$container-breakpoint: calc(#{$container-width} + 40px);

// ============================================================================
// :: SECTION
// ============================================================================
.m-section {
	position: relative;

	padding: 4rem 0;

	@include respond-at($screen-small-base) {
		padding: 10rem 0;
	}

	&.m-content {
		background-color: $background-color-grey-extra-light;
	}

	& + .sc-hubspot {
		margin-top: 2rem;
	}
}

// ============================================================================
// :: Elements
// ============================================================================
.m-section__container {

	&::before {
		position: absolute;
		top: 0;
		left: 0;
		z-index: $z-index-lowest;

		width: 100%;
		height: 100%;
	}

	& + .m-section__container {
		margin-top: 3.6rem;
	}
}

.m-section__content {
	width: 100%;

	.m-list {
		margin-top: 2rem;
	}

	p + p {
		margin-top: 2rem;
	}

	table + p,
	p + table {
		margin-top: 2rem;
	}

	img:not([class]) {
		margin-top: 2rem;
	}
}

.m-section__header {
	margin-bottom: 2rem;
}

.m-section__header-sub {
	display: block;
	margin-bottom: 2rem;

	font-family: $font-family-beausans;
	font-weight: $font-weight-bold;
	font-size: $font-size-1x-large;
	line-height: $line-height-3x-large;

	color: $text-color-grey;

	@include respond-to($screen-small-base) {
		font-size: $font-size;
		line-height: $line-height;
	}
}

.m-section__header-icon {
	display: inline-block;
	margin-bottom: 2rem;

	font-size: $font-size-5x-large;

	color: $primary-color;
}

.m-section__footer {
	margin-top: 2rem;

	@include respond-at($screen-small-base) {
		margin-top: 6rem;
	}
}

.m-section__image {
	position: relative;

	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;

	background-repeat: no-repeat;
}

.m-section__image-visual {
	max-width: 100%;
	height: auto;
}

.m-section__content-item {
	width: 100%;
	margin-top: 2rem;

	&:not(:last-child) {
		margin-bottom: 3rem;
	}

	p a {
		margin-top: 3rem;
	}

	.a-button {
		display: inline-flex;
		margin-top: 4rem;

		&::before {
			position: relative;

			width: auto;

			margin-right: 1rem;

			background: none;

			color: $text-color-white-2x-light;
		}

		&:hover {

			&::before {
				opacity: 1;
			}
		}
	}
}

// ============================================================================
// :: Modifiers
// ============================================================================
// :: :: root
.m-section--spacing-large {
	padding: 12.5rem 0;

	&.l-split {
		padding: 0;

		.l-split__content {
			padding-top: 2rem;
			padding-bottom: 2rem;

			@include respond-at($screen-small-base) {
				padding-top: 12.5rem;
				padding-bottom: 12.5rem;
			}
		}

		.l-split__image {
			padding: 0;
		}
	}
}

.m-section--big {

	.m-section__article {
		padding-bottom: 50vw;

		@include respond-at($screen-medium-base) {
			padding-bottom: 35vw;
		}

		&:last-child {
			padding-bottom: 90vw;

			@include respond-at($screen-medium-base) {
				margin-top: 8rem;
				padding-bottom: 37vw;
			}
		}
	}
}

.m-section--spacing-medium {
	padding: 8rem 0;

	&.l-split {
		padding: 0;

		.l-split__content {
			padding-top: 2rem;
			padding-bottom: 2rem;

			@include respond-at($screen-small-base) {
				padding-top: 8rem;
				padding-bottom: 8rem;
			}
		}

		.l-split__image {
			padding: 0;
		}
	}
}

.m-section--spacing-small {
	padding: 3rem 2rem;

	@include respond-at($screen-small-base) {
		padding: 8rem 0;
	}

	&.l-split {
		padding: 0;

		.l-split__content {
			padding: 3rem 2rem;

			@include respond-at($screen-small-base) {
				padding: 8rem 4rem;
			}

			@include respond-at($container-breakpoint) {
				padding: 8rem 0 8rem 11rem;
			}

			&:first-child {
				@include respond-at($container-breakpoint) {
					padding: 8rem 11rem 8rem 0;
				}
			}
		}

		.l-split__image {
			padding: 0;
		}
	}
}

.m-section--spacing-tiny {
	padding: 5rem 0;

	&.l-split {
		padding: 0;

		.l-split__content {
			padding: 5rem;
		}

		.l-split__image {
			padding: 0;
		}
	}
}

.m-section--spacing-smallest {
	padding: 2rem 0;

	.m-section__header {
		margin-bottom: 1.6rem;
	}

	&.l-split {
		// padding: 0;

		.l-split__content {
			padding: 0;

			@include respond-at($screen-small-base) {
				padding: 0;
			}
		}

		.l-split__image {
			padding: 0;
		}
	}

	&.l-split--left,
	&.l-split--right {

		.m-section__image-visual {
			@include respond-at($screen-small-base) {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}

	&.l-split--left {

		.l-split__image {
			@include respond-at($screen-small-base) {
				padding-right: 2rem;
			}
		}

		.l-split__content {
			@include respond-at($screen-small-base) {
				padding-left: 2rem;
			}
		}
	}

	&.l-split--right {

		.l-split__image {
			@include respond-at($screen-small-base) {
				padding-left: 2rem;
			}
		}

		.l-split__content {
			@include respond-at($screen-small-base) {
				padding-right: 2rem;
			}
		}
	}

	.l-split__image {
		@include respond-to($screen-small-base) {
			height: auto;
			margin-bottom: 2rem;
		}
	}

	.l-split__video {
		@include respond-to($screen-small-base) {
			height: auto;
			margin-bottom: 2rem;
		}
	}

	& > .l-container {
		width: calc(100% - 5rem);
	}
}

.m-section--background {

	&.m-section--background-grey {

		.m-section__container {
			padding: 2rem;

			background-color: $background-color-grey-extra-light;

			@include respond-at($screen-small-base) {
				padding: 4rem;
			}
		}
	}

	&.m-section--background-highlight {

		.m-section__container {
			padding: 2rem;

			background-color: $background-color-green-extra-light;

			@include respond-at($screen-small-base) {
				padding: 4rem;
			}
		}
	}
}

.m-section--spacing--top {
	padding-top: 4rem;

	@include respond-at($screen-small-base) {
		padding-top: 10rem;
	}
}

.m-section--spacing--bottom {
	padding-bottom: 4rem;

	@include respond-at($screen-small-base) {
		padding-bottom: 10rem;
	}
}

.m-section--no-top-spacing {
	padding-top: 0;
}

.m-section--no-bottom-spacing {
	padding-bottom: 0;
}

.m-section--no-spacing {
	padding: 0;
}

.m-section--center {
	text-align: center;

	.m-section__container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.m-section__header {
		max-width: 70rem;
	}
}

.m-section--gradient-top {
	background:
		linear-gradient(
			180deg,
			#FFFFFF 20%,
			rgba(255, 255, 255, 0.91),
			rgba(255, 255, 255, 0) 60%
		);
	background-position: 0% 0%;

	@include respond-at($screen-small-base) {
		background:
			linear-gradient(
				180deg,
				#FFFFFF 20%,
				rgba(255, 255, 255, 0.91) 28%,
				rgba(255, 255, 255, 0) 50%
			);
	}
}

.m-section--gradient-both {
	background:
		linear-gradient(
			180deg,
			#FFFFFF 20%,
			rgba(255, 255, 255, 0.91) 25%,
			rgba(255, 255, 255, 0) 45%
		),
		linear-gradient(
			0deg,
			#FFFFFF 20%,
			rgba(255, 255, 255, 0.91) 25%,
			rgba(255, 255, 255, 0) 65%
		);
	background-position: 0% 0%, 0% 100%;

	@include respond-at($screen-medium-base) {
		background:
			linear-gradient(
				180deg,
				#FFFFFF 2%,
				rgba(255, 255, 255, 0.91) 24%,
				rgba(255, 255, 255, 0) 35%
			),
			linear-gradient(
				0deg,
				#FFFFFF 2%,
				rgba(255, 255, 255, 0.91) 24%,
				rgba(255, 255, 255, 0) 35%
			);
	}
}

// if the m-section contains the modifier with m-section--theme
// and l-split is applied then the before element on the l-container is shown
// based on the width of the container
.m-section[class*="m-section--theme"] {

	&.l-split {

		.l-container::before {
			content: "";

			width: calc((100vw - #{$container-width}) * 0.5);
		}
	}
}

// the theme is gray
.m-section--grey {
	background-color: $background-color-grey-extra-light;

	// if the class split is used, the theme is applied on the split__content
	// and the container before element
	&.l-split {
		//background-color: transparent;

		.l-split__content {
			background-color: $background-color-grey-extra-light;
		}

		.l-container::before {
			background-color: $background-color-grey-extra-light;
		}
	}
}

// :: :: header
.m-section__header--center {
	margin-bottom: 2rem;

	text-align: center;

	@include respond-at($screen-small-base) {
		margin-bottom: 8rem;
	}
}

.m-section__header--with-collapse {
	display: flex;
	justify-content: center;
	align-items: center;
}

.m-section__header--spacing-small {
	margin-bottom: 1rem;
}

.m-section__header--split {
	display: inline-flex;
	align-items: center;

	@include respond-at($screen-small-base) {
		text-align: left;
	}

	.m-section__image-visual {
		float: right;
		margin-top: -5rem;
		margin-right: -18rem;
	}
}

// :: :: footer
.m-section__footer--center {
	text-align: center;
}

.m-section__footer--spacing-small {
	margin-top: 2rem;
}

// :: :: image
.m-section__image--as-bg {
	height: 100%;

	.m-section__image-visual {
		position: absolute;

		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.m-section__image--full-bg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: $z-index-lowest;

	width: 100%;
}

.m-section__image--contain {

	.m-section__image-visual {
		object-fit: contain;
	}
}

// :: :: highlight
.m-section--highlight {
	z-index: $z-index-high;

	margin-top: -5rem;
	padding-top: 0;
}

.m-section--gradient-primary {
	background: $gradient-primary;
}