/**
 * 统计数字动画修复
 * 
 * 问题：数字跳动时，方框外的文字也会跟着跳动
 * 原因：数字宽度变化导致布局抖动
 * 解决方案：使用等宽字体和固定最小宽度
 * 
 * @package Corporate_Theme
 * @since 1.4.1
 */

/* 统计数字容器 - 防止布局抖动 */
.stat-number {
    /* 使用等宽字体，确保数字宽度一致 */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    
    /* 设置最小宽度，防止宽度变化 */
    min-width: 4ch; /* 4个字符宽度，适合 "15+" 这样的数字 */
    display: inline-block;
    text-align: center;
    
    /* 平滑过渡 */
    transition: transform 0.3s ease;
}

/* 统计项容器 - 确保稳定布局 */
.stat-item {
    /* 防止子元素宽度变化影响布局 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    /* 固定最小高度 */
    min-height: 120px;
}

/* 统计数字 - 针对不同长度的数字设置合适的宽度 */
.stat-number:has(+ .stat-label:contains("15+")),
.stat-number:has(+ .stat-label:contains("Years")) {
    min-width: 4ch; /* "15+" */
}

.stat-number:has(+ .stat-label:contains("18+")),
.stat-number:has(+ .stat-label:contains("Markets")) {
    min-width: 4ch; /* "18+" */
}

.stat-number:has(+ .stat-label:contains("500+")),
.stat-number:has(+ .stat-label:contains("Clients")) {
    min-width: 5ch; /* "500+" */
}

/* 统计标签 - 固定位置 */
.stat-label {
    margin-top: 0.5rem;
    white-space: nowrap; /* 防止文字换行 */
}

/* 统计数字容器 - 更精确的控制 */
.intro-stats .stat-item {
    text-align: center;
}

.intro-stats .stat-number {
    /* 确保数字居中且不影响布局 */
    display: block;
    width: 100%;
    text-align: center;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .stat-number {
        min-width: 3.5ch;
    }
}

@media (max-width: 480px) {
    .stat-number {
        min-width: 3ch;
    }
}

/* 针对英文版的特殊处理 */
[lang="en"] .stat-number,
.lang-en .stat-number {
    /* 英文数字可能需要稍微不同的宽度 */
    min-width: 4.5ch;
}

/* 悬停效果 - 只缩放数字，不影响布局 */
.stat-item:hover .stat-number {
    transform: scale(1.1);
    /* 不改变布局空间 */
    transform-origin: center;
}

/* 动画期间保持稳定 */
@keyframes countUp {
    from {
        opacity: 0.5;
    }
    to {
        opacity: 1;
    }
}

.stat-number.animating {
    /* 动画期间锁定宽度 */
    width: auto;
    min-width: 4ch;
}