/* ── Shared Swiper styles ────────────────────────────────────────────────────
 *
 * Generic visual rules that apply to every Swiper instance the theme renders,
 * regardless of which consumer (query-loop extension or littleextra/swiper
 * block) produced it. Scoped to .le-swiper so they only target theme-rendered
 * containers — never collide with stray .swiper elements from other plugins.
 *
 * Loaded on:
 *   - frontend  via wp_enqueue_style( 'le-swiper-shared-style' )
 *   - editor    via add_editor_style() in loader.php (reaches iframed canvas)
 *
 * Consumer-specific shimming (e.g. the query block's .wp-block-post-template
 * → swiper-wrapper conversion) lives inside that consumer's own stylesheet.
 */

/* Navigation arrows — theme primary token */
.le-swiper .swiper-button-next,
.le-swiper .swiper-button-prev {
	color: var( --wp--preset--color--primary );
}

/* Pagination — theme primary token */
.le-swiper .swiper-pagination-bullet-active {
	background: var( --wp--preset--color--primary );
}

.le-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
	background: var( --wp--preset--color--primary );
}

/* Swiper pins the horizontal progressbar to the TOP of the container
 * (top:0), unlike bullets/fraction which sit at the bottom. Move it down so
 * every pagination type lands in the same place — the bottom space the
 * container already reserves via the :has(.swiper-pagination) rule below.
 * Three classes outrank Swiper's own two-class rule. */
.le-swiper .swiper-pagination-progressbar.swiper-pagination-horizontal {
	top: auto;
	bottom: 0;
}

/* 3D effects need visible overflow on the container */
.le-swiper.swiper-cube,
.le-swiper.swiper-flip,
.le-swiper.swiper-cards {
	overflow: visible !important;
}

/* Breathing room below the swiper when pagination dots/bar is visible */
.le-swiper:has( .swiper-pagination ) {
	padding-bottom: 2.5rem;
}

/* Thumbnail navigator — a carousel linked as another carousel's thumbnails.
 * The .le-swiper-thumbs marker is added at runtime when the link is wired.
 * Swiper toggles .swiper-slide-thumb-active on the slide matching the main
 * carousel's active slide; dim the rest so the active one reads clearly. */
.le-swiper-thumbs .swiper-slide {
	cursor: pointer;
	opacity: 0.4;
	transition: opacity 0.2s ease;
}

.le-swiper-thumbs .swiper-slide.swiper-slide-thumb-active {
	opacity: 1;
}