/* ═══════════════════════════════════════════════════════════════════════════
   REUSABLE IMAGE SLIDER
   ═══════════════════════════════════════════════════════════════════════════ */

.ci-slider {
	position: relative;
	user-select: none;
}

/* Clips the sliding track */
.ci-slider__viewport {
	overflow: hidden;
	border-radius: 6px;
}

/* Sliding track — all slides in a row */
.ci-slider__track {
	display: flex;
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

.ci-slider__slide {
	flex: 0 0 100%;
	width: 100%;
}

/* ── Arrows ── */
.ci-slider__prev,
.ci-slider__next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--ci-color-white);
	border: 1px solid var(--ci-color-border);
	color: var(--ci-color-text);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	z-index: 2;
	/* Offset so they sit just outside the viewport */
	margin-top: -1.5rem; /* nudge up to account for dots below */
}

.ci-slider__prev { left: -22px; }
.ci-slider__next { right: -22px; }

.ci-slider__prev:hover,
.ci-slider__next:hover {
	background-color: #253d47;
	border-color: #253d47;
	color: var(--ci-color-white);
}

/* ── Dot indicators ── */
.ci-slider__dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1.25rem;
}

.ci-slider__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--ci-color-border);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.ci-slider__dot--active {
	background-color: #253d47;
	transform: scale(1.3);
}

/* ── Mobile: hide arrows, rely on dots / swipe ── */
@media (max-width: 767px) {
	.ci-slider__prev,
	.ci-slider__next {
		display: none;
	}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.ci-slider__track {
		transition: none;
	}
}