/* ──────────────────────────────────────────────
   SIA Carousel base — shared structural styles for ALL Swiper-powered SIA
   carousels (Variable Product, Team Member, Call to Action). Each carousel
   widget adds the `.sia-carousel` class to its root wrapper alongside its
   own widget-specific class (`.sia-pcar`, `.sia-tcar`, `.sia-ctac`), and
   the rules below target the shared class so a single change applies to
   all three at once.

   Widget-specific concerns (cross-card height sync, equal-height toggles,
   product-card-specific tweaks) stay in the widget's own CSS file; this
   file owns ONLY the structural carousel skeleton.
   ────────────────────────────────────────────── */

.sia-carousel {
	position: relative;
	/* Outer clip absorbs the swiper's ±1px buffer below. Arrows + dots all
	   sit inside .sia-carousel (left: 0 / right: 0 / bottom: 0), so this
	   doesn't affect any visible UI. */
	overflow: hidden;
}

.sia-carousel .swiper {
	overflow: hidden;
	/* 1px symmetric buffer absorbs sub-pixel rounding artifacts in Swiper's
	   translate3d transform — when (swiperWidth - spaceBetween × (slidesPerView
	   - 1)) / slidesPerView produces a fractional pixel, the leftmost slide
	   can render 1px short of the swiper's clip mask, exposing the page bg
	   through the gap. The negative margin pulls the clip outward; the equal
	   padding keeps slides at their original visual position; the parent's
	   overflow:hidden hides the buffer. The trailing 40px keeps room for
	   the dots row below the slides. */
	margin: 0 -1px;
	padding: 0 1px 40px;
}

/* When the carousel was rendered with dots disabled, the wrapper gets the
   `sia-carousel--no-dots` modifier (added by each carousel widget when its
   `*_dots` switcher is OFF). Collapse the bottom padding so the slides
   sit flush against the wrapper's bottom edge — otherwise the 40px row
   reserved for dots reads as an unexplained empty band below the band. */
.sia-carousel--no-dots .swiper {
	padding-bottom: 0;
}

.sia-carousel .swiper-slide {
	display: flex;
	height: auto;
	/* v4.3.1: guarantee the first frame is full-width from OUR stylesheet
	   (a hard style-dependency of every carousel widget) instead of relying
	   on Swiper's bundled CSS — which Elementor loads deferred/async. Before
	   that CSS + the Swiper JS arrive, a flex slide with no width + default
	   flex-shrink:1 collapses narrower than the container, exposing the
	   section background on the right as a transient white strip until
	   Swiper boots and writes its inline per-slide width. `width: 100%` +
	   `flex-shrink: 0` here makes slide 1 span the full row immediately;
	   Swiper's inline `width` (e.g. 33% at 3-per-view) overrides this rule
	   post-init, so multi-per-view layouts are unaffected. */
	width: 100%;
	flex-shrink: 0;
}
.sia-carousel .swiper-slide > * {
	width: 100%;
}

