/* ============================================================
   移动端（≤640px）体验优化层
   - 加载顺序位于所有主题样式之后（见 views/partials/head.ejs）
   - 只修正移动端布局：桌面端样式完全不受影响
   - 需要覆盖主题里的 body:has(...) 规则，因此统一带 body 前缀提高优先级
   ============================================================ */

@media (max-width: 640px) {
  /* ---------- 1. 顶部导航：搜索框独立成行，避免挤压与文字被裁切 ---------- */
  body .site-header .container,
  body:has(main.page-home-ai) .site-header .container {
    height: auto;
    min-height: 60px;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* 让搜索框与语言开关成为同一行的两个独立格子，才能把搜索挤到第二行 */
  body .site-header .header-right {
    display: contents;
  }

  body .site-header .logo {
    order: 1;
    gap: 8px;
    font-size: 17px;
    min-width: 0;
    padding: 5px 0;
  }

  body .site-header .logo__mark,
  body .site-header .logo__img {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    font-size: 16px;
  }

  body .site-header .lang-switch {
    order: 2;
    margin-left: auto;
    padding: 9px 10px;
    font-size: 12.5px;
  }

  body .site-header .nav-toggle {
    order: 2;
    width: 40px;
    height: 40px;
  }

  body .site-header .nav-toggle span {
    top: 19px;
  }

  body .site-header .header-search,
  body .site-header .header-search:focus-within,
  body:has(main.page-home-ai) .site-header .header-search,
  body:has(main.page-home-ai) .site-header .header-search:focus-within {
    order: 3;
    flex: 1 0 100%;
    width: 100%;
    margin: 0;
  }

  /* 首页主题单独把搜索框限宽到 104px，这里显式还原为整行宽度 */
  body .site-header .header-search input,
  body .site-header .header-search input:focus,
  body:has(main.page-home-ai) .site-header .header-search input,
  body:has(main.page-home-ai) .site-header .header-search input:focus {
    width: 100%;
    height: 40px;
    padding: 9px 46px 9px 15px;
    font-size: 14px;
  }

  body .site-header .header-search button {
    right: 4px;
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  /* 菜单面板跟随头部实际高度，不再写死 60px */
  body .site-header .main-nav {
    position: absolute;
    top: 100%;
  }

  body .site-header .main-nav ul {
    padding: 12px 16px 20px;
  }

  /* 右下角社交按钮：点按面积补足到 44px */
  body .social-float {
    right: 14px;
    bottom: 14px;
  }

  body .social-float__item {
    width: 44px;
    height: 44px;
  }

  /* 面包屑：加大点按高度 */
  body .breadcrumb a,
  body .breadcrumb span {
    display: inline-block;
    padding: 6px 0;
  }

  /* ---------- 2. 下载卡片：图标 + 文字两列，按钮独占整行 ---------- */
  body .download-list {
    gap: 12px;
  }

  body .download-item {
    padding: 18px 16px;
    gap: 12px 14px;
    align-items: start;
  }

  body .download-item:has(.download-item__icon) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
  }

  body .download-item:has(.download-item__icon) .download-item__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 22px;
  }

  /* 没有图标的条目（如产品详情的技术参数行）恢复为整块宽度 */
  body .download-item:not(:has(.download-item__icon)) {
    display: block;
  }

  body .download-item .btn {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 2px;
  }

  /* 关键修复：信息区不再有 220px 最小宽度，避免溢出到按钮下方 */
  body .download-item__info {
    min-width: 0;
  }

  body .download-item__info h4 {
    font-size: 16px;
  }

  body .download-item__info p {
    margin-top: 4px;
    font-size: 13.5px;
    line-height: 1.65;
  }

  body .download-item__meta {
    gap: 6px;
    margin-top: 10px;
  }

  body .download-item__meta span {
    padding: 4px 10px;
    font-size: 12px;
    max-width: 100%;
  }

  /* 技术参数行：移动端标签与取值上下排列 */
  body .download-item__info--spec {
    display: block;
  }

  body .download-item__info--spec span {
    display: block;
    margin-top: 6px;
  }

  /* ---------- 3. 资质卡片：压缩过高的预览区 ---------- */
  body .cert-wall {
    gap: 14px;
  }

  body .cert-tile__media {
    aspect-ratio: auto;
    height: 152px;
    padding: 14px;
  }

  body .cert-tile__icon,
  body .cert-tile__pdf {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    font-size: 13px;
  }

  /* ---------- 4. 页脚：链接两列排布，点按区域更舒适 ---------- */
  body .site-footer {
    padding-top: 44px;
  }

  body .footer-grid {
    gap: 26px;
    padding-bottom: 30px;
  }

  body .footer-col h4 {
    margin-bottom: 10px;
  }

  /* 联系方式列保持单列，避免地址/电话被拆成两栏 */
  body .footer-col:not(.footer-contact) ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
  }

  body .footer-col:not(.footer-contact) li {
    margin-bottom: 0;
  }

  body .footer-col:not(.footer-contact) a {
    display: block;
    padding: 9px 0;
    font-size: 14.5px;
  }

  /* ---------- 5. 卡片内的文字型链接：扩大点按高度 ---------- */
  body .news-card__more {
    display: inline-block;
    padding: 9px 0;
  }
}

