/* =====================================================================
 * 橙谷自助建站平台 · 全站响应式规则
 * ---------------------------------------------------------------------
 * 引入顺序：style.css → banner.css（仅首页）→ responsive.css（本文件，最后覆盖）
 * 断点规划：
 *   >=1200 桌面完整  | <=1200 小桌面收间距（导航字号恒定 16px）
 *   <=1080 首屏/详情/页脚收敛 | <=1024 平板横屏降列
 *   <=960  折叠导航（平板竖屏 + 手机，核心断点）
 *   <=768  主布局单栏 | <=680 手机 | <=400 窄屏
 * 覆盖：首页、栏目/详情/展示页、13 个会员功能页、页脚、表格与表单。
 * ===================================================================== */

/* ---------- 小桌面：只收间距，不改字号 ---------- */
@media(max-width:1200px){
  .top .wrap{gap:20px}
  .nav{gap:16px}
  .footer-grid{gap:26px}
}

/* ---------- 首屏 / 详情 / 页脚 ---------- */
@media(max-width:1080px){
  .hero-in{min-height:280px}
  .detail-layout{grid-template-columns:1fr 290px}
  .cate-layout{grid-template-columns:190px 1fr}
  .footer-grid{grid-template-columns:1.6fr 1fr 1fr;gap:26px}
  .footer-col:last-child{grid-column:2 / -1}
}

/* ---------- 平板横屏：栅格降列 ---------- */
@media(max-width:1024px){
  .grid-4,.stat-grid,.flow,.feature-grid{grid-template-columns:repeat(2,1fr)}
  .grid-3,.tpl-grid,.rel-grid{grid-template-columns:repeat(2,1fr)}
  .form-row-3{grid-template-columns:repeat(2,1fr)}
  .cta-band{padding:30px}
  .pv-frame{height:440px}
  .preview-frame{height:470px}
}

