/* ==========================================================================
   关投强 - 客户案例详情页
   ========================================================================== */

.case-detail-hero {
    background: var(--c-dark-grad);
    color: #fff; padding: 96px 0 80px; position: relative; overflow: hidden;
}
.case-detail-hero::after {
    content: ""; position: absolute; right: -120px; top: -120px; width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(255,255,255,.12), transparent 60%);
}
.case-detail-hero .container { position: relative; z-index: 1; }
.case-detail-hero .back {
    display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,.75);
    font-size: 14px; margin-bottom: 24px; transition: color .2s;
}
.case-detail-hero .back:hover { color: #fff; }
/* 行业 / 场景标签：均可点，跳到对应专题页（2026-09-29 起） */
.case-detail-hero .hero-tags {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.case-detail-hero .ind-tag,
.case-detail-hero .scen-tag {
    display: inline-block; background: rgba(255,255,255,.15); backdrop-filter: blur(6px);
    padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600;
    color: #fff; text-decoration: none; transition: background .2s;
}
.case-detail-hero .scen-tag { background: rgba(255,255,255,.08); font-weight: 500; }
.case-detail-hero .ind-tag:hover,
.case-detail-hero .scen-tag:hover { background: rgba(255,255,255,.3); }
.case-detail-hero h1 { font-size: 42px; font-weight: 800; line-height: 1.3; margin-bottom: 16px; }
.case-detail-hero .subtitle { font-size: 18px; opacity: .85; margin-bottom: 36px; max-width: 700px; }
.case-detail-hero .hero-stats {
    display: flex; gap: 48px; flex-wrap: wrap;
}
.case-detail-hero .hero-stats .item { text-align: center; }
.case-detail-hero .hero-stats .item .num { font-size: 36px; font-weight: 800; }
.case-detail-hero .hero-stats .item .lbl { font-size: 14px; opacity: .75; margin-top: 4px; }

.case-detail-body { padding: 64px 0; }
.case-detail-grid {
    /* ⚠ 列宽必须用 minmax(0, …) 收口：单列模式下 `1fr` 的最小值是 auto，
       会被侧栏（项目档案 / 二维码 / 查看对应方案）的 min-content 撑破，
       在 320px 视口下把整页顶出 3px 横向溢出（2026-09-29 实测）。 */
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px;
}
.case-detail-main h2 {
    font-size: 24px; font-weight: 700; margin: 40px 0 16px; padding-bottom: 12px;
    border-bottom: 2px solid var(--c-primary-light);
}
.case-detail-main h2:first-child { margin-top: 0; }
.case-detail-main p {
    color: var(--c-text-sub); line-height: 1.9; margin-bottom: 16px; font-size: 16px;
}
.case-detail-main ul {
    margin: 16px 0; padding-left: 20px; list-style: disc; color: var(--c-text-sub); line-height: 1.9;
}
.case-detail-main li { margin-bottom: 8px; }

.case-detail-sidebar > div {
    background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius-lg);
    padding: 28px; margin-bottom: 24px;
}
.case-detail-sidebar h3 {
    font-size: 18px; font-weight: 700; margin-bottom: 16px;
}
.case-detail-sidebar .info-row {
    display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--c-line);
    font-size: 14px;
}
.case-detail-sidebar .info-row:last-child { border: 0; }
.case-detail-sidebar .info-row span { color: var(--c-text-mute); }
.case-detail-sidebar .info-row b { color: var(--c-text); font-weight: 600; }
.case-detail-sidebar .info-row b a { color: var(--c-primary); text-decoration: none; }
.case-detail-sidebar .info-row b a:hover { text-decoration: underline; }

.case-detail-sidebar .qr-box {
    text-align: center; padding: 24px;
}
.case-detail-sidebar .qr-box img {
    width: 160px; height: 160px; border-radius: 12px; margin: 0 auto 12px;
    border: 1px solid var(--c-line);
}
.case-detail-sidebar .qr-box p { font-size: 13px; color: var(--c-text-sub); }
.case-detail-sidebar .qr-box .wx { color: var(--c-accent); font-weight: 700; }

.case-testimonial {
    background: var(--c-bg-soft); border-left: 4px solid var(--c-primary);
    padding: 28px 32px; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; margin: 32px 0;
}
.case-testimonial p {
    font-size: 18px; color: var(--c-text); line-height: 1.8; font-style: italic; margin-bottom: 16px;
}
.case-testimonial .who { font-size: 15px; color: var(--c-text-sub); }
.case-testimonial .who b { color: var(--c-text); }

.related-cases { background: var(--c-bg-soft); padding: 80px 0; }
.related-cases-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
.related-case-card {
    background: #fff; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--c-line);
    transition: all .25s; display: block; color: inherit;
}
.related-case-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* 相关案例小封面（2026-09-21）：与案例列表同步改为行业 banner 图，不再用纯色块+emoji */
.related-case-card .cover {
    height: 120px; position: relative; color: #fff;
    background: var(--c-bg-soft); overflow: hidden;
}
.related-case-card .cover img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.related-case-card .cover::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(160deg, rgba(16,42,100,.55) 0%, rgba(0,82,217,.20) 60%, rgba(0,31,79,.35) 100%);
}
.related-case-card .body { padding: 20px; }
.related-case-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.related-case-card p { font-size: 13px; color: var(--c-text-sub); line-height: 1.6; }

@media (max-width: 1024px) {
    .case-detail-grid { grid-template-columns: minmax(0, 1fr); }
    .case-detail-hero h1 { font-size: 32px; }
    .related-cases-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 768px) {
    .case-detail-hero { padding: 64px 0 48px; }
    .case-detail-hero h1 { font-size: 26px; }
    .case-detail-hero .hero-stats { gap: 24px; }
    .related-cases-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ===== EEAT：案例署名与数据来源 ===== */
.case-byline {
    margin-top: 36px;
    padding-top: 18px;
    border-top: 1px dashed var(--c-line);
    font-size: 13px;
    line-height: 1.9;
    color: var(--c-text-mute);
}

@media (max-width: 480px) {
    .case-detail-hero { padding: 40px 0 32px; }
    .case-detail-hero h1 { font-size: 22px; }
    .case-detail-hero .hero-stats { grid-template-columns: 1fr 1fr; gap: 16px; }
}