/* ============================================================
   手机横屏 / 平板（641–1149px）：页头折叠补丁
   ------------------------------------------------------------
   问题：站点原有移动端导航只在 ≤640px 生效，而桌面版要 ≥1150px 才放得下
   （实测 1150px 起导航才是单行）。中间这段区间里
   「Logo + 7 个导航项 + 搜索框 + 中/EN」被 flex 压到只剩一两字宽，
   中文就被挤成竖排单字（手机横屏最明显），667px 还会整页横向溢出。
   theme-ai.css 里只有首页在 641–992 打了补丁，内页没有、993–1149 也没有，
   这里统一收口；选择器带 body 前缀，必要时用 :has(main.page-home-ai) 覆盖主题。
   ============================================================ */
@media (min-width: 641px) and (max-width: 1149px) {
  /* ---------- 1. 品牌与搜索框：不再被压缩成竖排 ---------- */
  body .site-header .logo {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
  }

  body .site-header .logo span {
    white-space: nowrap;
  }

  body .site-header .header-search input,
  body .site-header .header-search input:focus {
    width: 150px;
  }

  /* ---------- 2. 汉堡按钮显示，导航改为抽屉（与 ≤640 的规则一致） ---------- */
  body .site-header .nav-toggle {
    display: block;
    flex: none;
  }

  body .site-header .main-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition);
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
  }

  body .site-header .main-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  body .site-header .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 14px 20px 20px;
  }

  body .site-header .main-nav a {
    padding: 12px 16px;
    white-space: nowrap;
  }

  /* ---------- 3. 首页主题：沿用 theme-ai.css 平板补丁的样式，
                     并把它的适用范围从 992px 延伸到 1149px ---------- */
  body:has(main.page-home-ai) .site-header .container {
    height: 64px;
  }

  body:has(main.page-home-ai) .site-header .header-search,
  body:has(main.page-home-ai) .site-header .header-search:focus-within {
    display: none;
  }

  body:has(main.page-home-ai) .site-header .main-nav {
    top: 64px;
    padding: 12px 0 20px;
    background: var(--ai-bg-alt);
    border-bottom: 1px solid var(--ai-line);
    box-shadow: var(--ai-shadow);
  }

  body:has(main.page-home-ai) .site-header .main-nav ul {
    padding: 0 20px;
  }

  body:has(main.page-home-ai) .site-header .main-nav a {
    border-radius: 10px;
  }

  body:has(main.page-home-ai) .site-header .main-nav a.is-active {
    background: rgba(43, 94, 233, 0.1);
    color: var(--ai-heading);
  }
}