/* services.css - 服务介绍模块 */
.services {
    padding: 5rem 10%; /* 容器内边距：上下5rem，左右10% */
    text-align: center; /* 内容居中对齐 */
    background: var(--background-light); /* 使用CSS变量设置浅色背景 */
}

.services h2 {
    margin-bottom: 3rem; /* 标题下方间距3rem */
    font-size: 2rem; /* 字体大小2rem */
    color: var(--text-primary); /* 使用CSS变量设置主文本颜色 */
    position: relative; /* 相对定位（用于伪元素定位） */
    display: inline-block; /* 行内块级显示 */
}

.services h2::after {
    content: ''; /* 伪元素内容为空 */
    position: absolute; /* 绝对定位 */
    bottom: -1rem; /* 距离底部-1rem */
    left: 50%; /* 左侧居中 */
    transform: translateX(-50%); /* X轴居中偏移 */
    width: 60px; /* 下划线宽度60px */
    height: 3px; /* 下划线高度3px */
    background: var(--primary-color); /* 使用CSS变量设置主色 */
}

/* 标签导航容器 */
.tab-nav {
    display: flex; /* 弹性布局 */
    gap: 0; /* 子元素间距为0 */
    padding: 0 16px; /* 内边距：左右16px */
    position: relative; /* 相对定位 */
    justify-content: center; /* 子元素水平居中 */
    align-items: flex-end; /* 关键：子元素底对齐 */
    margin: 0 auto 20px; /* 外间距：上下0，左右居中，下方20px */
    overflow-x: hidden; /* 隐藏横向溢出内容 */
    scrollbar-width: none; /* Firefox隐藏滚动条 */
    -ms-overflow-style: none; /* IE/Edge隐藏滚动条 */
}

.tab-nav::-webkit-scrollbar {
    display: none; /* Webkit浏览器隐藏滚动条 */
}

/* 基础标签样式 */
.tab-btn {
    height: 110%;
    padding: 12px 40px; /* 内边距：上下12px，左右40px */
    background: var(--background-light); /* 使用CSS变量设置背景色 */
    color: var(--text-secondary); /* 使用CSS变量设置次要文本颜色 */
    position: relative; /* 相对定位 */
    border: 1px solid transparent; /* 透明边框（防止布局抖动） */
    border-radius: 12px 12px 0 0; /* 左上/右上圆角12px */
    cursor: pointer; /* 鼠标指针为手形 */
    transition: all var(--transition-fast); /* 快速过渡动画 */
    font-size: 20px; /* 字体大小14px */
    margin: 0 -1px; /* 左右负边距消除间隙 */
    z-index: 1; /* 层级为1 */
    box-shadow: inset 0 -1px 0 var(--border-color); /* 底部内阴影模拟分隔线 */
    white-space: nowrap; /* PC端禁止换行 */
}

/* 隐藏移动端换行符 */
.tab-btn br.mobile-only {
    display: none;
}

/* 激活标签样式 */
.tab-btn.active {
    background: var(--white); /* 使用CSS变量设置白色背景 */
    color: var(--primary-color); /* 使用CSS变量设置主色文本 */
    border-color: var(--border-color); /* 使用CSS变量设置边框颜色 */
    border-bottom-color: transparent; /* 底部边框透明 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* 外部阴影：垂直偏移2px，模糊4px */
    transform: translateY(1px) scale(1); /* 选中时放大8% */
    transition: all var(--transition-fast), z-index 0s; /* 立即响应层级变化 */
    z-index: 4; /* 层级提升至4 */
}

/* 标签两侧缺口伪元素 */
.tab-btn::before,
.tab-btn::after {
    content: ""; /* 伪元素内容为空 */
    position: absolute; /* 绝对定位 */
    bottom: 0; /* 底部对齐 */
    width: 12px; /* 宽度12px */
    height: 12px; /* 高度12px */
    background: transparent; /* 透明背景 */
    z-index: -1; /* 层级置于标签下方 */
    transition: box-shadow var(--transition-fast); /* 同步过渡动画 */
}

/* 左侧缺口 */
.tab-btn::before {
    left: -12px; /* 定位在左侧外部 */
    border-bottom-right-radius: 12px; /* 右下圆角12px */
    box-shadow: 6px 0 0 0 var(--background-light); /* 右侧阴影模拟背景延伸 */
}

