/**
 * Gallery Slider Component Styles
 *
 * Atomic CSS for celeste_peek_slider shortcode.
 * Conditionally loaded only when shortcode is present on page.
 *
 * @package Celeste_Theme
 * @since 2.13.0
 * @version 1.3.0 Patch 7.0 Option C (Zero CLS Architecture)
 */

/**
 * Contained mode wrapper
 */
 .celeste_ps_container {
	display: block;
	width: 100%;
  overflow: hidden;
 }

 /**
  * Peek slider container
  */
 .celeste-peek-slider {
	margin: 30px 0 50px;
 }

/**
 * Image track
 * Pill positioning anchor.
 */
.peek-slider-track {
	position: relative;
}

/**
 * Pre-init slide widths — v7.0 Option C CLS prevention.
 *
 * --ps-slide-* vars are PHP-pre-computed gap-inclusive calc() strings set
 * inline on .celeste-peek-slider, available from first paint.
 * Math now perfectly matches Swiper's internal fractional gap subtraction
 * preventing aspect-ratio subpixel height jump on JS hydration.
 */
.celeste-peek-slider .swiper-slide {
	width: var(--ps-slide-mob, 100%);
}

@media (min-width: 768px) {
	.celeste-peek-slider .swiper-slide {
		width: var(--ps-slide-tab, 100%);
	}
}

@media (min-width: 1024px) {
	.celeste-peek-slider .swiper-slide {
		width: var(--ps-slide-desk, 100%);
	}
}

/**
 * LCP Centering lock — eliminates JS loop hydration shifts.
 *
 * Rather than attempting to guess Swiper's dynamic clone array offset, we simply
 * perfectly align the *original* Slide 1 to the absolute center pre-init.
 * When Swiper prepends clones during `loop: true`, the translation naturally offsets 
 * retaining Slide 1 in the dead visual center. 0 Visual layout shift = 0 CLS.
 */
.celeste-peek-slider[data-mode="peek"] .swiper:not(.swiper-initialized) .swiper-wrapper {
	transform: translateX(var(--ps-pre-center-mob, calc(50% - var(--ps-slide-mob, 100%) / 2)));
}

@media (min-width: 768px) {
	.celeste-peek-slider[data-mode="peek"] .swiper:not(.swiper-initialized) .swiper-wrapper {
		transform: translateX(var(--ps-pre-center-tab, calc(50% - var(--ps-slide-tab, 100%) / 2)));
	}
}

@media (min-width: 1024px) {
	.celeste-peek-slider[data-mode="peek"] .swiper:not(.swiper-initialized) .swiper-wrapper {
		transform: translateX(var(--ps-pre-center-desk, calc(50% - var(--ps-slide-desk, 100%) / 2)));
	}
}

/**
 * Swiper overflow (Peek mode only)
 * Single mode retains default overflow:hidden so slide clones stay clipped.
 */
.celeste-peek-slider[data-mode="peek"] .swiper {
	overflow: visible;
}

/**
 * Pre-init active state logic to prevent Opacity flashes
 */
.celeste-peek-slider[data-mode="peek"] .swiper:not(.swiper-initialized) .swiper-slide:first-child {
	opacity: 1;
	pointer-events: auto;
}

/**
 * Peek mode — inactive slides
 * Fade and disable pointer events on non-active slides.
 */
.celeste-peek-slider[data-mode="peek"] .swiper-slide {
	opacity: 0.4;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

/**
 * Peek mode — active slide
 */
.celeste-peek-slider[data-mode="peek"] .swiper-slide-active {
	opacity: 1;
	pointer-events: auto;
}

/**
 * Slide figure
 * Flex column; resets margin.
 */
.peek-slide-figure {
	margin: 0;
	display: flex;
	flex-direction: column;
}

/**
 * Image wrapper
 * position:relative for absolute figcaption; overflow:hidden clips overlay to image.
 * No border-radius on wrapper (sharp corners).
 */
.peek-slide-img-wrap {
	position: relative;
	overflow: hidden;
}

/**
 * Slide image
 * aspect-ratio + object-fit for consistent proportions; no border-radius.
 */
.peek-slide-img-wrap img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: var(--ps-aspect-ratio, 16/9);
}

/**
 * Caption absolute overlay
 */
.peek-slide-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 20px 20px 35px; /* 35px bottom for pill clearance */
	background: var(--ps-caption-bg);
	color: #ffffff;
	text-align: center;
	z-index: 5;
}

/**
 * Caption title
 */
.peek-slide-title {
	margin: 0 0 4px;
	color: inherit;
	font-size: 1.25rem;
}

/**
 * Caption description
 */
.peek-slide-desc {
	margin: 0;
	font-size: 0.9375rem;
	opacity: 0.9;
}

.peek-slide-desc p {
	margin: 0;
}

/**
 * Navigation pill
 * Straddles bottom of .peek-slider-track; border-radius from --ps-nav-radius.
 */
.celeste-gallery-nav-pill {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 50%);
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--ps-nav-bg, #1a1a1a);
	border-radius: var(--ps-nav-radius, 0px);
	padding: 4px 6px;
	z-index: 10;
	white-space: nowrap;
}

/**
 * Pill buttons
 * Minimum 44×44px touch target (WCAG 2.5.8).
 */
.celeste-gallery-nav-pill__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--ps-nav-color, #ffffff);
	padding: 0;
	border-radius: 50%;
	transition: opacity 0.2s ease;
	outline: none;
}

.celeste-gallery-nav-pill__btn:focus-visible {
	outline: 2px solid var(--ps-nav-color, #ffffff);
	outline-offset: 2px;
}

.celeste-gallery-nav-pill__btn:hover {
	opacity: 0.7;
}

.celeste-gallery-nav-pill__btn svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
	pointer-events: none;
	display: block;
	flex-shrink: 0;
}

/**
 * Previous button chevron
 * Registry only provides right-pointing chevron; flip for “previous”.
 */
.celeste-gallery-nav-pill__btn--prev svg {
	transform: scaleX(-1);
}

/**
 * Fraction pagination
 * Static position inside pill; Swiper fraction type.
 */
.celeste-peek-slider .swiper-pagination {
	position: static;       /* override Swiper default absolute */
	width: auto;
	color: var(--ps-nav-color, #ffffff);
	font-size: 0.875rem;
	font-weight: 500;
	padding: 0 4px;
	display: flex;
	align-items: center;
	gap: 4px;
}

.ps-frac-tot {
	opacity: 0.6;
}

/* ==========================================================================
   Mobile Overrides
   ========================================================================== */
@media (max-width: 767px) {
	.peek-slide-img-wrap img {
		aspect-ratio: var(--ps-aspect-ratio-mob, var(--ps-aspect-ratio, 16/9));
	}

	.celeste-peek-slider--hide-caption-mob .peek-slide-caption {
		display: none !important;
	}
}