/* ============================================================
 * MW Video Carousel Widget
 *
 * Card body layout mirrors the Post Carousel.
 * Thumbnail / play-icon / duration-badge mirrors the Video Loop Item.
 * Navigation arrows and dots mirror the Post Carousel.
 *
 * CSS custom properties with neutral defaults — override these
 * in your theme stylesheet or Elementor custom CSS.
 * ============================================================ */

/* ── Custom Properties ── */
.mw-video-carousel {
	--mw-vc-card-bg: #ffffff;

	--mw-vc-cat-color: #2F31FC;
	--mw-vc-cat-font-size: 18px;

	--mw-vc-heading-color: #1a1a1a;
	--mw-vc-heading-hover-color: #2F31FC;
	--mw-vc-heading-font-size: 24px;
	--mw-vc-heading-line-height: 1.2;

	--mw-vc-excerpt-color: #555555;
	--mw-vc-excerpt-font-size: 0.875rem;
	--mw-vc-excerpt-line-height: 1.55;

	--mw-vc-cta-color: #2F31FC;
	--mw-vc-cta-font-size: 18px;
	--mw-vc-cta-hover-color: #2F31FC;

	--mw-vc-arrow-size: 48px;
	--mw-vc-arrow-bg: #ffffff;
	--mw-vc-arrow-color: #1a1a1a;
	--mw-vc-arrow-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	--mw-vc-arrow-hover-bg: #f5f5f5;

	--mw-vc-dot-color: #cccccc;
	--mw-vc-dot-active-color: #1a1a1a;

	--mw-vc-body-padding: 1.25rem;
	--mw-vc-transition-speed: 0.25s;

	/* Video-specific */
	--mw-vc-play-icon-size: 60px;
	--mw-vc-play-icon-color: #ffffff;
	--mw-vc-play-icon-bg: color-mix(in srgb, var(--mw-vc-accent-raw, #2F31FC) 85%, transparent);
}

/* ── Wrapper ── */
.mw-video-carousel {
	position: relative;
}

/* ── Swiper container ── */
.mw-video-carousel__swiper {
	overflow: hidden;
}

/* ── Swiper slide height equalisation ── */
.mw-video-carousel .swiper-wrapper {
	align-items: stretch;
}

.mw-video-carousel .swiper-slide {
	height: auto;
}

/* ── Card ── */
.mw-video-carousel__card {
	display: flex;
	flex-direction: column;
	height: 100% !important;
	background: var(--mw-vc-card-bg);
	overflow: hidden;
	border-radius: 4px;
	border: none;
	outline: none;
	box-shadow: none;
}

/* ============================================================
 * THUMBNAIL (mirrors Video Loop Item)
 * ============================================================ */

.mw-video-carousel__thumbnail,
.mw-video-carousel__thumbnail:visited,
.mw-video-carousel__thumbnail:focus {
	position: relative;
	flex-shrink: 0;
	overflow: hidden;
	background-color: transparent;
	text-decoration: none;
	font-size: 0;
	line-height: 0;
	border: none;
	outline: none;
}

.mw-video-carousel__thumbnail--clickable {
	cursor: pointer;
}

/* 16:9 aspect ratio */
.mw-video-carousel__image-wrap {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	overflow: hidden;
	background: #F7F7F9;
}

.mw-video-carousel__image {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform var(--mw-vc-transition-speed) ease,
	            opacity var(--mw-vc-transition-speed) ease;
}

.mw-video-carousel__thumbnail--clickable:hover .mw-video-carousel__image {
	transform: scale(1.05);
	opacity: 0.8;
}

.mw-video-carousel__image-placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-color: #0D0C33;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='%23ffffff' opacity='0.7'%3E%3Cpath d='M328 150.1L328 514.1L343.8 506.2C399.3 478.5 460.6 464 522.6 464L592 464L592 112L498.5 112C456.3 112 414.5 119.3 374.7 133.4L328 150.1zM312 514.1L312 150.1L265.3 133.4C225.5 119.3 183.7 112 141.5 112L48 112L48 464L117.3 464C179.4 464 240.6 478.5 296.2 506.2L312 514.1zM592 96L608 96L608 480L522.6 480C463 480 404.2 493.9 350.9 520.5L320 536L289.1 520.5C235.8 493.9 177 480 117.3 480L32 480L32 96L141.5 96C185.5 96 229.2 103.6 270.7 118.4L320 136L369.4 118.4C410.8 103.6 454.5 96 498.5 96L592 96zM32 528L104 528C152.6 528 200.8 537 246.1 554.7L319.7 583.3L347.4 569.4C401.8 542.2 461.8 528 522.6 528L608 528L608 544L522.6 544C464.2 544 406.7 557.6 354.4 583.7L323.5 599.2L320.3 600.8L317 599.5L240.1 569.6C196.8 552.7 150.6 544 104 544L32 544L32 528z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 72px auto;
}

/* Play Icon */
.mw-video-carousel__play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: var(--mw-vc-play-icon-size);
	height: var(--mw-vc-play-icon-size);
	background-color: var(--mw-vc-play-icon-bg);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mw-vc-play-icon-color);
	transition: transform var(--mw-vc-transition-speed) ease,
	            background-color var(--mw-vc-transition-speed) ease;
	z-index: 2;
}

