/*
 * hsiyue 状态统计栏样式文件
 * 
 * 功能：
 * 1. 状态统计卡片布局 - 响应式Flex布局
 * 2. 数据展示样式 - 统计数字和描述文本
 * 3. 交互反馈效果 - 悬停动画和阴影
 * 4. 自适应图标 - SVG图标缩放
 * 
 * 响应式设计：
 * - 大屏：6个一行
 * - 中屏：3个一行，分两行
 * - 小屏：垂直堆叠
 * 
 * 作者: YY
 * 更新时间: 2025年
 */

/* ===== 状态统计栏主框架 ===== */
.status-container {
    position: relative;
    width: 85%;                              /* 占父容器85%宽度 */
    margin: 0 auto;                         /* 水平居中 */
    top: clamp(20px, 10vw, 5px);           /* 响应式顶部偏移 */
    display: flex;                          /* 弹性布局 */
    flex-wrap: wrap;                        /* 允许换行 */
    gap: clamp(10px, 3vw, 30px);          /* 响应式间距 */
    z-index: 10;                           /* 确保在背景之上 */
}

/* 状态组 */
.status-group {
    flex: 1 1 calc(16.666% - 25px);
    min-width: 200px;
    max-width: calc(20% - 24px);
    height: clamp(50px, 10vw, 116px);
    border-radius: 20px;
    background-color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.status-group:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.status-group svg{
    width: clamp(30px, calc(25.571px + 1.384vw), 61px);
}

/* 状态组文本容器 */
.status-group-text-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* 状态组描述文本 */
.status-group-text-desc {
    font-weight: 500;
    font-size: clamp(0.63rem, calc(0.589rem + 0.179vw), 0.88rem);
    color: #666;
    line-height: 1.2;
}

/* 状态组数字 */
.status-group-text-number {
    font-size: clamp(1.25rem, calc(1.143rem + 0.536vw), 2.00rem);
    font-weight: bold;
    color: #4285f4;
    line-height: 1;
}

/* 中等屏幕：保持两行三个 */
@media (max-width: 1600px) {
    .status-group {
        flex: 1 1 calc(33.333% - 20px);
        max-width: calc(33.333% - 20px);
    }
}

/* 小屏幕：垂直排列 */
@media (max-width: 768px) {
    .status-container {
        flex-direction: column;
        align-items: center;
    }
    
    .status-group {
        flex: none;
        width: 70%;
        max-width: 400px;
        margin: 0 auto;
    }
}

/* 当容器宽度小于600px时添加居中 */
@media (max-width: 600px) {
    .status-group{
        margin: 0 auto ;
    }
}