/* ==========================================
   客户案例页 - page-cases.css
   所有类名用 cases- 前缀，避免全局冲突
   1:1 复刻 yinqingli.com/cases
   ========================================== */

/* ---- Banner ---- */
.cases-banner-wrap {
    position: relative;
    width: 100%;
    height: 380px;
    overflow: hidden;
    background: linear-gradient(135deg, #0f4c81 0%, #1e88c7 50%, #29aae1 100%);
}

.cases-banner-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url(../images/cases/solution.jpg) no-repeat center center / cover;
    opacity: 0.85;
}

.cases-banner-inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    padding-top: 140px;
    text-align: center;
    color: #fff;
}

.cases-bt { font-size: 28px; letter-spacing: 4px; margin-bottom: 12px; text-shadow: 0 2px 8px rgba(0,0,0,.3); }
.cases-bt2 { font-size: 42px; font-weight: bold; margin-bottom: 15px; text-shadow: 0 2px 8px rgba(0,0,0,.3); line-height: 1.3; }
.cases-bt3 { font-size: 16px; opacity: .9; text-shadow: 0 1px 4px rgba(0,0,0,.3); }

/* ---- 面包屑 ---- */
.cases-crumbs { background:#fff; padding:10px 0; border-bottom:1px solid #eee; }
.cases-crumbs .cases-container { max-width:1200px; margin:0 auto; padding:0 15px; font-size:13px; color:#999; }
.cases-crumbs a { color:#666; text-decoration:none; }
.cases-crumbs a:hover { color:#1a7fd4; }

/* ---- 页面标题 ---- */
.cases-page-title { text-align:center; font-size:32px; font-weight:bold; color:#1a7fd4; padding:30px 0 20px; }

/* ---- 容器 ---- */
.cases-container { max-width:1200px; margin:0 auto; padding:0 15px; }
.cases-list-wrap { padding:20px 0 60px; background:#fff; }

/* ---- 每个案例项 ---- */
.cases-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 25px 0;
    border-bottom: 1px solid #e5e5e5;
}
.cases-item:first-child { border-top: 1px solid #e5e5e5; }
.cases-item:hover { background: #fafafa; }

/* 左侧图片 */
.cases-item-img {
    width: 320px;
    min-width: 320px;
    height: 200px;
    overflow: hidden;
    margin-right: 30px;
}
.cases-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.cases-item:hover .cases-item-img img { transform: scale(1.05); }

/* 右侧内容 */
.cases-item-body { flex:1; min-width:0; display:flex; flex-direction:column; }

/* 标题 */
.cases-item-title {
    font-size: 22px;
    font-weight: bold;
    color: #333;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 12px;
    transition: color .3s;
}
.cases-item-title i {
    display:inline-block;
    width:8px; height:8px;
    background:#1a7fd4;
    margin-right:10px;
    vertical-align:middle;
}
.cases-item-title:hover { color:#1a7fd4; }

/* 摘要 */
.cases-item-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.85;
    margin: 0 0 18px;
    text-align: justify;
}

/* 三项信息 */
.cases-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 25px;
    margin-bottom: 12px;
}
.cases-meta-row {
    min-width: 160px;
    margin-bottom: 6px;
}
.cases-meta-label {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #999;
    margin-bottom: 3px;
}
.cases-meta-label img { width:18px; height:18px; margin-right:5px; }
.cases-meta-val {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

/* 浏览量 */
.cases-item-views {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px dashed #eee;
}
.cases-item-views em { font-style:normal; font-size:13px; color:#999; margin-right:10px; }
.cases-item-views strong { font-size:24px; font-weight:bold; color:#1a7fd4; }

/* ===== 响应式 ===== */

@media (max-width:992px) {
    .cases-banner-wrap { height:300px; }
    .cases-banner-inner { padding-top:90px; }
    .cases-bt { font-size:22px; }
    .cases-bt2 { font-size:32px; }
    .cases-bt3 { font-size:14px; }
    .cases-page-title { font-size:26px; }

    .cases-item { flex-direction:column; padding:20px 15px; }
    .cases-item-img { width:100%; min-width:100%; height:220px; margin-right:0; margin-bottom:15px; }
    .cases-item-meta { flex-direction:column; gap:0; }
    .cases-meta-row { min-width:auto; }
    .cases-item-views { justify-content:flex-start; }
}

@media (max-width:576px) {
    .cases-banner-wrap { height:240px; }
    .cases-banner-inner { padding-top:60px; }
    .cases-bt { font-size:18px; letter-spacing:2px; }
    .cases-bt2 { font-size:24px; }
    .cases-bt3 { font-size:13px; }
    .cases-page-title { font-size:22px; padding:20px 0 15px; }
    .cases-item-img { height:180px; }
    .cases-item-title { font-size:18px; }
    .cases-item-desc { font-size:13px; }
    .cases-item-views strong { font-size:20px; }
}