/* ============================================================
   newmob.css
   说明：仅对 5 个产品页 <!--contents--> ~ <!--//contents--> 区域做响应式改造。
   桌面端样式来自 medical-device-hydrophilic-coatingsl.css / _all.css / _mob.css（不改动）。
   本文件所有规则均写在媒体查询内，桌面端布局保持不变；因加载顺序在最后，窄屏下自动覆盖。
   断点：<=1024px（平板/小笔记本）、<=768px（手机/竖屏平板）、<=480px（小手机）
   ============================================================ */

/* ============ 大平板 / 笔记本 / 小笔记本 (<=1366px) ============
   说明：原断点为 1024px，但桌面 CSS 里 .hero .container 用了固定 width:1370px、
   coating 页独有的 .facing__footer 用了固定 width:1320px（均为固定 width，非 max-width），
   在 1025–1369px（笔记本/未最大化窗口）区间会横向溢出。设计稿宽 1370px，
   故把首档断点提高到 1366px，让笔记本宽度也进入响应式；≤1024/手机布局不受影响。 */
@media (max-width: 1366px) {

  /* Hero：取消固定 1370px 宽度，避免横向溢出；改为流式左右并排 */
  .hero .container {
    width: 100%;
    height: auto;
  }
  .hero__wrapper {
    position: static;
    width: 55%;
  }
  .hero__image {
    position: static;
    flex: 1;
    width: auto;
    height: auto;
  }
  .hero__image img {
    width: 100%;
    height: auto;
    padding-right: 0;
  }

  /* 安全网：contents 区内所有大宽度容器在笔记本宽度下不超过视口，杜绝横向溢出
     （这些元素桌面端多为固定 width 或较大 max-width，统一收口为 100%） */
  .hero .container,
  .statistics .container,
  .statistics__grid,
  .facing__footer,
  .ClosedLoop .container,
  .morethan .container,
  .whymedical_grid,
  .Successfully .container,
  .jmc2-contact .container,
  .jmc2-contact-detail img,
  .ClosedLoop_img {
    max-width: 100%;
  }

  /* 收窄各区块左右内边距，避免内容贴边或过宽 */
  .hero .container,
  .challenge .container,
  .ClosedLoop .container,
  .morethan .container,
  .Successfully .container,
  .whymedical_grid,
  .Advanced__grid,
  .performance__grid,
  .jmc-adv-grid,
  .jmc-wrapper .container,
  .jmc-cases,
  .jmc-case-grid,
  .jmc2-steps,
  .jmc2-advantages,
  .jmc2-contact .container,
  .PTFELiner .container,
  .PTFELinerSpecifications .container,
  .casestudy_grid,
  .aboutjMedtech .container,
  .whyheat .container,
  .whyheat_grid,
  .facing__grid,
  .statistics .container {
    padding-left: 30px;
    padding-right: 30px;
  }

  /* 三列网格在平板上降为两列 */
  .challenge__grid,
  .facing__grid,
  .whymedical_grid,
  .performance__grid,
  .jmc-adv-grid,
  .jmcgridlistsulli {
    grid-template-columns: repeat(2, 1fr);
  }

  .facing__footer { width: auto; max-width: 100%; padding: 20px 50px; }
  .PTFELiner_footer_ad { padding: 0 50px; }

  /* ===== 新增：heparin 页 Advantages 4 列卡片在平板降为 2 列 ===== */
  .jmc-adv-grid2.on { grid-template-columns: repeat(2, 1fr); }

  /* ===== 新增：大图防御，防止原图宽于容器导致横向溢出（步骤条 / 工厂图 / 联系图） ===== */
  .jmc2-steps img,
  .Factorylistbox .item .img img,
  .jmc2-contact-detail img { max-width: 100%; height: auto; }

  /* ===== 新增：中等屏加固，避免固定大图撑破布局 ===== */
  /* coating：ClosedLoop 固定 500px 图缩小，并允许文字收缩 */
  .ClosedLoop_img,
  .ClosedLoop_item:nth-child(even) .ClosedLoop_img { width: 360px; height: 360px; overflow: hidden;}
  .ClosedLoop_text { min-width: 0; }
  /* ptfe：PTFELiner 文字允许收缩，避免与 400px 图并排时溢出 */
  .PTFELiner__textbox { min-width: 0; }
}

