/* ===== zhangluo.binnikeji.top 覆盖样式 =====
 * 本文件在原扒皮样式（style.css / sreen.css）之后加载，用于修正展示问题并接入主题色变量。
 * 主题变量定义见 templates/theme.html。 */

/* ---------- 1. 新闻列表标题换行不截断（移动端原为 nowrap 单行省略） ---------- */
@media only screen and (max-width: 1023px) {
  .news_list .news_tit {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    height: auto;
    min-height: 0.4rem;
    line-height: 0.4rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .news_list .news_txt {
    height: auto;
    max-height: 1.1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ---------- 2. 产品列表：封面上叠加标题与描述 ---------- */
.product_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.product_list .product_card {
  width: calc((100% - 0.6rem) / 3);
  margin-bottom: 0.5rem;
  border-radius: 0.12rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0.04rem 0.24rem rgba(0, 0, 0, 0.07);
  transition: transform 0.35s, box-shadow 0.35s;
}
.product_list .product_card:hover {
  transform: translateY(-0.08rem);
  box-shadow: 0 0.12rem 0.4rem rgba(0, 0, 0, 0.14);
}
.product_list .product_card > a {
  display: block;
  height: 100%;
}
.product_list .product_pic {
  position: relative;
  width: 100%;
  padding-top: 62%;
  overflow: hidden;
}
.product_list .product_pic img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s;
}
.product_list .product_card:hover .product_pic img {
  transform: scale(1.06);
}
/* 图片上的遮罩 + 文案 */
.product_list .product_mask {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.45rem 0.24rem 0.2rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0));
  color: #fff;
}
.product_list .product_mask h3 {
  font-size: 0.22rem;
  line-height: 0.32rem;
  color: #fff;
  font-weight: bold;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product_list .product_mask p {
  font-size: 0.16rem;
  line-height: 0.26rem;
  color: rgba(255, 255, 255, 0.88);
  margin: 0.08rem 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product_list .product_tag {
  position: absolute;
  left: 0.24rem;
  top: 0.2rem;
  padding: 0.04rem 0.14rem;
  font-size: 0.15rem;
  line-height: 0.26rem;
  color: #fff;
  background: var(--zl-primary, #007a28);
  border-radius: 0.14rem;
}
.product_list .product_foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.16rem 0.24rem 0.2rem;
  font-size: 0.16rem;
  color: #8b8b8b;
}
.product_list .product_more {
  color: var(--zl-primary, #007a28);
}
.product_list .product_more::after {
  content: " →";
}

@media only screen and (max-width: 1023px) {
  .product_list .product_card {
    width: calc((100% - 0.3rem) / 2);
    margin-bottom: 0.3rem;
  }
  .product_list .product_mask {
    padding: 0.3rem 0.2rem 0.16rem;
  }
  .product_list .product_mask h3 {
    font-size: 0.26rem;
    line-height: 0.36rem;
  }
  .product_list .product_mask p {
    font-size: 0.2rem;
    line-height: 0.3rem;
  }
  .product_list .product_tag {
    left: 0.2rem;
    top: 0.16rem;
    font-size: 0.18rem;
  }
  .product_list .product_foot {
    padding: 0.14rem 0.2rem 0.16rem;
    font-size: 0.2rem;
  }
}

/* ---------- 3. 富文本正文排版（关于我们 / 产品详情 的 details 字段） ----------
 * 只用后台 Quill 编辑器能产出、且保存后不会丢的标签：
 *   h1~h4（工具栏 header 1-4）、p、ul/ol/li、strong/b、em/i、u、s、blockquote、
 *   pre/code、a、img、span.ql-align-*（对齐）、span.ql-indent-*（缩进）、span.ql-size-*（字号）
 * 所有颜色走主题变量，切换主题时正文装饰同步变色。
 *
 * 【字号为什么这么标】w_rem.js 把根字号设成「视口宽 / 19.2」（>768px）
 * 或「视口宽 / 10 / 0.75」（<=768px）。实测：
 *     PC  1920px -> root = 100px    PC  1440px -> root = 75px
 *     手机 414px -> root = 55.2px   手机 375px -> root = 50px
 * 所以按「PC 正文 17px、手机正文 16px」目标，PC 段用 0.17rem，
 * 手机段（下方 @media）用 0.29rem。切勿以为 1rem 都是 16px。 */

/* ===== PC / 平板（>1023px）=====
 * 全站是「流式 rem」设计，root 随视口线性放大：1200px->62.5px, 1366->71.1px,
 * 1440->75px, 1600->83.3px, 1920->100px。下面以**最主流的 1440px** 为基准标定，
 * 兼顾 1366 与 1920：
 *     正文 0.22rem -> 1366:15.7px  1440:16.5px  1920:22px
 *     h3   0.26rem -> 1366:18.5px  1440:19.5px  1920:26px
 * 同时用 clamp 兜住下限，窄屏（1024~1280）也不会小于 14px。 */
.rich_editor {
  max-width: 9.6rem;
  margin: 0 auto;
  padding: 0.35rem 0 0.1rem;
  font-size: 0.22rem;
  font-size: clamp(14px, 0.22rem, 21px);
  line-height: 1.95;
  color: #4a4a4a;
  word-break: break-word;
}
.rich_editor > *:first-child { margin-top: 0; }
.rich_editor p:empty { display: none; }

/* 小标题：左侧主题色竖条 + 底部短线 */
.rich_editor h1,
.rich_editor h2,
.rich_editor h3,
.rich_editor h4 {
  position: relative;
  margin: 0.45rem 0 0.16rem;
  padding: 0 0 0.1rem 0.16rem;
  font-weight: bold;
  line-height: 1.5;
  color: #1f1f1f;
  border-bottom: 1px solid #ececec;
}
.rich_editor h1 { font-size: 0.3rem; font-size: clamp(20px, 0.3rem, 29px); }
.rich_editor h2 { font-size: 0.28rem; font-size: clamp(19px, 0.28rem, 27px); }
.rich_editor h3 { font-size: 0.26rem; font-size: clamp(18px, 0.26rem, 25px); }
.rich_editor h4 { font-size: 0.23rem; font-size: clamp(16px, 0.23rem, 22px); }
.rich_editor h1::before,
.rich_editor h2::before,
.rich_editor h3::before,
.rich_editor h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.14em;
  width: 0.055rem;
  height: 0.21rem;
  border-radius: 0.03rem;
  background: var(--zl-primary, #007a28);
}
.rich_editor h1::after,
.rich_editor h2::after,
.rich_editor h3::after,
.rich_editor h4::after {
  content: "";
  position: absolute;
  left: 0.16rem;
  bottom: -1px;
  width: 0.5rem;
  height: 0.03rem;
  border-radius: 0.02rem;
  background: var(--zl-primary, #007a28);
}

/* 段落 */
.rich_editor p { margin: 0.14rem 0; line-height: 1.95; text-align: justify; }

/* 无序列表：主题色圆点 */
.rich_editor ul { list-style: none; margin: 0.14rem 0; padding: 0; }
.rich_editor ul > li {
  position: relative;
  margin: 0.1rem 0;
  padding-left: 0.2rem;
  line-height: 1.9;
}
.rich_editor ul > li::before {
  content: "";
  position: absolute;
  left: 0.03rem;
  top: 0.075rem;
  width: 0.075rem;
  height: 0.075rem;
  border-radius: 50%;
  background: var(--zl-primary, #007a28);
}
.rich_editor ul ul { margin: 0.05rem 0; }
.rich_editor ul ul > li::before {
  background: transparent;
  border: 1px solid var(--zl-primary, #007a28);
}

/* 有序列表：主题色数字徽标 */
.rich_editor ol { list-style: none; counter-reset: zl-ol; margin: 0.14rem 0; padding: 0; }
.rich_editor ol > li {
  position: relative;
  counter-increment: zl-ol;
  margin: 0.1rem 0;
  padding-left: 0.32rem;
  line-height: 1.9;
}
.rich_editor ol > li::before {
  content: counter(zl-ol);
  position: absolute;
  left: 0;
  top: 0.045rem;
  width: 0.21rem;
  height: 0.21rem;
  line-height: 0.21rem;
  text-align: center;
  font-size: 0.62em;
  color: #fff;
  border-radius: 50%;
  background: var(--zl-primary, #007a28);
}

/* 行内强调 */
.rich_editor strong,
.rich_editor b { font-weight: bold; color: #1f1f1f; }
.rich_editor em,
.rich_editor i { font-style: italic; }
.rich_editor u { text-decoration: underline; text-underline-offset: 0.03rem; }
.rich_editor s { color: #9a9a9a; }
.rich_editor a {
  color: var(--zl-primary, #007a28);
  text-decoration: none;
  border-bottom: 1px solid var(--zl-primary-soft, rgba(0, 122, 40, 0.3));
}
.rich_editor a:hover { border-bottom-color: var(--zl-primary, #007a28); }

/* 富文本里 Quill 会产生的字号 / 对齐 / 缩进类 */
.rich_editor .ql-size-small { font-size: 0.85em; }
.rich_editor .ql-size-large { font-size: 1.35em; }
.rich_editor .ql-size-huge { font-size: 1.75em; }
.rich_editor .ql-align-center { text-align: center; }
.rich_editor .ql-align-right { text-align: right; }
.rich_editor .ql-align-justify { text-align: justify; }
.rich_editor .ql-indent-1 { padding-left: 0.25rem; }
.rich_editor .ql-indent-2 { padding-left: 0.5rem; }
.rich_editor .ql-indent-3 { padding-left: 0.75rem; }

/* 引用块 */
.rich_editor blockquote {
  margin: 0.22rem 0;
  padding: 0.16rem 0.22rem;
  border-left: 0.05rem solid var(--zl-primary, #007a28);
  border-radius: 0 0.06rem 0.06rem 0;
  background: var(--zl-primary-tint, #f5f7f6);
  color: #5a5a5a;
}
.rich_editor blockquote p { margin: 0.05rem 0; }

/* 代码块 */
.rich_editor pre {
  margin: 0.2rem 0;
  padding: 0.18rem 0.22rem;
  font-size: 0.9em;
  line-height: 1.75;
  color: #d7dae0;
  background: #23272e;
  border-radius: 0.06rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
.rich_editor code {
  padding: 0.01rem 0.06rem;
  font-size: 0.9em;
  color: var(--zl-primary-dark, #006221);
  background: var(--zl-primary-soft, rgba(0, 122, 40, 0.1));
  border-radius: 0.04rem;
}
.rich_editor pre code { padding: 0; font-size: 1em; color: inherit; background: transparent; }

/* 图片 */
.rich_editor img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.24rem auto;
  border-radius: 0.06rem;
}

/* 表格 */
.rich_editor table {
  width: 100%;
  margin: 0.24rem 0;
  border-collapse: collapse;
  font-size: 0.94em;
}
.rich_editor table th,
.rich_editor table td { padding: 0.12rem 0.16rem; border: 1px solid #e6e6e6; text-align: left; }
.rich_editor table th { color: #1f1f1f; font-weight: bold; background: var(--zl-primary-tint, #f5f7f6); }

/* 水平分割线 */
.rich_editor hr { height: 1px; margin: 0.32rem 0; border: 0; background: #e6e6e6; }

/* ===== 手机（<=1023px）：root 约 50~55px，字号整体放大一档 =====
 * 目标正文 16px：16 / 55.2 ≈ 0.29rem */
@media only screen and (max-width: 1023px) {
  .rich_editor {
    max-width: none;
    padding: 0.26rem 0 0.06rem;
    font-size: 0.29rem;      /* 414px -> 16px */
    line-height: 1.9;
  }
  .rich_editor > *:first-child { margin-top: 0; }
  .rich_editor h1 { font-size: 0.42rem; }
  .rich_editor h2 { font-size: 0.39rem; }
  .rich_editor h3 { font-size: 0.37rem; }
  .rich_editor h4 { font-size: 0.33rem; }
  .rich_editor h1,
  .rich_editor h2,
  .rich_editor h3,
  .rich_editor h4 {
    margin: 0.6rem 0 0.24rem;
    padding: 0 0 0.16rem 0.26rem;
  }
  .rich_editor h1::before,
  .rich_editor h2::before,
  .rich_editor h3::before,
  .rich_editor h4::before { width: 0.08rem; height: 0.34rem; }
  .rich_editor h1::after,
  .rich_editor h2::after,
  .rich_editor h3::after,
  .rich_editor h4::after { left: 0.26rem; width: 0.7rem; height: 0.045rem; }
  .rich_editor p { margin: 0.26rem 0; line-height: 1.9; }
  .rich_editor ul > li { padding-left: 0.36rem; margin: 0.18rem 0; }
  .rich_editor ul > li::before { left: 0.06rem; top: 0.12rem; width: 0.13rem; height: 0.13rem; }
  .rich_editor ol > li { padding-left: 0.56rem; margin: 0.18rem 0; }
  .rich_editor ol > li::before { width: 0.38rem; height: 0.38rem; line-height: 0.38rem; top: 0.07rem; }
  .rich_editor blockquote { padding: 0.26rem 0.3rem; border-left-width: 0.08rem; }
  .rich_editor pre { padding: 0.28rem 0.3rem; }
  .rich_editor table th,
  .rich_editor table td { padding: 0.18rem 0.2rem; }
}