/* ===== 工程案例（前台） ===== */
.case-page { margin: 0; }
.case-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* 首屏 */
.case-hero {
    position: relative;
    padding: 92px 24px 72px;
    background: linear-gradient(135deg, #111a2e 0%, #22314a 60%, #0c2c20 100%);
    color: #fff;
    overflow: hidden;
}
.case-hero-bg {
    position: absolute; inset: 0; opacity: .12;
    background-image:
        radial-gradient(circle at 20% 30%, #0fae6f 0, transparent 25%),
        radial-gradient(circle at 80% 70%, #ffffff 0, transparent 30%);
}
.case-hero-inner { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.case-kicker {
    display: inline-block;
    letter-spacing: 3px; font-size: 12px; font-weight: 600;
    color: #8fb7ff; text-transform: uppercase; margin-bottom: 16px;
}
.case-hero h1 { font-size: 40px; font-weight: 800; margin: 0 0 16px; line-height: 1.2; }
.case-hero h1 em { color: #0fae6f; font-style: normal; }
.case-hero p { color: #c3cde0; font-size: 15px; max-width: 640px; margin: 0; }

/* 面包屑 */
.case-crumbs {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 13px; color: #8a93a3; margin: 28px 0 18px;
}
.case-crumbs a { color: #2f6feb; text-decoration: none; }
.case-crumbs i { font-size: 11px; color: #c4cad4; }

.case-section { padding: 6px 0 30px; }

/* 分类筛选 */
.case-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.case-chip {
    display: inline-block; padding: 7px 18px; border-radius: 20px;
    background: #fff; color: #334155; border: 1px solid #e2e8f0;
    font-size: 13px; font-weight: 500; text-decoration: none; transition: all .15s;
}
.case-chip:hover { border-color: #2f6feb; color: #2f6feb; }
.case-chip.is-active { background: #111a2e; color: #fff; border-color: #111a2e; }

/* 案例卡片网格 */
.case-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.case-card {
    display: block; background: #fff; border: 1px solid #eef1f5; border-radius: 14px;
    overflow: hidden; color: inherit; text-decoration: none;
    transition: box-shadow .18s, transform .18s;
}
.case-card:hover { box-shadow: 0 14px 34px rgba(31,45,70,.12); transform: translateY(-3px); color: inherit; }
.case-card-media { position: relative; overflow: hidden; background: #f4f6f9; }
.case-card-media img { width: 100%; height: 210px; object-fit: cover; display: block; transition: transform .3s ease; }
.case-card:hover .case-card-media img { transform: scale(1.03); }
.case-card-empty { height: 210px; display: flex; align-items: center; justify-content: center; color: #c4cad4; font-size: 40px; }
.case-year {
    position: absolute; top: 12px; right: 12px;
    background: rgba(17,26,46,.82); color: #fff; font-size: 12px; font-weight: 600;
    padding: 4px 10px; border-radius: 6px;
}
.case-card-body { padding: 18px 18px 20px; display: flex; flex-direction: column; }
.case-cat-tag {
    display: inline-block; font-size: 11px; color: #0c8f5b; text-transform: uppercase;
    letter-spacing: 1px; margin-bottom: 8px;
}
.case-card-body h3 { font-size: 17px; font-weight: 600; color: #111a2e; margin: 0 0 8px; }
.case-card-body p { font-size: 13px; color: #7b8494; line-height: 1.7; margin: 0 0 12px; }
.case-card-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: #8a93a3; margin-bottom: 12px; }
.case-card-meta i { margin-right: 4px; color: #0fae6f; }
.case-go { color: #2f6feb; font-size: 13.5px; font-weight: 600; margin-top: auto; }

/* CTA */
.case-cta { padding: 10px 0 40px; }
.case-cta-box {
    background: linear-gradient(120deg, #0d2b21, #123a2b);
    border-radius: 16px; color: #fff; padding: 40px 44px; text-align: center;
    box-shadow: 0 12px 30px rgba(13,43,33,.18);
}
.case-cta-box h2 { font-size: 24px; font-weight: 700; margin: 0 0 10px; }
.case-cta-box p { color: #c5d8cc; font-size: 14px; margin: 0 0 20px; }

/* ===== 案例详情 ===== */
.case-detail-page { padding-bottom: 40px; }
.case-detail-main { background: #fff; border: 1px solid #eef1f5; border-radius: 16px; padding: 36px 40px; margin-top: 6px; }
.case-detail-head { margin-bottom: 26px; }
.case-detail-head h1 { font-size: 28px; font-weight: 700; color: #111a2e; margin: 6px 0 12px; }
.case-detail-meta { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; color: #7b8494; }
.case-detail-meta i { margin-right: 5px; color: #0fae6f; }

.case-gallery { margin-bottom: 30px; }
.case-gallery-main {
    position: relative; border-radius: 12px; overflow: hidden;
    background: #f4f6f9; max-height: 520px;
}
.case-gallery-main img { width: 100%; max-height: 520px; object-fit: cover; display: block; }
.case-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 40px; height: 40px; border-radius: 50%; border: 0; font-size: 18px;
    background: rgba(17,26,46,.5); color: #fff; display: flex; align-items: center; justify-content: center;
}
.case-arrow:hover { background: rgba(17,26,46,.75); }
.case-prev { left: 14px; }
.case-next { right: 14px; }
.case-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.case-thumb { width: 86px; height: 62px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; background: none; }
.case-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-thumb.active { border-color: #0fae6f; }

.case-block { margin-bottom: 30px; }
.case-block h2 { font-size: 19px; font-weight: 700; color: #111a2e; margin: 0 0 14px; padding-left: 12px; border-left: 4px solid #0fae6f; }
.case-article { font-size: 15px; line-height: 1.9; color: #334155; }
.case-solution {
    display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; justify-content: space-between;
    background: #f7f8fa; border: 1px solid #eef1f5; border-radius: 12px; padding: 22px 24px;
}
.case-solution-txt { flex: 1 1 320px; font-size: 15px; line-height: 1.8; color: #334155; margin: 0; }
.case-solution-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.case-solution-badges span { background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 6px 14px; font-size: 12.5px; color: #475569; }
.case-solution-badges i { margin-right: 5px; color: #0fae6f; }

.case-prod-text { color: #7b8494; font-size: 13.5px; margin: -4px 0 16px; }
.case-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case-back { margin-top: 10px; }

/* 响应式 */
@media (max-width: 992px) {
    .case-grid, .case-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .case-hero h1 { font-size: 30px; }
    .case-grid, .case-related-grid { grid-template-columns: 1fr; }
    .case-detail-main { padding: 24px 18px; }
}