/* === JTBC 原生幻灯片样式（CSS 变量版） === */

/* ── 可调参数区：修改这里的值即可全局生效 ── */
:root {
  /* 尺寸 */
  --slider-max-width: 1600px;       /* 幻灯片最大宽度 */
  --slider-height: 450px;           /* 幻灯片图片高度（桌面端） */
  --slider-height-mobile: 240px;    /* 幻灯片图片高度（移动端） */
 /* --slider-radius: 8px;    */         /* 圆角大小 */

  /* 文字层位置 */
  --caption-bottom: 60px;           /* 文字层距底部距离 */
  --caption-left: 60px;             /* 文字层距左侧距离 */
  --caption-max-width: 60%;         /* 文字层最大宽度 */

  /* 字体 */
  --title-size: 32px;               /* 主标题字号 */
  --subtitle-size: 16px;            /* 副标题字号 */
  --title-margin: 10px;             /* 标题与副标题间距 */
  --subtitle-margin: 20px;          /* 副标题与按钮间距 */

  /* 按钮 */
  --btn-padding: 10px 24px;         /* 按钮内边距 */
  --btn-radius: 4px;                /* 按钮圆角 */

  /* 左右箭头 */
  --arrow-size: 44px;               /* 箭头按钮宽高 */
  --arrow-font-size: 20px;          /* 箭头图标大小 */
  --arrow-offset: 16px;             /* 箭头距边缘距离 */

  /* 指示器 */
  --dot-size: 12px;                 /* 指示器圆点大小 */
  --dot-gap: 10px;                  /* 圆点间距 */
  --dot-bottom: 20px;               /* 指示器距底部距离 */

  /* 动画 */
  --transition-speed: 0.6s;         /* 切换动画时长 */
}

/* ── 以下样式无需手动修改 ── */

.jtbc-slider {
  position: relative;
  width: 100%;
  max-width: var(--slider-max-width);
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--slider-radius);
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
}

.jtbc-slider-track {
  display: flex;
  transition: transform var(--transition-speed) ease-in-out;
}

.jtbc-slide {
  min-width: 100%;
  position: relative;
}

.jtbc-slide img {
  width: 100%;
  height: var(--slider-height);
  object-fit: cover;
  display: block;
}

/* 文字层 */
.jtbc-slide-caption {
  position: absolute;
  bottom: var(--caption-bottom);
  left: var(--caption-left);
  color: #fff;
  max-width: var(--caption-max-width);
}

.jtbc-slide-caption h2 {
  font-size: var(--title-size);
  margin-bottom: var(--title-margin);
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}

.jtbc-slide-caption p {
  font-size: var(--subtitle-size);
  margin-bottom: var(--subtitle-margin);
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}

.jtbc-slide-btn {
  display: inline-block;
  padding: var(--btn-padding);
  background: rgba(255,255,255,.9);
  color: #333;
  text-decoration: none;
  border-radius: var(--btn-radius);
  font-weight: 600;
  transition: all .3s;
}

.jtbc-slide-btn:hover {
  background: #fff;
  transform: translateY(-2px);
}

/* 左右箭头 */
.jtbc-slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--arrow-size);
  height: var(--arrow-size);
  background: rgba(0,0,0,.3);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: var(--arrow-font-size);
  cursor: pointer;
  z-index: 2;
  transition: background .3s;
}

.jtbc-slider-btn:hover {
  background: rgba(0,0,0,.6);
}

.jtbc-prev { left: var(--arrow-offset); }
.jtbc-next { right: var(--arrow-offset); }

/* 底部指示器 */
.jtbc-slider-dots {
  position: absolute;
  bottom: var(--dot-bottom);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--dot-gap);
  z-index: 2;
}

.jtbc-slider-dots span {
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  cursor: pointer;
  transition: background .3s;
}

.jtbc-slider-dots span.active {
  background: #fff;
}

/* 移动端响应式：只需覆盖变量值即可 */
@media (max-width: 768px) {
  :root {
    --slider-height: var(--slider-height-mobile);
    --caption-bottom: 30px;
    --caption-left: 20px;
    --caption-max-width: 80%;
    --title-size: 20px;
    --subtitle-size: 14px;
    --arrow-size: 36px;
    --arrow-font-size: 16px;
  }
  .jtbc-slide-caption p {
    display: none; /* 手机端隐藏副标题 */
  }
}