/**
 * WJCC Fit Slider styles.
 *
 * Core idea: the real image is object-fit: contain (never cropped),
 * layered over a blurred cover-fit copy of itself so leftover space
 * looks intentional instead of empty. Height comes from Elementor's
 * responsive control, so the widget owns no hardcoded heights beyond
 * a sane fallback.
 */

.wjcc-fit-slider {
	--wjcc-blur: 24px;
	--wjcc-accent: #e91e63;

	position: relative;
	height: 480px; /* fallback; Elementor control overrides */
	overflow: hidden;
	background-color: #111;
	outline: none;
	-webkit-user-select: none;
	user-select: none;
}

.wjcc-fit-slider__track {
	display: flex;
	height: 100%;
	transition: transform 0.45s cubic-bezier(0.33, 1, 0.68, 1);
	will-change: transform;
}

.wjcc-fit-slider__track.is-dragging {
	transition: none;
	cursor: grabbing;
}

/* ---- Slide ---- */

.wjcc-fit-slide {
	position: relative;
	flex: 0 0 100%;
	min-width: 100%;
	height: 100%;
	overflow: hidden;
}

.wjcc-fit-slide__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	filter: blur(var(--wjcc-blur)) brightness(0.8) saturate(1.1);
	transform: scale(1.15); /* hide the blur's soft edges */
}

.wjcc-fit-slide__link {
	display: block;
	position: relative;
	height: 100%;
}

/*
 * Doubled-up class specificity on purpose: Elementor ships
 * `.elementor img { height: auto; }` which would otherwise win and let
 * the image overflow (and get clipped by) the fixed-height viewport.
 */
.wjcc-fit-slider .wjcc-fit-slide__img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	-webkit-user-drag: none;
}

/* Cover mode (per slide): image fills the viewport and may crop. */
.wjcc-fit-slide--fit-cover .wjcc-fit-slide__img {
	object-fit: cover;
}

/* ---- Content overlay (Elementor Slides style) ---- */

.wjcc-fit-slide__content {
	position: absolute;
	z-index: 2;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: var(--wjcc-v, center);
	align-items: var(--wjcc-h, center);
	text-align: var(--wjcc-text, center);
	padding: 40px 72px;
	pointer-events: none; /* clicks fall through to the slide link */
}

.wjcc-fit-slide__content-inner {
	max-width: var(--wjcc-content-w, 640px);
}

.wjcc-fit-slide__heading {
	margin: 0 0 12px;
	color: #fff;
	font-size: 36px;
	line-height: 1.15;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.wjcc-fit-slide__desc {
	margin: 0 0 20px;
	color: #fff;
	font-size: 17px;
	line-height: 1.5;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.wjcc-fit-slide__button {
	display: inline-block;
	pointer-events: auto; /* re-enable clicks just for the button */
	padding: 12px 28px;
	border-radius: 999px;
	background-color: var(--wjcc-accent);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	transition: filter 0.15s ease, transform 0.15s ease;
}

.wjcc-fit-slide__button:hover,
.wjcc-fit-slide__button:focus-visible {
	color: #fff;
	filter: brightness(1.12);
	transform: translateY(-1px);
}

/* ---- Arrows ---- */

.wjcc-fit-slider__arrow {
	position: absolute;
	z-index: 3;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
	opacity: 0.85;
}

.wjcc-fit-slider__arrow:hover,
.wjcc-fit-slider__arrow:focus-visible {
	background: var(--wjcc-accent);
	opacity: 1;
}

.wjcc-fit-slider__arrow svg {
	width: 22px;
	height: 22px;
}

.wjcc-fit-slider__arrow--prev { left: 12px; }
.wjcc-fit-slider__arrow--next { right: 12px; }

.wjcc-fit-slider__arrow[disabled] {
	opacity: 0.25;
	cursor: default;
	background: rgba(0, 0, 0, 0.45);
}

/* ---- Dots ---- */

.wjcc-fit-slider__dots {
	position: absolute;
	z-index: 3;
	left: 0;
	right: 0;
	bottom: 10px;
	display: flex;
	justify-content: center;
	gap: 8px;
}

.wjcc-fit-slider__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.wjcc-fit-slider__dot:hover {
	background: rgba(255, 255, 255, 0.85);
}

.wjcc-fit-slider__dot.is-active {
	background: var(--wjcc-accent);
	transform: scale(1.25);
}

/* ---- Mobile ---- */

@media (max-width: 767px) {
	.wjcc-fit-slider__arrow {
		width: 34px;
		height: 34px;
	}

	.wjcc-fit-slider__arrow svg {
		width: 18px;
		height: 18px;
	}

	.wjcc-fit-slide__content {
		padding: 20px 48px;
	}

	.wjcc-fit-slide__heading {
		margin-bottom: 8px;
		font-size: 22px;
	}

	.wjcc-fit-slide__desc {
		margin-bottom: 12px;
		font-size: 14px;
	}

	.wjcc-fit-slide__button {
		padding: 9px 20px;
		font-size: 14px;
	}
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
	.wjcc-fit-slider__track {
		transition: none;
	}
}