/* 右侧缺口 */
.tab-btn::after {
    right: -12px; /* 定位在右侧外部 */
    border-bottom-left-radius: 12px; /* 左下圆角12px */
    box-shadow: -6px 0 0 0 var(--background-light); /* 左侧阴影模拟背景延伸 */
}

/* 激活标签缺口修正 */
.tab-btn.active::before {
    box-shadow: 6px 0 0 0 var(--white); /* 右侧阴影匹配激活背景 */
}

.tab-btn.active::after {
    box-shadow: -6px 0 0 0 var(--white); /* 左侧阴影匹配激活背景 */
}

/* 悬停状态样式 */
.tab-btn:hover:not(.active) {
    z-index: 3; /* 悬停时提升至次高层级 */
    background: color-mix(in srgb, var(--background-light) 90%, var(--primary-color)); /* 混合背景色过渡 */
    color: var(--primary-hover); /* 悬停文本颜色变量 */

}

/* 悬停时缺口阴影同步 */
.tab-btn:hover:not(.active)::before {
    box-shadow: 6px 0 0 0 color-mix(in srgb, var(--background-light) 90%, var(--primary-color)); /* 同步悬停背景色 */
}

.tab-btn:hover:not(.active)::after {
    box-shadow: -6px 0 0 0 color-mix(in srgb, var(--background-light) 90%, var(--primary-color)); /* 同步悬停背景色 */
}

/* 服务网格布局 */
.service-grid {
    padding: 1rem 2rem;
    display: grid; /* 网格布局 */
    gap: var(--space-md); /* 使用CSS变量设置网格间距 */
    max-width: var(--max-width); /* 使用CSS变量设置最大宽度 */
    margin: 0 auto; /* 水平居中 */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* 自适应列宽（最小280px） */
}

/* 服务卡片样式 */
.service-card {
    padding: var(--space-lg); /* 使用CSS变量设置内边距 */
    background: var(--white); /* 使用CSS变量设置白色背景 */
    border-radius: var(--radius-lg); /* 使用CSS变量设置大圆角 */
    box-shadow: var(--shadow-mg); /* 使用CSS变量设置中等阴影 */
    transition: transform var(--transition-normal), box-shadow var(--transition-normal); /* 平滑过渡动画 */
}

.service-card:hover {
    transform: translateY(-5px); /* 悬停时上移5px */
    box-shadow: var(--shadow-bg); /* 使用CSS变量设置大阴影 */
}

/* 卡片标题 */
.service-card h3 {
    color: var(--primary-color); /* 使用CSS变量设置主色 */
    margin-bottom: var(--space-sm); /* 使用CSS变量设置下方间距 */
    font-size: 1.25rem; /* 字体大小1.25rem */
}

/* 卡片描述 */
.service-card p {
    color: var(--text-secondary); /* 使用CSS变量设置次要文本颜色 */
    font-size: 0.95rem; /* 字体大小0.95rem */
    line-height: 1.6; /* 行高1.6倍 */
}

/* 响应式设计：平板及以下 */
@media (max-width: 768px) {
    .services {
        padding: 3rem 5%; /* 缩小内边距 */
    }

    .tab-nav {
        padding: 0 8px; /* 缩小左右内边距 */
    }

    .tab-btn {
        padding: 10px 24px; /* 缩小内边距 */
        font-size: 13px; /* 缩小字体 */
        border-radius: 8px 8px 0 0; /* 缩小圆角 */
        z-index: 1; /* 基础层级 */
        position: relative; /* 必须声明定位属性 */
        line-height: 1.5; /* 调整行间距 */
    }

    /* 显示换行符 */
    .tab-btn br.mobile-only {
        display: inline; /* 显示换行符 */
    }

    .tab-btn::before,
    .tab-btn::after {
        display: none; /* 隐藏伪元素（优化移动端性能） */
    }

    .service-grid {
        grid-template-columns: 1fr; /* 单列布局 */
    }

    .service-card {
        padding: var(--space-md); /* 使用CSS变量设置中等内边距 */
    }
}

/* 响应式设计：手机端 */
@media (max-width: 480px) {
    .service-card h3 {
        font-size: 1.1rem; /* 缩小标题字体 */
    }

    .service-card p {
        font-size: 0.85rem; /* 缩小描述字体 */
    }
}