/* ========================================================================
   VIRE · 样式：响应式断点 (responsive.css)
   ------------------------------------------------------------------------
   断点体系：
     ≤1180px  笔记本：容器留白收紧，详情页主图改流式
     ≤1000px  平板（PRD §9.2 原断点）：多列网格折叠，后台侧栏回归文档流
     ≤900px   H5 横竖临界：导航抽屉化、后台侧栏抽屉化
     ≤640px   手机：单列铺开、底部行动条、≥46px 触控热区、输入 16px 防缩放
     ≤400px   小屏 iPhone SE：字号与留白进一步压缩

   顺序必须最后加载：本文件对上层组件做最终裁决。
   ======================================================================== */

/* =========================== ≤1180px =========================== */
@media(max-width:1180px){
  /* v1.10.15：表头尺寸令牌按断点降一档（详情见 tokens.css） */
  :root{--hd-pady:16px;--hd-logo:40px;--hd-brand:19.5px;--hd-nav:14.5px;--hd-pill:13px;--hd-gap:18px;--hd-h:74px;}
  header.top{padding:var(--hd-pady) 22px;gap:var(--hd-gap);}
  nav.main{gap:15px;}
  .fwrap{max-width:100%;}
  .d-hero{grid-template-columns:340px 1fr;gap:22px;padding:20px 22px 0;}
  .cats{grid-template-columns:repeat(5,1fr);gap:10px;}
  .spec-t th{width:190px;}
  main.adm{max-width:100%;padding:22px 22px;}
}

/* =========================== ≤1000px =========================== */
/* PRD §9.2 原始断点：多列网格折叠为单列，后台侧栏回归文档流 */
@media(max-width:1000px){
  .hero,.co,.cats,.pcards,.fac,.d-hero,.grid2,.grid3,.grid4,.ashell,.lead-wrap,.dl-grid,.news-grid,.steps,.catrow{grid-template-columns:1fr;}
  .post-li{grid-template-columns:1fr;} .post-hero{height:218px;padding:16px 16px;} .post-hero h1{font-size:19px;}
  .slide .art{display:none;} aside.adm{position:relative;height:auto;top:0;} .step::before{display:none;}
  /* v1.1 补充：折叠后需要留白与流式排布的组件 */
  .cats{grid-template-columns:repeat(3,1fr);}
  .pcards{grid-template-columns:repeat(2,1fr);}
  .news-grid{grid-template-columns:repeat(2,1fr);}
  .dl-grid{grid-template-columns:repeat(2,1fr);}
  .media-main{height:240px;}
  .fac-sub{grid-template-rows:none;gap:10px;}
  .steps{display:grid;gap:10px;}
  .step{padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;}
  .step .num{margin-bottom:7px;}
  .cfg-row{grid-template-columns:1fr;gap:5px;align-items:stretch;}
}

