/* =========================================================
   响应式适配（移动端 / 平板）
   - 仅作用于 max-width 断点内，桌面端（>1279px）完全不受影响
   - 详情页规则用 .artshow 前缀提升特异性，覆盖 css/gb-detail.css 同级规则
   ========================================================= */

/* 1) 解除固定最小宽度：所有小于桌面的视口不再被 1280px 撑出横向滚动
     注意：.nav / .banner / .banner_inner / .footer 各自带 min-width:1280px，
     不是 .width 类，必须单独重置，否则头部/脚部在移动端仍会横向溢出 */
@media (max-width: 1279px) {
  .width,
  .nav,
  .banner,
  .banner_inner,
  .footer { min-width: 0; }

  /* 导航：允许换行 + 收敛内边距，避免平板宽度下仍横向溢出 */
  .nav ul { flex-wrap: wrap; }
  .nav ul li { border-left: 0 !important; border-right: 0 !important; }
  .nav ul li a { padding: 0 14px; font-size: 15px; line-height: 46px; }
}

/* 2) 手机竖屏：侧栏与正文上下堆叠 + 详情页留白/字号收敛 + 头脚堆叠 */
@media (max-width: 768px) {
  /* ---- 头部：栅格改为纵向堆叠（logo 在上、联系电话居中在下） ---- */
  .header.width.ui-row { flex-direction: column; }
  .header .ui-col-8,
  .header .ui-col-4 { width: 100%; flex: none; }
  .header .ui-col-4 { justify-content: center; margin-top: 8px; }

  /* ---- 导航：进一步收敛 ---- */
  .nav ul { justify-content: center; }
  .nav ul li a { padding: 0 12px; font-size: 14px; line-height: 44px; }

  /* ---- Banner（文章页标题区）：取消固定高度与大左内边距，标题字号收敛 ---- */
  .banner_inner .width { height: auto; padding: 28px 16px 0; }
  .banner_inner .title { font-size: 24px; padding-top: 0; }
  .banner_inner .title span { font-size: 14px; margin-left: 10px; padding-left: 10px; }
  .banner_inner .intro { font-size: 14px; margin-top: 8px; }
  .banner_inner .position { position: static; margin-top: 14px; }

  /* ---- 正文布局：取消固定侧栏，改为纵向堆叠（避免覆盖 cms.css 桌面 flex 算法） ---- */
  .container .width {
    flex-direction: column;
    margin: 15px auto;
    padding: 0 10px;
  }
  .container-left {
    width: 100%;
    margin-right: 0;
    margin-bottom: 18px;
  }
  /* 全局图片自适应，杜绝溢出 */
  img { max-width: 100%; height: auto; }

  /* 标准信息表：table-cell 改为块级，标签在上、内容在下 */
  .artshow .gb-spec { display: block; }
  .artshow .gb-row { display: block; }
  .artshow .gb-spec dt {
    display: block;
    width: auto;
    white-space: normal;
    padding-bottom: 2px;
  }
  .artshow .gb-spec dd {
    display: block;
    width: auto;
    padding-top: 0;
  }

  /* 留白与字号收敛，避免移动端过挤 */
  .artshow .gb-head { padding: 20px 16px 18px; }
  .artshow .gb-headline { font-size: 20px; }
  .artshow .gb-meta,
  .artshow .gb-intro,
  .artshow .gb-beizhu,
  .artshow .gb-faq,
  .artshow .gb-gallery,
  .artshow .gb-wordtip { padding: 16px; margin: 0 0 14px; }
  .artshow .gb-buy-bd { padding: 18px 16px 20px; }
  .artshow .gb-buy-btn { padding: 12px 24px; font-size: 16px; }
  .artshow .gb-buy-note { font-size: 13px; }

  /* ---- 脚部：栏目块改为两列网格，最后一块（热线/二维码）整行居中 ---- */
  .footer .width.ui-row { flex-wrap: wrap; }
  .footer_item {
    width: 50% !important;
    padding-left: 0;
    border-left: 0;
    margin-bottom: 18px;
  }
  .footer_item.footer_last {
    width: 100% !important;
    text-align: center;
  }
  .footer_item.footer_last img { margin: 0 auto; }
}