// ========================================================
// 1. 变量与断点定义 (集中管理)
// ========================================================
$breakpoints: ( 'mobile': 768px, 'tablet': 1024px, 'desktop': 1920px, '2k': 2560px, '4k-40': 3800px, '4k': 3840px );

// 字号常量
$font-size-small: 14px; // 手机/平板基准
$font-size-standard: 16px; // 桌面基准 (1024px - 3840px)
$font-size-4k-base: 24px; // 4K 触发点字号

// 容器配置
$container-paddings: 1rem;

// ========================================================
// 2. 媒体查询 Mixin
// ========================================================
@mixin respond-to($breakpoint) {
    // 如果是预定义的 key (如 'mobile')
    @if map-has-key($breakpoints, $breakpoint) {
        @media (min-width: map-get($breakpoints, $breakpoint)) {
            @content;
        }
    }
    // 如果是传入的具体数值 (如 3840px)
    @else {
        @media (min-width: $breakpoint) {
            @content;
        }
    }
}

// ========================================================
// 3. 核心响应式逻辑
// ========================================================
:root {
    // --- [阶段 A] 默认状态 (手机/小屏幕) ---
    font-size: $font-size-small;
    // --- [阶段 B] 1024px 以上到 4K 之前：保持标准 16px ---
    @include respond-to('tablet') {
        font-size: $font-size-standard;
    }
    // --- [阶段 C] 大于 4K：开启线性增长 ---
    @include respond-to('4k') {
        /* 逻辑：从 3840px 开始，字号从 24px 线性向上。
       公式：(24 / 3840) * 100vw = 0.625vw
    */
        font-size: 0.625vw;
    }
}

/* --- 全局布局容器适配 --- */
// 其中 4k-40 为准 4K, 以适配 PC 端部分浏览器最大化时边框占位从而影响到 4K 宽度判定
.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 $container-paddings;
    box-sizing: border-box;

    @include respond-to('mobile') {
        max-width: 720px;
    }

    @include respond-to('tablet') {
        max-width: 960px;
    }

    @include respond-to('desktop') {
        max-width: 1800px;
    }

    @include respond-to('2k') {
        max-width: 2560px;
    }

    @include respond-to('4k-40') {
        max-width: 3800px;
    }
    // 当容器等于 4K 时，随之线性扩大
    @include respond-to('4k') {
        // 保持容器宽度占比：(3600 / 3840) * 100vw = 93.75vw
        max-width: 93.75vw;
    }
}

// ========================================================
// 4. 工具类与组件样式
// ========================================================
/* 这里的 1rem 会随着 :root 的 font-size 变化而自动缩放 */
.w-1r {
    width: 1rem;
}

.h-1r {
    height: 1rem;
}

.nav-link {
    &.active {
        font-weight: bold;
        color: var(--bs-primary) !important;
        border-bottom: 2px solid var(--bs-primary);
    }
}

.p-r-t {
    position: relative;
    top: -1px;
}

mg-0 {
    margin: 0 auto;
}