/*
 * en2x Teaser Text mit Bild – module styles.
 *
 * Desktop: a (semi-transparent) text box on the left over a full-bleed
 * background image; the block height follows the text content. Mobile: the image
 * layer is hidden and the configured fallback colour shows; the box goes full
 * width. Brand colours / transparency come from the configuration as inline
 * styles; font is inherited (Rubik from Salient).
 */

.en2x-teaser {
	position: relative;
	/* Vertical gap so the box floats with the image above/below it. */
	padding: 56px 0;
	/* Fallback / mobile surface; the image layer covers it on desktop. */
	background-color: var(--en2x-teaser-mobile-bg, #250F51);
	overflow: hidden;
}

/* Background image as its own layer so it can be hidden on mobile. */
.en2x-teaser__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Content-width container (matches footer/header): aligns the box to the site
 * content width instead of the full-bleed edge. The full-width image stays
 * behind; on wide screens the centered container reveals the image left/right. */
.en2x-teaser__inner {
	position: relative;
	z-index: 1;
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 40px;
}

/* Text box – overlaps the image; height follows its content. */
.en2x-teaser__box {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 50%;
	padding: 56px;
	font-family: inherit;
}

.en2x-teaser__headline {
	margin: 0 0 20px;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	color: inherit;
}

.en2x-teaser__text {
	font-size: 17px;
	line-height: 1.6;
	color: inherit;
}

.en2x-teaser__text :first-child {
	margin-top: 0;
}

.en2x-teaser__text :last-child {
	margin-bottom: 0;
}

.en2x-teaser__text a {
	color: inherit;
	text-decoration: underline;
}

/* Button – background colour set inline; white label, project pill radius. */
.en2x-teaser__button {
	display: inline-block;
	margin-top: 28px;
	padding: 12px 28px;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--en2x-button-radius, 999px);
	transition: opacity 0.15s ease;
}

.en2x-teaser__button:hover,
.en2x-teaser__button:focus {
	opacity: 0.88;
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * Mobile: hide image, show the fallback colour, full-width box.
 * ------------------------------------------------------------------------- */

@media (max-width: 768px) {
	.en2x-teaser {
		padding: 24px 0;
	}

	.en2x-teaser__inner {
		padding: 0 24px;
	}

	.en2x-teaser__media {
		display: none;
	}

	.en2x-teaser__box {
		width: auto;
		padding: 32px;
	}
}