/* ==========================================================================
   responsive.css — 断点与逐区块重排
   依据：奥尼科技-GEO官网-响应式实现规格.md §2–§7（L≥1200 / M 768–1199 / S<768）
   ========================================================================== */

/* 汉堡按钮：桌面隐藏，≤1199 由下方断点改为显示。
   ⚠️ 必须位于所有 @media 之前 —— 同优先级规则后者胜出，
   若写在文件末尾会反向覆盖断点内的 display:inline-flex，
   导致手机端导航整体消失（历史事故 2026-09-29）。 */
.nav__burger { display: none; }

/* ============ M｜平板 768–1199 ============ */
@media (max-width: 1199px) {
    :root {
        --container-pad: 48px;
        --section-py: 80px;
        --section-cta-py: 96px;
        --header-gap: 14px;
        --header-to-content: 40px;
        --card-gap: 20px;
        --footer-py-top: 64px;
        --footer-py-bottom: 32px;
    }

    /* 字号过渡（±1px 内线性，规格 §4） */
    .t-hero      { font-size: 48px; line-height: 62px; }
    .t-page-hero { font-size: 42px; }
    .t-section   { font-size: 34px; }
    .t-cta-title { font-size: 38px; line-height: 52px; }
    .stat__num   { font-size: 44px; }

    /* 网格降列 */
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
    .num-columns--5,
    .num-columns--4 { grid-template-columns: repeat(2, 1fr); }
    .stats-row { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }

    /* 分栏堆叠（规格 §5.1-4 / §5.3 / §5.5） */
    .content-row--geo,
    .content-row--split,
    .content-row--about { grid-template-columns: 1fr; }
    .content-row--about { gap: 40px; }

    /* 分栏行：先文案后视觉（规格 §5.1-4） */
    .content-row--geo .geo-steps-card { order: 2; }

    /* Nav 收起为汉堡（规格 §5.1-1、§6） */
    .nav__links, .nav__cta { display: none; }
    .nav__burger { display: inline-flex; }

    /* Footer 2 列（规格 §5.1-11） */
    .footer__top { grid-template-columns: 1fr 1fr; gap: 40px; }

    /* 联系表单分栏堆叠：表单卡在上（规格 §5.6） */
    .content-row--contact { grid-template-columns: 1fr; }
}

/* ============ S｜手机 <768 ============ */
@media (max-width: 767px) {
    :root {
        --container-pad: 20px;
        --section-py: 40px;
        --section-cta-py: 64px;
        --header-gap: 12px;
        --header-to-content: 24px;
        --card-gap: 12px;
        --card-pad: 20px;
        --radius-card: 14px;
        --footer-py-top: 48px;
        --footer-py-bottom: 28px;
        --hero-py-top: 56px;
        --hero-py-bottom: 40px;
    }

    /* 字号阶梯（规格 §4 手机列实测） */
    .t-hero      { font-size: 32px; line-height: 44px; }
    .t-page-hero { font-size: 30px; line-height: 40px; }
    .t-section   { font-size: 26px; line-height: 35px; }
    .t-cta-title { font-size: 28px; line-height: 38px; }
    .t-sub       { font-size: 15px; line-height: 25px; }
    .t-card-lg   { font-size: 16px; line-height: 23px; }
    .t-card      { font-size: 16px; line-height: 23px; }
    .hero__sub   { font-size: 15px; line-height: 25px; }
    .stat__num   { font-size: 28px; line-height: 36px; }

    /* 单列堆叠（规格 §5 逐区块） */
    .grid--3, .grid--4, .grid--2,
    .num-columns--5, .num-columns--4 { grid-template-columns: 1fr; }
    .stats-row { grid-template-columns: repeat(2, 1fr); }
    .content-row--geo,
    .content-row--split,
    .content-row--about,
    .content-row--contact { grid-template-columns: 1fr; }

    /* GEO 四步卡：手机单列（桌面/平板保持 2×2 田字格） */
    .steps-grid { grid-template-columns: 1fr; }

    /* 卡片间距与内距（规格 §3） */
    .card { padding: 20px; }
    .card--pad-sm { padding: 20px; }

    /* Hero：AI 卡满宽，排在 CTA 按钮之下（规格 §5.1-2） */
    .ai-card { width: 100%; }
    .hero__ctas { flex-direction: column; align-items: stretch; width: 100%; }
    .hero__ctas .btn { width: 100%; justify-content: center; }

    /* 最终 CTA：按钮满宽（规格 §5.1-10） */
    .cta-final__btns { flex-direction: column; width: 100%; }
    .cta-final__btns .btn { width: 100%; }

    /* Nav 高 56（规格 §3.2） */
    .nav { height: 56px; }

    /* Footer 全部单列（规格 §5.1-11） */
    .footer__top { grid-template-columns: 1fr; gap: 28px; }

    /* Footer 版权行：窄屏改为上下两行，避免备案号被挤压换行错位 */
    .footer__bottom { flex-direction: column; align-items: flex-start; gap: 6px; }

    /* 表单：满宽单列、按钮 100%（规格 §5.6） */
    .form-card { padding: 24px; }
    .form-card .btn--submit { width: 100%; }

    /* 效果衡量：数字与说明保持上下结构（num-col 本就上下，勿并排——显式声明） */
    .num-col { flex-direction: column; }

    /* 产品页窄屏精简区块（规格 §5.2，由 frontmatter mobile_hidden 控制输出类名） */
    .hide-mobile { display: none; }

    /* 点击热区（规格 §7.3） */
    .nav__link, .footer__link { min-height: 44px; display: inline-flex; align-items: center; }
    .faq__q { min-height: 44px; }
}

/* ============ 移动端导航抽屉（规格 §6，稿中缺失按规格补充） ============ */

.nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 90;
    visibility: hidden;
    pointer-events: none;
}

.nav-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
}

.nav-drawer__mask {
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 46, 0.4);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.nav-drawer.is-open .nav-drawer__mask { opacity: 1; }

.nav-drawer__panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 20px;
    transform: translateY(-100%);
    transition: transform 0.28s ease;
}

.nav-drawer.is-open .nav-drawer__panel { transform: translateY(0); }

.nav-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    margin-bottom: 12px;
}

.nav-drawer__close {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-ink);
}

.nav-drawer__list { display: flex; flex-direction: column; }

.nav-drawer__item {
    font-size: 20px;
    line-height: 32px;
    padding: 14px 0;
    border-bottom: 1px solid #EEF0F6;
    color: var(--color-ink-soft);
}

.nav-drawer__item.is-active { color: var(--color-primary); }

.nav-drawer__cta {
    margin-top: 24px;
    display: block;
    text-align: center;
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-radius: var(--radius-pill);
    background: var(--color-gradient-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

/* 高分屏发丝线抗发虚的降级（不支持 transform 的极少数场景忽略即可） */
@media (-webkit-max-device-pixel-ratio: 1) {
    .hairline, .footer__hairline { transform: none; }
}