/*==================================================================
  作品区轮播 —— 原生 CSS scroll-snap 实现
  替代 swiper-bundle.min.css(13.8KB) + swiper-bundle.min.js(142KB)

  结构：
  .carousel            → 定位容器（不用 overflow:hidden，避免裁掉两侧箭头）
    .carousel__track   → 横向滚动 + 吸附
      .carousel__slide → 单屏一页
    .carousel__btn     → 左右箭头
    .carousel__dots    → 分页点
==================================================================*/

.carousel {
  position: relative;
}

.carousel__track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden; /* overflow 单轴 visible 会被浏览器强制成 auto，这里显式声明避免意外裁切 */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;          /* Firefox */
  -webkit-overflow-scrolling: touch;
}
.carousel__track::-webkit-scrollbar {
  display: none;                  /* Chrome / Safari / Edge */
}

.carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/*==================== 左右箭头 ====================*/
.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  padding: 0;
  background-color: transparent;
  color: var(--first-color);
  cursor: pointer;
  z-index: 2;
  border-radius: 50%;
  transition: color .3s ease, background-color .3s ease, opacity .3s ease;
}
.carousel__btn:hover {
  color: var(--first-color-alt);
  background-color: hsla(var(--hue-color), 69%, 61%, .10);
}
/* 单页时不显示箭头 */
.carousel__btn[hidden] {
  display: none;
}

/*==================== 分页点 ====================*/
.carousel__dots {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: .5rem;
}

.carousel__dot {
  width: .5rem;
  height: .5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--text-color-light);
  opacity: .5;
  cursor: pointer;
  transition: opacity .3s ease, transform .3s ease, background-color .3s ease;
}
.carousel__dot:hover {
  opacity: .85;
}
.carousel__dot.is-active {
  background-color: var(--first-color);
  opacity: 1;
  transform: scale(1.25);
}

/*==================== 无障碍 ====================*/
@media (prefers-reduced-motion: reduce) {
  .carousel__track {
    scroll-behavior: auto;
  }
}