/*
 * ETheme-Block — slider（轮播容器）
 *
 * 复用既有轮播运行时与 eth-carousel.css；本文件只补两件事：
 *   1. 每屏张数（把 --etb-slider-per-view 换算为 flex-basis）
 *   2. 容器与头部布局
 *
 * 运行时不含 slidesPerView 参数，每屏张数一律由 CSS 决定 ——
 * 与 logos / testimonials / loop 三个既有消费者的做法完全一致，
 * 因此没有为了本组件去改动运行时。
 */

/* =========================================================
 * 头部
 * ========================================================= */
.etb-slider__header {
	display: flex;
	flex-direction: column;
	gap: var(--eth-space-2xs, 0.6rem);
	margin-bottom: var(--eth-space-l, 2.5rem);
}

/* =========================================================
 * 轨道与幻灯片
 * ========================================================= */

/* 幻灯片间距沿用轮播的统一变量，便于与其它轮播区块保持一致 */
.etb-slider__track {
	--etb-carousel-gap: var(--eth-space-s, 1rem);
}

/* 每屏张数 = --etb-slider-per-view（父块输出）
   间隔数 = 张数 - 1 */
.etb-slider__slide {
	flex: 0 0 calc((100% - var(--etb-carousel-gap) * (var(--etb-slider-per-view, 3) - 1)) / var(--etb-slider-per-view, 3));
}

/* 平板：最多两张 */
@media (max-width: 992px) {
	.etb-slider__slide {
		flex-basis: calc((100% - var(--etb-carousel-gap)) / 2);
	}
}

/* 手机：固定一张 */
@media (max-width: 768px) {
	.etb-slider__slide {
		flex-basis: 100%;
	}
}