// ============================================================================
// :: 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;
	}

	img {
		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__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%;
}

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

	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;

	.m-section__image-visual {
		display: none;
	}
}

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

	width: 100%;
}

.m-section__image--contain {
	background-size: contain;
}

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

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