/**
 * Shared Carousel Layout — kd-carousel
 *
 * Column-count modifiers control slide widths.
 * Add .kd-carousel to any .swiper element alongside a modifier:
 *   .kd-carousel--cols-4  ~4 visible + peek
 *   .kd-carousel--cols-5  ~5 visible + peek
 *
 * Swiper config (slidesPerView, spaceBetween) lives in kd-carousel.js.
 */

/* ── Mobile full-bleed overflow ────────────────────────────── */
.kd-carousel {
	overflow: hidden;
	margin: 0 -24px;
	padding: 0 24px;
}

@media (min-width: 768px) {
	.kd-carousel {
		margin: 0;
		padding: 0;
	}
}

/* ── Slide height ──────────────────────────────────────────── */
.kd-carousel .swiper-slide {
	height: auto;
}

/* Extra space so text-underline-offset decorations aren't clipped by overflow:hidden */
.kd-carousel .swiper-wrapper {
	padding-bottom: 4px;
}

/* ── cols-4: ~4 visible + peek ─────────────────────────────── */
.kd-carousel--cols-4 .swiper-slide {
	width: 200px;
}

@media (min-width: 768px) {
	.kd-carousel--cols-4 .swiper-slide {
		width: 230px;
	}
}

@media (min-width: 1024px) {
	.kd-carousel--cols-4 .swiper-slide {
		width: 260px;
	}
}

/* ── cols-5: 5 visible + peek ──────────────────────────────── */
.kd-carousel--cols-5 .swiper-slide {
	width: 160px;
}

@media (min-width: 768px) {
	.kd-carousel--cols-5 .swiper-slide {
		width: 180px;
	}
}

@media (min-width: 1024px) {
	.kd-carousel--cols-5 .swiper-slide {
		width: 170px;
	}
}

@media (min-width: 1200px) {
	.kd-carousel--cols-5 .swiper-slide {
		width: 200px;
	}
}