/* ==========================================
   index.html 内联 <style> 提取（阶段 10.1）
   移动端分类网格样式；装饰性多色图标保留字面 hex（不令牌化）
   断点 992px（max-width: 992px）
   ========================================== */

.mobile-category-entry {
    display: none !important;
}

@media (max-width: 992px) {
    .mobile-category-entry {
        display: block !important;
        margin: 6px 0 20px; /* 移动端区块间距统一 20px */
    }

    .mobile-category-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 10px 2px;
        padding: 12px 6px;
        border: 1px solid #f0f1f5;
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 6px 14px rgba(29, 33, 41, 0.05);
    }

    .mobile-category-item {
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        color: #202124;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-category-icon {
        display: inline-flex;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        border-radius: 11px;
        background: #fff2dc;
        color: #ff6a21;
        font-size: 17px;
        box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.65);
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    .mobile-category-item:active .mobile-category-icon {
        transform: scale(0.94);
        box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.04);
    }

    .mobile-category-name {
        display: block;
        width: 100%;
        overflow: hidden;
        color: #1f2329;
        font-size: 12px;
        font-weight: 500;
        line-height: 16px;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-category-item:nth-child(10n+2) .mobile-category-icon {
        background: #e7f1ff;
        color: #1f73d6;
    }

    .mobile-category-item:nth-child(10n+3) .mobile-category-icon {
        background: #f5eaff;
        color: #8c45e8;
    }

    .mobile-category-item:nth-child(10n+4) .mobile-category-icon {
        background: #def8e8;
        color: #16a867;
    }

    .mobile-category-item:nth-child(10n+5) .mobile-category-icon {
        background: #ffe9e8;
        color: #ed4646;
    }

    .mobile-category-item:nth-child(10n+6) .mobile-category-icon {
        background: #fff6cf;
        color: #c98a00;
    }

    .mobile-category-item:nth-child(10n+7) .mobile-category-icon {
        background: #ecebff;
        color: #6556ec;
    }

    .mobile-category-item:nth-child(10n+8) .mobile-category-icon {
        background: #dcfbf8;
        color: #0097a7;
    }

    .mobile-category-item:nth-child(10n+9) .mobile-category-icon {
        background: #ffe8fa;
        color: #d938b7;
    }

    .mobile-category-item:nth-child(10n) .mobile-category-icon {
        background: #e2f8ea;
        color: #08a574;
    }
}

/* ==========================================
   首页「服务分类」通栏横条（PC）
   数据：serviceCategories 前 5 个一级分类
   结构：一块面板内 5 个分类项横排，项间细竖分隔线
   ========================================== */

.svc-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: var(--space-lg) var(--space-xs);
    margin-bottom: 36px;
    background: var(--color-bg-card);
    border: 1px solid #f0f1f5;
    border-radius: var(--radius-md);
    box-shadow: 0 6px 14px rgba(29, 33, 41, 0.05);
}

.svc-strip-item {
    display: flex;
    gap: 10px;
    min-width: 0;
    padding: 0 12px;
    text-decoration: none;
    border-right: 1px solid #f0f1f5;
}

.svc-strip-item:last-child {
    border-right: 0;
}

/* 圆形彩色图标 */
.svc-strip-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 17px;
    transition: transform 0.18s ease;
}

.svc-strip-item:hover .svc-strip-icon {
    transform: scale(1.08);
}

