/* ===========================================================
 * 产品详情页 - 移动端适配补丁（统一修复 banner / section 字号与溢出）
 * 加载顺序：必须在 bpo_styles.css 之后，确保覆盖
 * =========================================================== */

/* 768px 及以下 */
@media (max-width: 768px) {
  /* ---- 通用：禁止横向滚动 ---- */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  /* 让所有图片和媒体自动适配宽度，防止溢出 */
  img, video, iframe, embed, object {
    max-width: 100% !important;
    height: auto;
  }
  /* 防止固定宽度元素溢出 */
  pre, code, table {
    max-width: 100% !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* ---- swiper banner ---- */
  .banner_img {
    width: 100%;
    height: auto !important;
    min-height: 280px !important;
  }
  .bannerswiper .swiper-slide {
    margin-top: 0 !important;
  }

  /* ---- banner 文字（覆盖 styles.css 的 40px） ---- */
  .banner_desc {
    padding: 0 16px !important;
    width: 100% !important;
    left: 0;
    right: 0;
  }
  .banner_desc h1 {
    font-size: 22px !important;
    line-height: 30px !important;
    width: 100% !important;
    letter-spacing: 1px !important;
    margin: 0 !important;
  }
  .banner_desc p {
    font-size: 13px !important;
    line-height: 20px !important;
    margin-top: 8px !important;
    letter-spacing: 0 !important;
    width: 100% !important;
  }
  .banner_desc div {
    font-size: 14px !important;
    line-height: 22px !important;
  }
  .bannerConc {
    margin-top: 10px !important;
  }
  .bannerConc p {
    font-size: 12px !important;
    line-height: 18px !important;
    padding: 4px 8px !important;
    margin: 4px 6px 0 0 !important;
  }
  .banner_desc .doubleButton {
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 14px !important;
  }
  .banner_desc .doubleButton .bannerButton,
  .banner_desc .doubleButton .predictButton {
    width: 100% !important;
    height: 44px !important;
    margin: 0 !important;
    font-size: 14px;
  }
  .banner_desc .doubleButton .bannerButton > span,
  .banner_desc .doubleButton .predictButton > span {
    font-size: 14px !important;
  }

  /* ---- bpo-style section 通用 ---- */
  .section-1 .top {
    flex-direction: column !important;
    width: 100% !important;
    padding: 20px 16px !important;
    margin-top: 0 !important;
  }
  .section-1 .text {
    margin-top: 20px !important;
    width: 100%;
    align-items: flex-start !important;
  }
  .section-1 .img {
    padding: 20px 0 !important;
    width: 100%;
  }
  .section-1 .img img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  /* 覆盖 banner h1/h2/h3 字号（同时清掉模板内联 style="font-size:40px"） */
  .section-1 h1 {
    font-size: 24px !important;
    line-height: 32px !important;
  }
  .section-1 h2 {
    font-size: 16px !important;
    line-height: 24px !important;
  }
  .section-1 h3 {
    font-size: 14px !important;
  }

  /* ---- section 标题 ---- */
  .section-title-row,
  .section-title-row-4,
  .section-5-title {
    font-size: 22px !important;
    margin: 24px 0 !important;
    padding: 0 16px;
  }

  /* ---- features-grid：已经是单列，这里再压缩间距 ---- */
  .features-grid {
    max-width: 100% !important;
    gap: 10px !important;
  }
  .feature-text {
    font-size: 13px !important;
  }

  /* ---- pain-points-grid 单列 ---- */
  .pain-points-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .pain-point-card {
    max-width: 100% !important;
    aspect-ratio: auto !important;
    min-height: 220px;
  }
  .card-content {
    padding: 20px 16px !important;
  }
  .section-2 .card-title,
  .section-2 .card-description {
    font-size: 14px !important;
    line-height: 22px !important;
  }

  /* ---- section-3 reasons 单列 ---- */
  .reasons-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    margin-top: 30px !important;
  }
  .reason-card {
    padding: 20px !important;
  }
  .reason-title {
    font-size: 16px !important;
    margin-bottom: 12px !important;
  }
  .reason-points li {
    font-size: 13px !important;
    margin-bottom: 8px !important;
    padding-left: 22px !important;
  }

  /* ---- section-5 客户案例单列 ---- */
  .section-5-success {
    flex-direction: column !important;
    gap: 16px !important;
    padding: 20px 16px !important;
  }
  .section-5-success-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ---- brands 客户logo网格 ---- */
  .brands-grid {
    gap: 10px !important;
  }

  /* ---- 修复已知溢出元素 ---- */
  /* bpo 合作伙伴网格：7列 + 98vw 在小屏必溢出，改为3列 */
  .partners-grid {
    width: 100% !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    padding: 0 16px !important;
  }
  /* 去掉桌面端的奇数行位移 */
  .partners-grid .partner-item:nth-child(n+8):nth-child(-n+14),
  .partners-grid .partner-item:nth-child(n+22):nth-child(-n+24) {
    transform: none !important;
  }
  /* bpo 容器宽度 */
  .section-5-container,
  .section-5 {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* banner 区域容器锁宽 */
  .bannerswiper,
  .banner,
  .swiper-container {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* 通用修复：所有可能溢出的子元素 */
  section, .container, .con1400, .row {
    max-width: 100% !important;
    box-sizing: border-box;
  }
  /* 让 .con1400 不再限制宽度（因为 con1400 是 1400px 固定） */
  .con1400 {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ---- 通用 padding ---- */
  .section-2-container,
  .section-3-container,
  .section-5-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ---- 模板内联字体兜底：直接强制所有 section 内的 h1/h2/h3 字号 ---- */
  .section-1 h1[style*="font-size"],
  .section-1 h2[style*="font-size"] {
    font-size: 22px !important;
  }

  /* ===========================================================
   * section-9 服务质量保障（仅 detail_product_bpo.html 使用）
   * =========================================================== */
  .section-9 {
    margin: 20px 0;
    padding: 0 16px;
    width: 100%;
    box-sizing: border-box;
  }
  /* 标题 */
  .section-title-row-6 {
    font-size: 22px !important;
    margin-bottom: 24px !important;
    padding: 0;
  }
  /* tab 按钮容器：换成 wrap + 居中 */
  .section-9-container {
    flex-wrap: wrap !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
  }
  .section-9-container ul {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px;
  }
  .section-9-container .trial-button {
    min-width: 90px !important;
    height: 36px !important;
    padding: 6px 16px !important;
    margin-right: 0 !important;
    font-size: 13px !important;
  }
  /* 内容容器：竖排 */
  .section-9 .content {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    padding: 0 !important;
  }
  /* 制定方案 article：3列改单列 */
  .section-9 .content article {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 24px 18px !important;
    box-sizing: border-box;
    /* 修复 bpo_9.css 中 768px 媒体查询用了错误的相对路径导致背景 SVG 404，
       这里覆盖为实际的背景图片地址 + 兜底深色渐变 */
    background-image: url('/assets/addons/ldcms/ldcms2024/images/background.svg'),
                      linear-gradient(135deg, #1e88e5 0%, #1565c0 50%, #0d47a1 100%) !important;
    background-size: 100% 100%, 100% 100% !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center, center !important;
    overflow: visible !important;
  }
  .section-9 .content article h2 {
    font-size: 18px !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    text-align: center !important;
    color: #ffffff !important;
  }
  /* 3列卡片：竖排 */
  .article {
    flex-direction: column !important;
    padding: 0 !important;
    margin-top: 8px !important;
    justify-content: flex-start !important;
    color: #ffffff !important;
  }
  .column {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px 0 !important;
    margin-bottom: 14px !important;
    box-sizing: border-box;
    /* 不要给 .column 加背景，避免覆盖 article 的背景图 */
    background: transparent !important;
    color: #ffffff !important;
  }
  .column h3 {
    font-size: 16px !important;
    margin-bottom: 8px !important;
    font-weight: 600;
    color: #ffffff !important;
  }
  .column h3 img {
    width: 22px !important;
    height: 22px !important;
    margin-right: 6px !important;
  }
  .column ul {
    margin-top: 6px !important;
    padding-left: 0 !important;
    color: #ffffff !important;
  }
  .column ul li {
    font-size: 13px !important;
    line-height: 22px !important;
    margin: 4px 0 !important;
    color: #ffffff !important;
    word-break: break-word;
  }
  /* li 内 strong（· 符号）统一宽度，避免错位 */
  .column ul li strong {
    display: inline-block;
    width: 16px;
    color: #ffd231 !important; /* 与卡片标题同色，呼应 */
  }
  /* a-2 / a-3 图片：限制宽度 */
  .a-2,
  .a-3 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 12px 0 !important;
  }
  /* aside 校企合作资源 */
  .section-9 .content aside {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 16px;
    padding: 16px !important;
    box-sizing: border-box;
    /* 不再加白色背景，避免在深色 article 背景上看不清文字 */
    background: transparent !important;
    color: #ffffff !important;
  }
  .section-9 .content aside h3 {
    font-size: 16px !important;
    margin-bottom: 12px !important;
    text-align: center;
    color: #ffffff !important;
  }
  .section-9 .content aside ul {
    font-size: 13px !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px 12px;
    padding-left: 0;
    color: #ffffff !important;
  }
  .section-9 .content aside ul li {
    margin-bottom: 0 !important;
    line-height: 22px;
    color: #ffffff !important;
  }
}

/* 480px 及以下（更窄屏） */
@media (max-width: 480px) {
  .banner_img {
    min-height: 240px !important;
  }
  .banner_desc h1 {
    font-size: 18px !important;
    line-height: 26px !important;
  }
  .banner_desc p {
    font-size: 12px !important;
  }
  .section-title-row,
  .section-title-row-4,
  .section-5-title {
    font-size: 18px !important;
  }
  .section-1 h1 {
    font-size: 20px !important;
  }
  .pain-point-card {
    min-height: 180px;
  }
  .section-1 .top {
    padding: 16px 12px !important;
  }
}