/* 百家统计数据小部件样式 */

/* 全宽统计容器（Flex布局+横线） */
.geniatech-stats-container {
    display: flex;
    justify-content: space-between; /* 统计项均匀分布（全宽） */
    align-items: center; /* 统计项垂直居中 */
    padding: 60px 40px; /* 上下内边距（调整整体高度） */
    background: #000;
    position: relative; /* 横线的父容器（绝对定位） */
    max-width: 1600px; /* 默认最大宽度限制 */
    margin: 0 auto; /* 居中显示 */
    gap: 20px; /* 项目间距 */
}

/* 全宽横线（贯穿整个屏幕） */
.geniatech-stats-container.has-line::before {
    content: '';
    position: absolute;
    top: 60%; /* 垂直居中（容器高度的一半） */
    left: 50%; /* 从容器中心开始 */
    width: 100vw; /* 全视口宽度 */
    height: 1px; /* 细线条 */
    background-color: rgba(255, 255, 255, 0.15); /* 浅灰半透明（不抢焦点） */
    transform: translate(-50%, -50%); /* 水平和垂直居中 */
    z-index: 0; /* 在圆点下面，但在背景上面 */
}

/* 单个统计项（占1/4宽度+靠左布局） */
.geniatech-stat-item {
    flex: 1; /* 每个项占相等宽度（全宽均分） */
    position: relative; /* 圆点的父容器（绝对定位） */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 内部元素靠左显示 */
}

/* 数字容器（包含"数字"和"+"） */
.geniatech-stat-number-wrap {
    margin-bottom: 30px; /* 数字与圆点的垂直间距 */
}

/* 数字（核心强调） */
.geniatech-stat-number {
    font-size: 56px; /* 大字体（视觉重心） */
    font-weight: 900; /* 超粗体 */
    color: #fff; /* 白色（与背景高对比） */
    letter-spacing: 1px; /* 字母间距（增强呼吸感） */
}

/* "+"符号（缩小+颜色呼应） */
.geniatech-stat-plus {
    font-size: 30px; /* 数字的~50%大小（不抢数字焦点） */
    font-weight: 700; /* 粗体（比数字轻一级） */
    color: #ffffff; /* 白色（与圆点同色，视觉呼应） */
    vertical-align: top; /* 靠上对齐（符合"数值+"常规设计） */
    margin-left: 8px; /* 数字与"+"的间距（避免拥挤） */
}

/* 圆点（贯穿横线+靠左） */
.geniatech-stat-dot {
    position: absolute;
    left: 0; /* 靠左（统计项左侧） */
    top: 67%; /* 垂直居中（与横线对齐） */
    transform: translateY(-50%); /* 精准垂直居中 */
    width: 12px; /* 圆点大小（与数字比例协调） */
    height: 12px;
    border-radius: 50%; /* 圆形 */
    background-color: #ffffff; /* 白色（与"+"同色） */
    z-index: 2; /* 确保圆点在横线之上（不被覆盖） */
}

/* 描述文字（辅助说明+靠左） */
.geniatech-stat-label {
    font-size: 18px; /* 中等字体（不抢数字焦点） */
    color: #e3f2fd; /* 浅蓝灰（与背景柔和对比） */
    text-transform: capitalize; /* 首字母大写（符合正式感） */
    margin-top: 30px; /* 圆点与描述文字的垂直间距 */
}

/* 移动端响应式（max-width: 768px） */
@media (max-width: 768px) {
    .geniatech-stats-container {
        display: grid; /* 使用网格布局 */
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* 一行两个 */
        gap: 16px; /* 行列间距 */
        padding: 30px 20px; /* 缩小内边距 */
    }

    .geniatech-stat-item {
        margin: 0; /* 使用gap控制间距 */
        box-sizing: border-box;
    }

    .geniatech-stat-number {
        font-size: 44px; /* 缩小数字大小 */
    }

    .geniatech-stat-plus {
        font-size: 20px; /* 缩小"+"符号大小 */
    }

    .geniatech-stat-label {
        font-size: 16px; /* 缩小描述文字大小 */
        margin-top: 20px;
    }

    /* 移动端隐藏横线 */
    .geniatech-stats-container.has-line::before {
        display: none;
    }

    /* 移动端隐藏圆点 */
    .geniatech-stat-dot {
        display: none;
    }
}

/* 平板端响应式（max-width: 1024px） */
@media (max-width: 1024px) and (min-width: 769px) {
    .geniatech-stats-container {
        padding: 50px 30px;
    }

    .geniatech-stat-number {
        font-size: 48px;
    }

    .geniatech-stat-plus {
        font-size: 26px;
    }

    .geniatech-stat-label {
        font-size: 16px;
    }
}

/* 超小屏幕响应式（max-width: 480px） */
@media (max-width: 480px) {
    .geniatech-stats-container {
        padding: 30px 15px;
    }

    .geniatech-stat-item {
        margin: 0;
    }

    .geniatech-stat-number {
        font-size: 36px;
    }

    .geniatech-stat-plus {
        font-size: 18px;
        margin-left: 5px;
    }

    .geniatech-stat-label {
        font-size: 14px;
        margin-top: 15px;
    }

    .geniatech-stat-number-wrap {
        margin-bottom: 15px;
    }
}