/* =========================================================
   全屋定制企业官网模板 — 移动端适配
   ---------------------------------------------------------
   断点说明：
     ≤1100px  平板 / 小笔记本
     ≤768px   手机（导航切换为抽屉式）
   ========================================================= */

/* 抽屉遮罩：默认隐藏，仅在手机端抽屉打开时出现 */
.nav-mask { display: none; }

/* 抽屉打开时锁定页面滚动 */
body.nav-lock { overflow: hidden; }

/* =========================================================
   内容区避让右侧悬浮侧栏（选的方案：缩小容器宽度）
   ---------------------------------------------------------
   问题：.float-sidebar 是 position:fixed，会浮在内容之上。
   容器居中（最大 1200px），视口不够宽时容器右缘会被侧栏压住
   —— 1280px 视口下实测重叠约 54px，会遮住规格表右侧一列。
   做法：容器仍居中，两侧各让出「侧栏占位 + 16px 间隙」。
     侧栏占位 = right 偏移 20 + 项宽 74 = 94px（>768px 时都是这个值，
     项宽收窄的 60px / 54px 只在 ≤768 / ≤420 的手机断点里）
     → 两侧共让 (94 + 16) × 2 = 220px
     ≥1420px 本就放得开，保持原 1200px 不变，不缩。
   注：手机端（≤768）容器是全宽通栏，再缩内容就太窄了，
   维持现状——侧栏浮在右下角，属移动端通行做法。
   ========================================================= */
@media (min-width: 769px) and (max-width: 1419px) {
    .container { max-width: calc(100% - 220px); }
    /* 页头例外：侧栏是 fixed 且 bottom:100px（贴在下方），页头吸顶在最上方，
       两者永远不会相遇，所以页头不参与收缩 —— 否则窄屏下导航会被挤到溢出容器。 */
    .header .container { max-width: var(--max-width); }
}

/* =========================================================
   ≤ 1100px — 平板
   ========================================================= */
@media (max-width: 1100px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .materials-grid { grid-template-columns: repeat(2, 1fr); }
    .case-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: repeat(3, 1fr); }

    .prod-block { grid-template-columns: 1.35fr 1fr; gap: 26px; }
    .step-grid { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
    .policy-grid { grid-template-columns: repeat(2, 1fr); }
    .vr-grid { grid-template-columns: repeat(2, 1fr); }
    .review-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery { grid-template-columns: repeat(3, 1fr); }
    .knowledge-grid { grid-template-columns: repeat(2, 1fr); }
    .kb-topic-grid { grid-template-columns: repeat(2, 1fr); }
    .kb-article-list { grid-template-columns: 1fr; }
    .about-stats { grid-template-columns: repeat(2, 1fr); }
    .real-grid { grid-template-columns: repeat(3, 1fr); }
    .banner { height: 640px; }
}

/* =========================================================
   769–1100px — 窄桌面 / 平板：导航项较多（10 项），
   分段收紧间距与字号，避免横向溢出（>768 仍用横向导航）
   ========================================================= */
@media (min-width: 769px) and (max-width: 1100px) {
    .main-nav { gap: 18px; }
    .main-nav > li > a { font-size: 15px; }
    .nav-cta { padding: 9px 18px !important; font-size: 13px !important; }
    .logo img { height: 44px; }
}
@media (min-width: 769px) and (max-width: 900px) {
    .main-nav { gap: 10px; }
    .main-nav > li > a { font-size: 13.5px; }
    .logo img { height: 40px; }
}

/* =========================================================
   ≤ 768px — 手机
   ========================================================= */
