/* Custom Swiper – baseline styles.
 *
 * These styles mirror Swiper's official CSS for pagination / scrollbar
 * positioning (bullets, fraction, progressbar, scrollbar), because Bricks
 * scopes its bundled Swiper CSS to its OWN slider element only – our
 * `.bricks-custom-swiper` container doesn't inherit that positioning.
 *
 * IMPORTANT: For dynamic bullets, Swiper's JS sets inline `left`, `width`
 * and `transform` on the pagination container. Inline styles always beat
 * external CSS, so our rules below do NOT break dynamic centering – they
 * only provide a baseline for non-dynamic modes. Do not add !important
 * to left / right / width / transform on `.swiper-pagination`.
 */

.bricks-custom-swiper {
	position: relative;
	width: 100%;
	overflow: hidden;   /* required for slide-peek effect */

	/* CRITICAL: decouple the slider's intrinsic inline-size from its children.
	 *
	 * Without this, when the slider sits in a flex/grid parent (e.g. CSS Grid
	 * `1fr` column = minmax(auto, 1fr) where `auto` resolves to the track's
	 * min-content width), a positive feedback loop occurs:
	 *
	 *   1. Slider gets some width W from layout.
	 *   2. Swiper sets each slide to W/slidesPerView.
	 *   3. Post-init `.swiper-wrapper` is `display: flex`, so its min-content =
	 *      sum of slide widths ≈ W * (slides / slidesPerView).
	 *   4. That min-content propagates up through ancestors and expands the
	 *      grid track on the next layout pass, making the slider wider.
	 *   5. Loop → hits the browser layout limit (~33.5M px = 2^25), producing
	 *      the observed `width: 1.11847e+07px` per slide.
	 *
	 * `contain: inline-size` tells the browser: "this element's inline-size
	 * (width in horizontal layouts) is independent of its descendants." So
	 * the slider's contribution to its ancestors' min-content sizing is its
	 * own width (W), not its content's intrinsic width. Loop is broken.
	 *
	 * Browser support: Safari 16+, Chrome 105+, Firefox 110+ (all 2022/23+).
	 *
	 * `min-width: 0` and `max-width: 100%` are belt-and-suspenders: the
	 * former prevents the slider from imposing a min-content track size when
	 * IT is the direct grid/flex item, the latter caps it in any context. */
	contain: inline-size;
	min-width: 0;
	max-width: 100%;

	/* Fade in once Swiper has initialized to hide the FOUC flash. Swiper adds
	 * `.swiper-initialized` on boot. The transition is kept short so fast
	 * connections don't feel laggy. */
	opacity: 0;
	transition: opacity 0.2s ease;
}

.bricks-custom-swiper.swiper-initialized {
	opacity: 1;
}

/* Fallback: if JS is blocked or Swiper fails to initialize, still show the
 * content after ~2s instead of leaving it permanently hidden. */
@keyframes bricks-custom-swiper-fallback-show {
	to { opacity: 1; }
}
.bricks-custom-swiper:not(.swiper-initialized) {
	animation: bricks-custom-swiper-fallback-show 0s ease 2s forwards;
}

/* Pre-init layout (before Swiper's JS boots):
 *
 * We DELIBERATELY do NOT use `display: flex` here. If the wrapper is a flex
 * container before init, its intrinsic width = sum of slide widths, which
 * blows up the parent if the parent is a CSS grid `1fr` / flex `auto` /
 * `width: 100%` column (these all use min-content as the lower bound).
 *
 * Instead we stack slides as block-level children pre-init – the container is
 * `opacity: 0` until `.swiper-initialized`, so this is invisible to the user.
 * Once Swiper boots and adds the `.swiper-initialized` class, we switch to the
 * proper horizontal flex layout. */
.bricks-custom-swiper:not(.swiper-initialized) .swiper-wrapper {
	display: block;
}

.bricks-custom-swiper:not(.swiper-initialized) .swiper-slide {
	width: 100%;
	max-width: 100%;
}

/* Post-init layout (Swiper has booted): slides sit in a horizontal flex row.
 * `flex-shrink: 0` keeps Swiper's JS-set inline widths from being shrunk by
 * the flex container. */
.bricks-custom-swiper.swiper-initialized .swiper-wrapper {
	display: flex;
	box-sizing: content-box;
}

.bricks-custom-swiper .swiper-slide {
	height: auto;
	box-sizing: border-box;
}

.bricks-custom-swiper.swiper-initialized .swiper-slide {
	flex-shrink: 0;
}

/* ------------------------------------------------------------------ *
 * Navigation buttons (built-in)
 * ------------------------------------------------------------------ */

.bricks-custom-swiper .swiper-button-prev,
.bricks-custom-swiper .swiper-button-next {
	all: unset;
	position: absolute;
	z-index: 11;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	top: 50%;
	transform: translateY(-50%);
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 9999px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s ease;
}

