/* ==========================================================================
   Block: SL Headline Plus
   ========================================================================== */

/* --------------------------------------------------------------------------
   Light Variant (default)
   -------------------------------------------------------------------------- */

.sl-headline-plus--light {
	background-color: var(--sl-color-white);
	padding: 120px 0;
}

/* --------------------------------------------------------------------------
   Dark Variant
   -------------------------------------------------------------------------- */

.sl-headline-plus--dark {
	background-color: var(--sl-color-green);
	padding: 120px 0;
}

/* --------------------------------------------------------------------------
   Inner Layout
   -------------------------------------------------------------------------- */

.sl-headline-plus__inner {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	max-width: var(--sl-content-width);
	margin: 0 auto;
	padding: 0 var(--sl-content-padding);
}

/* --------------------------------------------------------------------------
   Left Column (Headline)
   -------------------------------------------------------------------------- */

.sl-headline-plus__left {
	flex: 1 1 0%;
	min-width: 0;
}

.sl-headline-plus__headline {
	margin: 0;
}

.sl-headline-plus--light .sl-headline-plus__headline {
	color: var(--sl-color-green);
}

.sl-headline-plus--dark .sl-headline-plus__headline {
	color: var(--sl-color-white);
}

/* --------------------------------------------------------------------------
   Right Column (Content + CTAs)
   -------------------------------------------------------------------------- */

.sl-headline-plus__right {
	display: flex;
	flex-direction: column;
	gap: 40px;
	flex: 1 1 0%;
	min-width: 0;
}

/* Content (Subline + Copy) */
.sl-headline-plus__content {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sl-headline-plus__subline {
	margin: 0;
}

.sl-headline-plus--light .sl-headline-plus__subline {
	color: var(--sl-color-green);
}

.sl-headline-plus--dark .sl-headline-plus__subline {
	color: var(--sl-color-white);
}

.sl-headline-plus__copy {
	margin: 0;
}

.sl-headline-plus__copy p {
	margin: 0;
}

.sl-headline-plus--light .sl-headline-plus__copy {
	color: var(--sl-color-black);
}

.sl-headline-plus--dark .sl-headline-plus__copy {
	color: var(--sl-color-white);
}

/* WYSIWYG Links */
.sl-headline-plus--light .sl-headline-plus__copy a {
	color: var(--sl-color-green);
	font-weight: 700;
	text-decoration: none;
	background-image: linear-gradient(var(--sl-color-yellow), var(--sl-color-yellow));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 100% 2px;
	transition: background-size 0.2s ease;
}

.sl-headline-plus--light .sl-headline-plus__copy a:hover,
.sl-headline-plus--light .sl-headline-plus__copy a:focus {
	background-size: 100% 100%;
}

.sl-headline-plus--dark .sl-headline-plus__copy a {
	color: var(--sl-color-white);
	font-weight: 700;
	text-decoration: none;
	background-image: linear-gradient(var(--sl-color-yellow), var(--sl-color-yellow));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 100% 2px;
	transition: background-size 0.2s ease;
}

.sl-headline-plus--dark .sl-headline-plus__copy a:hover,
.sl-headline-plus--dark .sl-headline-plus__copy a:focus {
	background-size: 100% 100%;
}

/* --------------------------------------------------------------------------
   CTAs
   -------------------------------------------------------------------------- */

.sl-headline-plus__ctas {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

/* Textlink white variant for dark background */
.sl-headline-plus__textlink--white,
.sl-headline-plus__textlink--white:visited {
	color: var(--sl-color-white);
}

.sl-headline-plus__textlink--white:hover,
.sl-headline-plus__textlink--white:focus {
	color: var(--sl-color-yellow);
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.sl-headline-plus--light,
	.sl-headline-plus--dark {
		padding: 80px 0;
	}

	.sl-headline-plus__inner {
		flex-direction: column;
		gap: 16px;
		padding: 0 22px;
	}

	.sl-headline-plus__left,
	.sl-headline-plus__right {
		flex: none;
		width: 100%;
	}

	.sl-headline-plus__right {
		gap: 32px;
	}

	.sl-headline-plus__ctas {
		flex-wrap: wrap;
		gap: 16px;
	}
}