/* ============================================================
   layout.css — 响应式布局 & 断点
   ============================================================ */

/* --- 两栏布局（产品列表页：侧栏 + 内容）--- */
.layout-2col {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--sp-8);
  align-items: start;
}

/* ============================================================
   响应式断点
   sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1440
   ============================================================ */

/* --- Tablet & below (≤ 1024) --- */
@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid--4 { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
  .spec-highlights { grid-template-columns: repeat(2, 1fr); }
  .hero__title { font-size: var(--fs-32); }
  .layout-2col { grid-template-columns: 200px 1fr; gap: var(--sp-5); }
}

/* --- Tablet portrait / critical (≤ 768) --- */
@media (max-width: 768px) {
  :root { --container-px: var(--sp-4); }

  .site-header { height: var(--header-height-mobile); }
  .main-nav { display: none; }
  .menu-toggle { display: inline-flex; }

  /* 移动端抽屉导航 */
  .main-nav.is-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: fixed; top: var(--header-height-mobile); left: 0; right: 0;
    background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-md); padding: var(--sp-4); z-index: var(--z-header);
    max-height: calc(100vh - var(--header-height-mobile)); overflow-y: auto;
  }
  .main-nav.is-open .main-nav__item { width: 100%; }
  .main-nav.is-open .main-nav__link { width: 100%; height: 44px; }
  .main-nav.is-open .dropdown__menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding-left: var(--sp-4); min-width: 0; }

  .layout-2col { grid-template-columns: 1fr; }
  .sidebar { position: static; }

  .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .product-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .product-grid--2 { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .footer-bottom { flex-direction: column; gap: var(--sp-2); text-align: center; }

  .hero { padding: var(--sp-12) 0; }
  .hero__title { font-size: var(--fs-28); }
  .hero__sub { font-size: var(--fs-14); }
  .hero__stat { gap: var(--sp-5); }
  .hero__stat-num { font-size: var(--fs-24); }

  .section { padding: var(--sp-10) 0; }
  .section-title { font-size: var(--fs-24); }

  .spec-highlights { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }

  .about-grid { grid-template-columns: 1fr; }
  .partner-grid { grid-template-columns: repeat(2, 1fr); }

  .inquiry-float { right: var(--sp-3); bottom: var(--sp-3); }
  .inquiry-float__btn { width: 44px; height: 44px; }

  .feature-block__head { flex-direction: column; align-items: flex-start; }
}

/* --- Phone (≤ 640) --- */
@media (max-width: 640px) {
  .product-grid { grid-template-columns: 1fr; }
  .product-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .spec-highlights { grid-template-columns: repeat(2, 1fr); }
  .hero__stat { flex-direction: column; gap: var(--sp-4); }
  .hero__actions .btn { flex: 1; }
  .partner-grid { grid-template-columns: repeat(2, 1fr); }
  .about-stats { grid-template-columns: 1fr; }
  .news-item { flex-direction: column; }
  .news-item__date { width: 100%; flex-direction: row; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
  .error-page__code { font-size: 80px; }
}

/* --- 超宽屏 (≥ 1440) --- */
@media (min-width: 1440px) {
  :root { --container-max: 1360px; }
  .hero__title { font-size: var(--fs-48); }
}

/* ============================================================
   触控目标尺寸（无障碍：最小 44×44）
   ============================================================ */
@media (pointer: coarse) {
  .main-nav__link, .tab, .pagination__btn, .icon-btn { min-height: 44px; }
  .input, .textarea, .select { min-height: 44px; }
}
