/*
 * vh-layout-pages.css — 各页面内容容器接入 vh-layout.css 的宽度变量（≥1440px 才生效）
 * 依赖 vh-layout.css 定义的 --vh-page / --vh-gutter，先读那里的契约说明。
 *
 * 写法约定（改这里之前先看）：
 *   1. 规则都在 ≥1440 生效（主块 @media (min-width: 1440px)，另有 ≥1641 招聘 banner、≥1800 关于页左栏两个高档位）：
 *      ≤1439（平板 / 1280–1366 笔记本）一律不动。
 *   2. 内容列 = --vh-page，左缘对齐页眉 logo / 页脚那条线。容器自带左右内边距 p 的，
 *      max-width 写成 calc(var(--vhp-page) + 2p)，让"内容"而不是"盒子"落在那条线上。
 *   3. 原上限比 1440 下的内容列（1240）还宽的容器（下载 1640、招聘 1640、搜索 1700、产品中心 1335 …），
 *      写成 max(原上限, 内容列)：1440–1919 不比原来窄（笔记本不劣化），内容列追上原上限后再对齐那条线；
 *      1920 及以上（含 zoom 放大档位，版式宽 ≥1920）所有页面都落在 1680 内容列上。
 *      取舍（有意为之）：追上之前这几页正文比页眉线更宽、左缘在线外侧。开始对齐的视口宽：
 *      产品中心 1535、新闻列表 1555、核心能力 1640、下载 1860、招聘 / 新闻详情外框 1880、搜索 1900。
 *      若要改成"处处对齐优先"，把对应 max() 去掉只留内容列即可，代价是 1440–1900 这几页比现在窄（最多窄约 200）。
 *   4. 选择器一律带 html 前缀（必要时再带页面根类）抬优先级：本文件在 </head> 前加载，
 *      而各页面 CSS / 内联 <style> 在 body 里、加载更晚，同优先级会被它们盖掉。
 *   5. 不写 vw：≥2048 时 html 整体 zoom 放大，vw 不随 zoom 换算（100vw 会变成 zoom 倍视口宽）。
 *      宽度一律用 % 与 --vhp-page（它的 100vw 被 1680 封顶，zoom 档位下必然取 1680，安全）。
 *   6. 阅读类正文（新闻正文、隐私政策正文）只铺开框架 / 背景 / 列表，文字列封顶 1100px，不跟着加宽。
 *   7. .container / .ncontont / .nctds_box / .a_banner 都是多页共用类，必须限定到具体页面根，不能裸写。
 */

