/**
 * 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
 */

/**
 * Card Slider Container
 * Base wrapper for both Grid and Slider modes.
 */
.celeste-card-slider {
	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 via dynamic CSS (per-instance).
 */
@media (min-width: 768px) {
	.celeste-card-slider[data-desktop-layout="grid"] .swiper-wrapper {
		display: grid !important;
		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;
	}
}

/**
 * Desktop Slider Mode
 * Maintains Swiper's default behavior (no overrides needed).
 */
@media (min-width: 768px) {
	/*.celeste-card-slider[data-desktop-layout="slider"] .swiper-wrapper {
		 Swiper's native transform/transition behavior 
	} */
}

/**
 * Card Slides (Universal)
 * Content-driven height for flexible card designs.
 */
.celeste-card-slider .swiper-slide {
	height: auto;
	box-sizing: border-box;
}

/**
 * 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;
}

/**
 * Mobile Navigation Adjustments
 * Smaller controls for touch devices.
 */
@media (max-width: 767px) {
	.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;
	}
}