/* ============ 手机 / 竖屏平板 (<=768px) ============ */
@media (max-width: 768px) {

  /* 容器内边距继续收窄 */
  .hero .container,
  .challenge .container,
  .ClosedLoop .container,
  .morethan .container,
  .Successfully .container,
  .Advanced__grid,
  .performance__grid,
  .jmc-adv-grid,
  .jmc-wrapper .container,
  .jmc-cases,
  .jmc-case-grid,
  .jmc2-steps,
  .jmc2-advantages,
  .jmc2-contact .container,
  .PTFELiner .container,
  .PTFELinerSpecifications .container,
  .casestudy_grid,
  .aboutjMedtech .container,
  .whyheat .container,
  .whyheat_grid,
  .facing__grid,
  .statistics .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* 区块超大纵向留白收敛 */
  .ClosedLoop .container { padding-top: 50px; padding-bottom: 50px; }
  .PTFELiner .container { padding-top: 50px; padding-bottom: 30px; }
  .whyheat .container { padding: 40px 20px 60px; }
  .aboutjMedtech .container { padding: 30px 20px; }
  .jmc-wrapper .container,
  .jmc-cases { padding: 50px 20px; }
  .jmc2-contact { padding: 50px 20px; }
  .jmc2-steps { padding: 0 20px; }
  .PTFELinerSpecifications { padding: 80px 0 60px; }
  .Successfully .container { padding: 50px 20px; }

  /* ===== Hero 横幅：图文由绝对定位并排改为上下堆叠、流式宽度 ===== */
  .hero .container {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .hero__wrapper { width: 100%; }
  .hero__image {
    width: 100%;
    margin-top: 20px;
    background-size: 110% 110%;
    background-position: 15px center;
  }
  .hero__small { font-size: 22px; line-height: 28px; }
  .hero__title { font-size: 26px; line-height: 34px; max-width: 100%; }
  .hero__desc { font-size: 15px; line-height: 24px; max-width: 100%; }

  /* 按钮：产品页内按钮在手机上满宽 */
  .hero .btn,
  .ClosedLoop_text .btn,
  .btn--primary.w400,
  .btn--primary.w270 { width: 100%; max-width: 100%; }

  /* ===== Statistics 数据条：4 等分改为 2x2 ===== */
  .statistics__grid { flex-wrap: wrap; padding: 15px 0; }
  .statistics__item {
    flex: 0 0 50%;
    border-right: 0;
    padding: 15px 10px;
  }
  .statistics__item h3 { font-size: 24px; }
  .statistics__item h3 span { font-size: 16px; }

  /* ===== 多列网格统一折叠为单列 ===== */
  .challenge__grid,
  .facing__grid,
  .whymedical_grid,
  .performance__grid,
  .jmc-adv-grid,
  .jmcgridlistsulli,
  .morethan .container,
  .morethan_grid,
  .whyheat_grid,
  .casestudy_grid,
  .Advanced__grid,
  .performance__grid2,
  .jmc2-advantages,
  .jmc2-contact .container,
  .jmc-grid-lists,
  .jmc-list-items,
  .application-areas__ul,
  .application-areasProprietary__ul,
  .application-areas__grid,
  .PTFELinerareas__ul,
  .PTFELinerareas__ul.ulul2,
  .PTFELiner__ul2,
  .PTFELiner__ul3 {
    grid-template-columns: 1fr;
  }

  /* 区块标题字号适配 */
  .titleh2 h2,
  .facing h2,
  .challenge .container h2,
  .morethan .container h2 { font-size: 24px; line-height: 1.4; }
  .aboutjMedtech_desc { padding: 30px 20px; }

  /* ===== PTFELiner：图文并排改为上下堆叠 ===== */
  .PTFELiner .container { flex-direction: column; }
  .PTFELiner_img { text-align: center; }
  .PTFELiner_img img { width: 100%; max-width: 360px; height: auto; padding: 0; }
  .PTFELiner__textbox { flex: none; }
  .PTFELiner__textbox h2,
  .PTFELiner__textbox h3,
  .PTFELiner__textbox p { padding-left: 0; }

  /* ===== ClosedLoop / jmc-case：flex 并排改为纵向堆叠，图片缩放 ===== */
  .ClosedLoop_item,
  .jmc-case-card { flex-direction: column !important; gap: 25px; padding-top: 30px; }
  .ClosedLoop_img,
  .ClosedLoop_item:nth-child(even) .ClosedLoop_img {
    width: 260px; height: 260px; margin: 0 auto;
  }
  .jmc-badge_img {
    width: 100%; max-width: 320px; height: auto; aspect-ratio: 330 / 300; margin: 0 auto;
  }
  .jmc-badge_img::after { width: 100%; height: 100%; }
  .jmc-badge_img img { width: 100%; height: auto; }

  /* ===== 案例区块：取消图片绝对定位，随文本流堆叠 ===== */
  .casestudy_grid_img { position: static; max-width: 100%; margin: 20px auto 0; }

  /* ===== 底部广告条：改为纵向、缩小内边距 ===== */
  .PTFELiner_footer_ad {
    flex-direction: column; gap: 15px; padding: 25px; text-align: center;
  }
  .PTFELiner_footer_text { font-size: 18px; }

  /* ===== 大图通用自适应 ===== */
  .tubingimg img,
  .jmc2-contact-detail img { max-width: 100%; }

  /* ===== 产品页卡片间距收敛 ===== */
  .jmc-adv-grid { gap: 20px; }
  .jmc-advantages.improve .jmc-adv-grid { gap: 30px; padding-top: 40px; }
  .jmc-adv-card { padding: 25px; }

  /* ===== 新增：heparin 页 Advantages 4 列卡片在手机堆叠为单列 ===== */
  .jmc-adv-grid2.on { grid-template-columns: 1fr; }
  .jmc-adv-grid2 .jmc-adv-card { padding: 30px 20px; }

  /* ===== 新增：heparin 页 Coagulation Test（performance__grid2）2 列在手机堆叠为单列 ===== */
  .performance__grid2 { grid-template-columns: 1fr; }

  /* ===== 新增：ptfe 页 Application Areas（tubingul）3 列在手机堆叠为单列 =====
     （注意 .tubingul 特异性高于 .application-areas__ul，须单独覆盖） ===== */
  .application-areas__ul.tubingul { grid-template-columns: 1fr; }

  /* ===== 新增：ptfe 工厂大图在手机自适应 ===== */
  .Factorylistbox .item .img img { max-width: 100%; height: auto; }
  .table-wrapper{padding: 0;overflow-x: auto;}
  .ClosedLoop_img img,.ClosedLoop_img,.ClosedLoop_item:nth-child(even) .ClosedLoop_img,.ClosedLoop_item:nth-child(even) .ClosedLoop_img img{transform: rotate(0);}
  .ClosedLoop_img,.ClosedLoop_img, .ClosedLoop_item:nth-child(even) .ClosedLoop_img{width: 400px;height: 400px;background: url(/assets/images/medical-device-hydrophilic-coatingsl/bj.svg) 15px center;background-size:110% 110%;}
  .ClosedLoop_item:nth-child(even) .ClosedLoop_img{background: url(/assets/images/medical-device-hydrophilic-coatingsl/bjleft.svg) no-repeat -55px center;background-size:110% 110%}
}

/* ============ 小手机 (<=480px) ============ */
@media (max-width: 480px) {

  .statistics__item { flex: 0 0 100%; }

  .hero__small { font-size: 18px; line-height: 24px; }
  .hero__title { font-size: 22px; line-height: 30px; }
  .hero__desc { font-size: 14px; line-height: 22px; }

  .titleh2 h2,
  .facing h2,
  .challenge .container h2,
  .morethan .container h2 { font-size: 20px; }

  .facing__footer { padding: 18px; font-size: 15px; line-height: 26px; }
  .PTFELiner_footer_ad { padding: 18px 15px; }
  .PTFELiner_footer_text { font-size: 16px; }

  /* 内层小网格（参数表式 li）在超小屏也折叠为单列 */
  .PTFELiner__ul2 ul li,
  .PTFELiner__ul3 ul li,
  .PTFELiner__ul3_3 ul li { grid-template-columns: 1fr !important; }

  .jmc-adv-grid { padding: 10px 15px 0; }

  /* ===== 新增：heparin 页 Advantages 切换标签在超小屏堆叠为单列，避免文字溢出圆角框 ===== */
  .jmc-adv-bumbox { grid-template-columns: 1fr; max-width: 100%; }
  .jmc-adv-bum { height: auto; padding: 12px 10px; }
  .performance,.jmc-advantages{padding: 100px 10px;}
  .jmc-adv-grid2{padding: 20px 0 0;}
  .performance__grid2,.jmc2-contact{padding: 50px 0;}
  .Advanced-card__text{padding: 20px;}
  .jmc-grid-lists2{padding: 20px;}
  .jmc2-contact-info h2{padding: 0;}
  .jmc2-contact-info p{padding-left: 0;}
  .WhyjMedtech{padding: 50px 0 10px;}
  .jmc2-advantages{padding:10px 0 0;margin: 50px 0;}
  .application-areas__ul,.application-areasProprietary__ul{padding: 20px;}
  .PTFELiner__textbox h2,.PTFELinerSpecifications h2{font-size: 22px;}
  .jmc2-adv-text h3{font-size: 16px;}
  .jmc2-adv-text p{font-size: 14px;}
  .performance-card__footer,.Advanced-card__text ul li{font-size: 16px;}
  .h2box h2 span:before{right: 0;}
  .Advanced-card__text h3{font-size: 20px;}
  .ClosedLoop_text h3{font-size: 20px;}
  .Successfully_text,.ClosedLoop_text{margin-top: 10px;}
  
}