/* ==========================================================================
   MerrySpruce — carousel.css
   Homepage featured e-bikes carousel.
   ========================================================================== */

.carousel {
	position: relative;
	padding: 0 var(--space-lg);
}

.carousel__viewport {
	overflow: hidden;
	width: 100%;
}

.carousel__track {
	display: flex;
	gap: var(--space-md);
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.carousel__slide {
	flex: 0 0 calc((100% - var(--space-md) * 2) / 3); /* 3 visible on desktop */
	min-width: 0;
}

.carousel__arrow {
	position: absolute;
	top: 42%;
	transform: translateY(-50%);
	z-index: 5;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1px solid var(--color-light-gray);
	background: var(--color-white);
	color: var(--color-deep-navy);
	font-size: 1.6rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-sm);
	transition: background var(--transition), color var(--transition), transform var(--transition);
}
.carousel__arrow:hover {
	background: var(--color-deep-navy);
	color: #fff;
}
.carousel__arrow--prev { left: 0; }
.carousel__arrow--next { right: 0; }
.carousel__arrow:disabled { opacity: 0.4; cursor: default; }

.carousel__dots {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: var(--space-md);
}
.carousel__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	background: var(--color-light-gray);
	padding: 0;
	transition: background var(--transition), transform var(--transition);
}
.carousel__dot.is-active {
	background: var(--color-steel-teal);
	transform: scale(1.25);
}

@media (max-width: 1024px) {
	.carousel__slide { flex-basis: calc((100% - var(--space-md)) / 2); } /* 2 visible */
}

@media (max-width: 680px) {
	.carousel { padding: 0 var(--space-md); }
	.carousel__slide { flex-basis: 100%; } /* 1 visible */
	.carousel__arrow { width: 38px; height: 38px; font-size: 1.3rem; }
}