/* ============================ ≤900px ============================ */
@media(max-width:900px){
  /* ---- 前台：顶部导航抽屉化 ---- */
  .navtoggle{display:flex;width:42px;height:42px;}
  /* v1.10.15：手机端表头同样上调；--hd-h 同时决定抽屉与遮罩的起始线（必须等于真实表头高度：
     11*2 + 42(汉堡) + 2 描边 = 66） */
  :root{--hd-pady:11px;--hd-logo:34px;--hd-brand:18px;--hd-nav:16px;--hd-pill:13px;--hd-gap:10px;--hd-h:66px;}
  header.top{padding:var(--hd-pady) 14px;gap:var(--hd-gap);position:sticky;top:0;z-index:50;}
  .logo{gap:9px;}
  .logo img{height:var(--hd-logo);}
  .logo .brandtext{font-size:var(--hd-brand);}
  body.is-front nav.main{
    position:fixed;left:0;top:var(--hd-h);bottom:0;width:min(86vw,326px);z-index:72;
    flex-direction:column;align-items:stretch;gap:0;flex:initial;
    background:#fff;border-right:1.5px solid var(--line);border-top:1px solid var(--line);
    padding:8px 14px calc(20px + env(safe-area-inset-bottom));overflow-y:auto;
    transform:translateX(-102%);transition:transform .26s cubic-bezier(.4,0,.2,1);
    box-shadow:0 10px 40px rgba(16,24,40,.14);font-size:16px;
  }
  html.nav-open body.is-front nav.main{transform:none;}
  html.nav-open .navmask{opacity:1;visibility:visible;}
  html.nav-open,html.nav-open body{overflow:hidden;}
  /* v1.11 修复：遮罩 z-index(70) 原本高于抽屉(45)，抽屉打开后被灰罩盖住且点不动，这里把层级摆正 */
  .navmask{top:var(--hd-h);z-index:71;}
  nav.main a{padding:15px 4px;border-bottom:1px solid var(--line);border-bottom-width:1px;border-radius:0;font-size:16px;font-weight:600;}
  nav.main a.on{border-bottom-color:var(--line);}
  nav.main .dd{position:static;}
  nav.main .dd > a{border-bottom:1px solid var(--line);}
  /* 移动端没有 hover：分类下拉改为常驻展开 */
  nav.main .dd .menu{display:block;position:static;box-shadow:none;border:0;min-width:0;padding:0 0 4px 10px;}
  nav.main .dd .menu a{padding:11px 8px;font-size:14px;border-bottom:1px dashed var(--line);}
  nav.main .dd .menu a:last-child{border-bottom:none;}

  /* ---- 后台：顶栏 + 侧栏抽屉 ---- */
  body.is-admin .adm-topbar{display:flex;}
  body.is-admin aside.adm{
    position:fixed;left:0;top:0;bottom:0;width:252px;height:100vh;z-index:75;
    padding:14px 10px calc(20px + env(safe-area-inset-bottom));
    transform:translateX(-102%);transition:transform .26s cubic-bezier(.4,0,.2,1);
    box-shadow:0 0 44px rgba(0,0,0,.42);
  }
  html.adm-nav-open body.is-admin aside.adm{transform:none;}
  html.adm-nav-open{overflow:hidden;}
  html.adm-nav-open .navmask{opacity:1;visibility:visible;}
  body.is-admin .navmask{z-index:72;}
  body.is-admin aside.adm .admBrand{display:none;}
  body.is-admin main.adm{padding:15px 14px 90px;}
  body.is-admin .ashell{display:block;}

  /* ---- 通用：印记 VISIT 输入区在窄屏纵向堆叠 ---- */
  .page-head{flex-direction:column;align-items:flex-start;gap:9px;}
  .sec-head{flex-direction:column;align-items:flex-start;gap:8px;}
}