@media (min-width: 1440px) {
    /* 本层别名：vh-layout.css 万一没加载到，退回 1240（各页原宽附近），而不是 max-width 失效铺满整屏 */
    html:root {
        --vhp-page: var(--vh-page, 1240px);
    }

    /* ── 产品中心 / 二级类目（list/product.html 非选型分支） ─────────────────────────
       .container 是全站通用类（onekey.min.css 1440 + 20 内边距；本页内联改成 1335），
       只限定在本页根 section.web_main.page_main 下；旧搜索页 search.html / search_all.html 也是这个根
       （#search，.container 走默认 1440），排除掉，免得被 1335 下限收窄。 */
    html .web_main.page_main:not(#search) > .container {
        max-width: max(1335px, calc(var(--vhp-page) + 40px));
    }

    /* ── 产品详情（common/npro.html） ───────────────────────────────────────────────
       .nproda / .nproda2 原 1200 + 30 内边距（内容 1140）；参数表 / 方案 / 推荐等区块都在它里面按 100% 走，
       参数表自身另有 1200 上限，放开即可跟随外框。 */
    html .nproda,
    html .nproda2 {
        max-width: calc(var(--vhp-page) + 60px);
    }
    html .nproda2 .nproda_params_wrap {
        max-width: none;
    }
    /* 主图原固定 300（左栏 1200 版式下约 500 宽）；左栏铺到 ~770 后 300 显得空，放到 360 */
    html .nproda2 .product-view .product-image {
        width: 360px;
    }
    /* "解决方案"卡片：Swiper 每屏 4 张，slide 宽 = (区块 - 100 左右箭头位 - 3×20) / 4。
       原 1200 外框下 slide 约 245，卡片（max-width 260）正好铺满；外框到 1680 后 slide 约 380，
       卡片仍停在 260 且靠左，卡片间露出 140px 空当。放开上限让卡片铺满 slide（图 220×190 contain 居中不变）。
       "产品推荐"卡片本来就是 width:100% 跟随 slide，不用改。 */
    html .nproda2 .nproda2_solution_item {
        max-width: none;
    }

    /* ── 新闻列表（list/news.html + nc.css） ────────────────────────────────────────
       外框 .in_news_box 原 1315；内层灰底 .in_news_swlist（内联 1640）和卡片网格 .mw1320 都按外框走。 */
    html .in_news .in_news_box {
        max-width: max(1315px, var(--vhp-page));
    }
    html .in_news .in_news_swlist,
    html .in_news .in_news_swlist > .mw1320 {
        max-width: none;
    }

    /* ── 新闻详情（common/newsda.html） ─────────────────────────────────────────────
       框架（灰底正文带、相关产品条、上一篇 / 下一篇卡片）铺到内容列；
       标题、正文、相关链接是阅读列：文字列封顶 1100（原 1170，英文一行已到 116–169 字符，不再加宽）。
       面包屑 + 标题（.newsda_top）有意留在阅读列、与正文左缘对齐：若铺到页眉线（1920 下 120），
       正文却从 410 起，标题和正文两条左缘错开 290px；页面的"铺开"由下面铺满内容列的灰底正文带承担。 */
    html .newsda {
        max-width: max(1640px, var(--vhp-page));
    }
    html .newsda .newsda_top,
    html .newsda .newsda_content_box {
        max-width: 1140px; /* 左右 20 内边距 → 文字列 1100 */
    }
    html .newsda .newsfet {
        max-width: 1100px;
    }
    /* 上一篇 / 下一篇卡片条：原 1340 + 左右 32 内边距。盒宽放到"内容列 + 64"，卡片落在页眉线上；
       但 .newsda 自身封顶在内容列（1920 下 1680），盒子被压回 1680 后 32 内边距会把卡片推到 152。
       内边距改成 clamp(0, (父宽 - 内容列) / 2, 32)：父宽有富余时仍是 32（视口 ≤1816 与原来一致），
       1816–1880 逐步收小，父宽 = 内容列（≥1880）时归零；1536 起卡片左缘都在页眉线上
       （百分比相对父级 .newsda_bottom_box，即 .newsda 宽）。 */
    html .newsda .newsda_bottom_cbox {
        max-width: max(1340px, calc(var(--vhp-page) + 64px));
        padding-left: clamp(0px, calc((100% - var(--vhp-page)) / 2), 32px);
        padding-right: clamp(0px, calc((100% - var(--vhp-page)) / 2), 32px);
    }

    /* ── 关于我们（about_all.html + about_new.css，React 渲染） ──────────────────────
       .section-body / .foot 原 --content-max 1180 + 60 内边距（内容 1060）。
       左侧浮动页内导航由 vh-layout.css §3 改成底部居中浮条，不再占正文左侧。
       "关于我们"两栏原是 320 + 1fr：铺开后右栏文字一行 70+ 字，左栏按比例放大（图片随之放大）。 */
    html #voohu-about-root .section-body,
    html #voohu-about-root .foot {
        max-width: calc(var(--vhp-page) + 120px);
    }
    html #voohu-about-root .about-layout {
        grid-template-columns: minmax(320px, 32%) minmax(0, 1fr);
        gap: 56px;
    }
    /* 左栏三块：视频封面（.ph flex 1.8）、品牌红块、展厅图。about_new.css:390 给 .ph 写了 flex:1 + min-height:160，
       设计意图是"左栏高度跟文字栏走、图片分剩余高度"；但有图时 Img 组件渲染的是 <img class="ph-img ph-wide">（没有 .ph），
       按原图比例取高度，左栏一放宽，这张图就把整行撑高（1920 下文字只占 432，行高 772，下方空 340）。
       这里把展厅图补回 .ph 的分高规则（cover 裁切），行高回到由文字栏决定。 */
    html #voohu-about-root .about-imgcol > .ph-img {
        flex: 1 1 0;
        min-height: 160px;
        height: 0;
        width: 100%;
        object-fit: cover;
    }

    /* ── 核心能力（core_competencies.html；.mw1400 只有这一页用） ───────────────────
       原 1480 + 40 内边距（内容 1400）。 */
    html .in_core_com .mw1400 {
        max-width: max(1480px, calc(var(--vhp-page) + 80px));
    }

    /* ── 联系我们 · 销售商务服务（sales_business_service_information.html） ──────────
       .nctds_box 是多页共用类（联系表单、询价单、技术支持也用），只按"里面是联系人列表 .pambox"命中。
       cn：sales-contacts.js 把列表改成两列（sales-contacts-cn.css 1240 / 1200），这里只放开上限。
       ele：原是 950 宽单列，内容列铺开后单列每行过长，改成两列网格（与 cn 一致的阅读密度）。 */
    html .dbox .nctds .nctds_box:has(> .pambox) {
        max-width: calc(var(--vhp-page) + 40px);
    }
    html .dbox .nctds .nctds_box > .pambox {
        max-width: none;
    }
    html .dbox .nctds:not(.sales-contacts-cn) .nctds_box > .pambox {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 40px;
        align-items: start;
    }
    /* 顶部分类页签条（common/contacttop.html，原 1200）跟内容列走 */
    html .acpcontent > .ncattop + .ncattop_nav {
        max-width: var(--vhp-page);
    }
    /* 上面 :has(> .pambox) 同时命中"销售商务服务"和"其他联系信息"（/other-contact-information/）两页。
       "联系沃虎"（contact_voohu.html，cn 页签名"技术支持"）的联系窗口列表是另一套类：
       .contact_other_box 990 + 20 内边距、.contact_other_list 950 单列（模板内联 <style>），页签条铺开后它显得很窄。
       同样铺到内容列、排两列；行内两条等高（stretch），每条底边框在同一水平线上。
       下方的留言表单 .nctds_box（990）是表单，保持原宽。 */
    html .dbox .nctds .contact_other_box {
        max-width: calc(var(--vhp-page) + 40px);
    }
    html .dbox .nctds .contact_other_list {
        max-width: none;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 40px;
    }

    /* ── 下载中心（list/download.html） ─────────────────────────────────────────────
       .down 原 1640 + 10 内边距；右侧结果列原另封顶 1220、靠右，铺开后放开上限填满左栏右侧。 */
    html .down {
        max-width: max(1640px, calc(var(--vhp-page) + 20px));
    }
    html .down .down_right {
        max-width: none;
    }

    /* ── 招聘（hr.html） ───────────────────────────────────────────────────────────
       卡片区 .ncontont 原 1640。 */
    html .nnhr > .ncontont {
        max-width: max(1640px, var(--vhp-page));
    }

    /* ── 隐私政策（privacy_policy.html） ────────────────────────────────────────────
       灰底框架原 1680（= 1920 下的内容列，已贴线，不动）；正文 .pcpbox 原 1280，是阅读列，封顶 1100。 */
    html .pcp .pcpbox {
        max-width: 1100px;
    }

    /* ── 解决方案总览（list/classify_level_one.html + classify_level_one.css） ─────────
       卡片网格与页底分隔线共用上限变量 --clo-max（默认 1100），这里改成内容列，两者同宽；
       列数固定 4（8 张卡 = 2 行；auto-fill 在 1680 下会排成 6 + 2）。 */
    html:root {
        --clo-max: var(--vhp-page);
    }
    html .clo .clo-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    /* 卡片铺到 1/4 内容列（1920 下 405 宽）后仍按正方形会很高，两行卡片一屏放不下；
       改 4:3，图标（原图 150px 线稿）随剩余高度等比缩放，放大倍数与原 260 卡片下相近 */
    html .clo .clo-list-item {
        aspect-ratio: 4 / 3;
    }

    /* ── 行业方案根（aplication.html） ──────────────────────────────────────────────
       标题 / 导航 .napybox 原 1640；图文行 .napybox_cbox 原无上限（图 ≤1050 + 文 ≤740 居中，1920 下左右越过页眉线），
       灰底 .napybox_c:before 原 1640 —— 统一收到内容列。 */
    html .napybox {
        max-width: var(--vhp-page);
    }
    html .napybox_c > .napybox_cbox {
        max-width: var(--vhp-page);
        margin-left: auto;
        margin-right: auto;
    }
    html .napybox_c::before {
        max-width: var(--vhp-page);
    }
    /* 图片原 margin-left:-45 往左探出行盒（行盒原来铺满整屏，探出去看不出来）；
       行盒收到内容列后，奇数行（图在左）会越过页眉线 45px，这里归零；偶数行（图在右）探进文字区，保持原样 */
    html .napybox_c > .napybox_cbox:nth-child(odd) > .napybox_cbox_img {
        margin-left: 0;
    }

    /* ── 行业领域页（application_preview/domain.html + application-preview-domain.css） ──
       .vhap-wrap 原 1200。首屏线框主体（560 宽）由 hero3d.js 内联 right:max(40px, 50% - 640px)，
       只认 1200 内容列：内容列铺开后，1920 下主体右缘在 1600，跟铺开的标题区脱节。
       改按内容列右缘定位：右侧两枚标签实测比主体右缘再伸出 ~40px，主体缩进 40 → 标签右缘贴内容列右缘，
       不再伸进右侧留白（cn 客服栏 / ele 浮动按钮就在那里）。 */
    html .vhap-domain .vhap-wrap {
        max-width: var(--vhp-page);
    }
    html .vhap-domain .vhap-hero-banner > div > div:last-child {
        right: max(80px, calc(50% - var(--vhp-page) / 2 + 40px)) !important;
    }
    /* 上面这样定位后，主体左缘 = 内容列右缘 - 600（主体 560 + 缩进 40）。说明文字原封顶 820，
       1440–1560 时内容列只有 1240–1320，文字行尾会压到机械臂 / 底座上（基线 1440 也有轻微压线）。
       封顶改成"内容列 - 640"：行尾与主体之间恒留 40px；内容列 ≥1460（视口 ≥1700）时取回原来的 820。 */
    html .vhap-domain .vhap-hero-lead {
        max-width: min(820px, calc(var(--vhp-page) - 640px));
    }

    /* ── 问题页 / 新版样品申请页（problem-guide.css + sample-request-v2.css） ─────── */
    html .pg-page .pg-container,
    html .pg-page .pg-cta {
        width: min(100% - 64px, var(--vhp-page));
    }

    /* ── 搜索（v_search.html） ─────────────────────────────────────────────────────
       结果区 .vsearch_box 原 1700 + 20 内边距（1440 下已铺满整屏，保留）；左栏与结果列间距 100 → 40，
       让规格表的可视窗口（结果列 - 350 固定列）更宽。顶部固定搜索条两端与结果区内容对齐
       （搜索框左距 10vw 在 zoom 档位下的换算由 vh-layout.css §6 负责）。 */
    html .vsearch_box {
        max-width: max(1700px, calc(var(--vhp-page) + 40px));
    }
    html .vsearch_box .vsearch_left {
        margin-right: 40px;
    }
    html .vsearch_box .vsearch_right {
        width: calc(100% - 360px);
    }
    html .vsearch_top {
        padding-left: max(20px, calc((100% - max(1700px, var(--vhp-page) + 40px)) / 2 + 20px));
        padding-right: max(20px, calc((100% - max(1700px, var(--vhp-page) + 40px)) / 2 + 20px));
    }

    /* ── 购物车（shop/cart.html，商城插件） ─────────────────────────────────────────
       同样借用 .nctds_box（内联 1130），按"里面是 .vshop-page"命中。 */
    html .dbox .nctds .nctds_box:has(> .vshop-page) {
        max-width: calc(var(--vhp-page) + 40px);
    }
}

