/* ============================================
   推荐业务 recommend.css（仅首页）
   来源：老站 G:\1\index.html「推荐业务」.Recommend-business
         老站用 jQuery 插件 picqhE（G:\1\js\homepage\picqhE.js）：
         每 3000ms 把整条 ul 向左平移一张卡的宽度，再把第一张 li 移到末尾、
         位移归零 → 形成"一格一格走、永不停下"的无缝循环；鼠标悬停时暂停。

   本版保留一模一样的滚动节奏（每次一格 / 3 秒一步 / 悬停暂停），实现方式升级：
     · 不再用 margin-left 做动画（每帧触发重排），改用 transform（GPU 合成，不掉帧）
     · 不克隆节点：走完一格把首项 appendChild 到末尾，再把位移归零，DOM 体量恒定
     · 页面隐藏、滚出视口、鼠标悬停、键盘聚焦时自动暂停，不做无谓计算
     · 用户系统开启"减少动态效果"时完全静止
   脚本：scripts/homepage/recommend-scroll.js

   与旧版差异：
     · 去掉底部的 MORE 按钮（本栏目不再需要"查看更多"）
     · 不再是静态网格，改为横向滚动长条
     · 2026-10-23 加回左右按键（.recommend-prev / .recommend-next，
       同老站 ico1.png 雪碧图箭头），点一下走一格，提示访客这里能滚能点
     · 低于 768px 整栏隐藏（窄屏横条滚动体验差，直接不显示）

   断点（媒体查询统一放在文件末尾）：
     ≥768px 3 张一屏 → ≥992px 4 张 → ≥1200px 5 张
     7 张卡永远多于可视张数，所以任何断点下都能滚起来
   ============================================ */

/* ---------- 1. 板块外层 ---------- */
.recommend-section {
  position: relative;
  isolation: isolate;
  margin-top: 1.5rem;
  padding: 1.25rem 0 1.75rem;              /* 上下留出呼吸间距，标题不贴边 */
  background-color: #fff;
  container-type: inline-size;             /* 供内部 cqw 使用（1cqw = 板块宽度 1%） */
}

/* ---------- 2. 可视窗口：把超出的卡片裁掉 ---------- */
.recommend-viewport {
  position: relative;                        /* 左右按键的定位基准 */
  margin-top: calc(0.75rem + 0.6vw);       /* 与标题拉开距离 */
  overflow: hidden;                        /* 关键：只露出可视区，滚动时裁切两侧 */
  border: 1px solid #e5e5e5;               /* 老站外框色 */
  background-color: #fff;
}

/* ---------- 2.1 左右按键（老站 .pic_pre / .pic_next 复刻） ----------
   老站：30×61，ico1.png 雪碧图（左键 0 0，右键 -32px 0），top:80px 绝对定位；
   这里卡片高度是流式的，改为垂直居中，其余与老站一致 */
.recommend-prev,
.recommend-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);             /* 垂直居中（老站是固定 top:80px） */
  z-index: 5;                              /* 压在滚动卡片之上 */
  width: 30px;
  height: 61px;
  padding: 0;
  border: 0;
  cursor: pointer;
  background-color: transparent;
  background-image: url("../images/recommend/ico1.png");
  background-repeat: no-repeat;
}

.recommend-prev {
  left: 0;
  background-position: 0 0;                /* 雪碧图左半：左箭头 */
}

.recommend-next {
  right: 0;
  background-position: -32px 0;            /* 雪碧图右半：右箭头（同老站） */
}

/* ---------- 3. 滚动轨道 ---------- */
/* 轨道自身宽度 = 可视窗口宽度（block 级默认），
   子项按 1/N 排开、总数多于 N，于是溢出轨道 -> 被 .recommend-viewport 裁掉，
   JS 只平移轨道，不改变任何卡片的盒模型 */
.recommend-track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;                  /* 提前提升为合成层，平移更顺滑 */
}

/* ---------- 4. 单张卡片 ---------- */
.recommend-track li {
  flex: 0 0 calc(100% / 3);                 /* 默认 3 张一屏，断点里再调 */
  display: flex;
  border-right: 1px solid #e5e5e5;         /* 竖向分隔线（右侧），卡序变化时不会跳动 */
  background-color: #fff;
}

.recommend-track a {
  display: flex;
  flex: 1;                                 /* 撑满卡片，同一屏内卡片等高 */
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(0.9rem, 2.2cqw, 1.75rem) 0.5rem clamp(1rem, 2.6cqw, 2rem);
  text-align: center;
  transition: background-color 0.25s ease;
}

/* 图标：老站 113×113，这里换成随板块缩放的流式尺寸 */
.recommend-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(3.75rem, 7.5cqw, 7.5rem);
  aspect-ratio: 1 / 1;
}

.recommend-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;                     /* 图标原比例完整显示，不裁切不变形 */
  transition: transform 0.3s ease;
}

.recommend-track h3 {
  margin-top: 0.75em;
  font-size: clamp(0.875rem, 0.78rem + 0.32vw, 1.0625rem);
  font-weight: normal;
  line-height: 1.35;
  color: #3c3c3c;                          /* 老站 h3 颜色 */
  transition: color 0.25s ease;
}

.recommend-track p {
  margin-top: 0.35em;
  font-size: clamp(0.75rem, 0.69rem + 0.2vw, 0.875rem);
  line-height: 1.5;
  color: #999;                             /* 老站 p 颜色 */
}

/* 悬停：图标轻微放大、标题变红（只做这两处，克制不喧宾夺主） */
.recommend-track a:hover .recommend-icon img,
.recommend-track a:focus-visible .recommend-icon img {
  transform: scale(1.08);
}

.recommend-track a:hover h3,
.recommend-track a:focus-visible h3 {
  color: var(--color-primary);
}

/* ---------- 5. 断点 ---------- */
/* <768px：整栏隐藏（横向滚动长条在窄屏上体验差，直接不出现） */
@media (max-width: 767px) {
  .recommend-section { display: none; }
}

/* ≥992px：一屏 4 张 */
@media (min-width: 992px) {
  .recommend-track li { flex-basis: calc(100% / 4); }
}

/* ≥1200px：一屏 5 张 */
@media (min-width: 1200px) {
  .recommend-track li { flex-basis: calc(100% / 5); }
}