/* ========== 数字能动区域 ========== */

/* 基础结构（各断点一致的视觉与交互约束，尺寸值按断点覆盖） */

/* 数字能动区域（浅灰背景） */
.main-page__digital {
    background: var(--website-hover-bg);
}

/* 数字能动内容容器（占满宽，左右内边距 20px，桌面档再接管最大宽度与居中） */
.main-page__digital-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding-right: 20px;
    padding-left: 20px;
}

/* 数字能动标题区（居中） */
.main-page__digital-heading {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 数字能动标题文字（主题主色与装饰线；双类名提级防全局 h1~h6 覆盖，显式补齐字体属性） */
.main-page__digital-heading .main-page__digital-title {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    color: var(--website-primary);
    font-family: inherit;
    font-weight: inherit;
    line-height: 1.3;
}

/* 数字能动标题文字（继承标题容器样式） */
.main-page__digital-heading .main-page__digital-title > * {
    color: inherit;
    font: inherit;
}

/* 数字能动标题装饰线（两侧短线） */
.main-page__digital-heading .main-page__digital-title::before,
.main-page__digital-heading .main-page__digital-title::after {
    display: block;
    height: 1px;
    background: var(--website-primary);
    content: "";
}

/* 数字能动指标裁切视口（裁切与触摸交互约束） */
.main-page__digital-viewport {
    width: 100%;
    overflow: hidden;
    overscroll-behavior-x: none;
    touch-action: pan-y;
}

/* 数字能动指标滚动轨道（单行横扫） */
.main-page__digital-page {
    display: grid;
    width: 100%;
    grid-template-rows: 1fr;
    grid-auto-flow: column;
    transition: transform 500ms ease;
    will-change: transform;
}

/* 数字能动轨道瞬时归位状态 */
.main-page__digital-page--reset {
    transition: none;
}

/* 数字能动指标项（指标内横向对齐，图标不收缩） */
.main-page__digital-item {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    text-align: left;
}

/* 数字能动指标补位项（补齐每屏列数使轨道位移对齐整页，保持不可见、不承载内容） */
.main-page__digital-item--spacer {
    visibility: hidden;
}

/* 数字能动指标图标（主题蓝圆形描边） */
.main-page__digital-icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--website-primary);
    border-radius: 50%;
    color: var(--website-primary);
}

/* 数字能动指标图标图片（等比包含） */
.main-page__digital-icon img {
    display: block;
    object-fit: contain;
}

/* 数字能动指标内容（可收缩，按断点限制最大宽度） */
.main-page__digital-content {
    min-width: 0;
    width: 100%;
}

