/*
 * Section wrapper - holds the whole-widget background (colour, gradient or video)
 * behind the carousel. The background group control paints this element itself,
 * so padding set here insets the cards from that background.
 */
.nd-cat-slider {
	position: relative;
	isolation: isolate;
}

.nd-cat-slider-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	overflow: hidden;
	z-index: 0;
}

.nd-cat-slider-bg-fallback {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.nd-cat-slider-bg-video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	object-fit: cover;
	pointer-events: none;
}

/* Transparent until an Overlay Color is set in the Section Background section */
.nd-cat-slider-bg-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	pointer-events: none;
	z-index: 1;
}

.nd-cat-slider > .elementor-carousel-wrapper {
	position: relative;
	z-index: 2;
}

/*
 * Grid mode. The JS adds this class (and destroys any Swiper instance) whenever
 * the Layout control resolves to "grid" for the current viewport, so one DOM
 * serves both layouts and the two can differ per device. Column count comes from
 * the responsive Grid Columns control; the gap comes from Spacing Between Cards.
 *
 * The !important flags are what keep "Slides to Show" out of grid mode. CE's
 * carousel trait points that control at
 * `{{WRAPPER}} .swiper:not(.swiper-initialized) .swiper-wrapper`, and core's own
 * "before init fix" (frontend.css) targets the same pre-init state with
 * `grid-template-rows: 1fr; grid-auto-rows: 0`. Both are meant to last only until
 * Swiper initialises - but in grid mode it never does, so they apply forever, at a
 * specificity (and, for the control, a source order) this file cannot outrank:
 * the slide count would dictate the column count and every row after the first
 * would collapse to zero height.
 */
.nd-cat-slider-grid {
	overflow: visible;
}

.nd-cat-slider-grid .swiper-wrapper {
	display: grid;
	grid-template-columns: repeat(var(--nd-cat-grid-columns, 4), minmax(0, 1fr)) !important;
	grid-template-rows: none !important;
	grid-auto-rows: auto !important;
	align-items: stretch;
}

/* Undo the inline width / margin Swiper leaves on slides it has laid out */
.nd-cat-slider-grid .swiper-slide {
	width: auto !important;
	height: auto;
	margin: 0 !important;
}

.nd-cat-slider-grid .elementor-swiper-button,
.nd-cat-slider-grid .swiper-pagination {
	display: none;
}

.nd-cat-slider-card {
	--nd-cat-slider-anim-duration: .3s;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	text-align: center;
	text-decoration: none;
	color: inherit;
	background-color: #f7f7f7;
	overflow: hidden;
	isolation: isolate;
	transition: transform var(--nd-cat-slider-anim-duration) ease, box-shadow var(--nd-cat-slider-anim-duration) ease;
}

/* Background video layer - sits under the overlay and the content */
.nd-cat-slider-card-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	overflow: hidden;
	z-index: 0;
}

.nd-cat-slider-card-video-fallback {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* "Play on Hover" still image. Rendered only when a Hover Poster Image is set,
 * over the Background Fallback image and under the video, which fades in over it
 * once playback starts. Without one the video is its own still and no layer is
 * printed here, leaving the fallback image as the last resort behind a video
 * that can't paint a frame. */
.nd-cat-slider-card-video-poster {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.nd-cat-slider-card-video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	object-fit: cover;
	pointer-events: none;
}

/*
 * Hover playback. `nd-cat-hover-active` is added by the JS only while the current
 * breakpoint's Video Playback resolves to "Play on Hover", so a card set to hover
 * on desktop and autoplay on mobile simply loses these rules at phone widths.
 *
 * With a Hover Poster Image behind it (nd-cat-has-poster) the video is faded out
 * until it plays; with none, it stays visible and the JS parks it on a frame of
 * its own - the opening one, or, on "On Hover Out: Pause", the one the last hover
 * stopped at - so there is nothing to fade to.
 */
.nd-cat-hover-active.nd-cat-has-poster .nd-cat-video {
	opacity: 0;
	transition: opacity var(--nd-cat-slider-anim-duration, .3s) ease;
}

.nd-cat-hover-active.nd-cat-has-poster .nd-cat-video.nd-cat-video-playing {
	opacity: 1;
}

/* With no Mobile Video Link set the single video keeps no variant class, so it
 * stays visible at every width - that's the "show the default if empty" case.
 * Shared by the card and the section background. */
.nd-cat-video-mobile {
	display: none;
}

@media (max-width: 767px) {
	.nd-cat-video-desktop {
		display: none;
	}

	.nd-cat-video-mobile {
		display: block;
	}
}

/* Transparent until an Overlay Color is set in the Card style section */
.nd-cat-slider-card-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	pointer-events: none;
	transition: background-color var(--nd-cat-slider-anim-duration) ease, opacity var(--nd-cat-slider-anim-duration) ease;
	z-index: 1;
}

