/**
 * GT Carousel Widget Styles
 *
 * @package GT_Animations_Pro
 * @since 1.4.0
 */

/* ===========================
   FOUC Prevention
   =========================== */

.gt-carousel.gt-animation-hidden {
	visibility: hidden !important;
}

.gt-carousel.gt-animation-ready {
	visibility: visible !important;
}

/* ===========================
   Base Structure
   =========================== */

.gt-carousel {
	position: relative;
	width: 100%;
	contain: layout style;
}

.gt-carousel-track {
	height: 100%;
	width: 100%;
	overflow: hidden;
	position: relative;
}

.gt-carousel-items {
	display: flex;
	/* will-change removed - GSAP handles GPU acceleration */
}

/* Horizontal - items in a row (scroll left/right) */
[data-orientation="horizontal"] .gt-carousel-items {
	flex-direction: row;
	height: 100%;
	align-items: stretch;
}

/* Vertical - items in a column (scroll up/down) */
[data-orientation="vertical"] .gt-carousel-items {
	flex-direction: column;
	width: 100%;
}

/* ===========================
   Carousel Items
   =========================== */

.gt-carousel-item {
	flex-shrink: 0;
	position: relative;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Horizontal mode: items need width, height fills track */
[data-orientation="horizontal"] .gt-carousel-item {
	height: 100%;
}

/* Vertical mode: items need height, width fills track */
[data-orientation="vertical"] .gt-carousel-item {
	width: 100%;
}

.gt-carousel-item-inner {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

.gt-carousel-item img,
.gt-carousel-item video,
.gt-carousel-item iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* YouTube iframe specific */
.gt-carousel-item iframe {
	pointer-events: none;
}

.gt-carousel-item:hover iframe {
	pointer-events: auto;
}

/* ===========================
   Edge Gradients
   =========================== */

.gt-carousel-gradient {
	position: absolute;
	z-index: 10;
	pointer-events: none;
}

/* Horizontal gradients (left/right edges) */
/* Extend 2px beyond carousel to prevent subpixel gaps during scroll */
[data-orientation="horizontal"] .gt-carousel-gradient {
	top: -2px;
	bottom: -2px;
	height: auto !important; /* Override any height value - use top/bottom to span full height */
	width: 100px;
}

[data-orientation="horizontal"] .gt-carousel-gradient-start {
	left: -2px;
	background: linear-gradient(
		to right,
		var(--gt-carousel-gradient-color, #ffffff) 0%,
		var(--gt-carousel-gradient-color, #ffffff) 5%,
		transparent 100%
	);
}

[data-orientation="horizontal"] .gt-carousel-gradient-end {
	right: -2px;
	background: linear-gradient(
		to left,
		var(--gt-carousel-gradient-color, #ffffff) 0%,
		var(--gt-carousel-gradient-color, #ffffff) 5%,
		transparent 100%
	);
}

/* Vertical gradients (top/bottom edges) */
/* Extend 2px beyond carousel to prevent subpixel gaps during scroll */
[data-orientation="vertical"] .gt-carousel-gradient {
	left: -2px;
	right: -2px;
	width: auto !important; /* Override any width value - use left/right to span full width */
	height: 100px;
}

[data-orientation="vertical"] .gt-carousel-gradient-start {
	top: -2px;
	background: linear-gradient(
		to bottom,
		var(--gt-carousel-gradient-color, #ffffff) 0%,
		var(--gt-carousel-gradient-color, #ffffff) 5%,
		transparent 100%
	);
}

[data-orientation="vertical"] .gt-carousel-gradient-end {
	bottom: -2px;
	background: linear-gradient(
		to top,
		var(--gt-carousel-gradient-color, #ffffff) 0%,
		var(--gt-carousel-gradient-color, #ffffff) 5%,
		transparent 100%
	);
}


/* ===========================
   Hover States
   =========================== */

.gt-carousel-item.gt-hover-active {
	z-index: 5;
}

.gt-carousel.gt-hover-dimming .gt-carousel-item:not(.gt-hover-active) {
	transition: opacity 0.3s ease;
}

/* 3D Tilt Effect - ONLY enable 3D transforms when tilt is used */
/* Note: Adding preserve-3d to all carousels causes performance issues with ScrollSmoother */
.gt-carousel.gt-hover-tilt-enabled .gt-carousel-track {
	transform-style: preserve-3d;
	perspective: 1000px;
}

.gt-carousel.gt-hover-tilt-enabled .gt-carousel-items {
	transform-style: preserve-3d;
}

/* Glow effect - prevent clipping of box-shadow */
.gt-carousel.gt-hover-glow-enabled {
	overflow: visible;
}

.gt-carousel.gt-hover-glow-enabled .gt-carousel-track {
	overflow: visible;
}

/* Image zoom - ensure overflow hidden on item (already set, but explicit for zoom) */
.gt-carousel-item {
	overflow: hidden;
}

/* Media zoom - GSAP handles GPU acceleration */
.gt-carousel-item img,
.gt-carousel-item video {
	/* will-change removed - GSAP force3D handles this */
}

/* ===========================
   Touch/Drag Support
   =========================== */

/* Default: allow page scroll, carousel accelerates based on scroll velocity */
.gt-carousel {
	touch-action: pan-y pinch-zoom;
}

.gt-carousel[data-orientation="vertical"] {
	touch-action: pan-x pinch-zoom;
}

.gt-carousel.gt-touch-enabled {
	cursor: grab;
}

.gt-carousel.gt-touch-enabled.gt-dragging {
	cursor: grabbing;
}

/* Disable link clicks while dragging */
.gt-carousel.gt-dragging .gt-carousel-item-inner {
	pointer-events: none;
}


/* ===========================
   Mobile Disabled State
   =========================== */

.gt-carousel.gt-mobile-disabled {
	overflow: visible;
}

.gt-carousel.gt-mobile-disabled .gt-carousel-items {
	flex-wrap: wrap;
}

.gt-carousel.gt-mobile-disabled .gt-carousel-gradient {
	display: none;
}

/* ===========================
   Accessibility
   =========================== */

.gt-carousel:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.gt-carousel-item:focus-visible {
	outline: 2px solid var(--e-global-color-primary, #6EC1E4);
	outline-offset: 2px;
}

/* Screen reader only text */
.gt-carousel .screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ===========================
   Reduced Motion
   =========================== */

@media (prefers-reduced-motion: reduce) {
	.gt-carousel .gt-carousel-items {
		animation: none !important;
		transform: none !important;
	}

	.gt-carousel-item {
		transition: none !important;
	}

	/* Make elements immediately visible */
	.gt-carousel.gt-animation-hidden {
		visibility: visible !important;
	}
}

/* ===========================
   Editor Compatibility
   =========================== */

.elementor-editor-active .gt-carousel.gt-animation-hidden {
	visibility: visible !important;
}

/* Show static preview in editor - disable transforms and show items normally */
.elementor-editor-active .gt-carousel .gt-carousel-items {
	transform: none !important;
}

/* Hide clones in editor */
.elementor-editor-active .gt-carousel .gt-carousel-clone {
	display: none !important;
}

/* Ensure items are visible in editor */
.elementor-editor-active .gt-carousel .gt-carousel-item {
	opacity: 1 !important;
	visibility: visible !important;
}

/* Visible Items mode in editor - pure CSS sizing */
.elementor-editor-active [data-sizing-mode="visible_items"][data-orientation="horizontal"] .gt-carousel-item {
	/* Calculate width: (100% - total gaps) / visible items */
	/* Total gaps = (visible_items - 1) * gap, but CSS can't do var - 1 */
	/* So we use: 100% / visible_items - gap * (visible_items - 1) / visible_items */
	/* Simplified: (100% - gap * visible_items + gap) / visible_items */
	--_gap: var(--gt-item-gap, 20px);
	--_count: var(--gt-visible-items, 3);
	width: calc((100% - var(--_gap) * var(--_count) + var(--_gap)) / var(--_count));
	flex: 0 0 calc((100% - var(--_gap) * var(--_count) + var(--_gap)) / var(--_count));
}

/* ===========================
   Native Aspect Ratio Mode
   =========================== */

/* --- Horizontal: shared height, variable width per image --- */

/* Items: auto width, height set by item_height control */
[data-sizing-mode="native_ratio"][data-orientation="horizontal"] .gt-carousel-item {
	width: auto;
	flex: 0 0 auto;
}

/* Images: fill item height, width self-derives from natural aspect ratio */
[data-sizing-mode="native_ratio"][data-orientation="horizontal"] .gt-carousel-item img {
	width: auto;
	height: 100%;
	object-fit: initial;
	max-width: none;
}

/* Videos: same */
[data-sizing-mode="native_ratio"][data-orientation="horizontal"] .gt-carousel-item video {
	width: auto;
	height: 100%;
	object-fit: initial;
	max-width: none;
}

/* --- Vertical: shared width, variable height per image --- */

/* Items: auto height, width set by item_width_native_vertical control */
[data-sizing-mode="native_ratio"][data-orientation="vertical"] .gt-carousel-item {
	height: auto;
	flex: 0 0 auto;
}

/* Images: fill item width, height self-derives from natural aspect ratio */
[data-sizing-mode="native_ratio"][data-orientation="vertical"] .gt-carousel-item img {
	height: auto;
	width: 100%;
	object-fit: initial;
	max-height: none;
}

/* Videos: same */
[data-sizing-mode="native_ratio"][data-orientation="vertical"] .gt-carousel-item video {
	height: auto;
	width: 100%;
	object-fit: initial;
	max-height: none;
}