/* ================================================================
   移动端显示优化 · mobile-display.css
   目的：减少容器嵌套、让内容接近满屏、修边界溢出
   作用范围：≤767px（手机），不影响桌面端
   生成：2026-10-29
   ================================================================ */

@media screen and (max-width: 767px) {

  /* ---------- 1. 全局防溢出 ---------- */
  html {
    overflow-x: hidden !important;
  }
  body {
    max-width: 100% !important;
  }
  img, svg, video, iframe, embed, object {
    max-width: 100% !important;
    height: auto;
  }
  table { max-width: 100% !important; }
  pre, code { white-space: pre-wrap !important; word-break: break-word; }

  /* ---------- 2. 收窄容器留白，去掉负边距造成的溢出 ---------- */
  .container,
  .container-fluid,
  .page-wrapper > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* 手机端单列，列自身的左右 padding 没有意义，去掉后再加一档收益 */
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .row > [class*="col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ---------- 3. 拆掉嵌套的卡片容器（核心：内容满屏） ---------- */
  .page .blog-section,
  .single .blog-section,
  .archive .blog-section,
  .search .blog-section {
    background-color: #fff !important;
    padding-top: 12px !important;
  }
  .blog-details {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-bottom: 12px !important;
  }
  .details-content,
  .details-content.mb-40 {
    margin-bottom: 0 !important;
    padding: 0 !important;
  }
  .theme-sidebar {
    padding: 0 !important;
  }
  .theme-sidebar .widget {
    padding: 12px !important;
    margin-bottom: 12px !important;
  }

  /* ---------- 4. 面包屑：允许换行，不再被截断 ---------- */
  .single-breadcrumbs {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    padding: 8px 0 !important;
    margin-bottom: 10px !important;
    line-height: 1.5;
    border-bottom: 1px solid #eee;
  }

  /* ---------- 5. 正文排版：满宽、可读 ---------- */
  .blog-details .details-content h1 {
    font-size: 20px !important;
    line-height: 1.4 !important;
    padding-top: 6px !important;
  }
  .blog-details .details-content h2 { font-size: 18px !important; }
  .blog-details .details-content h3 { font-size: 16px !important; }
  .blog-details .details-content p {
    font-size: 15px !important;
    line-height: 1.85 !important;
    margin-bottom: 16px !important;
    text-align: left !important;
  }
  .details-content ol,
  .details-content ul {
    margin: 12px 0 !important;
    padding: 12px 12px 12px 1.6em !important;
    font-size: 14.5px !important;
    border-radius: 6px;
  }
  .details-content ol li,
  .details-content ul li {
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
    line-height: 1.7 !important;
  }
  .details-content img { width: auto !important; max-width: 100% !important; }

  /* ---------- 6. 询价表单：单列、不溢出边界 ---------- */
  .jw-inquiry-form {
    max-width: 100% !important;
    width: auto !important;
    margin: 12px 0 !important;
    padding: 14px !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
  }
  .jw-inquiry-form form.jw-form,
  .jw-form {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .jw-form > div {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .jw-form input,
  .jw-form select,
  .jw-form textarea,
  .jw-form button {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
  }
  /* 全站表单控件同样防溢出（16px 避免 iOS 聚焦自动放大） */
  .form-control,
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="search"],
  select,
  textarea {
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }
  .form-group { margin-bottom: 12px !important; }
  .form-row { margin-left: 0 !important; margin-right: 0 !important; }

  /* ---------- 7. 分页：可换行、不再被裁切 ---------- */
  .page-link-item { text-align: center; }
  .page-link-item ul,
  .page-link-item ul li {
    padding-left: 0 !important;
    margin-right: 0 !important;
  }
  .page-link-item ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
  }
  .page-link-item ul li {
    display: inline-block !important;
    margin: 0 !important;
  }
  .page-link-item ul li a,
  .page-link-item ul li span {
    width: 34px !important;
    height: 34px !important;
    line-height: 32px !important;
    font-size: 14px !important;
    border-radius: 4px !important;
  }

  /* ---------- 8. 幻灯片箭头：收小，别糊在图上 ---------- */
  .control-round .carousel-control {
    width: 30px !important;
    height: 30px !important;
    font-size: 16px !important;
    line-height: 28px !important;
    padding: 0 !important;
    background: rgba(0, 0, 0, .28) !important;
    opacity: 1 !important;
    top: 44% !important;
  }
  .control-round .carousel-control.left { left: 4px !important; }
  .control-round .carousel-control.right { right: 4px !important; }
  .bs-slider { max-height: 240px !important; }

  /* ---------- 9. 底部导航：补回缺失图标 + 留出安全区 ---------- */
  /* 首页(1) 与 关于(5) 的图标资源 404，用 FontAwesome 字型补位 */
  #mobile_btn nav > .flexbox:nth-of-type(1) img,
  #mobile_btn nav > .flexbox:nth-of-type(5) img {
    display: none !important;
  }
  #mobile_btn nav > .flexbox:nth-of-type(1) a::before,
  #mobile_btn nav > .flexbox:nth-of-type(5) a::before {
    font-family: FontAwesome !important;
    font-size: 19px !important;
    line-height: 20px !important;
    margin-top: 7px !important;
    color: #fff !important;
    display: block;
  }
  #mobile_btn nav > .flexbox:nth-of-type(1) a::before { content: "\f015"; }
  #mobile_btn nav > .flexbox:nth-of-type(5) a::before { content: "\f007"; }
  #mobile_btn nav span { font-size: 11px !important; padding-bottom: 4px !important; }
  #mobile_btn nav img { width: 19px !important; height: 19px !important; }

  /* ---------- 10. 头部：压缩高度，少占屏 ---------- */
  .top-bar { padding: 4px 0 !important; }
  .top-bar .contact-info span,
  .top-bar .contact-info a { font-size: 12px !important; }
  .header { margin-bottom: 0 !important; }
  .logo img, .navbar-brand img { max-height: 42px !important; width: auto !important; }

  /* ---------- 11. 区块标题与卡片：收紧内外边距 ---------- */
  .section-title { margin-bottom: 18px !important; }
  .section-title h2 { font-size: 20px !important; line-height: 1.4 !important; }
  .service-item, .choose-item { padding: 16px !important; margin-bottom: 12px !important; }
  .jw-cta-bar { padding: 16px 12px !important; }
  .jw-cta-text h3 { font-size: 17px !important; }
  .footer-item { padding-left: 0 !important; padding-right: 0 !important; }
  .footer-copy-right { padding: 12px 0 !important; }
}