/*
 * Whole-card link used when the card also has a button: an empty anchor stretched
 * over the card, under the button but above everything else.
 */
.nd-cat-slider-card-link {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	z-index: 3;
}

.nd-cat-slider-card-media,
.nd-cat-slider-card-content {
	position: relative;
	z-index: 2;
}

.nd-cat-slider-card-media {
	display: flex;
	align-items: center;
	justify-content: center;
}

.nd-cat-slider-card-icon {
	display: inline-flex;
}

.nd-cat-slider-card-icon i {
	font-size: 48px;
	line-height: 1;
}

.nd-cat-slider-card-icon svg {
	width: 48px;
	height: auto;
	fill: currentColor;
}

.nd-cat-slider-card-image {
	max-width: 100%;
	height: auto;
}

.nd-cat-slider-card-content {
	width: 100%;
}

.nd-cat-slider-card-title {
	margin: 0 0 10px;
	font-size: 20px;
	line-height: 1.3;
}

.nd-cat-slider-card-description {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	opacity: .8;
}

/*
 * Per-card icon list, between the description and the button. Sized here the way
 * .nd-cat-slider-card-icon is, so the Icon List style section only has to
 * override the font-size / width.
 */
.nd-cat-slider-card-icon-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nd-cat-slider-card-icon-list-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 1.6;
}

.nd-cat-slider-card-icon-list-icon {
	display: inline-flex;
	align-items: center;
}

.nd-cat-slider-card-icon-list-icon i {
	font-size: 16px;
	line-height: 1;
}

.nd-cat-slider-card-icon-list-icon svg {
	width: 16px;
	height: auto;
	fill: currentColor;
}

.nd-cat-slider-card-button {
	position: relative;
	display: inline-block;
	z-index: 4;
	margin-top: 16px;
	padding: 10px 24px;
	border: 1px solid currentColor;
	border-radius: 2px;
	color: inherit;
	font-size: 14px;
	line-height: 1.4;
	text-decoration: none;
	transition: opacity var(--nd-cat-slider-anim-duration) ease, color var(--nd-cat-slider-anim-duration) ease, background-color var(--nd-cat-slider-anim-duration) ease, border-color var(--nd-cat-slider-anim-duration) ease;
}

.nd-cat-slider-card-button:hover,
.nd-cat-slider-card:hover .nd-cat-slider-card-button {
	opacity: .8;
}

/*
 * Card hover animations - the "Hover Animation" control puts one of these
 * classes on every card. `zoom-media` is the odd one out: it leaves the card
 * still and scales the icon / image instead.
 */
.nd-cat-slider-anim-move-up:hover {
	transform: translateY(-4px);
}

.nd-cat-slider-anim-move-down:hover {
	transform: translateY(4px);
}

.nd-cat-slider-anim-grow:hover {
	transform: scale(1.04);
}

.nd-cat-slider-anim-shrink:hover {
	transform: scale(.96);
}

.nd-cat-slider-anim-float:hover {
	transform: translateY(-10px);
}

.nd-cat-slider-anim-tilt:hover {
	transform: rotate(-1.5deg) scale(1.02);
}

.nd-cat-slider-anim-zoom-media .nd-cat-slider-card-media {
	overflow: hidden;
}

.nd-cat-slider-anim-zoom-media .nd-cat-slider-card-image,
.nd-cat-slider-anim-zoom-media .nd-cat-slider-card-icon {
	transition: transform var(--nd-cat-slider-anim-duration) ease;
}

.nd-cat-slider-anim-zoom-media:hover .nd-cat-slider-card-image,
.nd-cat-slider-anim-zoom-media:hover .nd-cat-slider-card-icon {
	transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
	.nd-cat-slider-card,
	.nd-cat-slider-card-overlay,
	.nd-cat-slider-card-button,
	.nd-cat-slider-card-image,
	.nd-cat-slider-card-icon {
		transition: none;
	}

	.nd-cat-slider-card:hover,
	.nd-cat-slider-card:hover .nd-cat-slider-card-image,
	.nd-cat-slider-card:hover .nd-cat-slider-card-icon {
		transform: none;
	}
}