@media (max-width: 768px) {

    :root { --header-h: 64px; }

    /* ---------- 顶部导航切换为抽屉 ---------- */
    .header-inner { height: var(--header-h); }
    .logo img { height: 40px; }
    .logo .logo-fallback { font-size: 19px; }

    .mobile-toggle {
        display: flex;              /* 改为 flex，保证 SVG 图标居中 */
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        color: var(--primary-color);
        margin-right: -10px;        /* 视觉上贴边对齐 */
        position: relative;
        z-index: 1003;              /* 高于抽屉(1002)与遮罩(1001)，展开时可点击关闭 */
    }

    .main-nav {
        position: fixed;
        top: 0; right: -100%;
        width: 78%; max-width: 320px;
        height: 100vh;
        background: var(--white);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 76px 0 40px;
        overflow-y: auto;
        box-shadow: -6px 0 28px rgba(0,0,0,0.18);
        transition: right 0.35s ease;
        z-index: 1002;
    }
    .main-nav.open { right: 0; }

    .main-nav > li { border-bottom: 1px solid var(--line-color); }
    .main-nav > li > a { padding: 15px 24px; font-size: 16px; }

    /* 下拉菜单在抽屉里改为点击展开 */
    .main-nav .dropdown {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        border-radius: 0;
        min-width: 0;
        padding: 0;
        background: var(--bg-color);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    .main-nav > li.expand .dropdown { max-height: 600px; }
    .main-nav .dropdown li a { padding: 11px 40px; font-size: 14px; }
    /* 下拉里的小分组标题，缩进对齐到子项 */
    .main-nav .dropdown li.dropdown-label { padding-left: 40px; font-size: 12px; }

    /* 有下级菜单的父项，右侧加一个小箭头 */
    .main-nav > li.has-sub > a::after {
        content: '⌄';
        float: right;
        font-size: 15px;
        transition: transform 0.3s;
        margin-left: 8px;
        opacity: 0.6;
    }
    .main-nav > li.has-sub.expand > a::after { transform: rotate(180deg); }

    .nav-cta {
        display: block;
        margin: 18px 24px;
        text-align: center;
        padding: 13px 24px !important;
        font-size: 15px !important;
    }

    .nav-mask {
        position: fixed; inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 1001;
    }
    .nav-mask.show { display: block; }

    /* ---------- 首屏 ---------- */
    .banner { height: 480px; max-height: none; }
    .banner-content h1, .banner-content h2 { font-size: 30px; }
    .banner-content p { font-size: 16px; }
    .banner-buttons { gap: 12px; }
    .banner-buttons .btn-primary,
    .btn-ghost-light { font-size: 15px; padding: 12px 28px; }
    /* 手机端用左右滑动切换，隐藏箭头避免挡内容 */
    .banner-arrow { display: none; }
    .banner-dots { bottom: 18px; }
    .banner-dots button { width: 22px; }

    /* 智能制造 */
    .base-grid { grid-template-columns: 1fr; gap: 20px; }
    .base-card img { height: 220px; }
    .system-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .system-card { padding: 24px 18px; }
    .feature-row, .feature-row.reverse { grid-template-columns: 1fr; gap: 28px; }
    .feature-row.reverse .feature-media { order: 0; }
    .feature-media img { height: 240px; }
    .feature-text h2 { font-size: 22px; }

    /* 配色方案页 */
    .theme-grid { grid-template-columns: 1fr; gap: 16px; }
    .theme-card { padding: 20px 18px; }
    .theme-card.on { padding: 19.5px 17.5px; }
    .tc-swatches { gap: 10px; }
    .sw i { height: 34px; }
    .pv-grid { grid-template-columns: 1fr; gap: 16px; }
    .pv-row { gap: 12px; }

    /* ---------- 栅格全部降为单列 / 两列 ---------- */
    .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .case-grid { grid-template-columns: 1fr; }
    .materials-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .step-grid { grid-template-columns: repeat(2, 1fr); }
    .policy-grid { grid-template-columns: 1fr; }
    .vr-grid { grid-template-columns: 1fr; }
    .review-grid { grid-template-columns: 1fr; }
    .knowledge-grid { grid-template-columns: 1fr; }
    .about-stats { grid-template-columns: repeat(2, 1fr); }
    .grade-legend { grid-template-columns: 1fr; }
    .gallery { grid-template-columns: repeat(2, 1fr); }

    /* ---------- 灯箱（手机端） ---------- */
    .lb-stage img { max-height: 56vh; }
    .lb-arrow { width: 40px; height: 40px; }
    .lb-arrow.prev { left: 8px; }
    .lb-arrow.next { right: 8px; }
    .lb-foot { flex-direction: column; gap: 12px; padding-bottom: 14px; }
    .lb-foot .btn-primary { width: 100%; justify-content: center; }

    /* 案例分组：缩小标题与间距 */
    .case-group { margin-bottom: 40px; }
    .case-group-title { font-size: 18px; margin-bottom: 16px; }

    /* ---------- 定制流程 + 获客转化 ---------- */
    .conversion-card { flex-direction: column; }
    .conversion-left, .conversion-right { width: 100%; }
    .conversion-left { padding: 34px 24px; }
    .conversion-right { padding: 34px 24px; }
    .process-grid { grid-template-columns: repeat(3, 1fr); gap: 10px 8px; }
    .conversion-right h2 { font-size: 21px; }
    .conversion-right .subtitle { font-size: 13px; }

    /* ---------- 区块间距收紧 ---------- */
    .section { padding: 32px 0; }
    .products, .cases, .materials, .process-conversion { padding: 32px 0; }
    .section-title { margin-bottom: 22px; }
    .section-title h2 { font-size: 24px; }
    .prod-block { grid-template-columns: 1fr; gap: 20px; padding: 32px 0; }
    .pg-track { height: 240px; }
    .pg-arrow { display: none; }
    .prod-body h2 { font-size: 22px; }
    .mat-section { padding: 32px 0; }
    .mat-head h2 { font-size: 22px; }

    /* ---------- 内页页头 ---------- */
    /* 页头：手机上减小字号，自然换行（简介长时面包屑会落到第二行） */
    .page-hero { padding: 11px 0; }
    .page-hero-top { gap: 3px 14px; }
    .ph-left { gap: 3px 10px; }
    .page-hero h1 { font-size: 18px; }
    .page-hero-sub { font-size: 12px; }
    .page-hero-crumb { font-size: 11.5px; }

    /* 锚点导航条支持横向滑动 */
    .anchor-nav .inner { padding: 6px 0; gap: 5px; }
    .anchor-nav a { font-size: 13px; padding: 5px 14px; }

    /* ---------- 服务保障 ---------- */
    .booking-card { padding: 18px 20px; flex-direction: column; align-items: flex-start; }
    .booking-card .bk-text h2 { font-size: 17px; }
    .booking-card .bk-actions { width: 100%; }
    .booking-card .bk-actions > * { flex: 1; }

    .faq-q { padding: 15px 18px; font-size: 15px; }
    .faq-a .faq-a-inner { padding: 0 18px 18px; font-size: 14px; }

    /* ---------- 关于我们 / 真实案例 ---------- */
    .job-item { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 20px; }
    /* 公司信息：改为单列，字段标签缩短 */
    .company-info { grid-template-columns: 1fr; gap: 24px; }
    .fact { padding: 14px 18px; gap: 12px; }
    .fact .lb { width: 68px; font-size: 13px; }
    .fact .map-link { display: block; margin: 6px 0 0; }
    .company-qr img { width: 150px; }

    /* 真实案例：每个区域 4 张，窄屏改 2 张 */
    .real-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .real-item img { height: 138px; }
    .real-name { font-size: 13.5px; padding: 11px 12px; }

    /* ---------- 表格在窄屏可横向滚动 ---------- */
    .mat-table, .spec-table { display: block; overflow-x: auto; white-space: nowrap; }
    .mat-table thead, .spec-table thead { display: table-header-group; }

    /* ---------- 转化通栏 ---------- */
    .cta-strip { padding: 42px 0; }
    .cta-strip h2 { font-size: 21px; }
    .cta-strip .cta-actions > * { flex: 1; min-width: 140px; }

    /* ---------- 页脚 ---------- */
    .footer { padding: 44px 0 18px; }
    .footer-grid { margin-bottom: 28px; }
    .powered-by { flex-direction: column; gap: 10px; padding: 20px 0 6px; }
    .powered-by img { height: 34px; }

    /* ---------- 品牌故事（大字在窄屏收敛，避免溢出拥挤） ---------- */
    .prose.brand-story { padding: 44px 28px; }
    .prose.brand-story h2 { font-size: 26px; }
    .prose.brand-story p { font-size: 19px; line-height: 1.85; }

    /* ---------- 定制知识库：窄屏单列 ---------- */
    .kb-topic-grid { grid-template-columns: 1fr; gap: 16px; }
    .kb-article-list { grid-template-columns: 1fr; gap: 14px; }
    .kb-topic { padding: 22px 20px; }
    .kb-article { padding: 18px 20px; }
    .kb-canonical .mat-table td:first-child { width: auto; }

    /* ---------- 悬浮侧边栏 ---------- */
    .float-sidebar { right: 8px; bottom: 76px; border-radius: 6px; }
    .sidebar-item { width: 60px; padding: 9px 2px 8px; gap: 3px; }
    .sidebar-item svg { width: 20px; height: 20px; }
    .sidebar-item .text { font-size: 10.5px; }

    /* ---------- 微信弹窗 ---------- */
    .modal-content { width: 78%; max-width: 300px; margin: 100px auto; padding: 24px; }
}

/* =========================================================
   ≤ 420px — 小屏手机
   ========================================================= */
@media (max-width: 420px) {
    .banner-content h1, .banner-content h2 { font-size: 25px; }
    .product-grid { grid-template-columns: 1fr; }
    .gallery { grid-template-columns: 1fr; }
    .about-stats { grid-template-columns: 1fr; }
    .trust-grid { grid-template-columns: 1fr; }
    .process-grid { grid-template-columns: repeat(2, 1fr); }
    .float-sidebar .sidebar-item { width: 54px; }
    .sidebar-item .text { font-size: 10px; }

    /* 品牌故事：小屏进一步收敛 */
    .prose.brand-story { padding: 34px 20px; }
    .prose.brand-story h2 { font-size: 23px; }
    .prose.brand-story p { font-size: 17px; line-height: 1.8; }
}