/* ===================== 案例详情 ===================== */
.case-detail-page {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width: var(--container-width);
    margin: 0 auto;
}

.case-main-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.case-side-col {
    flex: none;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 头部 */
.case-hero-card {
    position: relative;
    overflow: hidden;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 14px 24px;
}

/* 顶部行：徽章 + 分享图标 */
.case-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 成功案例小徽章 */
.case-hero-badge {
    display: inline-block;
    background: var(--color-primary-bg);
    color: var(--color-primary);
    font-size: 12px;
    line-height: 1.5;
    padding: 2px 10px;
    border-radius: 4px;
}

/* 头部分享：仅图标，悬停变品牌红 */
.case-hero-share {
    color: var(--color-text-tertiary);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.3s ease;
}

.case-hero-share:hover {
    color: var(--color-primary);
}

.case-hero-title {
    margin: 12px 0 10px;
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1.35;
}

.case-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 12px;
    color: var(--color-text-secondary, #666);
}

.case-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.case-hero-meta i {
    color: var(--color-text-tertiary, #999);
    font-size: 13px;
}

.case-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    border-top: 1px solid var(--color-border-light);
    padding-top: 14px;
}

.case-hero-tag {
    background: var(--color-primary-bg);
    color: var(--color-primary);
    font-size: 12px;
    padding: 4px 14px;
    border-radius: 999px;
    text-decoration: none;
    line-height: 1.5;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 通用区块卡片 */
.case-section-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 20px 24px;
}

.case-section-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
}

.case-section-heading::before {
    content: '';
    width: 4px;
    height: 16px;
    background: var(--color-primary);
    border-radius: 2px;
    flex-shrink: 0;
}

.case-section-heading h2 {
    margin: 0;
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1.3;
}