.mw-video-carousel__play-icon svg {
	width: 24px;
	height: 24px;
	margin-left: 3px;
}

.mw-video-carousel__thumbnail--clickable:hover .mw-video-carousel__play-icon {
	transform: translate(-50%, -50%) scale(1.1);
	background-color: var(--mw-vc-accent-raw, #2F31FC);
}

/* Duration Badge */
.mw-video-carousel__duration-badge {
	position: absolute;
	bottom: 10px;
	right: 10px;
	background-color: rgba(0, 0, 0, 0.8);
	color: #ffffff;
	font-size: 12px;
	font-weight: 500;
	padding: 4px 8px;
	border-radius: 3px;
	z-index: 2;
	line-height: 1.3;
}

/* ============================================================
 * CARD BODY (mirrors Post Carousel)
 * ============================================================ */

.mw-video-carousel__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--mw-vc-body-padding);
}

/* Category */
.mw-video-carousel__category {
	display: inline-block;
	align-self: flex-start;
	margin-bottom: 0.75rem;
	font-size: var(--mw-vc-cat-font-size);
	font-weight: 400;
	line-height: 1.5;
	color: var(--mw-vc-cat-color);
	text-transform: none;
}

/* Heading */
.mw-video-carousel__heading {
	margin: 0 0 1.25rem;
	font-size: var(--mw-vc-heading-font-size);
	font-weight: 400;
	font-family: inherit;
	line-height: var(--mw-vc-heading-line-height);
	color: var(--mw-vc-heading-color);
}

.mw-video-carousel__heading a,
.mw-video-carousel__heading a:visited,
.mw-video-carousel__heading a:focus {
	color: inherit;
	text-decoration: none;
	background: transparent;
	transition: color var(--mw-vc-transition-speed) ease;
}

.mw-video-carousel__heading a:hover,
.mw-video-carousel__heading a:focus-visible {
	color: var(--mw-vc-heading-hover-color);
	text-decoration: none;
	background: transparent;
}

/* Title trigger (modal click) */
.mw-video-carousel__title-trigger {
	color: inherit;
	cursor: pointer;
	transition: color var(--mw-vc-transition-speed) ease;
}

.mw-video-carousel__title-trigger:hover,
.mw-video-carousel__title-trigger:focus-visible {
	color: var(--mw-vc-heading-hover-color);
}

/* Duration (standalone, shown when thumbnail hidden) */
.mw-video-carousel__duration {
	color: #666666;
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 10px;
}

/* Date */
.mw-video-carousel__date {
	color: #666666;
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 10px;
}

/* Excerpt */
.mw-video-carousel__excerpt {
	margin: 0 0 1rem;
	font-size: var(--mw-vc-excerpt-font-size);
	line-height: var(--mw-vc-excerpt-line-height);
	color: var(--mw-vc-excerpt-color);
	flex: 1;
}

/* CTA / Watch Button */
.mw-video-carousel__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	margin-top: auto;
	font-size: var(--mw-vc-cta-font-size);
	font-weight: 400;
	font-family: inherit;
	color: var(--mw-vc-cta-color);
	text-decoration: none;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	transition: color var(--mw-vc-transition-speed) ease;
}