/* 数字能动指标数值（主题蓝制表数字） */
.main-page__digital-value {
    display: block;
    overflow: hidden;
    color: var(--website-primary);
    font-weight: 500;
    line-height: 1.2;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 数字能动指标说明（两行省略，弱化文字色；双类名提级防全局 p 覆盖，基础字号五档一致 14px） */
.main-page__digital-item .main-page__digital-content > p {
    display: -webkit-box;
    width: 100%;
    min-height: 3em;
    overflow: hidden;
    color: var(--website-text-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* 数字能动分页圆点区（居中，上内边距与间距 0） */
.main-page__digital-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding-top: 0;
}

/* 数字能动分页圆点按钮（可点击热区，尺寸按断点） */
.main-page__digital-dot {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

/* 数字能动分页圆点（默认蓝色描边，居中对位按断点点击区） */
.main-page__digital-dot::after {
    display: block;
    position: absolute;
    top: 9px;
    left: 9px;
    border: 1px solid var(--website-primary);
    border-radius: 50%;
    background: transparent;
    content: "";
}

/* 数字能动分页圆点激活态（实心主题蓝） */
.main-page__digital-dot--active::after {
    border-color: var(--website-primary);
    background: var(--website-primary);
}

/* ========== 空状态 ========== */

/* 数字能动空状态块（居中占位文案，上下留白按断点） */
.main-page__digital-empty {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding-block: 32px;
    border: 1px solid var(--website-border);
    border-radius: 6px;
    text-align: center;
}

/* 数字能动空状态块（hidden 属性生效，避免作者 display 覆盖） */
.main-page__digital-empty[hidden] {
    display: none;
}

/* 数字能动空状态文案（弱化文字色；双类名提级防全局 p 规则覆盖） */
.main-page__digital-empty .main-page__digital-empty-text {
    margin: 0;
    color: var(--website-text-muted);
    font-size: 16px;
    line-height: 1.75;
}

/* 数字能动指标视口与分页圆点（空状态下隐藏） */
.main-page__digital-viewport[hidden],
.main-page__digital-dots[hidden] {
    display: none;
}

/* ========== 响应式布局（五档视口） ========== */

/* ---- 手机布局（767px 及以下） ---- */
@media (max-width: 767px) {
    /* 数字能动区域（底部留白） */
    .main-page__digital {
        padding-bottom: 24px;
    }

    /* 数字能动标题区（上下留白） */
    .main-page__digital-heading {
        padding: 24px 0;
    }

    /* 数字能动标题文字（手机字号与装饰线间距） */
    .main-page__digital-heading .main-page__digital-title {
        gap: 12px;
        font-size: 24px;
    }

    /* 数字能动标题装饰线（手机长度） */
    .main-page__digital-heading .main-page__digital-title::before,
    .main-page__digital-heading .main-page__digital-title::after {
        width: 24px;
    }

    /* 数字能动指标裁切视口（手机固定高度） */
    .main-page__digital-viewport {
        height: 104px;
    }

    /* 数字能动指标滚动轨道（手机每屏两列） */
    .main-page__digital-page {
        min-height: 104px;
        grid-auto-columns: 50%;
    }

    /* 数字能动指标项（手机内边距与间距） */
    .main-page__digital-item {
        min-height: 104px;
        gap: 10px;
        padding: 6px 8px;
    }

    /* 数字能动指标图标（手机尺寸） */
    .main-page__digital-icon {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
    }

    /* 数字能动指标图标图片（手机尺寸） */
    .main-page__digital-icon img {
        width: 26px;
        height: 26px;
    }

    /* 数字能动指标内容（手机最大宽度） */
    .main-page__digital-content {
        max-width: 160px;
    }

    /* 数字能动指标数值（手机字号） */
    .main-page__digital-value {
        font-size: 24px;
    }

    /* 数字能动指标说明（数值间距） */
    .main-page__digital-item .main-page__digital-content > p {
        margin: 4px 0 0;
    }

    /* 数字能动分页圆点按钮（手机点击区域） */
    .main-page__digital-dot {
        width: 28px;
        height: 28px;
    }

    /* 数字能动分页圆点（手机可视尺寸） */
    .main-page__digital-dot::after {
        width: 8px;
        height: 8px;
    }
}

/* ---- 桌面端基准布局（>=992px，含宽屏档） ---- */
@media (min-width: 992px) {
    /* 数字能动内容容器（宽屏 1400px 最大宽度居中） */
    .main-page__digital-container {
        max-width: 1400px;
        margin-inline: auto;
    }

    /* 数字能动区域（底部留白） */
    .main-page__digital {
        padding-bottom: 40px;
    }

    /* 数字能动标题区（上下留白） */
    .main-page__digital-heading {
        padding: 40px 0;
    }

    /* 数字能动标题文字（宽屏字号与装饰线间距） */
    .main-page__digital-heading .main-page__digital-title {
        gap: 15px;
        font-size: 36px;
    }

    /* 数字能动标题装饰线（宽屏长度） */
    .main-page__digital-heading .main-page__digital-title::before,
    .main-page__digital-heading .main-page__digital-title::after {
        width: 40px;
    }

    /* 数字能动空状态（宽屏上下留白） */
    .main-page__digital-empty {
        padding-block: 64px;
    }

    /* 数字能动指标裁切视口（宽屏自适应最小高度） */
    .main-page__digital-viewport {
        height: auto;
        min-height: 120px;
    }

    /* 数字能动指标滚动轨道（宽屏每屏四列） */
    .main-page__digital-page {
        min-height: 120px;
        grid-auto-columns: 25%;
    }

    /* 数字能动指标项（宽屏内边距与间距） */
    .main-page__digital-item {
        min-height: 120px;
        gap: 16px;
        padding: 12px 20px;
    }

    /* 数字能动指标图标（宽屏尺寸） */
    .main-page__digital-icon {
        width: 88px;
        height: 88px;
        flex-basis: 88px;
    }

    /* 数字能动指标图标图片（宽屏尺寸） */
    .main-page__digital-icon img {
        width: 36px;
        height: 36px;
    }

    /* 数字能动指标内容（宽屏最大宽度） */
    .main-page__digital-content {
        max-width: 220px;
    }

    /* 数字能动指标数值（宽屏字号） */
    .main-page__digital-value {
        font-size: 36px;
    }

    /* 数字能动指标说明（五档一致 14px 字号与桌面数值间距） */
    .main-page__digital-item .main-page__digital-content > p {
        margin: 5px 0 0;
        font-size: 14px;
    }

    /* 数字能动分页圆点按钮（宽屏点击区域） */
    .main-page__digital-dot {
        width: 32px;
        height: 32px;
    }

    /* 数字能动分页圆点（宽屏可视尺寸） */
    .main-page__digital-dot::after {
        width: 12px;
        height: 12px;
    }
}

/* ---- 标准桌面布局（1201px-1599px） ---- */
@media (min-width: 1201px) and (max-width: 1599px) {
    /* 数字能动内容容器（1170px 最大宽度居中） */
    .main-page__digital-container {
        max-width: 1170px;
    }

    /* 数字能动区域（底部留白） */
    .main-page__digital {
        padding-bottom: 36px;
    }

    /* 数字能动标题区（上下留白） */
    .main-page__digital-heading {
        padding: 36px 0;
    }

    /* 数字能动标题文字（标准桌面字号） */
    .main-page__digital-heading .main-page__digital-title {
        font-size: 32px;
    }

    /* 数字能动空状态（标准桌面上下留白） */
    .main-page__digital-empty {
        padding-block: 56px;
    }

    /* 数字能动指标裁切视口（标准桌面最小高度） */
    .main-page__digital-viewport {
        min-height: 112px;
    }

    /* 数字能动指标滚动轨道（标准桌面最小高度） */
    .main-page__digital-page {
        min-height: 112px;
    }

    /* 数字能动指标项（标准桌面内边距） */
    .main-page__digital-item {
        min-height: 112px;
        padding: 10px 16px;
    }

    /* 数字能动指标图标（标准桌面尺寸） */
    .main-page__digital-icon {
        width: 72px;
        height: 72px;
        flex-basis: 72px;
    }

    /* 数字能动指标内容（标准桌面最大宽度） */
    .main-page__digital-content {
        max-width: 180px;
    }

    /* 数字能动指标数值（标准桌面字号） */
    .main-page__digital-value {
        font-size: 32px;
    }

    /* 数字能动分页圆点按钮（标准桌面点击区域） */
    .main-page__digital-dot {
        width: 30px;
        height: 30px;
    }

    /* 数字能动分页圆点（标准桌面可视尺寸） */
    .main-page__digital-dot::after {
        width: 10px;
        height: 10px;
    }
}

/* ---- 紧凑桌面布局（992px-1200px） ---- */
@media (min-width: 992px) and (max-width: 1200px) {
    /* 数字能动内容容器（970px 最大宽度居中） */
    .main-page__digital-container {
        max-width: 970px;
    }

    /* 数字能动区域（底部留白） */
    .main-page__digital {
        padding-bottom: 32px;
    }

    /* 数字能动标题区（上下留白） */
    .main-page__digital-heading {
        padding: 32px 0;
    }

    /* 数字能动标题文字（紧凑桌面字号） */
    .main-page__digital-heading .main-page__digital-title {
        font-size: 28px;
    }

    /* 数字能动空状态（紧凑桌面上下留白） */
    .main-page__digital-empty {
        padding-block: 48px;
    }

    /* 数字能动指标裁切视口（紧凑桌面最小高度） */
    .main-page__digital-viewport {
        min-height: 112px;
    }

    /* 数字能动指标滚动轨道（紧凑桌面最小高度） */
    .main-page__digital-page {
        min-height: 112px;
    }

    /* 数字能动指标项（紧凑桌面内边距与间距） */
    .main-page__digital-item {
        min-height: 112px;
        gap: 12px;
        padding: 10px 12px;
    }

    /* 数字能动指标图标（紧凑桌面尺寸） */
    .main-page__digital-icon {
        width: 60px;
        height: 60px;
        flex-basis: 60px;
    }

    /* 数字能动指标图标图片（紧凑桌面尺寸） */
    .main-page__digital-icon img {
        width: 30px;
        height: 30px;
    }

    /* 数字能动指标内容（紧凑桌面最大宽度） */
    .main-page__digital-content {
        max-width: 150px;
    }

    /* 数字能动指标数值（紧凑桌面字号） */
    .main-page__digital-value {
        font-size: 30px;
    }

    /* 数字能动指标说明（紧凑桌面字号五档一致 14px） */
    .main-page__digital-item .main-page__digital-content > p {
        margin: 4px 0 0;
        font-size: 14px;
    }

    /* 数字能动分页圆点按钮（紧凑桌面点击区域） */
    .main-page__digital-dot {
        width: 30px;
        height: 30px;
    }

    /* 数字能动分页圆点（紧凑桌面可视尺寸） */
    .main-page__digital-dot::after {
        width: 10px;
        height: 10px;
    }
}

/* ---- 平板布局（768px-991px） ---- */
@media (min-width: 768px) and (max-width: 991px) {
    /* 数字能动区域（底部留白） */
    .main-page__digital {
        padding-bottom: 30px;
    }

    /* 数字能动标题区（上下留白） */
    .main-page__digital-heading {
        padding: 30px 0;
    }

    /* 数字能动标题文字（平板字号与装饰线间距） */
    .main-page__digital-heading .main-page__digital-title {
        gap: 15px;
        font-size: 26px;
    }

    /* 数字能动标题装饰线（平板长度） */
    .main-page__digital-heading .main-page__digital-title::before,
    .main-page__digital-heading .main-page__digital-title::after {
        width: 40px;
    }

    /* 数字能动空状态（平板上下留白） */
    .main-page__digital-empty {
        padding-block: 40px;
    }

    /* 数字能动指标裁切视口（平板自适应最小高度） */
    .main-page__digital-viewport {
        height: auto;
        min-height: 112px;
    }

    /* 数字能动指标滚动轨道（平板每屏四列） */
    .main-page__digital-page {
        min-height: 112px;
        grid-auto-columns: 25%;
    }

    /* 数字能动指标项（平板内边距与间距） */
    .main-page__digital-item {
        min-height: 112px;
        gap: 10px;
        padding: 8px 10px;
    }

    /* 数字能动指标图标（平板尺寸） */
    .main-page__digital-icon {
        width: 56px;
        height: 56px;
        flex-basis: 56px;
    }

    /* 数字能动指标图标图片（平板尺寸） */
    .main-page__digital-icon img {
        width: 28px;
        height: 28px;
    }

    /* 数字能动指标内容（平板最大宽度） */
    .main-page__digital-content {
        max-width: 140px;
    }

    /* 数字能动指标数值（平板字号） */
    .main-page__digital-value {
        font-size: 28px;
    }

    /* 数字能动指标说明（数值间距） */
    .main-page__digital-item .main-page__digital-content > p {
        margin: 4px 0 0;
    }

    /* 数字能动分页圆点按钮（平板点击区域） */
    .main-page__digital-dot {
        width: 28px;
        height: 28px;
    }

    /* 数字能动分页圆点（平板可视尺寸） */
    .main-page__digital-dot::after {
        width: 8px;
        height: 8px;
    }
}

/* ========== 动效降级 ========== */

/* 数字能动指标滚动轨道（用户偏好减少动效时关闭过渡） */
@media (prefers-reduced-motion: reduce) {
    /* 数字能动指标滚动轨道（无过渡动画） */
    .main-page__digital-page {
        transition: none;
    }
}