/* ---------- 折叠导航（<=960px）：顶栏保持浅色，横向导航收进汉堡菜单 ---------- */
@media(max-width:960px){
  .utility{display:none}
  .top{background:#fff;border-bottom-color:var(--line)}
  .top .wrap{height:58px;gap:12px}
  .logo img{height:29px}
  .nav{display:none}

  .nav-toggle{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
    gap:6px;margin-left:auto;width:44px;height:38px;padding:0;cursor:pointer;
    background:#fff;border:1px solid #d7dce5;border-radius:8px;
    -webkit-tap-highlight-color:transparent}
  .nav-toggle:hover{border-color:var(--brand)}
  .nav-toggle i{display:block;width:19px;height:2px;border-radius:2px;background:#334155;transition:.2s}
  .nav-toggle.is-open i:first-child{transform:translateY(4px) rotate(45deg)}
  .nav-toggle.is-open i:last-child{transform:translateY(-4px) rotate(-45deg)}
  .nav-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

  .mobile-menu{display:block;position:absolute;left:0;right:0;top:100%;z-index:60;
    background:#fff;border-top:1px solid var(--line);
    box-shadow:0 18px 36px rgba(15,23,42,.13);
    max-height:0;overflow:hidden;transition:max-height .26s ease}
  .mobile-menu.is-open{max-height:min(78vh,640px);overflow-y:auto}
  .mobile-menu-in{padding:8px 20px 18px}
  .mobile-menu a{display:block;font-size:16px;color:#334155;padding:11px 4px;
    border-bottom:1px solid #f1f5f9;white-space:nowrap}
  .mobile-menu a:hover,.mobile-menu a.active{color:var(--brand);font-weight:700}
  .mobile-menu hr{border:0;border-top:1px solid #e7e9ee;margin:8px 0}
  .mobile-menu .mobile-hi{display:block;font-size:13px;color:var(--muted);padding:6px 4px}
  .mobile-menu .mobile-cta{margin-top:16px;padding:11px 18px;border-bottom:0;
    text-align:center;color:#fff;font-weight:700}
  .mobile-menu .mobile-cta:hover{color:#fff;background:var(--brand-dark)}

  .cate-side,.detail-side{position:static}
  .cate-layout{grid-template-columns:180px 1fr;gap:16px}
}

/* ---------- 平板竖屏 / 大手机：主布局单栏 ---------- */
@media(max-width:768px){
  .detail-layout{grid-template-columns:1fr}
  .cate-layout{grid-template-columns:1fr}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr}
  .prose{padding:24px}
  .pv-frame{height:380px}
  .preview-frame{height:400px}
  .hero h1{font-size:34px}
}

/* ---------- 手机 ---------- */
@media(max-width:680px){
  .wrap,.narrow{padding:0 16px}
  .grid-2,.grid-3,.grid-4,.stat-grid,.form-row,.form-row-3,.radio-cards,
  .feature-grid,.flow,.tpl-grid,.rel-grid,.contact-grid,.cate-layout{grid-template-columns:1fr}
  .top .wrap{height:56px}
  .logo img{height:27px}
  .sec{margin:22px auto}
  .sec-h{gap:10px}
  .sec-title h2{font-size:24px}

  /* 首屏：数字背景压暗，保证左侧文案可读 */
  .hero{padding:40px 0 46px}
  .hero-in{min-height:auto}
  .hero h1{font-size:28px}
  .hero-actions .btn{width:100%}
  .hero-tags span{font-size:11px}
  .hero-fx-mask{background:linear-gradient(90deg,
    rgba(15,23,42,.90) 0%,rgba(15,23,42,.78) 55%,rgba(15,23,42,.62) 100%)}

  /* 筛选栏与内联表单：覆盖页面里的内联固定宽度，改为整行 */
  .market-bar{padding:12px;flex-direction:column;align-items:stretch}
  .market-bar .inline,.sec-h .inline{width:100%}
  .market-bar .inline input,.market-bar .inline select,.market-bar select,
  .sec-h .inline input,.sec-h .inline select,
  .inline input[type=text],.inline select{
    width:100%!important;min-width:0!important;max-width:100%!important}
  .market-bar .sp,.inline .sp{display:none}
  .market-bar .inline .btn,.sec-h .inline .btn{width:100%}
  .chips{gap:6px}
  .chip{padding:6px 12px;font-size:12px}
  .tpl-visual{height:170px}

  .cate-list{display:flex;flex-wrap:wrap;gap:6px}
  .cate-list li{margin:0}
  .cate-list button{width:auto;padding:6px 12px;border:1px solid var(--line);border-radius:999px}
  .tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .tabs button{white-space:nowrap;padding:9px 12px}
  .detail-head h1{font-size:24px}
  .pv-frame{height:320px}
  .preview-frame{height:340px}
  .cta-band{padding:26px 22px}
  .prose{padding:20px}

  .footer-grid{grid-template-columns:1fr 1fr;gap:20px}
  .footer-brand{grid-column:1 / -1}
  .footer-col:last-child{grid-column:auto}
  .footer-bottom{flex-direction:column;gap:4px}

  /* iOS Safari：输入框字号 <16px 会自动放大页面 */
  input[type=text],input[type=password],input[type=email],input[type=number],input[type=tel],
  select,textarea{font-size:16px}
  .btn{min-height:40px}
  .table-wrap table{min-width:520px}
  th,td{padding:9px 10px}
  .cy-toast-wrap{top:12px;right:12px;left:12px}
  .cy-toast{max-width:none}

  /* 后台沿用既有收敛，不改动后台结构 */
  .admin-side{width:150px}.admin-main{padding:14px}
}

@media(max-width:400px){
  .footer-grid{grid-template-columns:1fr}
  .tpl-grid{grid-template-columns:1fr}
  .btn-lg{padding:11px 18px;font-size:14px}
  .hero-tags span{font-size:10px;padding:5px 10px}
}

/* ---------- 动效降级：折叠菜单仍可用，只是不做过渡 ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
}