/* 图标 10 色轮换：与移动端 mobile-category-icon 同一套配色（装饰色保留字面 hex，不令牌化） */
.svc-strip-item:nth-child(1) .svc-strip-icon { background: #fff2dc; color: #ff6a21; }
.svc-strip-item:nth-child(2) .svc-strip-icon { background: #e7f1ff; color: #1f73d6; }
.svc-strip-item:nth-child(3) .svc-strip-icon { background: #f5eaff; color: #8c45e8; }
.svc-strip-item:nth-child(4) .svc-strip-icon { background: #def8e8; color: #16a867; }
.svc-strip-item:nth-child(5) .svc-strip-icon { background: #ffe9e8; color: #ed4646; }
.svc-strip-item:nth-child(6) .svc-strip-icon { background: #fff6cf; color: #c98a00; }
.svc-strip-item:nth-child(7) .svc-strip-icon { background: #ecebff; color: #6556ec; }
.svc-strip-item:nth-child(8) .svc-strip-icon { background: #dcfbf8; color: #0097a7; }
.svc-strip-item:nth-child(9) .svc-strip-icon { background: #ffe8fa; color: #d938b7; }
.svc-strip-item:nth-child(10) .svc-strip-icon { background: #e2f8ea; color: #08a574; }

.svc-strip-body {
    min-width: 0;
}

.svc-strip-name {
    display: block;
    margin: 2px 0 4px;
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-body);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: transform 0.18s ease;
    transform-origin: left center;
}

/* hover 分类项时名称与左侧图标同一放大动效 */
.svc-strip-item:hover .svc-strip-name {
    transform: scale(1.08);
}

/* 子分类关键词行（仅详情页 verbose 模式渲染）：最多取 4 个名称，「·」由伪元素补，双行截断 */
.svc-strip-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 6px;
    font-size: var(--font-size-mini);
    line-height: 17px;
    height: 34px;
    color: var(--color-text-tertiary);
}

.svc-strip-desc span:not(:first-child)::before {
    content: '·';
    margin: 0 3px;
}

/* 「前往查看」/「N 项服务」品牌红 + 右对齐，箭头常显 */
.svc-strip-count {
    display: block;
    text-align: right;
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.svc-strip-count::after {
    content: '›';
    display: inline-block;
    margin-left: 2px;
    font-weight: var(--font-weight-bold);
}

.svc-strip-item:hover .svc-strip-count {
    color: var(--color-primary-hover);
}

/* 标题副文案（仅服务分类横条使用） */
.title-sub {
    margin-left: var(--space-sm);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-secondary);
}

/* 窄屏降级：服务分类横条压成一行 5 项（图标上、名称与「前往查看」居中）；
   标题行整体隐藏（内容自解释，且顶部四频道宫格已兜底分类入口），PC 端保留 */
@media (max-width: 992px) {
    .title-sub,
    .flow-title-sub {
        display: none;
    }

    .svc-cat-section .section-title {
        display: none;
    }

    .svc-strip {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        padding: 12px 6px; /* 与上方 mobile-category-grid 宫格同一内边距 */
        margin-bottom: 20px; /* 移动端区块间距统一 20px（PC 仍为 36px） */
    }

    .svc-strip-item {
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: 0 2px; /* 与宫格列间距 2px 对齐 */
        border-right: 0;
        text-align: center;
        -webkit-tap-highlight-color: transparent;
    }

    /* 图标背景与上方宫格卡（成功案例/帮助中心）统一：圆角方块 + 同尺寸 */
    .svc-strip-icon {
        width: 40px;
        height: 40px;
        border-radius: 11px;
        font-size: 17px;
        box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.65);
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    /* 点击按压效果：与宫格卡 mobile-category-item:active 一致 */
    .svc-strip-item:active .svc-strip-icon {
        transform: scale(0.94);
        box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.04);
    }

    .svc-strip-name {
        max-width: 100%;
        margin: 4px 0 2px;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .svc-strip-count {
        font-size: 10px;
        text-align: center;
    }

    .svc-strip-count::after {
        content: none;
    }

    .svc-strip-desc {
        display: none;
    }
}

/* ==========================================
   首页「服务流程」五步卡（纯静态，无后端数据）
   居中标题（徽章+渐变装饰线，与其他区块的左对齐标题区分）；
   卡间「›」箭头指示推进方向；图标五色取自轮换前 5 色，
   序号角标保持品牌红
   ========================================== */

.flow-title {
    margin-bottom: 24px;
    text-align: center;
}

.flow-title-main {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.flow-title-main i {
    font-size: 24px;
    color: #c98a00; /* 黄色图标：取自现有 10 色轮换的黄 */
}

/* 标题两侧渐变装饰线：向内收浓、向外淡出 */
.flow-title-wing {
    width: 72px;
    height: 2px;
    background: linear-gradient(90deg, rgba(216, 55, 62, 0), #d8373e);
}

.flow-title-wing-r {
    background: linear-gradient(270deg, rgba(216, 55, 62, 0), #d8373e);
}

.flow-title-sub {
    margin-top: 8px;
    font-size: var(--font-size-caption);
    color: var(--color-text-secondary);
}

.flow-strip {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 36px;
}

.flow-step {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: 18px 12px;
    text-align: center;
    background: var(--color-bg-card);
    border: 1px solid #f0f1f5;
    border-radius: var(--radius-md);
    box-shadow: 0 6px 14px rgba(29, 33, 41, 0.05);
}

.flow-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 22px;
    transition: transform 0.18s ease;
}

.flow-step:hover .flow-step-icon {
    transform: scale(1.08);
}

/* 图标五色：与 svc-strip / mobile-category 同一套轮换前 5 色（装饰色保留字面 hex，不令牌化）。
   用 nth-of-type 计数——箭头是 <i>，步骤是 <div>，互不干扰 */
.flow-step:nth-of-type(1) .flow-step-icon { background: #fff2dc; color: #ff6a21; }
.flow-step:nth-of-type(2) .flow-step-icon { background: #e7f1ff; color: #1f73d6; }
.flow-step:nth-of-type(3) .flow-step-icon { background: #f5eaff; color: #8c45e8; }
.flow-step:nth-of-type(4) .flow-step-icon { background: #def8e8; color: #16a867; }
.flow-step:nth-of-type(5) .flow-step-icon { background: #ffe9e8; color: #ed4646; }

.flow-step-name {
    display: block;
    margin: 12px 0 6px;
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-body);
}

.flow-step-desc {
    display: block;
    font-size: var(--font-size-mini);
    color: var(--color-text-tertiary);
}

/* 卡间推进箭头 */
.flow-step-arrow {
    align-self: center;
    flex-shrink: 0;
    font-size: 14px;
    color: #f3c1c3;
}

/* 窄屏降级：五步压成一行——合并为单面板，序号角标悬于图标左上，
   说明文案隐藏（列宽放不下），箭头恢复显示增强推进感 */
@media (max-width: 992px) {
    .flow-title {
        margin-bottom: 14px;
    }

    .flow-strip {
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 2px;
        padding: 12px 6px 12px;
        background: var(--color-bg-card);
        border: 1px solid #f0f1f5;
        border-radius: var(--radius-md);
        box-shadow: 0 6px 14px rgba(29, 33, 41, 0.05);
    }

    .flow-step {
        padding: 0;
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .flow-step-icon {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .flow-step-name {
        margin: 6px 0 0;
        font-size: 12px;
    }

    .flow-step-desc {
        display: none;
    }

    .flow-step-arrow {
        align-self: center;
        font-size: 11px;
        color: #e0e0e0;
    }
}