/* SiteForge 生成 —— 响应式与打印补充（组件内部已有各自断点，这里只处理全局规则） */

@media (min-width:1600px){
  :root{--container-max:1320px}
}

/* 平板（触摸设备同样要够大的点击目标） */
@media (max-width:1024px){
  .sf-grid--4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sf-section{padding:var(--space-12) 0}
  /* 触摸目标：手机上手指点击面积要够。主控件（按钮/提交）按苹果与谷歌的建议值 44px 做；
     低于 WCAG 2.5.8 的 24px 是硬伤，44px 是「好用」的线。
     为什么放在 1024 而不是 640：平板也是手指点的（实测 768px 下页脚订阅按钮 41px 被闸门报出来）。 */
  button,.sf-btn,input[type=submit],input[type=button],[role=button]{min-height:44px}
  /* 抽屉菜单是手机上最主要的点击目标 */
  .sf-navbar__mobile a,.sf-navbar__list a,.sf-navbar__sub-toggle{min-height:44px}
  /* iOS 聚焦字号 <16px 的输入框时会把整页放大（页面看着「自己变大了」），
     所以触摸端的输入控件字号不得低于 16px —— 这条只能靠 CSS，JS 拦不住。 */
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px}
}

/* 手机横屏 / 小平板 */
@media (max-width:900px){
  .sf-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sf-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sf-float-wa span{display:none}
}

/* 手机 */
@media (max-width:640px){
  body{font-size:15.5px}
  .sf-container{padding:0 var(--space-3)}
  .sf-grid{gap:var(--space-4)}
  .sf-grid--2,.sf-grid--3,.sf-grid--4{grid-template-columns:1fr}
  .sf-section{padding:var(--space-8) 0}
  .sf-section__head{margin-bottom:var(--space-6)}
  h1{font-size:clamp(1.75rem,7vw,2.4rem)}
  h2{font-size:clamp(1.4rem,5.6vw,1.9rem)}
  .sf-backtop{right:12px;bottom:12px}
  .sf-float-wa{right:12px;bottom:66px;padding:12px}
  .sf-float-wa span{display:none}
}

@media (max-width:380px){
  .sf-grid--auto{grid-template-columns:1fr}
}

/* 打印：只留正文 */
@media print{
  .sf-navbar,.sf-footer,.sf-float-wa,.sf-backtop,.sf-toast,.sf-cta,.sf-breadcrumb{display:none !important}
  body{background:#fff;color:#000}
  a[href]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
  .sf-section{padding:8px 0;page-break-inside:avoid}
}

/* 高对比度 / 深色模式偏好下保持可读 */
@media (prefers-color-scheme:dark){
  .sf-card{background:var(--background-color)}
}