/*
 * KDR — Homepage "Veranstaltungen & Kurse" section (Startseite, Sektion 2)
 * Loaded by the kdr child theme (see functions.php).
 * Left: heading + copy + button. Right: a vertical stack of event/course
 * poster cards that scrolls in a continuous, seamless loop (pure CSS —
 * no JS needed, and it respects prefers-reduced-motion).
 * Targeted via CSS classes set on the Containers/widgets in Elementor's
 * Advanced tab.
 */

.kdr-sec-aktuelles {
	background-color: rgba(220, 215, 161, 0.25);
}

.kdr-aktuelles-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 48px;
}

.kdr-aktuelles-text {
	flex: 1 1 340px;
	max-width: 400px;
}

.kdr-aktuelles-heading .elementor-heading-title {
	line-height: 0.86 !important;
}

.kdr-aktuelles-body p {
	margin: 0 0 20px;
}
.kdr-aktuelles-body p:last-child {
	margin-bottom: 0;
}

/* --- Auto-looping poster stack --- */
.kdr-aktuelles-stack {
	position: relative;
	width: 100%;
	max-width: 423px;
	height: 600px;
	overflow: hidden;
	flex: 0 0 auto;
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
	mask-image: linear-gradient(180deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}

.kdr-aktuelles-track {
	display: flex;
	flex-direction: column;
	/* Elementor sets a native flex_gap (20px) on this container's own
	   widget settings — it stacks on top of any CSS "gap" here, which
	   breaks the seamless-loop math below (see .kdr-poster-card's
	   margin-bottom). Force it to 0 so margin-bottom is the only spacing
	   in play. */
	gap: 0 !important;
	animation: kdr-aktuelles-scroll 24s linear infinite;
}

.kdr-aktuelles-stack:hover .kdr-aktuelles-track {
	animation-play-state: paused;
}

@keyframes kdr-aktuelles-scroll {
	from {
		transform: translateY(0);
	}
	to {
		/* Track holds the poster set twice back-to-back, so scrolling
		   exactly 50% loops seamlessly into the duplicate copy. */
		transform: translateY(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kdr-aktuelles-track {
		animation: none;
	}
}

.kdr-poster-card {
	height: 240px;
	flex: 0 0 auto;
	position: relative;
	/* Margin (not a flex "gap" on the track) so every card — including the
	   last one in each duplicated half — carries its own trailing space.
	   That's what makes translateY(-50%) land exactly on the start of the
	   duplicate set instead of stopping half a gap short of it, which is
	   what was causing the visible snap/glitch at every loop restart. */
	margin-bottom: 24px;
}

.kdr-poster-card .elementor-widget-image,
.kdr-poster-card .elementor-widget-container,
.kdr-poster-card figure.elementor-image,
.kdr-poster-card img {
	height: 100%;
	width: 100%;
}

.kdr-poster-card img {
	object-fit: cover;
	display: block;
}

@media (max-width: 1024px) {
	.kdr-aktuelles-stack {
		max-width: 340px;
		height: 480px;
	}
	.kdr-poster-card {
		height: 190px;
	}
}

@media (max-width: 767px) {
	.kdr-sec-aktuelles {
		border-radius: 30px !important;
	}
	.kdr-aktuelles-stack {
		max-width: 100%;
		height: 360px;
	}
	.kdr-poster-card {
		height: 140px;
	}
}