/*!
 * 07-responsive.css
 * 響應式斷點 — 已驗證 320–1920px 共 16 種寬度
 *
 * 崇成工廠官網 — 由已驗證的原型拆分而來，勿隨意改動色值與斷點：
 * 全站文字對比達 WCAG AA 4.5:1，320–1920px 無水平溢出。
 */

/* ============ responsive ============ */
@media (max-width:1280px){
  .hdr-in{gap:12px}
  .nav a,.nav button.navlink{padding:10px 9px;font-size:11.5px;letter-spacing:.06em}
  .brand-txt span{display:none}
}
@media (max-width:1140px){
  .nav{display:none}
  .burger{display:block}
  /* the spec plate stops overlapping the illustration once the column narrows */
  .plate{position:static;margin-top:16px;max-width:none;width:100%}
  .hero-art{gap:4px}
  .hero-art svg{width:min(78%,330px)}
}
@media (max-width:1080px){
  .pgrid{grid-template-columns:repeat(3,1fr)}
  .marks-in{grid-template-columns:repeat(3,1fr)}
  .mega-in{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .hero{background:linear-gradient(176deg,var(--olive-light) 0%,var(--hero-mid2) 16%,var(--hero-mid) 34%,var(--hero-dark) 100%)}
  .hero-grid,.about-grid,.res-grid,.contact-grid{grid-template-columns:1fr}
  .hero-art{order:-1;min-height:0;margin-bottom:6px}
  .hero-art svg{width:min(62%,290px)}
  .apps,.cap-grid{grid-template-columns:1fr 1fr}
  .ft-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .brand-txt strong{font-size:13px}
  .brand-mark{height:38px}
  .inq-btn{padding:9px 11px}
}
@media (max-width:640px){
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .marks-in{grid-template-columns:repeat(2,1fr)}
  .apps,.cap-grid,.ft-grid{grid-template-columns:1fr}
  form .frow{grid-template-columns:1fr}
  .hdr-in{height:64px}
  .band{clip-path:none}
  .card-actions{flex-direction:column}
}
@media (max-width:540px){
  .hero-art svg{width:min(58%,215px)}
  .plate{font-size:11px;padding:12px 14px}
  .brand-txt{display:none}
  .inq-label{display:none}
  .lang button{padding:8px 8px;font-size:11px}
  .inq-btn{padding:9px 12px}
  .brand-mark{height:36px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}