.bricks-custom-swiper .swiper-button-prev { left: 12px; }
.bricks-custom-swiper .swiper-button-next { right: 12px; }

.bricks-custom-swiper .swiper-button-prev:hover,
.bricks-custom-swiper .swiper-button-next:hover {
	background: rgba(0, 0, 0, 0.8);
}

.bricks-custom-swiper .swiper-button-prev:focus-visible,
.bricks-custom-swiper .swiper-button-next:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.bricks-custom-swiper .swiper-button-disabled {
	opacity: 0.35;
	pointer-events: none;
}

.bricks-custom-swiper .swiper-button-prev i,
.bricks-custom-swiper .swiper-button-next i,
.bricks-custom-swiper .swiper-button-prev svg,
.bricks-custom-swiper .swiper-button-next svg {
	width: 1em;
	height: 1em;
	font-size: inherit;
	line-height: 1;
}

.bricks-custom-swiper .swiper-button-prev:empty::before { content: "‹"; font-size: 1.5em; line-height: 1; }
.bricks-custom-swiper .swiper-button-next:empty::before { content: "›"; font-size: 1.5em; line-height: 1; }

/* ------------------------------------------------------------------ *
 * Pagination container – positioning (mirrors Swiper's own CSS).
 * Dynamic bullets: Swiper's JS sets inline left/width/transform –
 * those will override the rules below automatically.
 * ------------------------------------------------------------------ */

.bricks-custom-swiper .swiper-pagination {
	position: absolute;
	display: block;
	text-align: center;
	transition: 300ms opacity;
	transform: translate3d(0, 0, 0);
	z-index: 10;
}

.bricks-custom-swiper .swiper-pagination.swiper-pagination-hidden {
	opacity: 0;
}

/* Horizontal bullets / fraction / custom: bottom-center */
.bricks-custom-swiper.swiper-horizontal > .swiper-pagination-bullets,
.bricks-custom-swiper .swiper-pagination-bullets.swiper-pagination-horizontal,
.bricks-custom-swiper.swiper-horizontal > .swiper-pagination-fraction,
.bricks-custom-swiper .swiper-pagination-fraction.swiper-pagination-horizontal,
.bricks-custom-swiper.swiper-horizontal > .swiper-pagination-custom,
.bricks-custom-swiper .swiper-pagination-custom.swiper-pagination-horizontal {
	bottom: var(--swiper-pagination-bottom, 8px);
	top: var(--swiper-pagination-top, auto);
	left: 0;
	width: 100%;
}

/* Progressbar: top, full width */
.bricks-custom-swiper.swiper-horizontal > .swiper-pagination-progressbar,
.bricks-custom-swiper .swiper-pagination-progressbar.swiper-pagination-horizontal {
	width: 100%;
	height: 4px;
	left: 0;
	top: 0;
}

/* ------------------------------------------------------------------ *
 * Pagination – BULLET appearance.
 * ------------------------------------------------------------------ */

.bricks-custom-swiper .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	margin: 0 4px;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background: rgba(0, 0, 0, 0.35);
	opacity: 1;
	cursor: pointer;
	display: inline-block;
	vertical-align: middle;
	/* Animate width (for pill effect) and color. No transform — Swiper's
	 * dynamic mode uses transform: scale() and we must not interfere. */
	transition: width 0.3s ease, background-color 0.25s ease;
}

/* Two-class selector for higher specificity – ensures it wins over
 * `.swiper-pagination-bullet` when both controls have a color set. */
.bricks-custom-swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background: rgba(0, 0, 0, 0.85);
	/* Set "Active width" in the builder to enlarge for a pill look
	 * (recommended only when Dynamic bullets is off). */
}

/* Fraction */
.bricks-custom-swiper .swiper-pagination-fraction {
	font-size: 0.875rem;
	line-height: 1.2;
}

/* Progressbar */
.bricks-custom-swiper .swiper-pagination-progressbar {
	background: rgba(0, 0, 0, 0.12);
	position: absolute;
}

.bricks-custom-swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
	background: rgba(0, 0, 0, 0.85);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transform: scale(0);
	transform-origin: left top;
}

/* ------------------------------------------------------------------ *
 * Scrollbar – positioning + colors (mirrors Swiper's own CSS).
 * ------------------------------------------------------------------ */

.bricks-custom-swiper.swiper-horizontal > .swiper-scrollbar,
.bricks-custom-swiper .swiper-scrollbar.swiper-scrollbar-horizontal {
	position: absolute;
	left: 1%;
	bottom: 4px;
	z-index: 50;
	height: 4px;
	width: 98%;
}

.bricks-custom-swiper .swiper-scrollbar {
	background: rgba(0, 0, 0, 0.12);
	border-radius: 9999px;
}

.bricks-custom-swiper .swiper-scrollbar-drag {
	position: relative;
	height: 100%;
	width: 100%;
	background: rgba(0, 0, 0, 0.55);
	border-radius: 9999px;
	left: 0;
	top: 0;
}