/* ============ 响应式：平板 / 手机 / 小屏手机 ============ */

/* ---------- 平板（640–1023px） ---------- */
@media (min-width: 640px) and (max-width: 1023px) {
    .section {
        padding-top: 96px;
        padding-bottom: 96px;
    }

    .content-section {
        padding-top: 96px;
    }

    /* 文档卡：平板两列（避免三列过挤） */
    .docs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* ---------- 导航栏必须在**一行**内放下（768–1023px 回归修复） ----------
       现象：.navbar-inner 内的 flex 子项在 768px 处改用桌面内边距（左右各 64px）后，
       内容行放不进 640px 可用宽度 → 整个 .navbar-right 被换到第二行
       → .navbar-inner 32px 变 80px、.navbar 80px 变 132px → 导航栏以下全部内容下移。
       实测边界：768..909 两行、910+ 一行。

       ⚠ 这里为什么必须**同时**压 .navbar-inner 的 padding/gap 与 .nav-links 的 gap：
       换行是按【子项 max-content 之和】判定的 —— 本行是 <nav>，浏览器 UA 样式给的是
       flex-flow: row wrap（这个**简写**会覆盖 flex-wrap 长属性，所以 computedStyle 里
       看到 flex-wrap: nowrap 也不代表不会换行），因此判定用的是两个子项的**不可压缩**宽度：
       只改 .navbar-left 内部的 gap 无效，必须同时压 .nav-links 的间隔。
       且 768px 处余量本来就薄 —— 若未来版本号文本变长（v3.0.4 → v3.10.4 …）
       或换字体栈导致 "BlockTavern" / 菜单项渲染变宽，可能重新触发换行，
       请回来核对下面这两处的取值（可用「可用宽度 − 两个子项 max-content − gap」自测余量）。

       取值与实测余量（768px，余量 = 可用宽度 − 子项 max-content 之和，越大越安全）：
         padding 16px / .navbar-inner gap 12px / .nav-links gap 12px → +26.5px
       版本号加长的抗性实测（768px 余量）：v3.0.4 +26.5 / v3.10.4 +20.3 /
         v3.10.14 +14.1 / v3.10.140 +7.9 / v10.10.140 +1.7 —— 全程仍是 1 行。
       （早期取值 padding 20 / gap 16 / links 16 在 v3.10.4 就会掉回 2 行，已弃用。）

       为什么 1440 / 375 逐像素不变：本段整体位于 @media (min-width:768px) and (max-width:1023px)
       内，1024px 及以上、640px 及以下都不会命中；且只改 padding/gap，
       不改字号、颜色、尺寸、也不改 .theme-toggle 的任何属性
       （三态尺寸恒为 32×32，切换不跳）。 */
    .navbar-inner {
        padding-left: 16px;
        padding-right: 16px;
        gap: 12px;
    }

    .nav-links {
        gap: 12px;
    }

    /* 平台卡内边距收紧 */
    .dl-card {
        padding: 32px;
    }

    /* 页脚：已改 flex —— 品牌占整行，各栏目每行两个 */
    .footer-brand {
        flex: 1 1 100%;
        max-width: none;
    }


    .footer-cols {
        flex: 1 1 100%;
    }

    /* CTA 卡内边距收紧 */
    .cta-card {
        padding: 48px;
    }
}

