/**
 * Video Carousel Component
 *
 * @package FashionXpart
 * @since FashionXpart 1.0
 */

/* Carousel Container - Full Wide */
.fxp-video-carousel {
	overflow: hidden;
	width: 100vw;
	margin-left: calc(-50vw + 50%);
}

/* Track - Single row scrolling */
.fxp-video-carousel-track {
	display: flex;
	flex-wrap: nowrap;
	gap: 16px;
	animation: fxp-carousel-scroll var(--fxp-carousel-speed, 30s) linear infinite;
	width: max-content;
	align-items: stretch;
}

/* Hover stop */
.fxp-video-carousel:hover .fxp-video-carousel-track {
	animation-play-state: paused;
}

/* Paused state */
.fxp-video-carousel--paused .fxp-video-carousel-track {
	animation-play-state: paused !important;
}

/* Individual Card */
.fxp-video-card {
	min-width: 200px;
	max-width: 280px;
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 4;
}

/* Card Media (video or image) */
.fxp-video-card__media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
	border: none;
}

.fxp-video-card video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	border: none;
}

/* Remove wp-block-cover borders if used */
.fxp-video-card .wp-block-cover__background {
	border-radius: 0;
}

/* Card Overlay */
.fxp-video-card__overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 40%;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
	pointer-events: none;
}

/* Card Label */
.fxp-video-card__label {
	position: absolute;
	bottom: 12px;
	left: 12px;
	margin: 0;
	white-space: nowrap;
	color: var(--wp--preset--color--base, #FFFFFF);
	font-family: var(--wp--preset--font-family--inter, 'Inter', sans-serif);
	font-size: var(--wp--preset--font-size--x-small, 0.75rem);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	pointer-events: none;
}

/* Focus states for accessibility */
.fxp-video-card:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold, #C9A227);
	outline-offset: 4px;
}

/* Animation */
@keyframes fxp-carousel-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

/* Pause state for accessibility */
@media (prefers-reduced-motion: reduce) {
	.fxp-video-carousel-track {
		animation: none;
	}

	.fxp-video-card {
		transition: none;
	}
}

/* Mobile - Base */
@media (max-width: 599px) {
	.fxp-video-card {
		min-width: 140px;
		max-width: 180px;
	}
}

/* Tablet */
@media (min-width: 600px) {
	.fxp-video-card {
		min-width: 200px;
		max-width: 280px;
	}
}

/* Desktop */
@media (min-width: 1024px) {
	.fxp-video-card {
		min-width: 240px;
		max-width: 320px;
	}
}

/* Editor preview */
.fxp-video-carousel-editor-preview {
	overflow-x: auto;
	padding: 10px 0;
}

.fxp-video-carousel-editor-preview .fxp-video-card {
	min-width: 180px;
	max-width: 240px;
}