/* 案例简介 */
.case-intro-text {
    margin: 0;
    font-size: 14px;
    color: var(--color-text-secondary, #666);
    line-height: 1.9;
    white-space: pre-line;
}

/* 客户评价 */
.case-review-body {
    display: flex;
    gap: 18px;
}

.case-review-user {
    width: 76px;
    flex-shrink: 0;
    text-align: center;
}

.case-review-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-primary-bg);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.case-review-name {
    margin-top: 5px;
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.case-review-date {
    margin-top: 2px;
    font-size: 11px;
    color: var(--color-text-tertiary, #999);
}

.case-review-stars {
    color: var(--color-warning); /* 与案例卡片 .meta-stars 保持一致 */
    font-size: 13px;
    letter-spacing: 2px;
    line-height: 1;
}

/* 未选中的星星置灰 */
.case-review-stars .star-off,
.meta-stars .star-off {
    color: var(--color-border-strong, #e5e5e5);
}

/* 评价正文区：占满剩余宽度并允许收缩，防止长单词（Docker-Compose 等）撑破卡片 */
.case-review-content {
    flex: 1;
    min-width: 0;
}

.case-review-content p {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--color-text-secondary, #666);
    line-height: 1.9;
    word-break: break-word;
}

@media (max-width: 1053px) {
    .case-hero-title {
        font-size: 20px;
    }
}

/* ===================== 案例列表 ===================== */
/* 案例卡片图片与商品卡片渲染一致（继承 main.css 的 .goods-item img，不再单独覆盖） */
.case-banner {
    text-align: center;
}
.case-banner-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-text-primary, #20232a);
    margin-bottom: 10px;
}
.case-banner-title-icon {
    color: var(--color-primary, #d8373e);
    margin: 0 8px;
}
.case-banner-stats {
    font-size: 15px;
    color: var(--color-text-secondary, #666);
}
.case-banner-stats-icon {
    color: var(--color-warning);
    margin: 0 6px;
    font-size: 14px;
}
.case-banner-stats .highlight {
    color: var(--color-primary, #d8373e);
    font-weight: 700;
}
.case-banner-stats .dot {
    margin: 0 12px;
    color: var(--color-primary, #d8373e);
    font-size: 18px;
}
.meta-stars {
    color: var(--color-warning);
    font-size: 10px;
}

.section-title--case-mobile {
    display: none;
}

.case-banner-stats--mobile {
    display: none;
}

.section-title--no-border::after {
    display: none;
}

@media (max-width: 768px) {
    .case-banner { display: none; }
    /* 首页案例模块：移动端隐藏桌面 banner，显示标题行 + stats */
    .section-title--case-desktop {
        display: none !important;
    }
    .section-title--case-mobile {
        display: flex;
    }
    .case-banner-stats--mobile {
        display: block;
        text-align: center;
        font-size: 12px;
        color: var(--color-text-secondary);
        padding-bottom: 12px;
    }
    .case-banner-stats--mobile .dot {
        margin: 0 4px;
    }
    .goods-item--case .meta-read {
        display: none;
    }
}

/* ===================== 服务过程记录（部分截图）轮播 ===================== */
/* 卡片外壳由 .case-section-card 提供，这里只管轮播内部 */
.case-chat-heading {
    margin-bottom: 0;
}

.section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.case-chat-heading .section-prompt-inline {
    margin-top: 3px;
}

.section-prompt-inline {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-tertiary, #999);
    line-height: 1.5;
    white-space: nowrap;
}

.chat-actions {
    display: inline-flex;
    gap: 8px;
    flex-shrink: 0;
}

.chat-arrow {
    width: 34px;
    height: 34px;
    border: 1px solid var(--color-border-light);
    border-radius: 50%;
    background: var(--color-bg-card);
    color: var(--color-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.chat-arrow:hover {
    color: var(--color-primary);
    border-color: var(--color-primary-border);
    box-shadow: 0 6px 18px var(--color-primary-shadow);
}

.chat-carousel {
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    padding: 8px 2px 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.chat-carousel::-webkit-scrollbar {
    height: 6px;
}

.chat-carousel::-webkit-scrollbar-thumb {
    background: var(--color-primary-border);
    border-radius: var(--radius-pill);
}

.chat-carousel::-webkit-scrollbar-track {
    background: var(--color-bg-muted);
    border-radius: var(--radius-pill);
}

.chat-track {
    display: flex;
    gap: 18px;
    transition: transform 0.4s ease;
    align-items: stretch;
}

.phone-frame {
    width: 228px;
    flex-shrink: 0;
    border-radius: 18px;
    border: 1px solid var(--color-border-light);
    overflow: hidden;
    background: var(--color-bg-card);
    position: relative;
    box-shadow: var(--shadow-card);
    scroll-snap-align: start;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.phone-frame:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
}

.phone-topbar {
    height: 38px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-bg-hover);
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text-tertiary);
}

.phone-topbar span {
    width: 28px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--color-border-strong);
}

.phone-topbar strong {
    font-size: 12px;
    color: var(--color-text-secondary);
    font-weight: 600;
}

.phone-screen {
    width: 100%;
    height: 390px;
    overflow: hidden;
    background: var(--color-bg-muted);
}

.phone-screen img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
    display: block;
}

.phone-hint {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--color-text-tertiary);
    font-size: 12px;
    background: var(--color-bg-card);
    border-top: 1px solid var(--color-border-light);
}

.chat-nav {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.chat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-text-disabled);
    cursor: pointer;
    transition: all 0.3s;
}

.chat-dot.active {
    background: var(--color-primary);
    width: 20px;
    border-radius: 4px;
}

/* ===================== 关联商品（侧栏竖卡） ===================== */
.case-goods-item {
    margin-bottom: 0;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    /* 标题/标签价格行贴卡片边（重设计时清零了基底 12px 内边距），补 3px 呼吸位；
       替代曾全局加的 * { padding: 0 3px }（已回退，勿再全局加） */
    padding: 0 3px;
}

.case-goods-link {
    display: block;
    text-decoration: none;
}

.case-goods-item .recommend-img-box {
    width: 100%;
    height: 150px;
    margin-bottom: 10px;
}

.case-goods-title {
    font-size: 14px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}

.case-goods-link:hover .case-goods-title {
    color: var(--color-primary);
}

.case-goods-item .price-tag-wrapper {
    padding: 0;
    margin: 10px 0 0;
}

.case-goods-actions {
    padding: 12px 0 0;
}

.case-goods-item .related-goods-btns.btn-group {
    margin-top: 0;
    gap: var(--space-sm);
}

.case-goods-item .related-goods-btns .btn {
    flex: 1;
    padding: 8px 12px;
    font-size: 12px;
    border-radius: var(--radius-sm);
}

/* ===================== 相关服务（复用首页服务分类横条） ===================== */
/* 面板外壳由 .case-section-card 承接，去掉 svc-strip 自带的边框/阴影/内边距 */
.case-section-card .svc-strip {
    padding: 0;
    margin-bottom: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* ===================== 底部咨询引导 ===================== */
.case-cta-card {
    background: var(--color-primary-bg);
    border-radius: var(--radius-md);
    padding: 22px 26px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.case-cta-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-bg-card);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-size: 20px;
}

.case-cta-body {
    flex: 1;
    min-width: 0;
}

.case-cta-title {
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.case-cta-desc {
    margin-top: 4px;
    font-size: 12px;
    color: var(--color-text-secondary, #666);
    line-height: 1.6;
}

.case-cta-btns {
    display: flex;
    gap: var(--space-sm); /* 与下方 btn-group 间距一致（8px） */
    flex-shrink: 0;
}

/* 按钮复用首页 banner 的 cv__btn（carousel.css 全局已加载），此处不再单独定义 */
/* CTA 按钮对齐下方关联商品 btn-group（加入购物车/立即购买）同一套规格：
   同内边距、同阴影、同 hover 上浮 + 扫光动效；配色经用户指定对调：
   「立即咨询」橙渐变、「相关案例」主红，双实心承担层级，原白底描边样式废止 */
.case-cta-btns .cv__btn {
    flex: 1;
    padding: 8px 12px;
    font-size: 12px;
    /* 圆角/字号对齐下方 btn-group 的案例页覆盖（--radius-sm + 12px），保证同屏两组等宽等高 */
    border-radius: var(--radius-sm);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.case-cta-btns .cv__btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: all 0.6s ease;
}

.case-cta-btns .cv__btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.case-cta-btns .cv__btn:hover::before {
    left: 100%;
}

/* CTA 按钮颜色对调（用户指定）：「立即咨询」= 橙渐变（btn-cart 同款），
   「相关案例」= 主红（btn-buy 同款）；规格仍与基准组一致 */
.case-cta-btns .cv__btn--primary {
    background: linear-gradient(135deg, #ff9800, #ff5722);
}

.case-cta-btns .cv__btn--primary:hover {
    background: linear-gradient(135deg, #e68900, #e64a19);
    box-shadow: 0 8px 20px rgba(255, 152, 0, 0.3);
}

/* 「相关案例」：主红实心（原白底描边废止） */
.case-cta-btns .cv__btn--dark {
    background: var(--color-primary);
    border: 0;
    color: #fff;
}

.case-cta-btns .cv__btn--dark:hover {
    background: var(--color-primary-hover);
    box-shadow: 0 8px 20px var(--color-primary-shadow);
}

/* ≤1400px 容器降级：.case-detail-page 固定 1400px，在窄视口下整体溢出且被
   body overflow-x:hidden 裁切（移动端相关服务错位、CTA 按钮只剩一半即此根因），
   与 mobile.css 对 .container 的 width:100% 处理对齐；PC（>1400px）不受影响 */
@media (max-width: 1400px) {
    .case-detail-page {
        width: auto;
    }
}

@media (max-width: 992px) {
    /* 窄屏时侧栏落到主列下方，通栏显示 */
    .case-detail-page {
        flex-direction: column;
        /* 覆盖 PC 的 flex-start：列模式下 flex-start 会让两列收缩到 fit-content，
           被聊天轮播的固有内容宽度（~814px）撑爆整页（docScrollWidth 875 → 溢出裁切） */
        align-items: stretch;
    }

    .case-side-col {
        width: 100%;
    }

    /* 侧栏里的关联商品在通栏下改回横向卡，避免图片拉得太高 */
    .case-goods-link {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .case-goods-item .recommend-img-box {
        width: 220px;
        height: 140px;
        flex-shrink: 0;
        margin-bottom: 0;
    }

    .case-goods-info {
        flex: 1;
        min-width: 0;
    }

    .case-goods-item .related-goods-btns .btn {
        flex: 0 0 auto;
        padding: 8px 18px;
    }

    /* CTA 按钮同步基准组 ≤992 降级：收回内容宽 + 同款内边距 */
    .case-cta-btns .cv__btn {
        flex: 0 0 auto;
        padding: 8px 18px;
    }
}

@media (max-width: 768px) {
    /* 案例页无商品详情页的 mobile-fixed-bar，但仍需为全局移动端底部导航留出空间 */
    body {
        padding-bottom: 70px;
    }

    .case-detail-page {
        gap: 10px;
    }

    .case-hero-card,
    .case-section-card {
        padding: 18px 16px;
        border-radius: var(--radius-xl, 12px);
    }

    .case-hero-title {
        font-size: 20px;
    }

    .case-hero-meta {
        gap: 6px 14px;
    }

    .case-hero-tags {
        margin-top: 12px;
        padding-top: 12px;
    }

    .case-hero-tag {
        max-width: 100%;
        white-space: normal;
    }

    .section-header {
        flex-direction: column;
        gap: 8px;
    }

    /* 移动端不展示脱敏提示文案 */
    .case-chat-heading .section-prompt-inline {
        display: none;
    }

    .chat-actions {
        display: none;
    }

    .chat-carousel {
        margin: 0 -4px;
        padding-bottom: 12px;
    }

    .chat-track {
        gap: 12px;
    }

    .phone-frame {
        width: 78vw;
        max-width: 260px;
        border-radius: 16px;
    }

    .phone-screen {
        height: 420px;
    }

    .chat-nav {
        margin-top: 12px;
    }

    .case-review-body {
        gap: 12px;
    }

    /* 关联商品：小屏改紧凑横排（图左 + 信息右），不再通栏大图 */
    .case-goods-item {
        padding: 0 12px;
    }

    .case-goods-link {
        gap: 12px;
    }

    .case-goods-item .recommend-img-box {
        width: 110px;
        height: 110px;
    }

    .case-goods-item .related-goods-btns .btn {
        flex: 1;
        padding: 8px 12px;
    }

    /* 相关服务：直接沿用首页移动端降级（index.css ≤992 一行 5 项：图标上、名称与「前往查看」居中），不再 2 列宫格 */
    .case-cta-card {
        flex-wrap: wrap;
        padding: 18px 16px;
    }

    .case-cta-btns {
        width: 100%;
        /* 左右各缩进 12px：与下方关联商品 .case-goods-item 移动端的 12px 内边距对齐，
           保证上下两组按钮等宽 */
        padding: 0 12px;
    }

    .case-cta-btns .cv__btn {
        flex: 1;
        padding: 8px 12px; /* 与下方 btn-group 移动端同款内边距，同屏等高 */
    }
}

@media (max-width: 480px) {
    .phone-screen {
        height: 380px;
    }
}