/*
 * KDR — Homepage "Aktuelles aus der Kommunität" section (Startseite,
 * Group 259). Loaded by the kdr child theme (see functions.php).
 * A 3-card slider where the centered/active card is wider and lifted
 * with a shadow; prev/next arrows re-center a different card.
 * Targeted via CSS classes set on the Containers/widgets in Elementor's
 * Advanced tab. Behavior lives in kdr-news-slider.js.
 */

/* This section sits on the same soft warm gradient backdrop Figma runs
   behind most of the lower homepage (a blurred multi-color glow) — a
   simplified two-tone approximation of it, rather than plain white. */
.kdr-sec-news {
	background: linear-gradient(135deg, #fdf3e6 0%, #fbe2d3 45%, #fdf6ec 100%);
}

.kdr-news-heading .elementor-heading-title {
	line-height: 0.86 !important;
	/* Figma breaks this heading onto two lines after "aus" — not just
	   incidental narrow-viewport wrapping. Capping the width forces the
	   same break instead of running onto one line at desktop widths. */
	max-width: 430px;
}

.kdr-slider-viewport {
	overflow: hidden;
	width: 100%;
	padding: 60px 0;
	margin: -60px 0;
}

.kdr-slider-track {
	display: flex;
	align-items: center;
	gap: 24px;
	transition: transform 0.5s ease;
	will-change: transform;
}

.kdr-slide {
	position: relative;
	overflow: hidden;
	flex: 0 0 auto;
	width: 282px;
	height: 331.5px;
	border-radius: 25px;
	box-shadow: none;
	transition: width 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease;
	background-color: #4a5c3a;
	background-size: cover;
	background-position: center;
}

/* Hover: any slide (active or not) grows slightly and lifts with a
   shadow. Uses "transform: scale()" rather than changing width, since
   width is already spoken for by the active/inactive state — scaling
   works the same way regardless of which card is currently active, and
   .kdr-slider-viewport already has extra padding (see above) so the
   scaled-up card and its shadow aren't clipped. */
.kdr-slide:hover {
	transform: scale(1.05);
	box-shadow: 0 40px 52.2px -11px rgba(41, 54, 19, 0.3);
	z-index: 3;
}

.kdr-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(41, 54, 19, 0.5);
	z-index: 1;
	pointer-events: none;
}

.kdr-slide.is-active {
	width: 432px;
	box-shadow: 0 40px 52.2px -11px rgba(41, 54, 19, 0.3);
}

/* Figma pins this text block by its TOP edge (~67.7% down the card),
   not its bottom — that's why the 2-line cards ("Sommerpause",
   "Jahresbericht") should sit noticeably higher above the card's
   bottom edge than the 3-line active card ("Monatsimpuls Juli"),
   instead of all three hugging the bottom by the same amount. */
.kdr-slide-text {
	position: absolute !important;
	left: 20px;
	right: 20px;
	top: 67.7%;
	bottom: auto;
	z-index: 2;
}

/* Target both the widget wrapper (kdr-slide-title/-subtitle, for
   inheritance) AND Elementor's own inner tag by name — belt and
   braces, since a chained selector like ".kdr-slide-title.elementor-
   heading-title" (no space) would require both classes on the SAME
   element, which they never are: Elementor puts our class on the
   widget wrapper and its own class on the inner <h3>/<p>. */
.kdr-slide-title,
.kdr-slide-title .elementor-heading-title {
	color: #fcfbf2 !important;
	font-size: 25px !important;
	line-height: 1.2 !important;
	text-shadow: 0 8px 16px rgba(41, 54, 19, 0.35);
	margin: 0 0 4px;
}

.kdr-slide-subtitle,
.kdr-slide-subtitle p {
	color: #fcfbf2 !important;
	font-size: 18px;
	line-height: 1.3;
	text-shadow: 0 8px 16px rgba(41, 54, 19, 0.35);
	margin: 0;
}

.kdr-slider-nav {
	display: flex;
	justify-content: flex-end;
	gap: 20px;
	margin-top: 16px;
}

/* Reset every possible inherited background/border/color on the nav
   arrows and their contents — belt and braces against any theme
   default (e.g. a link-button style) painting over them. */
.kdr-slider-prev,
.kdr-slider-next,
.kdr-slider-prev *,
.kdr-slider-next * {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: #6c1434 !important;
	text-decoration: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.kdr-slider-prev,
.kdr-slider-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	user-select: none;
}

.kdr-slider-prev:hover,
.kdr-slider-next:hover,
.kdr-slider-prev:hover *,
.kdr-slider-next:hover * {
	opacity: 0.7;
}

/* The blue box some browsers/themes apply on click is the default
   :focus / :active state (it follows whichever arrow was clicked last)
   — not a static style bug. Override it with a subtle brand-colored
   outline instead of the browser's default blue, without removing the
   focus indicator entirely (keeps it visible for keyboard users). */
.kdr-slider-prev:focus,
.kdr-slider-next:focus,
.kdr-slider-prev:active,
.kdr-slider-next:active,
.kdr-slider-prev:focus *,
.kdr-slider-next:focus *,
.kdr-slider-prev:active *,
.kdr-slider-next:active * {
	background: transparent !important;
	color: #6c1434 !important;
	box-shadow: none !important;
}

.kdr-slider-prev:focus-visible,
.kdr-slider-next:focus-visible {
	outline: 2px solid rgba(108, 20, 52, 0.4);
	outline-offset: 3px;
}

@media (max-width: 767px) {
	.kdr-slide {
		width: 220px;
		height: 260px;
	}
	.kdr-slide.is-active {
		width: 300px;
	}
}