/* ---------- 手机（≤640px） ---------- */
@media (max-width: 640px) {
    .main {
        /* ⚠ 这里原来是写死的 128px —— 它是「导航栏盒高」的旧估算，与横幅**叠加**了：
           横幅在场时横幅容器已经让过位（见 css/layout.css 的 .main），再加 128px
           就是多出来的一条空带（实测 375px：横幅底边 190，而 hero 顶边 318，多出 128px ✗）。
           现在上留白只有一处口径：横幅在场 → 0；横幅全关 → css/layout.css 那条
           `body:not(:has(#bt-site-banners)) .main`（用令牌现算导航栏盒高，窄屏自动是 58/72）。 */
        padding-top: 0;
        padding-bottom: 80px;
    }

    .section {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .content-section {
        padding-top: 64px;
    }

    /* 顶栏紧凑化 + 内容放不下时自动换行（避免右侧溢出）。
       padding-top 仍然要为「国内站 / 国际站」切换条让位（切换条在文档流最顶部，
       导航栏是 fixed、不占流）：窄屏实测切换条 28px、导航内容行 30px、原下留白 14px。
       这几个值同时为 css/layout.css 的 --bt-banner-offset 提供窄屏兜底。 */
    :root {
        --bt-bar-h: 28px;
        --bt-nav-inner-h: 30px;
        --bt-nav-pad-min: 14px;
        --bt-nav-pad-bottom: 14px;
    }

    .navbar {
        padding-top: max(var(--bt-bar-h), var(--bt-nav-pad-min));
        padding-bottom: var(--bt-nav-pad-bottom);
    }

    .navbar-inner {
        gap: 12px;
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .navbar-left {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* 右侧（语言切换/爱发电）无论单行还是换行都保持右对齐 */
    .navbar-right {
        flex-shrink: 0;
        margin-left: auto;
    }

    /* 窄屏：右侧折叠为汉堡菜单（语言切换/赞助/图集移入全屏移动菜单） */
    .navbar-right > .lang-toggle,
    .navbar-right > .nav-icon {
        display: none;
    }

    .nav-menu-btn {
        display: inline-flex;
    }

    .mobile-menu {
        display: block;
    }

    .mobile-menu-inner {
        padding-top: 96px; /* 配合紧凑 navbar（顶部 14px 内边距） */
    }

    .brand {
        font-size: 18px;
        gap: 8px;
    }

    .brand-mark img {
        width: 28px;
        height: 28px;
    }

    .brand-version-inner {
        font-size: 10px;
        padding: 3px 8px 2px;
    }

    .navbar-right {
        gap: 8px;
    }

    .nav-icon {
        width: 30px;
        height: 30px;
    }

    .lang-toggle-item {
        padding: 0 9px;
        font-size: 11px;
    }

    /* Hero：上留白不再单独写数值（原来这里写死 40px，与 --page-top-gap 重复一处口径），
       统一由 css/base.css 的令牌承担；这里只保留窄屏字号等真正随宽度变的东西。 */
    .hero-section {
        padding-top: var(--page-top-gap);
    }

    .hero-title {
        font-size: 1.7rem;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .notice-card {
        padding: 16px;
        gap: 10px;
    }

    .hero-actions .wonder-button,
    .hero-actions .wonder-button-secondary {
        flex: 1 1 auto;
        padding: 12px 18px;
        font-size: 13px;
    }

    /* 区块标题收紧 */
    .section-heading {
        margin-bottom: 56px;
    }

    /* 展示图：移动端加高比例 */
    .showcase {
        margin-top: 64px;
        aspect-ratio: 16 / 10;
    }

    /* 平台卡 */
    .dl-card {
        padding: 24px;
    }

    .dl-card-watermark {
        font-size: 140px;
    }

    .dl-card-specs {
        gap: 12px 20px;
    }

    /* 模组 */
    .mod-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .mod-actions {
        width: 100%;
    }

    /* FAQ */
    .faq-question {
        font-size: 14px;
        min-height: 54px;
    }

    /* CTA */
    .cta-card {
        border-radius: 2rem;
        padding: 40px 24px;
    }

    .cta-inner p {
        font-size: 16px;
    }

    .cta-actions {
        gap: 12px;
    }

    .cta-actions .wonder-button,
    .cta-actions .wonder-button-secondary {
        flex: 1 1 auto;
        padding: 14px 18px;
    }

    /* 页脚 */
    .footer-inner {
        padding-left: var(--margin-mobile);
        padding-right: var(--margin-mobile);
    }

    /* 页脚订阅表单：窄屏下输入框与按钮各占一行、宽度铺满；输入框用 16px 防 iOS 自动放大 */
    .newsletter-form {
        flex-direction: column;
        max-width: 100%;
        align-items: stretch;
    }

    .newsletter-input {
        width: 100%;
        flex: none;
        height: 44px;
        font-size: 16px;
    }

    .newsletter-btn {
        width: 100%;
        height: 44px;
    }

    .toast {
        top: 64px;
        right: 16px;
        left: 16px;
        max-width: none;
    }

    .to-top {
        right: 16px;
        bottom: 16px;
    }
}

/* ---------- 小屏手机（≤380px） ---------- */
@media (max-width: 380px) {
    .hero-title {
        font-size: 1.55rem;
    }

    .brand {
        gap: 6px;
        font-size: 15px;
    }

    .brand-mark img {
        width: 22px;
        height: 22px;
    }

    .brand-version-inner {
        font-size: 9px;
        padding: 2px 6px 2px;
    }

    .navbar-right {
        gap: 6px;
    }

    .nav-menu-btn {
        width: 30px;
        height: 30px;
    }

    .menu-icon {
        width: 18px;
        height: 18px;
    }

    .menu-bar {
        width: 14px;
        height: 1.5px;
    }

    .menu-bar:nth-child(1) {
        transform: translate(-50%, calc(-50% - 4px));
    }

    .menu-bar:nth-child(3) {
        transform: translate(-50%, calc(-50% + 4px));
    }

    /* 移动菜单在小屏上收紧字号与间距 */
    .mobile-menu-item {
        padding: 22px 0;
        font-size: 20px;
    }

    .mobile-menu-footer {
        padding: 20px 0 28px;
    }

    .mobile-menu .lang-toggle {
        height: 34px;
    }

    .mobile-menu .lang-toggle-item {
        padding: 0 12px;
        font-size: 12px;
    }

    .nav-icon {
        width: 26px;
        height: 26px;
    }

    .nav-icon img {
        width: 16px;
        height: 16px;
    }

    .lang-toggle {
        height: 28px;
        padding: 2px;
    }

    .lang-toggle-item {
        padding: 0 6px;
        font-size: 10px;
    }

    .dl-card-specs strong {
        font-size: 12px;
    }
}

/* 窄屏（<=1023px）：右上角账号区隐藏，同样的内容整体进汉堡菜单（见 .mobile-menu-account）。
   为什么是 1023 而不是 640：640-1023 这一段右侧本来就已经折叠成汉堡了（语言切换/外链图标全收进菜单）。 */
@media (max-width: 1023px) {
    .navbar-right > .nav-account {
        display: none;
    }
}