/* ============================ ≤640px ============================ */
@media(max-width:640px){
  /* ---- 全局排版 ---- */
  body{font-size:14.5px;}
  h2{font-size:18.5px;}
  section{padding:22px 15px;}
  .kicker{font-size:10px;}
  input,select,textarea,input[type=text],input[type=email],input[type=number]{font-size:16px;} /* 防 iOS 聚焦缩放 */
  .status-pill,.tag,.badge{font-size:11px;}

  /* ---- 前台：单列铺开 ---- */
  .facts,.fact-grid{grid-template-columns:1fr 1fr;gap:10px;}
  .fact{padding:13px 14px;}
  .fact b{font-size:21px;}
  /* ≥420px 的手机仍给双列，提升浏览密度；≤400px 的小屏（iPhone SE）回落到单列 */
  .pcards{grid-template-columns:repeat(2,1fr);gap:12px;}
  .cats{grid-template-columns:1fr 1fr;}
  .news-grid,.dl-grid{grid-template-columns:1fr;}
  .co{gap:18px;}
  .partners{gap:8px;}
  .plogo{padding:8px 13px;font-size:11.5px;}
  .hero{height:auto;min-height:290px;}
  .slide{padding:26px 18px 44px;}
  .slide h1{font-size:23px;line-height:1.26;margin-bottom:10px;}
  .slide p{font-size:13.5px;margin-bottom:16px;}
  .slide .k{font-size:10px;margin-bottom:9px;}
  .dots{bottom:14px;left:18px;}
  .hero-badges{top:12px;right:14px;left:14px;justify-content:flex-start;max-width:none;}
  .hero-badges span{font-size:10px;padding:3px 9px;}
  .d-hero{padding:16px 15px 0;gap:16px;}
  .media-main{height:200px;}
  .media-main .pcb{width:118px;height:86px;}
  .thumbs{overflow-x:auto;padding-bottom:4px;}
  .thumbs .th{flex:0 0 auto;}
  .dtitle{font-size:19px;}
  .quick{grid-template-columns:1fr 1fr;gap:8px;}
  .dsec{padding:20px 15px;}
  .cta-row .btn{flex:1;min-height:44px;}
  .spec-t th{width:auto;min-width:118px;}
  .spec-t th,.spec-t td{padding:7px 10px;font-size:12.5px;}
  .post-hero{height:184px;padding:15px 15px;}
  .post-hero h1{font-size:18px;}
  .post-lead{font-size:13.5px;}
  .post-gallery{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;}
  .post-shot img{height:112px;}
  .post-li .th{min-height:112px;}
  .footer{flex-direction:column;padding:22px 16px calc(90px + env(safe-area-inset-bottom));}
  .logo{cursor:pointer;}
  #imgViewer{padding:14px;}

  /* ---- 前台：头部精简 + 底部行动条 ---- */
  #fQuoteBtn{display:none;}
  .topact{gap:9px;}
  .basket-pill .bl{display:none;}
  .langpill{padding:6px 10px;font-size:12.5px;}
  .mbar{display:flex;}
  .wa-float{display:none;}
  /* v1.7：不再设固定底部行动条，无需预留底部空间 */
  body.is-front{padding-bottom:0;}
  #toast{bottom:calc(84px + env(safe-area-inset-bottom));max-width:92vw;}

  /* ---- 后台：栅格全面单列 ---- */
  .grid2,.grid3,.grid4,.fact-grid,.lead-wrap,.dl-grid,.news-grid,.catrow,.cfg-row{grid-template-columns:1fr;}
  main.adm{padding:14px 13px 96px;}
  h1.a{font-size:18px;}
  .page-head{gap:6px;}
  .back-link{margin-bottom:9px;}
  .hbar{flex-wrap:wrap;gap:6px;}
  .hbar .lb{width:100%;}
  .hbar .tr{flex:1 1 auto;}
  .hbar .vv{width:auto;}
  .row-toggle{flex-wrap:wrap;gap:8px;}
  /* 宽表在手机端横向滚动，避免撑破视口 */
  main.adm table{min-width:520px;}
  main.adm .card,main.adm .tbl-card{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .payload{font-size:10.5px;}
  /* 未保存更改栏：手机全宽换行 */
  #dirtyBar{left:0;right:0;transform:none;border-radius:12px 12px 0 0;white-space:normal;flex-wrap:wrap;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));font-size:12.5px;justify-content:center;gap:10px;}
  #dirtyBar .btn{min-height:38px;}
  .modal{width:94%;padding:18px 18px;}
  .login-shell{padding:14px;align-items:flex-start;}
  .login-card{max-width:none;margin-top:6vh;padding:22px 18px 18px;}
  .login-title{font-size:20px;}
}

/* ============================ ≤400px ============================ */
@media(max-width:400px){
  /* v1.10.15：8*2 + 38(汉堡) + 2 = 56 */
  :root{--hd-pady:8px;--hd-logo:30px;--hd-brand:16px;--hd-h:56px;}
  .navtoggle{width:38px;height:38px;}
  header.top{padding:var(--hd-pady) 11px;gap:var(--hd-gap);}
  .logo .brandtext{font-size:var(--hd-brand);}
  .facts,.fact-grid{grid-template-columns:1fr;}
  .cats{grid-template-columns:1fr;}
  .pcards{grid-template-columns:1fr;}
  .quick{grid-template-columns:1fr;}
  section{padding:18px 12px;}
  h2{font-size:17.5px;}
  .slide h1{font-size:20.5px;}
  .dtitle{font-size:18px;}
  .mbar .mbar-wa{flex:0 0 44%;}
  .mbar button{font-size:13px;min-height:46px;}
  main.adm{padding:12px 11px 96px;}
  body.is-admin main.adm table{min-width:480px;}
}

/* ==================== 设备特性兜底 ==================== */
/* 支持刘海屏安全区的前台浮动元素 */
@supports(padding:max(0px)){
  .mbar{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));}
  .wa-float{bottom:calc(20px + env(safe-area-inset-bottom));}
}
/* 触屏设备：去掉 hover 位移，避免「点一下卡住的悬停态」
   ⚠ 必须限定 min-width:901px —— ≤900px 时抽屉内的下拉依赖常驻展开，
   若被本条规则覆盖会导致移动端分类菜单消失（此处曾踩坑，勿删 I 宽度限制） */
@media(hover:none) and (min-width:901px){
  .cat:hover,.pcard:hover,.catrow:hover,.news-card:hover{transform:none;box-shadow:none;}
  nav.main .dd:hover .menu{display:none;}
}
/* 打印：只保留内容，隐去导航与浮动层 */
@media print{
  .navtoggle,.mbar,.wa-float,.navmask,#toast,.langwrap,header.top{display:none !important;}
  body.is-front .fwrap{border:0;}
}