/*
 * en2x Teaser-Kachel – structural, instance-independent styles.
 *
 * Image on top (full tile width, 480x272 → object-fit cover), then inner padding
 * with headline (uppercase), text and a button in en2x style. Background, text
 * and button colour come inline per instance (scoped to the unique id);
 * everything here is colour-agnostic (uses inherit). The side gutter is the
 * shared token so it aligns to the hero/container edge like the sibling article
 * modules. Font inherited (Rubik).
 */

.en2x-teaser-kachel {
	/* Self-brought side gutter (same mechanism as the sibling modules) + bottom
	 * rhythm. Fluid width, so it fills a 2/3 or 1/3 column correctly. */
	margin: 0 var(--en2x-side-gutter, 20px) 32px;
	overflow: hidden;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.6;
	color: inherit;
}

/* Image: full tile width, fixed 480:272 ratio, cover-cropped. */
.en2x-teaser-kachel__media {
	margin: 0;
}

.en2x-teaser-kachel__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 480 / 272;
	object-fit: cover;
}

/* Inner padding area. */
.en2x-teaser-kachel__body {
	padding: 28px;
}

.en2x-teaser-kachel__headline {
	margin: 0 0 14px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	color: inherit;
}

.en2x-teaser-kachel__text {
	margin: 0 0 20px;
}

.en2x-teaser-kachel__text p {
	margin: 0 0 12px;
}

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

.en2x-teaser-kachel__text a {
	color: var(--en2x-color-primary, #221182);
}

/* Button – en2x style (pill roundness like all en2x buttons). Background colour
 * comes inline per instance; text is white for contrast on the filled button. */
.en2x-teaser-kachel__button {
	display: inline-block;
	padding: 9px 22px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	border-radius: var(--en2x-button-radius, 999px);
	transition: opacity 0.15s ease;
}

.en2x-teaser-kachel__button:hover,
.en2x-teaser-kachel__button:focus {
	color: #fff;
	opacity: 0.9;
}

/* ---------------------------------------------------------------------------
 * Responsive: tighten padding on small screens.
 * ------------------------------------------------------------------------- */

@media (max-width: 600px) {
	.en2x-teaser-kachel__body {
		padding: 22px;
	}
}