/**
 * Card Slider Component Styles
 * * Atomic CSS for celeste_card_slider shortcode.
 * Conditionally loaded only when shortcode is present on page.
 * * @package Celeste_Theme
 * @since 2.0.0
 * @version 2.1.3 FOUC Grid timing fix & v7.0 Subpixel hydration
 */

/**
 * Card Slider Container
 * Base wrapper for both Grid and Slider modes.
 */
 .celeste-card-slider {
	--celeste-nav-size: 44px;
	--celeste-nav-margin: calc(var(--celeste-nav-size) * 0.5);
	position: relative;
	width: 100%;
	margin-bottom: 20px;
}

/**
 * Swiper Container
 */
.celeste-card-slider .swiper {
	width: 100%;
	overflow: hidden;
}

/**
 * Swiper Wrapper - Mobile Default (Always Active Swiper)
 */
@media (max-width: 767px) {
	.celeste-card-slider .swiper-wrapper {
		display: flex; /* Swiper's default behavior */
	}
}

/**
 * Desktop Grid Mode (CRITICAL: Complete Swiper Reset)
 * Disables all Swiper transforms, transitions, and inline styles.
 * Grid layout applied instantaneously via inline CSS variables (v7.0).
 */
@media (min-width: 768px) {
	.celeste-card-slider[data-desktop-layout="grid"] .swiper-wrapper {
		display: grid !important;
		grid-template-columns: repeat(var(--cs-tab-cols, 2), 1fr);
		gap: var(--cs-gap, 20px);
		transform: translate3d(0, 0, 0) !important; /* Reset Swiper transform */
		transition: none !important; /* Disable slide transitions */
		will-change: auto !important; /* Remove GPU optimization hints */
	}
	
	/**
	 * CRITICAL: Reset individual slide inline styles in Grid mode
	 * Swiper applies inline width and margin-right to slides.
	 * These must be overridden for CSS Grid to work properly.
	 */
	.celeste-card-slider[data-desktop-layout="grid"] .swiper-slide {
		width: auto !important; /* Override Swiper's inline width */
		margin-right: 0 !important; /* Override Swiper's inline margin */
	}
	
	/**
	 * Hide controls in Grid mode (not needed for static layout)
	 */
	.celeste-card-slider[data-desktop-layout="grid"] .swiper-pagination,
	.celeste-card-slider[data-desktop-layout="grid"] .swiper-button-prev,
	.celeste-card-slider[data-desktop-layout="grid"] .swiper-button-next {
		display: none !important;
	}
}

/**
 * Grid Mode - Desktop Columns Override
 */
@media (min-width: 1024px) {
	.celeste-card-slider[data-desktop-layout="grid"] .swiper-wrapper {
		grid-template-columns: repeat(var(--cs-desk-cols, 3), 1fr);
	}
}

/**
 * Card Slides (Universal + Hydration Symmetry for Slider Mode)
 * Content-driven height for flexible card designs.
 * Pre-init widths prevent full-width-to-column-width snap on Swiper JS init.
 */
.celeste-card-slider .swiper-slide {
	height: auto;
	box-sizing: border-box;
	width: 100%; /* Mobile default is always 1-up */
}

@media (min-width: 768px) {
	.celeste-card-slider[data-desktop-layout="slider"] .swiper-slide {
		width: var(--cs-slide-tab, 50%);
	}
}

@media (min-width: 1024px) {
	.celeste-card-slider[data-desktop-layout="slider"] .swiper-slide {
		width: var(--cs-slide-desk, 33.333%);
	}
}

/**
 * LCP Image CLS Safeguard (Aspect Ratio Lock)
 * Forces WPBakery Single Images inside the Card Slider to reserve
 * space at First Paint when an aspect ratio is selected.
 */
.celeste-card-slider:not([data-image-ratio="auto"]) .vc_figure {
	position: relative;
	width: 100%;
	aspect-ratio: var(--cs-image-ratio, 16/9);
	overflow: hidden;
	margin: 0;
}

.celeste-card-slider:not([data-image-ratio="auto"]) .vc_figure .vc_single_image-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.celeste-card-slider:not([data-image-ratio="auto"]) .vc_figure img {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

/**
 * FOUC & Opacity Flash Prevention
 * Hides sibling slides and locks LCP target while Swiper loads.
 */
.celeste-card-slider .swiper:not(.swiper-initialized) .swiper-slide {
	opacity: 0;
	pointer-events: none;
}

.celeste-card-slider .swiper:not(.swiper-initialized) .swiper-slide:first-child {
	opacity: 1;
	pointer-events: auto;
}

/**
 * Pagination Dots
 * Positioned below the slider with theme-aware colors.
 */
.celeste-card-slider .swiper-pagination {
	position: relative;
	margin-top: 20px;
	text-align: center;
}

.celeste-card-slider .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	background: #ccc;
	opacity: 0.5;
	transition: opacity 0.3s ease;
	border-radius: 50%;
}

.celeste-card-slider .swiper-pagination-bullet-active {
	opacity: 1;
	background: var(--color-primary, #333);
}

/**
 * Navigation Arrows
 * Theme-aware colors with responsive sizing.
 */
.celeste-card-slider .swiper-button-prev,
.celeste-card-slider .swiper-button-next {
	color: var(--color-primary, #333);
	width: 44px;
	height: 44px;
	-webkit-user-select: none; /* Safari */
	user-select: none; /* Standard syntax */
}

.celeste-card-slider .swiper-button-prev:after,
.celeste-card-slider .swiper-button-next:after {
	font-size: 24px;
}

/**
 * Outside navigation: arrows as flex siblings of .swiper (desktop).
 */
.celeste-card-slider[data-nav-position='outside'] {
	display: flex;
	align-items: center;
	gap: var(--celeste-nav-margin);
}

.celeste-card-slider[data-nav-position='outside'] .swiper {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.celeste-card-slider[data-nav-position='outside'] .swiper-button-prev,
.celeste-card-slider[data-nav-position='outside'] .swiper-button-next {
	position: static !important;
	top: auto !important;
	transform: none !important;
	margin-top: 0 !important;
	flex-shrink: 0;
	width: var(--celeste-nav-size);
	height: var(--celeste-nav-size);
}

/**
 * Mobile Navigation Adjustments
 * Smaller controls for touch devices.
 */
@media (max-width: 767px) {
	.celeste-card-slider {
		--celeste-nav-size: 32px;
	}

	.celeste-card-slider .swiper-button-prev,
	.celeste-card-slider .swiper-button-next {
		width: 32px;
		height: 32px;
	}
	
	.celeste-card-slider .swiper-button-prev:after,
	.celeste-card-slider .swiper-button-next:after {
		font-size: 18px;
	}
}