.mw-video-carousel__cta:visited,
.mw-video-carousel__cta:focus {
	color: var(--mw-vc-cta-color);
	background: none;
}

.mw-video-carousel__cta:hover,
.mw-video-carousel__cta:focus-visible {
	color: var(--mw-vc-cta-hover-color);
	background: none;
}

.mw-video-carousel__cta-arrow {
	flex-shrink: 0;
	transition: transform var(--mw-vc-transition-speed) ease;
}

.mw-video-carousel__cta:hover .mw-video-carousel__cta-arrow {
	transform: translateX(3px);
}

/* ============================================================
 * NAVIGATION ARROWS (mirrors Post Carousel)
 * ============================================================ */

.mw-video-carousel__arrow {
	position: absolute;
	top: 50%;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--mw-vc-arrow-size);
	height: var(--mw-vc-arrow-size);
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: var(--mw-vc-arrow-bg);
	color: var(--mw-vc-arrow-color);
	box-shadow: var(--mw-vc-arrow-shadow);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background var(--mw-vc-transition-speed) ease,
	            box-shadow var(--mw-vc-transition-speed) ease,
	            opacity 0.3s ease,
	            visibility 0.3s ease;
}

.mw-video-carousel__arrow:hover {
	background: var(--mw-vc-arrow-hover-bg) !important;
	color: var(--mw-vc-arrow-color);
}

.mw-video-carousel__arrow:focus,
.mw-video-carousel__arrow:visited {
	background: var(--mw-vc-arrow-bg) !important;
	color: var(--mw-vc-arrow-color);
}

.mw-video-carousel__arrow:focus-visible {
	outline: 2px solid var(--mw-vc-arrow-color);
	outline-offset: 2px;
	background: var(--mw-vc-arrow-bg) !important;
}

.mw-video-carousel__arrow--prev {
	left: -20px;
}

.mw-video-carousel__arrow--next {
	right: -20px;
}

.mw-video-carousel__arrow.swiper-button-disabled {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* ============================================================
 * PAGINATION DOTS (mirrors Post Carousel)
 * ============================================================ */

.mw-video-carousel__pagination.swiper-pagination {
	position: relative;
	margin-top: 1.5rem;
	text-align: center;
}

.mw-video-carousel__pagination .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	background: var(--mw-vc-dot-color);
	opacity: 1;
	margin: 0 4px;
	transition: background var(--mw-vc-transition-speed) ease,
	            transform var(--mw-vc-transition-speed) ease;
}

.mw-video-carousel__pagination .swiper-pagination-bullet-active {
	background: var(--mw-vc-dot-active-color);
	transform: scale(1.25);
}

/* ============================================================
 * RESPONSIVE
 * ============================================================ */

@media (max-width: 1024px) {
	.mw-video-carousel__arrow--prev {
		left: 4px;
	}
	.mw-video-carousel__arrow--next {
		right: 4px;
	}
}

@media (max-width: 767px) {
	.mw-video-carousel__arrow {
		--mw-vc-arrow-size: 40px;
	}

	.mw-video-carousel__arrow--prev {
		left: 4px;
	}

	.mw-video-carousel__arrow--next {
		right: 4px;
	}
}

/* ============================================================
 * Entrance Animation (opt-in via .mw-animate-items)
 * ============================================================ */

.mw-video-carousel.mw-animate-items .swiper-slide {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mw-video-carousel.mw-animate-items .swiper-slide.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Stagger visible slides */
.mw-video-carousel.mw-animate-items .swiper-slide:nth-child(2) { transition-delay: 0.15s; }
.mw-video-carousel.mw-animate-items .swiper-slide:nth-child(3) { transition-delay: 0.30s; }
.mw-video-carousel.mw-animate-items .swiper-slide:nth-child(4) { transition-delay: 0.45s; }

/* Skip animation in Elementor editor */
.elementor-editor-active .mw-video-carousel.mw-animate-items .swiper-slide {
	opacity: 1;
	transform: none;
	transition-delay: 0s;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
	.mw-video-carousel.mw-animate-items .swiper-slide {
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}
}