/* =========================================================================
   猿助网 · 首页轮播（方案 F 落地版）
   作用域：仅 .cv-f（首页轮播）。
   设计：A 浅红渐变背景 + E 极简大字文字版式 + 整体右偏 240px 避开左侧分类菜单。
   颜色/字号/间距全部引用 tokens.css 设计令牌，品牌红树保持不变。
   轮播由 slick 驱动（dots/autoplay/fade），本文件只负责视觉与右偏安全区。
   ========================================================================= */

/* 轮播根（同时是 slick 容器） */
.cv-f {
  position: relative;
  height: 421px;
}

/* 单张幻灯片：slick 会把它当作 slide，这里定高 + 居中版式 */
.cv-f .cv__slide {
  height: 421px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
}

/* 内容包裹层：从分类树右侧开始铺满剩余宽度，文字在该区域内水平居中 */
.cv-f__wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 60px 44px 300px;
  position: relative;
  z-index: 2;
}

/* 柔光晕装饰（取自方案 E，增强层次） */
.cv-f .cv__slide::before {
  content: "";
  position: absolute;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  right: -90px;
  top: -120px;
  background: radial-gradient(circle, var(--color-primary-bg), transparent 70%);
  filter: blur(10px);
  opacity: .9;
}
.cv-f .cv__slide::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  left: -80px;
  bottom: -120px;
  background: radial-gradient(circle, #eef2fb, transparent 70%);
  opacity: .8;
}

/* 各张背景（浅色系，与主题呼应） */
.cv-f .s1 { background: linear-gradient(120deg, #ffffff, #fff6f6 55%, #fdeaea); }
.cv-f .s2 { background: linear-gradient(120deg, #ffffff, #fef0f0 60%, #fbdada); }
.cv-f .s3 { background: linear-gradient(120deg, #fffdf6, #fff3e0 60%, #ffe6c2); }
.cv-f .s4 { background: linear-gradient(120deg, #ffffff, #f3f6fb 55%, #e7eef8); }
.cv-f .s5 { background: linear-gradient(120deg, #ffffff, #fff3f0 60%, #ffe6e0); }

/* 文字版式（方案 E 极简大字） */
.cv-f .cv-e__inner {
  position: relative;
  z-index: 2;
  max-width: 620px;
  text-align: center;
  /* 右偏已由 .cv__slide 的 padding-left 保证，此处不再需要 margin */
}
.cv-f .cv-e__kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--color-primary);
  text-transform: uppercase;
  margin-bottom: var(--space-md);
}
.cv-f .cv-e__title {
  font-size: 42px;
  line-height: 1.22;
  font-weight: 800;
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
}
.cv-f .cv-e__title .grad {
  background: linear-gradient(120deg, var(--color-primary), #ef7a4f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cv-f .cv-e__desc {
  color: var(--color-text-secondary);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}
.cv-f .cv-e__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin: 30px 0;
}
.cv-f .cv-e__stat {
  display: flex;
  justify-content: center;
  gap: var(--space-xl);
  margin-top: var(--space-md);
}
.cv-f .cv-e__stat b {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: var(--color-text-primary);
}
.cv-f .cv-e__stat span {
  font-size: 12px;
  color: var(--color-text-tertiary);
}

/* 通用按钮：复用商品详情「立即购买」样式 */
.cv__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 10px 24px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-btn);
  font-weight: var(--font-weight-btn);
  line-height: var(--line-height-btn);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-base);
  cursor: pointer;
  border: none;
}
.cv__btn--primary {
  background: var(--color-primary);
  color: #fff;
}
.cv__btn--primary:hover {
  background: var(--color-primary-hover);
  box-shadow: 0 8px 20px var(--color-primary-shadow);
}
.cv__btn--dark {
  background: #fff;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}
.cv__btn--dark:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* slick 自带指示点保证在内容之上；桌面端让 dots 居中于「避开分类树的内容区」 */
.cv-f .slick-dots {
  z-index: 6;
  left: calc(50% + 120px);   /* 内容区中心相对 .cv-f 中心右偏 120px = (300px 左安全区 - 60px 右 padding) / 2 */
  right: auto;
  transform: translateX(-50%);
  width: auto;
}
.cv-f .slick-dots li button { background: rgb(181, 175, 165); }

/* 桌面内容宽度约束（≥1200px 视口） */
@media (min-width: 1200px) {
  .cv-f .cv-e__inner { max-width: 680px; }
}

/* 平板/大手机：左侧菜单已隐藏，取消左偏安全区，固定高度 */
@media (max-width: 992px) {
  .cv-f { height: 360px; }
  .cv-f .cv__slide { height: 360px; }
  .cv-f__wrap { padding: 36px 28px; }
  .cv-f .slick-dots { bottom: 8px; left: 50%; transform: translateX(-50%); }
}

/* 手机竖屏：横向布局保持与 PC 一致，收紧高度与字号 */
@media (max-width: 768px) {
  .cv-f { height: 260px; }
  .cv-f .cv__slide { height: 260px; }
  .cv-f__wrap { padding: 20px 20px 32px; }

  .cv-f .cv-e__kicker {
    font-size: 12px;
    letter-spacing: 1px;
    margin-bottom: var(--space-sm);
  }
  .cv-f .cv-e__title {
    font-size: 20px;
    line-height: 1.25;
    margin-bottom: 8px;
  }
  .cv-f .cv-e__desc {
    font-size: 12px;
    line-height: 1.55;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cv-f .cv-e__actions {
    gap: var(--space-sm);
    margin: 12px 0 0;
  }
  .cv-f .cv-e__actions .cv__btn {
    flex: 1 1 auto;
    padding: 6px 16px;
    font-size: 12px;
  }
  .cv-f .cv-e__stat {
    gap: var(--space-md);
    margin-top: 12px;
  }
  .cv-f .cv-e__stat b { font-size: 16px; }
  .cv-f .cv-e__stat span { font-size: var(--font-size-mini); }
  .cv-f .slick-dots { bottom: 8px; }
}

/* 小屏手机：与 PC 端同款横向布局，整体等比缩小 */
@media (max-width: 480px) {
  .cv-f { height: 200px; }
  .cv-f .cv__slide { height: 200px; }
  .cv-f__wrap { padding: 14px 16px 26px; }

  .cv-f .cv-e__kicker {
    font-size: 10px;
    letter-spacing: 1px;
    margin-bottom: 4px;
  }
  .cv-f .cv-e__title {
    font-size: 16px;
    line-height: 1.3;
    margin-bottom: 6px;
  }
  .cv-f .cv-e__desc {
    font-size: 11px;
    line-height: 1.5;
    margin-bottom: 10px;
  }

  /* 按钮恢复横排（覆盖 768px 断点的 flex: 1 1 auto），与 PC 端一致 */
  .cv-f .cv-e__actions {
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    margin: 10px 0 0;
  }
  .cv-f .cv-e__actions .cv__btn {
    flex: 0 0 auto;
    width: auto;
    padding: 5px 14px;
    font-size: 11px;
  }

  .cv-f .cv-e__stat {
    gap: 14px;
    margin-top: 8px;
  }
  .cv-f .cv-e__stat b { font-size: 13px; }
  .cv-f .cv-e__stat span { font-size: 9px; }
  .cv-f .slick-dots { bottom: 5px; }
}

/* 减少动态效果（无障碍） */
@media (prefers-reduced-motion: reduce) {
  .cv-f .cv__slide { transition: none !important; }
}