/**
 * slider.css — The hero's center carousel — slides, Ken Burns/crossfade motion, arrows, pagination dots.
 *
 * Part of the KWL360 split stylesheet. Load order lives in
 * functions.php; responsive.css loads next-to-last so its rules
 * reliably win the cascade against every file before it.
 * @package KWL360
 */

.kwl-slider-track{ position: relative; width: 100%; height: 100%; }
.kwl-slide{
	position: absolute; inset: 0; opacity: 0; visibility: hidden;
	transition: opacity 1s var(--kwl-ease), visibility 1s;
}
.kwl-slide.is-active{ opacity: 1; visibility: visible; z-index: 1; }
.kwl-slide-media{
	position: absolute; inset: 0; background-size: cover; background-position: center;
	transform: scale(1.06);
}
.kwl-slide.is-active .kwl-slide-media{ animation: kwl-kenburns 9s var(--kwl-ease) forwards; }
[data-effect="crossfade"] .kwl-slide.is-active .kwl-slide-media{ animation: none; transform: scale(1); }
.kwl-slide-media-placeholder{ background: linear-gradient(135deg, var(--kwl-primary), var(--kwl-primary-dark)); }
.kwl-slide-scrim{
	position: absolute; inset-inline: 0; bottom: 0; height: 96px;
	background: rgba(10,14,26,.55); /* fallback for browsers that don't resolve color-mix() consistently */
	background: color-mix(in srgb, var(--slide-accent, #0A0E1A) 45%, rgba(10,14,26,.35));
}
.kwl-slide-link{ display: block; position: relative; width: 100%; height: 100%; }
.kwl-slide-content{ position: absolute; inset-inline-start: 0; bottom: 0; inset-inline-end: 0; padding: 16px 24px; color: #fff; text-align: right; }
.kwl-slide-badge{ display: inline-block; margin-bottom: 6px; padding: 5px 12px; border-radius: 20px; background: var(--slide-accent, var(--kwl-accent, #FFBB00)); color: #fff; font-size: 12px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.kwl-slide-title{
	font-size: 20px; font-weight: 700; line-height: 1.4; margin: 0; color: #fff;
	text-shadow: 0 1px 4px rgba(0,0,0,.55), 0 1px 12px rgba(0,0,0,.35);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.kwl-slider-arrow{
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 44px; height: 44px; border-radius: 50%; background: rgba(10,14,26,.45); color: #fff;
	display: flex; align-items: center; justify-content: center; transition: .3s ease;
}
.kwl-arrow-prev{ inset-inline-start: 16px; }
.kwl-arrow-next{ inset-inline-end: 16px; }
.kwl-slider-arrow:hover{ background: var(--kwl-accent); color: #1a1200; }

.kwl-slider-dots{ position: absolute; bottom: 16px; inset-inline-end: 24px; z-index: 3; display: flex; gap: 8px; }
.kwl-dot{ width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.45); transition: all .25s var(--kwl-ease); }
.kwl-dot.is-active{ width: 26px; background: var(--kwl-accent); border-radius: 999px; }