/* ---------- 12. 小屏加固（≤420px） ---------- */
@media screen and (max-width: 420px) {
  .container { padding-left: 10px !important; padding-right: 10px !important; }
  .row { margin-left: 0 !important; margin-right: 0 !important; }
  .row > [class*="col-"] { padding-left: 0 !important; padding-right: 0 !important; }
  .page-link-item ul li a,
  .page-link-item ul li span { width: 30px !important; height: 30px !important; line-height: 28px !important; font-size: 13px !important; }
  .blog-details .details-content h1 { font-size: 18px !important; }
}

/* ---------- 13. 第二轮：压掉 section 与 container 的叠加留白 ---------- */
/* 内容页外层是 <section class="blog-section sidebar">，
   .sidebar 的 20px padding 会套在 .container 的 12px 外面，
   两层叠加导致 390px 屏幕正文只剩 330px。这里把外层归零。 */
@media screen and (max-width: 767px) {
  section.blog-section.sidebar {
    padding-left: 0 !important;
    padding-right: 0 !important;
    background-color: #fff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  section.blog-section {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  section.blog-section > .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* 头部两层容器（15px + 10px）叠到 25px，统一收成一档 */
  .header .container,
  .top-bar .container,
  .main-header .container,
  .footer .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* 正文里内联的询价卡片，内边距也收一档 */
  .details-content .jw-inquiry-form {
    padding: 12px !important;
    margin: 14px 0 !important;
  }
  .details-content .jw-inquiry-form h3 { font-size: 17px !important; }
}