@charset "utf-8";
/* ==========================================================================
   home-slider.css —— 首页工具卡轮播的布局（替代 swiper-bundle.min.css）
   --------------------------------------------------------------------------
   原稿为了首页轮播加载了 143 KB 的 swiper-bundle.min.js 和 14 KB 的
   swiper-bundle.min.css，而 bundle 里 20 多个模块（zoom、parallax、thumbs、
   virtual、5 种 effect…）一个都没用到。这里只补真正被用到的那部分布局：
       .swiper-container / .swiper-wrapper / .swiper-slide 的 flex 骨架
       .tools-swiper 的原生横向滚动与 snap
   视觉（尺寸、配色、圆角）仍然由 index.css 和 style.css 提供，class 名
   一个都没改，所以那两个文件不用动。

   首页 banner 原来是 3 张自动切换的轮播，现在只保留一张静态图，所以
   .swiper-pagination、.swiper-button-prev / -next、.hbanner 的 transform
   过渡连同 JS 里的 heroSlider 一起删掉了。骨架三个 class 要留着——
   .tools-swiper 还在用。
   ========================================================================== */

/* ==========================================================================
   骨架
   ========================================================================== */
.swiper-container{
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.swiper-wrapper{
    display: flex;
    box-sizing: content-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
.swiper-slide{
    flex-shrink: 0;
    position: relative;
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   工具卡轮播：原生横向滚动 + snap
   --------------------------------------------------------------------------
   slidesPerView 用小数（1.15 → 4.6）表示"露出下一张的一角"，这里用
   CSS 变量还原：卡片宽 = (可视宽 - 间距 × (每屏张数 - 1)) / 每屏张数。
   用原生滚动而不是 JS 平移，触摸滑动、惯性、无障碍滚动都是白拿的。
   ========================================================================== */
.tools-swiper{
    --per: 1.15;
    --gap: 14px;
}
/* index.css 里有 `.zs-tools .tools-swiper{overflow:hidden}`，它加载在本文件
   之后且特异性更高。overflow:hidden 下 JS 还能改 scrollLeft，但用户没法用
   触摸和滚轮滑动，所以这里把特异性顶到 0,3,0 抢回来。 */
.zs-tools .tools-swiper.swiper-container{
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.tools-swiper::-webkit-scrollbar{
    display: none;
}
.tools-swiper .swiper-wrapper{
    height: auto;
}
.tools-swiper .swiper-slide{
    flex: 0 0 calc((100% - var(--gap) * (var(--per) - 1)) / var(--per));
    width: auto;
    height: auto;
    scroll-snap-align: start;
}
.tools-swiper .swiper-slide + .swiper-slide{
    margin-left: var(--gap);
}
@media only screen and (min-width: 480px){
    .tools-swiper{ --per: 1.6;  --gap: 16px; }
}
@media only screen and (min-width: 640px){
    .tools-swiper{ --per: 2.2;  --gap: 18px; }
}
@media only screen and (min-width: 768px){
    .tools-swiper{ --per: 2.6;  --gap: 20px; }
}
@media only screen and (min-width: 1024px){
    .tools-swiper{ --per: 3.4;  --gap: 20px; }
}
@media only screen and (min-width: 1280px){
    .tools-swiper{ --per: 3.8;  --gap: 22px; }
}
@media only screen and (min-width: 1600px){
    .tools-swiper{ --per: 4.6;  --gap: 24px; }
}