// =============================================================================
// :: Spotlight
// =============================================================================
.c-spotlight {
	overflow: hidden;
}

// =============================================================================
// :: Elements
// =============================================================================
.c-spotlight__container {
	position: relative;

	display: flex;
	flex-direction: column-reverse;

	@include respond-at(get-breakpoint("desktop")) {
		flex-direction: row;
	}
}

.c-spotlight__content {
	text-align: center;

	@include respond-at(get-breakpoint("desktop")) {
		flex: 1 0 45%;
		max-width: 45%;
		padding-top: 8rem;

		text-align: left;
	}
}

.c-spotlight__title {
	position: relative;

	margin-bottom: 4.2rem;
	padding-bottom: 2.5rem;

	&::after {
		content: "";

		position: absolute;
		left: calc(50% - 2.5rem);
		bottom: 0;

		width: 5rem;
		height: 0.5rem;

		border: none;
		border-radius: $border-radius-base;
		background-color: $background-color-purple;
	}

	@include respond-at(get-breakpoint("desktop")) {
		padding-bottom: 5rem;

		&::after {
			left: 0;
		}
	}
}

.c-spotlight__button {
	margin-top: 3rem;
}

.c-spotlight__link {
	margin-left: 2rem;
}

.c-spotlight__visual {
	position: relative;

	width: 100%;
	height: 30rem;

	margin-bottom: 3rem;

	text-align: center;

	@include respond-at(get-breakpoint("desktop")) {
		position: absolute;
		top: 0;
		right: 0;

		width: 50%;
		height: 100%;

		margin: 0;
	}
}

.c-spotlight__visual-background {
	position: absolute;

	width: 100%;
	height: 100%;

	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

.c-spotlight__visual-container {
	position: relative;

	display: inline-block;
	height: 100%;
}

.c-spotlight__visual-image-wrapper {
	position: absolute;

	width: 100%;
	height: 100%;
}

.c-spotlight__visual-image {
	width: 100%;
	height: 100%;

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

.c-spotlight__svg {
	display: none;

	height: 100%;
}


// =============================================================================
// :: Modifiers
// =============================================================================
.c-spotlight--polygon {

	.c-spotlight__svg--polygon {
		display: block;
	}

	.c-spotlight__visual-image-wrapper {
		padding: 4rem 0;

		border-radius: $border-radius-1x-small;

		clip-path: url(#c-spotlight__mask--polygon);

		@supports (clip-path: url(#c-spotlight__mask--polygon)) {
			border-radius: 0;
		}

		@include respond-at(get-breakpoint("desktop")) {
			padding: 8rem 0;
		}
	}
}

.c-spotlight--pin {

	.c-spotlight__svg--pin {
		display: block;
	}

	.c-spotlight__visual-image-wrapper {
		border-radius: $border-radius-1x-small;

		clip-path: url(#c-spotlight__mask--pin);

		@supports (clip-path: url(#c-spotlight__mask--polygon)) {
			border-radius: 0;
		}
	}
}

.c-spotlight--theme-green {
	padding: 15rem 0;

	background-color: $background-color-green;
}

.c-spotlight__content--theme-white {

	.c-spotlight__title,
	.c-spotlight__text,
	p {
		color: $text-color-light;
	}

	.c-spotlight__title::after {
		background-color: $text-color-light;
	}
}

.c-spotlight__svg--alternative {
	transform: none;
}

.c-spotlight__mask--alternative {
	transform: scale(0.75) translateX(20rem) translateY(12rem);
}

.c-spotlight--row-reverse {

	.c-spotlight__container {
		flex-direction: column-reverse;

		@include respond-at(get-breakpoint("desktop")) {
			flex-direction: row-reverse;
		}
	}

	.c-spotlight__visual {
		left: 0;
		right: auto;

		.c-spotlight__visual-container {
			@include respond-at(get-breakpoint("desktop")) {
				width: 100%;
			}
		}
	}
}

.c-spotlight--alternative {
	padding: 0 0 17rem;

	.c-spotlight__container {
		flex-direction: column;
		align-items: center;
	}

	.c-spotlight__content {
		flex: auto;

		max-width: 72rem;

		text-align: center;
	}

	.c-spotlight__title {

		&::after {
			left: 50%;

			transform: translateX(-50%);
		}
	}
}