/* ==========================================================================
   responsive.css —— 全部断点集中在此
   改响应式只看这一个文件：1240 / 1120 / 1040 / 860 / 760 / 520
   ========================================================================== */

/* 顶部空间不足：公司名改用简称 */
@media (max-width:1240px){
  .brand-full{display:none}
  .brand-short{display:inline}
}

/* 隐藏英文副名，给 tab 让位（tab 字号与内距由 clamp() 连续缩放） */
@media (max-width:1120px){
  .brand-text i{display:none}
}

/* 内容栅格降列 */
@media (max-width:1040px){
  .promise-grid,.feature-grid,.steps{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr}
  .store-list,.honour-list{grid-template-columns:1fr}
  .series-grid{grid-template-columns:repeat(2,1fr)}
  .series-card.tall{grid-row:auto;grid-column:span 2}
  .series-card.tall img{aspect-ratio:16/9}
  .craft-grid,.contact-grid{grid-template-columns:1fr}
}

@media (max-width:860px){
  .news-list li{grid-template-columns:1fr;gap:.5rem}
}

/* 导航降级为汉堡 + 抽屉 */
@media (max-width:760px){
  body{font-size:16px}
  /* 窄屏改用纵向淡入：左右位移在窄视口下会造成瞬态横向溢出 */
  [data-reveal="left"],[data-reveal="right"]{transform:translateY(20px)}
  .nav{display:none}
  .brand-text b{font-size:1.15rem}
  .menu-toggle{display:block}
  .mobile-nav:not([hidden]){display:grid}
  .carousel{height:min(74vh,560px);min-height:440px}
  .slide-body{padding-block:3.4rem 4.4rem}
  .car-arrow{width:36px;height:36px;font-size:1.25rem}
  .car-prev{left:.5rem}
  .car-next{right:.5rem}
  .hero-stats{gap:1rem 1.8rem;justify-content:flex-start}
  .promise-grid,.feature-grid,.steps,.series-grid,.row{grid-template-columns:1fr}
  .series-card.tall{grid-column:auto}
  .series-card.tall img{aspect-ratio:4/3}
  .scene-strip{flex-direction:column;align-items:flex-start;gap:.9rem}
  .panel-nav{flex-direction:column;align-items:stretch}
  .panel-nav a.is-next{margin-left:0;text-align:left}
  .foot-grid{grid-template-columns:1fr;gap:1.8rem}
  .channels li span{width:100%}
  .to-top{right:.9rem;bottom:.9rem}
}

@media (max-width:520px){
  .shell{width:calc(100% - 2rem)}
  .slide-body{max-width:calc(100% - 2rem)}
  .hero-actions .btn{flex:1 1 100%}
  .toast{font-size:.84rem}
}
