/* ==========================================================================
   mobile.css — 移动端视觉规范层（max-width: 768px）
   加载于 main.css / mobile-nav.css 之后，用统一的设计令牌覆盖零散补丁：
   - 间距阶梯：区块 40px、卡片 16px、栅格 12/16px、页边距 16px
   - 按钮规范：高 40px、padding 0 20px、字号 14/13px，不再硕大
   - 字号阶梯：大标题 22、区块标题 20、正文 14、辅助 12
   ========================================================================== */

@media screen and (max-width: 768px) {
  :root {
    --m-section-y: 40px;   /* 区块上下留白 */
    --m-gutter: 10px;      /* 页面左右安全边距：全站统一 10px */
    --m-card: 16px;        /* 卡片内边距 */
    --m-gap: 12px;         /* 栅格/列表间距 */
    --m-gap-lg: 20px;      /* 大间距 */
    --btn-h: 40px;         /* 按钮标准高度 */
    --fs-h1: 22px;
    --fs-h2: 20px;
    --fs-body: 14px;
    --fs-small: 12px;
  }

  /* ---------- 1. 全局间距：统一页边距与区块节奏 ---------- */
  .warp,
  .main-layout,
  .product-detail-layout {
    width: calc(100% - var(--m-gutter) * 2) !important;
    max-width: none;
  }
  main.page section,
  .index-home section {
    padding-left: var(--m-gutter);
    padding-right: var(--m-gutter);
  }
  /* 全屏板块保持通栏（背景铺满，内容靠内部容器留边距） */
  main.page section.about-sec,
  .index-home section.about-sec,
  main.page section.mosaic-sec,
  .index-home section.mosaic-sec,
  main.page section.proc-sec,
  .index-home section.proc-sec {
    padding-left: 0;
    padding-right: 0;
  }
  .mosaic-sec .wrapper { padding: 0 var(--m-gutter); }
  /* 卡片列表密度：栅格间距统一 12px，卡片内边距统一 16px */
  .product-grid,
  .news-list,
  .related-grid,
  .dept-grid,
  .product-meta-cards,
  .stats-keywords-images {
    gap: var(--m-gap) !important;
  }
  [class*="grid-cols-"] {
    gap: var(--m-gap) !important;
  }
  .news-card .news-body,
  .related-body,
  .product-info,
  .dept-card,
  .article-nav-item {
    padding: var(--m-card) !important;
  }

  /* ---------- 2. 按钮规范：40px 高、紧凑 padding、统一字号 ---------- */
  .btn,
  .cta-btn,
  .product-detail-cta-btn,
  .product-detail-secondary-btn,
  .product-hero-actions a,
  .conv-submit,
  .inquiry-trigger,
  .simon-btn,
  .sidebar-cta-btn,
  .product-inquiry,
  .mn-cta-btn,
  .about-sec .btn,
  .proc-sec .more {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 0;
    height: var(--btn-h) !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 0 20px !important;
    font-size: var(--fs-body) !important;
    font-weight: 600;
    letter-spacing: 0 !important;
    border-radius: 999px;
  }
  /* 整排按钮（CTA 区、产品详情操作区）：纵向堆叠时间距统一，不再贴死 */
  .cta-btns,
  .product-hero-actions {
    gap: var(--m-gap) !important;
    align-items: stretch;
  }
  .product-inquiry {
    height: 32px !important;
    padding: 0 14px !important;
    font-size: var(--fs-small) !important;
  }
  /* 小标签/chip：统一小号 */
  .conv-chip,
  .keyword-tag,
  .article-tag,
  .step-time {
    min-height: 0;
    padding: 6px 14px !important;
    font-size: var(--fs-small) !important;
  }
  /* 图标型圆钮（分享/关闭/FAQ 展开）：32px */
  .share-btn,
  .faq-toggle,
  .inquiry-modal-close {
    width: 32px !important;
    height: 32px !important;
    min-height: 0 !important;
  }
  .inquiry-modal-close {
    top: 12px;
    right: 12px;
  }

  /* ---------- 3. 字号阶梯：收敛 vw 大字，统一阅读节奏 ---------- */
  .article-title { font-size: var(--fs-h1) !important; }
  .product-header h2,
  .news-header h2,
  .related-title { font-size: var(--fs-h2) !important; }
  .article-body,
  .product-content-body,
  .news-desc,
  .product-desc,
  .origin-left p,
  .industries-intro,
  .dna-intro {
    font-size: var(--fs-body) !important;
    line-height: 1.8 !important;
  }
  .news-meta,
  .related-date,
  .article-meta,
  .stat-label,
  .dept-contact {
    font-size: var(--fs-small) !important;
  }
  /* 统计大数不再夸张 */
  .stat-number { font-size: 30px !important; }
  .about-sec .boxes h4 { font-size: 22px !important; }
  /* 首页数据条标签允许换行，避免被裁切 */
  .about-sec .boxes p { white-space: normal !important; font-size: 11px; line-height: 1.4; }
  .about-sec .boxes li > div { flex: 1; min-width: 0; }
  /* 纵排 flex 容器里的按钮不拉伸 */
  .proc-sec .more, .about-sec .btn { align-self: flex-start; }

  /* ---------- 4. 内容防堆砌：留白节奏统一、长文限宽、图片不顶格 ---------- */
  .article-header { padding: var(--m-card) !important; }
  .article-body { padding: var(--m-card) !important; }
  .article-body p { margin-bottom: var(--m-gap-lg) !important; }
  .article-quote { margin: var(--m-gap-lg) 0 !important; padding: var(--m-card) !important; font-size: var(--fs-body) !important; }
  .article-footer { padding: var(--m-card) !important; gap: var(--m-gap) !important; }
  .article-nav { gap: var(--m-gap) !important; margin-top: var(--m-gap-lg) !important; }
  .related-news { margin-top: var(--m-gap-lg) !important; }
  .product-detail-cta { margin-top: var(--m-gap-lg) !important; }
  .cta-section { padding: var(--m-section-y) var(--m-gutter) !important; }
  .cta-text { font-size: var(--fs-h2) !important; }
  /* FAQ 间距 */
  .faq-q { padding: var(--m-card) 0 !important; }
  .faq-answer { padding-bottom: var(--m-gap-lg) !important; font-size: var(--fs-body) !important; }
  /* 联系页对话表单节奏 */
  .conv-step { margin-bottom: var(--m-gap-lg) !important; padding-left: 40px !important; }
  .conv-step-question { font-size: var(--fs-body) !important; }
  .conv-input, .conv-textarea { font-size: var(--fs-body) !important; }
  .conv-submit { padding: 0 24px !important; }

  /* ---------- 5. 分页：统一尺寸与间距 ---------- */
  .pages,
  .pagination {
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px !important;
    margin: var(--m-gap-lg) 0 !important;
  }
  .pages a, .pages span,
  .pagination a, .pagination span {
    min-width: 0 !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    font-size: var(--fs-small) !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  .pages .prev, .pages .next,
  .pagination .prev, .pagination .next {
    width: auto !important;
    padding: 0 14px !important;
  }

  /* ---------- 6. 页脚与底部固定栏留白 ---------- */
  footer { padding-bottom: calc(64px + var(--m-gutter)) !important; gap: var(--m-gap-lg) !important; }
  footer .logo { margin-top: 0 !important; }

  /* ---------- 7. 首页定向调整 ---------- */
  /* banner 计数器/进度条：放回图内左下角 */
  .simon-footer {
    position: absolute;
    bottom: 10px;
    left: 12px;
    right: auto;
    padding: 0;
    color: #fff;
    gap: 10px;
  }
  .simon-footer .simon-counter { color: rgba(255,255,255,0.9); font-size: 11px; }
  .simon-footer .simon-current { color: #fff; }
  .simon-footer .simon-separator, .simon-footer .simon-total { color: rgba(255,255,255,0.5); }
  .simon-footer .simon-progress { background: rgba(255,255,255,0.25); flex: 0 0 72px; max-width: 72px; height: 2px; }
  .simon-footer .simon-progress-fill { background: #fff; }

  /* 产品系列跑马灯：卡片收窄 */
  .marquee-inner { gap: 10px !important; }
  .marquee-inner a.img { width: 48vw !important; }
  .marquee-inner a.img h2 { font-size: 13px; top: 12px;padding:10px; }


  .about-sec .play-btn img { display: none; }
  .about-sec .play-btn::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-35%, -50%);
    border-left: 10px solid var(--color-primary);
    border-top: 5px solid transparent;
    border-bottom: 7px solid transparent;
  }

  /* ---------- 8. 列表页侧栏 CTA 降调：单行横条，不抢产品风头 ---------- */
  .sidebar-cta {
    align-items: center;
    gap: 10px;
    text-align: left !important;
    padding: 12px 14px !important;
    margin-top: 10px !important;
    border-radius: 10px;
    display: none;
  }
  .sidebar-cta h4 { font-size: 13px !important; margin: 0 !important; white-space: nowrap; }
  .sidebar-cta p { display: none; }
  .sidebar-cta-btn {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    margin-left: auto;
    flex-shrink: 0;
    border-radius: 999px;
  }
}