/* ==========================================================================
   首页 CERTIFICATE 证书模块 —— 超出裁切修复（横向滚动）
   --------------------------------------------------------------------------
   原厂写法的问题：
     · .certificate_items 是不换行的 flex 单行，子项 flex-shrink:0（来自 .swiper-slide），
       宽度固定 19.1%，且 :last-child 被单独放大到 35.9%；
     · 模板演示数据只有 5 张，刚好铺满一行，看不出问题；
     · 本站实际有 10 张 → 整行宽约 2701px，而可视区只有 1300px，
       多出来的 5 张被 body{overflow-x:hidden} 直接裁掉（既看不到也滑不到），
       末张还因为 35.9% 的规则被拉高到 659px，把整段撑变形。

   本文件只做两件事（不改任何原厂文件）：
     1. 让 .certificate_slider 成为横向滚动容器：原生滚动 + 滚动吸附 + 常显细滚动条；
     2. 统一每张证书的宽度（含末张），断点内调整「一屏可见张数」。

   引用方式：由 mu-plugin zz-certificate-fix.php 在首页 wp_head 末尾输出
             /style/public/kongkim-certificate.css
   ========================================================================== */

/* ---------- 1. 滚动容器 ---------- */
.index_certificate .certificate_slider {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;   /* 滑到头不要连带整页横滑 */
    scroll-snap-type: x proximity;
    scrollbar-width: thin;            /* Firefox */
    scrollbar-color: #c9ccd1 rgba(0, 0, 0, 0);
}

/* 滚动条常显（Chrome/Safari/Edge），作为「右边还有内容」的视觉提示 */
.index_certificate .certificate_slider::-webkit-scrollbar { height: 8px; }
.index_certificate .certificate_slider::-webkit-scrollbar-track {
    background: #f2f3f5;
    border-radius: 4px;
}
.index_certificate .certificate_slider::-webkit-scrollbar-thumb {
    background: #c9ccd1;
    border-radius: 4px;
}
.index_certificate .certificate_slider::-webkit-scrollbar-thumb:hover { background: #a8adb5; }

/* ---------- 2. 证书轨道 ---------- */
.index_certificate .certificate_items {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 16px;                        /* 卡片之间的横向间距 */
    padding-bottom: 16px;             /* 给滚动条留出位置，避免压住证书 */
    --kk-cert-w: 18.2%;               /* 一屏可见张数 =（100% + gap）/（该值 + gap） */
}

/* 统一宽度：一并压掉原厂的 :last-child{35.9%} 与移动端 :nth-child(3){34.2%} 特例 */
.index_certificate .certificate_items .certificate_item,
.index_certificate .certificate_items .certificate_item:last-child,
.index_certificate .certificate_items .certificate_item:nth-child(3) {
    flex: 0 0 auto;
    width: var(--kk-cert-w);
    margin: 0;
    scroll-snap-align: start;
}

.index_certificate .certificate_items .certificate_item img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- 3. 断点：一屏可见张数 ---------- */
@media only screen and (max-width: 1024px) {
    .index_certificate .certificate_items { --kk-cert-w: 30%; }   /* 约 3 张 */
}
@media only screen and (max-width: 768px) {
    .index_certificate .certificate_items { gap: 12px; --kk-cert-w: 46%; }   /* 约 2 张 */
}
@media only screen and (max-width: 480px) {
    .index_certificate .certificate_items { gap: 10px; --kk-cert-w: 58%; }   /* 约 1.7 张 */
}

/* ---------- 4. 左右翻页按钮 ----------
   滚动条在 macOS / iOS 上是浮层且默认隐藏，鼠标用户又没有横向滚轮，
   所以补一对常驻按钮作为「右边还有内容」的主要提示。
   按钮由 mu-plugin 注入到 .index_bd .layout（该元素自带 position:relative），
   用绝对定位浮在证书行两端；按钮只在「该方向还有内容」时出现，不遮挡首尾证书。 */
.index_certificate .kk-cert-nav {
    position: absolute;
    top: 50%;
    margin-top: -8px;                 /* 抵消轨道 16px 下边距的一半，视觉上对齐卡片中线 */
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(17, 24, 39, .55);
    color: #fff;
    cursor: pointer;
    z-index: 3;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: background-color .2s ease;
    transition: background-color .2s ease;
}
.index_certificate .kk-cert-nav:hover { background: rgba(17, 24, 39, .82); }
.index_certificate .kk-cert-nav:focus { outline: 2px solid #2a6eb8; outline-offset: 2px; }
.index_certificate .kk-cert-nav svg { display: block; width: 18px; height: 18px; }
.index_certificate .kk-cert-nav.prev { left: 12px; }
.index_certificate .kk-cert-nav.next { right: 12px; }

/* display:flex 会盖掉浏览器默认的 [hidden]{display:none}，这里显式补回来 */
.index_certificate .kk-cert-nav[hidden] { display: none; }

@media only screen and (max-width: 480px) {
    .index_certificate .kk-cert-nav { width: 36px; height: 36px; }
    .index_certificate .kk-cert-nav svg { width: 15px; height: 15px; }
    .index_certificate .kk-cert-nav.prev { left: 6px; }
    .index_certificate .kk-cert-nav.next { right: 6px; }
}