/* carousel.css — 居中焦点轮播（中 1 张完整居中，左右半露邻图并淡化）*/

.carousel {
  --carousel-slide-w: 46%;                 /* 单张占容器宽：中 1 完整 + 左右各露约 27% */
  position: relative; width: 100%; overflow: hidden;
  padding-block: var(--space-md); isolation: isolate;
}
.carousel--film { --carousel-slide-w: 25%; }      /* 首页2 胶片：5 并排（中 3 完整 + 左右各半露）*/
.carousel__track {
  display: flex;
  transition: transform var(--dur-carousel) var(--ease-out);
  will-change: transform;
}

.carousel__slide {
  flex: 0 0 var(--carousel-slide-w);
  padding-inline: var(--space-2xs);
  box-sizing: border-box;
}
.carousel__slide img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-md); display: block;
  background: var(--color-paper-3); user-select: none;
  transition: transform var(--dur-carousel) var(--ease-out), opacity var(--dur-carousel) var(--ease-out);
}
/* 居中焦点模式：非中心邻图淡化（胶片模式 carousel--film 不淡化）*/
.carousel:not(.carousel--film) .carousel__slide:not(.is-center) img { opacity: 0.45; transform: scale(0.9); }

/* 单张：居中、无控件 */
.carousel--single .carousel__track { justify-content: center; }
.carousel--single .carousel__slide { flex-basis: 60vw; }

/* 胶片模式图不足 5 张：居中静态、无控件 */
.carousel--few .carousel__track { justify-content: center; transform: none !important; }
.carousel--few .carousel__btn, .carousel--few .carousel__dots { display: none; }

/* 控件：左右按钮 */
.carousel__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 40;
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-paper); border: var(--rule-w) solid var(--color-rule-2);
  color: var(--color-ink);
  transition: border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.carousel__btn:hover { color: var(--color-accent); border-color: var(--color-accent); }
.carousel__btn svg { width: 20px; height: 20px; }
.carousel__btn--prev { left: var(--space-md); }
.carousel__btn--next { right: var(--space-md); }

/* 指示点 */
.carousel__dots {
  position: absolute; left: 50%; bottom: var(--space-2xs); transform: translateX(-50%);
  z-index: 40; display: flex; align-items: center; gap: var(--space-2xs);
}
.carousel__dot {
  width: 8px; height: 8px; border-radius: var(--radius-pill);
  background: var(--color-rule-2); border: none; padding: 0;
  transition: background var(--dur-short) var(--ease-out), width var(--dur-short) var(--ease-out);
}
.carousel__dot.is-active { background: var(--color-accent); width: 24px; }

/* 单张：隐藏控件 */
.carousel--single .carousel__btn, .carousel--single .carousel__dots { display: none; }

/* 响应式：移动端单张接近全宽 */
@media (max-width: 48rem) {
  .carousel { --carousel-slide-w: 84%; }
  .carousel--film { --carousel-slide-w: 60%; }      /* 移动端：中 1 + 左右半露 */
  .carousel--single .carousel__slide { flex-basis: 84vw; }
  .carousel__btn { width: 40px; height: 40px; }
  .carousel__btn--prev { left: var(--space-2xs); }
  .carousel__btn--next { right: var(--space-2xs); }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__track { transition: none !important; }
  .carousel__slide img { transition: none !important; }
}