/* ============================================================
   拾山科技 · 客户案例列表页 · 卡片区布局（仅 cases.html 使用）
   PC 端：一行两个静态网格（无滚动）；移动端：横向滑动 + 圆点
   卡片内部元素样式在共用 shishan-cases.css（首页案例区同款复用）
   引用：/wp-content/uploads/custom/NewFolder/assets/css/shishan-cases-list.css?v=20261023d
   ============================================================ */

/* ---------- PC：一行两个静态网格 ---------- */
.shishan-cases--list .shishan-cases__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.shishan-cases--list .shishan-case-card {
    display: block;
    padding: 0 0 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-decoration: none;
    color: inherit;
    overflow: visible;
    transition: transform .25s ease;
}

.shishan-cases--list .shishan-case-card:hover {
    transform: translateY(-4px);
    border: 0;
    background: transparent;
}

.shishan-cases--list .shishan-case-card__media {
    margin: 0 0 22px;
    height: 290px;
    border-radius: 10px;
}

/* ---------- 翻页区：PC 隐藏，移动端显示 ---------- */
.shishan-cases--list .shishan-case-nav {
    display: none;
}

.shishan-cases--list .shishan-case-dots {
    justify-content: center;
    gap: 10px;
    margin-top: 0;
}

/* ---------- 移动端：横向滑动 ---------- */
@media (max-width: 767px) {
    .shishan-cases--list .shishan-cases__grid {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .shishan-cases--list .shishan-cases__grid::-webkit-scrollbar {
        display: none;
    }

    .shishan-cases--list .shishan-case-card {
        flex: 0 0 84%;
        scroll-snap-align: center;
    }

    .shishan-cases--list .shishan-case-card__media {
        height: 190px;
    }

    .shishan-cases--list .shishan-case-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        margin-top: 26px;
    }

    .shishan-cases--list .shishan-case-nav__btn {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .18);
        background: transparent;
        color: rgba(255, 255, 255, .75);
        font-size: 16px;
        line-height: 1;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .shishan-cases--list .shishan-case-nav__btn:hover {
        color: #F5A623;
        border-color: #F5A623;
    }

    .shishan-cases--list .shishan-case-dots {
        display: flex;
    }
}