/* ==========================================================================
   responsive.css — 响应式适配层（1023 / 767 / 479 三档断点）
   依赖 base.css 与 components.css，须在其后加载
   ========================================================================== */

/* --------------------------------------------------------------------------
   平板及以下：≤1023px
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  /* 导航：隐藏横向菜单，显示汉堡按钮 */
  .header__nav {
    display: none;
  }

  .btn-hamburger {
    display: flex;
  }

  /* 栅格降列 */
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

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

  /* 页脚改为单列 */
  .footer__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* Hero 标题降级 */
  .hero__title {
    font-size: 36px;
  }

  /* 产品详情改单列 */
  .pdetail {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .pdetail__gallery {
    position: static;
  }

  /* 统计 / 特性降列 */
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

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

  /* 区块间距略收 */
  .section {
    padding: 56px 0;
  }
}

/* --------------------------------------------------------------------------
   手机：≤767px
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* 栅格全部单列 */
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  /* Hero 移动端降级 */
  .hero {
    height: 72vh;
    min-height: 420px;
  }

  .hero__arrow {
    display: none; /* 移动端隐藏箭头，用圆点切换 */
  }

  .hero__title {
    font-size: 28px;
  }

  .hero__subtitle {
    font-size: 16px;
    margin-top: 12px;
  }

  .hero__cta {
    margin-top: 24px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    max-width: 320px;
  }

  .hero__cta .btn {
    width: 100%;
  }

  .hero__content {
    padding: 0 24px;
  }

  .hero__eyebrow {
    font-size: 12px;
    padding: 5px 12px;
    margin-bottom: 14px;
  }

  /* 表单栅格单列 */
  .form__row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* 统计保持 2 列 */
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .stat {
    padding: 18px 12px;
  }

  /* 特性单列 */
  .features {
    grid-template-columns: 1fr;
  }

  /* 页头收紧 */
  .page-head {
    padding: 40px 0;
  }

  .page-head__title {
    font-size: 26px;
  }

  /* 容器窄边距 */
  .container {
    padding: 0 16px;
  }

  /* 区块间距继续收紧 */
  .section {
    padding: 44px 0;
  }

  .section__head {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 24px;
  }

  .section__title {
    font-size: 22px;
  }

  /* 分页按钮保证 44px 可点区域 */
  .pagination {
    gap: 6px;
  }

  .pagination__item {
    min-width: 44px;
    min-height: 44px;
  }

  /* 抽屉相关保持（移动端专属） */
  .drawer {
    width: 80%;
    max-width: 320px;
  }

  /* 返回顶部右下角 16px */
  .back-to-top {
    right: 16px;
    bottom: 16px;
  }

  /* 页脚堆叠 */
  .footer__inner {
    padding: 40px 0 32px;
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  /* 表格容器（.table__wrap 自带横向滚动，这里仅保证内边距舒适） */
  .table th,
  .table td {
    padding: 10px 12px;
  }

  /* 产品详情 */
  .pdetail__info h1 {
    font-size: 24px;
  }

  /* 时间轴缩进微调 */
  .timeline {
    padding-left: 22px;
  }

  .timeline__item {
    padding-left: 10px;
  }

  .timeline__item::before {
    left: -28px;
  }
}

/* --------------------------------------------------------------------------
   小屏手机：≤479px
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  .hero__title {
    font-size: 24px;
  }

  .stat__num {
    font-size: 30px;
  }

  .header__logo-text {
    font-size: 16px;
  }

  .header__logo-text small {
    font-size: 10px;
  }

  .section__more {
    min-height: 44px;
  }

  .tabs {
    gap: 8px;
  }

  .tab {
    flex: 1 1 auto;
    text-align: center;
    padding: 10px 14px;
  }

  .pdetail__thumb {
    width: 64px;
    height: 64px;
  }
}

/* --------------------------------------------------------------------------
   触控目标兜底：确保所有交互元素在移动端 ≥ 44×44px
   以下规则仅在指针精度较差的触屏设备上生效，桌面端不受影响
   -------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  a,
  button,
  .tab,
  .accordion__head,
  .nav__link,
  .lang-switch__btn {
    min-height: 44px;
  }

  .btn {
    min-height: 44px;
  }

  .btn--sm {
    min-height: 44px;
  }

  .pagination__item {
    min-width: 44px;
    min-height: 44px;
  }

  .drawer__item {
    min-height: 48px;
  }
}

/* 产品中心：左侧目录树在平板/手机端堆叠到顶部 */
@media (max-width: 1023px) {
  .pcat { grid-template-columns: 1fr; }
  .tree { position: static; }
}