/* 关于页左栏 ≥1800（含所有 zoom 档位，版式都是 1920 宽）：左栏 32% 已到 500+，
   上面竖排三块的分高方式会把展厅图裁成 538×160 的扁条（cn 文字栏只有 432 高，三块都卡在 160 下限），
   文字栏下方还会多出 ~30px。这一档改成"视频封面通栏在上，品牌红块 + 展厅图并排在下"：
   展厅图按原图比例显示（不裁），视频封面分剩余高度，行高仍由文字栏决定。
   1440–1799 左栏只有 400 左右，并排后每格不到 230，竖排更合适，保持上面的规则。 */
@media (min-width: 1800px) {
    html #voohu-about-root .about-imgcol {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: minmax(160px, 1fr) auto;
        gap: 16px;
    }
    html #voohu-about-root .about-imgcol > .ph-tall {
        grid-column: 1 / -1;
        min-height: 160px;
    }
    html #voohu-about-root .about-imgcol > .brand-callout {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 20px 12px;
    }
    html #voohu-about-root .about-imgcol > .ph-img {
        height: 100%;
        min-height: 0;
    }
}

/* 招聘页 banner：about.css 把 .a_banner 封顶 1640、不通栏（1920 下两侧各露 140 白边），
   与其它页（关于 / 联系 / 行业方案 / 下载）的通栏 banner 不一致。只在超过 1640 时改通栏，图片等比放大；
   ≤1640 时原本就是满宽，不动。.a_banner 多页共用，只按"后面紧跟招聘卡片区 .nnhr"命中。 */