/* ─── Arrows — Elementor's standard `.elementor-swiper-button` pattern ─── */
.sia-carousel .elementor-swiper-button {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	cursor: pointer;
	font-size: 25px;
	color: rgba(224, 219, 219, 0.9);
	top: 50%;
	transform: translateY(-50%);
	line-height: 1;
	transition: color 0.2s, background-color 0.2s, opacity 0.2s;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.sia-carousel .elementor-swiper-button-prev { left: 0; }
.sia-carousel .elementor-swiper-button-next { right: 0; }
.sia-carousel .elementor-swiper-button svg {
	fill: currentColor;
	height: 1em;
	width: 1em;
}
.sia-carousel .elementor-swiper-button i {
	font-size: inherit;
	line-height: 1;
}
.sia-carousel .elementor-swiper-button.swiper-button-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* ─── Dots — Swiper's default `.swiper-pagination-bullet`, just polish ─── */
.sia-carousel .swiper-pagination {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
}
.sia-carousel .swiper-pagination-bullet {
	margin: 0 4px !important;
	transition: transform 0.15s;
}
.sia-carousel .swiper-pagination-bullet-active {
	transform: scale(1.25);
}

/* ─── Navigation variant: "bottom bar" (v4.5.0) ───
   Dots bottom-LEFT, arrows bottom-RIGHT (circular), both overlaying the
   slide on the same bottom row — the layout used in the Marco Polo hero
   demo. Opt in by adding `sia-carousel--nav-bar` to the carousel root
   (the CTA Carousel widget emits it from its "Navigation layout" control).

   The default nav (arrows vertically centred on the sides, dots centred at
   the bottom) is untouched; this block only applies under the modifier.

   Tunables (override per-widget or via Elementor custom CSS):
     --sia-nav-pad       distance of the controls from the carousel edge
     --sia-nav-btn-size  arrow circle diameter
     --sia-nav-btn-gap   gap between the two arrows
     --sia-nav-dot-size  dot diameter (kept in sync with the widget's dot
                         size control when present) */
.sia-carousel--nav-bar {
	--sia-nav-pad: 28px;
	--sia-nav-btn-size: 46px;
	--sia-nav-btn-gap: 10px;
	--sia-nav-dot-size: 12px;
}

/* The default layout reserves a 40px band below the slides for the centred
   dots. The bar layout overlays the controls ON the slide instead, so
   collapse that band (same as the no-dots modifier). */
.sia-carousel--nav-bar .swiper {
	padding-bottom: 0;
}

/* Dots → bottom-left, left-aligned, vertically centred against the taller
   arrow circles. */
.sia-carousel--nav-bar .swiper-pagination {
	left: var(--sia-nav-pad);
	right: auto;
	width: auto;
	text-align: left;
	bottom: calc(var(--sia-nav-pad) + (var(--sia-nav-btn-size) - var(--sia-nav-dot-size)) / 2);
}

/* Arrows → bottom-right, grouped, circular. The icon glyph keeps its
   colour + size from the widget's arrow controls; the circle bg/border
   are the semi-transparent "on image" treatment (this variant is meant
   for full-bleed image heroes). */
.sia-carousel--nav-bar .elementor-swiper-button {
	top: auto;
	bottom: var(--sia-nav-pad);
	transform: none;
	width: var(--sia-nav-btn-size);
	height: var(--sia-nav-btn-size);
	border-radius: 50%;
	background: var(--sia-nav-btn-bg, rgba(255, 255, 255, 0.12));
	border: 1px solid var(--sia-nav-btn-border, rgba(255, 255, 255, 0.3));
	transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, color 0.18s ease;
}
.sia-carousel--nav-bar .elementor-swiper-button:hover {
	background: var(--sia-nav-btn-bg-hover, rgba(255, 255, 255, 0.22));
	transform: translateY(-2px);
}
.sia-carousel--nav-bar .elementor-swiper-button-next {
	right: var(--sia-nav-pad);
	left: auto;
}
.sia-carousel--nav-bar .elementor-swiper-button-prev {
	right: calc(var(--sia-nav-pad) + var(--sia-nav-btn-size) + var(--sia-nav-btn-gap));
	left: auto;
}
/* Keep the glyph proportional to the circle by default (the widget's
   arrow-size control still overrides this via {{WRAPPER}} specificity). */
.sia-carousel--nav-bar .elementor-swiper-button {
	font-size: 18px;
}

/* v4.0.0: Reduced motion — Swiper autoplay + transitions can trigger
   vestibular discomfort. When the user opts into reduced motion (OS-level
   setting, respected by the browser), kill transitions on the bullets and
   the arrow color tweens. Swiper's own slide animation is JS-driven and
   neutralized by setting `--swiper-transition-duration: 0s`. */
@media (prefers-reduced-motion: reduce) {
	.sia-carousel .swiper-pagination-bullet,
	.sia-carousel .elementor-swiper-button {
		transition: none !important;
	}
	.sia-carousel {
		--swiper-transition-duration: 0s;
	}
}

/* ─── Empty state ─── */
.sia-carousel--empty {
	padding: 24px;
	text-align: center;
	color: #9ca3af;
	font-style: italic;
	border: 1px dashed #d1d5db;
	background: #f9fafb;
	border-radius: 12px;
}