@media (min-width: 1641px) {
    html .dbox .a_banner:has(+ .nnhr) {
        max-width: none;
    }
    html .dbox .a_banner:has(+ .nnhr) > img {
        width: 100%;
    }
}

/* ── 右侧悬浮组件让位（P1-5：cn 客服栏 rail 66 / 竖条 44） ─────────────────────────────
   --vh-float-right 由 vh-sidebar.css 定义：只在挂了客服栏的 cn 页面、视口 ≥1024 时 = 76px（rail 66 + 间距 10）；
   ele 与窄屏上不存在，max() 取回原内边距，版式不变。这是本文件"≤1439 一律不动"约定的例外：不改宽度体系，
   只在 cn 上给悬浮组件让出右缘。只处理实测正文贴右缘、会被 rail / 竖条压住的容器；
   接入 --vhp-page 内容列的页面 ≥1440 已有 ≥100 留白，不需要。 */
@media (min-width: 1024px) and (max-width: 1839px) {
    /* 搜索结果区：原上限 1700 + 20 内边距，视口 <1840 时右侧不足 76，规格表末列落在 rail 下面 */
    html .vsearch_box {
        padding-right: max(20px, var(--vh-float-right, 0px));
    }
    /* 下载中心：.down 原上限 1640（≥1440 为 max(1640, 内容列 + 20)），.down_box 只有 10 内边距，筛选条右端下拉框被压 */
    html .down .down_box {
        padding-right: max(10px, var(--vh-float-right, 0px));
    }
}
@media (min-width: 1024px) and (max-width: 1439px) {
    /* 隐私政策：≤1439 正文铺满，只有页面内联样式 .dbox .ncontont 的 20 内边距（特异度 0-2-0），行尾字被竖条压住；
       ≥1440 正文 .pcpbox 封顶 1100 居中，已有留白 */
    html .dbox .pcp {
        padding-right: max(20px, var(--vh-float-right, 0px));
    }
}