/* ==========================================================================
   SINOTRUK International — 栏目页样式（对应原站 template/page/*/skin.css）
   ========================================================================== */

/* 面包屑（位于 banner 之前） */
.bread {
  padding: .3rem 0;
  font-size: .2rem;
  color: #787878;
}
.bread a { color: #787878; }
.bread a:hover { color: var(--brand); }
.bread .current { color: #3d3d3d; }
.bread .sep { padding: 0 .08rem; }

/* 通栏 banner */
.banner-box img { width: 100%; height: auto; display: block; }

/* 模块 */
.module { padding: .35rem 0; scroll-margin-top: 3.6rem; }
.module--intro { padding: .45rem 0 .35rem; }
.module--intro h1 {
  font-size: .7142rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--brand);
}
.module--intro p {
  margin-top: .3rem;
  font-size: .2857rem;
  line-height: 2;
  color: var(--ink);
}

.module h2 {
  font-size: .5rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--brand);
}
.module h3 { font-size: .3rem; font-weight: 700; color: var(--ink); }

.prose p {
  margin: .2rem 0;
  font-size: .26rem;
  line-height: 2;
  color: #3d3d3d;
}
.prose p.lead { font-size: .2857rem; }
.prose ul { list-style: disc; padding-left: .4rem; }
.prose li { margin: .1rem 0; font-size: .26rem; line-height: 1.95; }
.prose img { width: 100%; height: auto; margin: .3rem 0; }

/* 50/50 图文行 */
.md-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin: .35rem 0;
}
.md-row__img { width: 50%; }
.md-row__img img { width: 100%; height: auto; }
.md-row__text { width: 46%; }
.md-row--reverse { flex-direction: row-reverse; }
.md-row h2 { margin-bottom: .25rem; }
.md-row p { font-size: .26rem; line-height: 2; color: #3d3d3d; }

/* 事实和数据 */
.fact-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: .4rem;
  border-top: 1px solid #e6eaea;
}
.fact-list li {
  width: 33.33%;
  padding: .4rem .2rem;
  border-bottom: 1px solid #e6eaea;
  text-align: center;
}
.fact-list b {
  display: block;
  font-size: .62rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--brand);
}
.fact-list span { font-size: .2285rem; color: var(--muted); }

/* 产品分类卡 */
.cat-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .3rem 0;
  margin-top: .3rem;
}
.cat-card {
  display: flex;
  width: 49%;
  padding: .3rem;
  background: var(--soft);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.cat-card img { width: 46%; height: auto; object-fit: contain; }
.cat-card__body { width: 54%; padding-left: .25rem; align-self: center; }
.cat-card h3 { font-size: .3428rem; font-weight: 700; color: var(--brand); }
.cat-card p { margin-top: .12rem; font-size: .2285rem; line-height: 1.9; color: #3d3d3d; }
.cat-card .link-arrow { margin-top: .18rem; font-size: .2285rem; }

/* 车型卡（重卡列表） */
.model-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .4rem 0;
  margin-top: .35rem;
}
.model-card { width: 32%; }
.model-card__img {
  background: var(--soft);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
}
.model-card__img img { width: 92%; height: 92%; object-fit: contain; transition: transform .5s var(--ease); }
.model-card:hover .model-card__img img { transform: scale(1.05); }
.model-card h3 { margin-top: .2rem; font-size: .3428rem; font-weight: 700; color: var(--brand); }
.model-card p { margin-top: .1rem; font-size: .2285rem; line-height: 1.9; color: #3d3d3d; }
.model-card .link-arrow { margin-top: .12rem; font-size: .21rem; }

/* 产品详情 */
.product-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .4rem 0 .3rem;
}
.product-hero__media { width: 52%; background: var(--soft); }
.product-hero__media img { width: 100%; height: auto; }
.product-hero__text { width: 44%; }
.product-hero__text .path { font-size: .2rem; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.product-hero__text h1 { margin-top: .08rem; font-size: .7142rem; font-weight: 700; color: var(--brand); }
.product-hero__text p { margin-top: .22rem; font-size: .2857rem; line-height: 2; color: #3d3d3d; }

.spec-table { width: 100%; border-collapse: collapse; margin: .25rem 0 .4rem; font-size: .2285rem; }
.spec-table caption {
  padding: .18rem 0;
  font-size: .28rem;
  font-weight: 700;
  color: var(--brand);
  text-align: left;
}
.spec-table th,
.spec-table td { padding: .12rem .18rem; border-bottom: 1px solid #e6eaea; text-align: left; }
.spec-table th { width: 30%; background: var(--soft); font-weight: 500; color: #3d3d3d; }
.spec-table td { color: #575f61; }

/* 新闻列表 */
.news-list { border-top: 1px solid #e6eaea; margin-top: .25rem; }
.news-item {
  display: flex;
  gap: .4rem;
  padding: .32rem 0;
  border-bottom: 1px solid #e6eaea;
}
.news-item__img { width: 30%; flex: 0 0 30%; overflow: hidden; aspect-ratio: 16 / 10; background: var(--soft); }
.news-item__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.news-item:hover .news-item__img img { transform: scale(1.04); }
.news-item__body { flex: 1 1 auto; }
.news-item__meta { display: flex; gap: .2rem; font-size: .2rem; color: var(--muted); }
.news-item__meta .tag { color: var(--brand); }
.news-item h3 { margin-top: .1rem; font-size: .32rem; font-weight: 700; line-height: 1.5; color: var(--brand); }
.news-item p {
  margin-top: .1rem;
  font-size: .2285rem;
  line-height: 1.95;
  color: #3d3d3d;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 文章正文 */
.article-head { border-bottom: 1px solid #e6eaea; padding-bottom: .25rem; margin-bottom: .25rem; }
.article-head h1 { font-size: .55rem; font-weight: 700; line-height: 1.45; color: var(--brand); }
.article-meta { display: flex; gap: .25rem; margin-top: .16rem; font-size: .2rem; color: var(--muted); }
.article-body p { margin: .22rem 0; font-size: .26rem; line-height: 2.05; color: #3d3d3d; }
.article-body img { width: 100%; height: auto; margin: .3rem 0; }

/* 下载中心 */
.download-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .35rem 0;
  margin-top: .3rem;
}
.download-card { width: 23.5%; background: var(--soft); }
.download-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.download-card__body { padding: .18rem .2rem .22rem; }
.download-card h3 { font-size: .22rem; font-weight: 700; color: var(--ink); line-height: 1.5; }
.download-card span { display: block; margin-top: .06rem; font-size: .18rem; color: var(--muted); }
.download-card:hover h3 { color: var(--brand); }

/* 联系表单 */
.contact-form { max-width: 8.6rem; }
.contact-form .row { display: flex; gap: .25rem; }
.contact-form .row .field { flex: 1 1 0; }
.field { margin-bottom: .22rem; }
.field label { display: block; margin-bottom: .06rem; font-size: .22rem; color: #3d3d3d; }
.field label .req { color: #c0392b; }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .12rem .16rem;
  border: 1px solid #d8dedf;
  border-radius: .08rem;
  background: #fff;
  font-family: var(--font);
  font-size: .23rem;
  color: var(--ink);
}
.field textarea { min-height: 2rem; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--brand); outline: none; }
.check { display: flex; gap: .1rem; align-items: flex-start; font-size: .2rem; color: #5a6264; }
.check input { width: .2rem; height: .2rem; margin-top: .05rem; }

.form-note { margin-top: .2rem; font-size: .2rem; color: var(--muted); }
.form-status { margin-top: .18rem; font-size: .22rem; color: var(--brand); }

/* 销售区域 */
.region-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .25rem 0;
  margin-top: .1rem;
}
.region-tiles a {
  display: block;
  width: 48.6%;
  overflow: hidden;
  background: var(--soft);
}
.region-tiles a:last-child { width: 100%; }
.region-tiles img {
  width: 100%;
  height: auto;
  transition: transform .6s var(--ease);
}
.region-tiles a:hover img { transform: scale(1.03); }

.region-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .3rem 0;
  margin-top: .3rem;
}
.region-card {
  width: 32%;
  padding: .35rem .3rem;
  background: var(--soft);
  border-left: 3px solid var(--brand);
}
.region-card h3 { font-size: .3rem; font-weight: 700; color: var(--brand); }
.region-card p { margin-top: .1rem; font-size: .22rem; line-height: 1.9; color: #4b5355; }
.region-card a { display: inline-block; margin-top: .12rem; font-size: .21rem; color: var(--brand); }

/* 时间轴（历程） */
.timeline { margin-top: .35rem; }
.timeline__item {
  display: flex;
  gap: .5rem;
  align-items: center;
  padding: .35rem 0;
  border-bottom: 1px solid #e6eaea;
}
.timeline__item:nth-child(even) { flex-direction: row-reverse; }
.timeline__img { width: 38%; flex: 0 0 38%; }
.timeline__img img { width: 100%; height: auto; }
.timeline__body { width: 58%; }
.timeline__year { font-size: .6rem; font-weight: 700; color: var(--brand); line-height: 1; }
.timeline__text { margin-top: .12rem; font-size: .24rem; line-height: 1.95; color: #3d3d3d; }

/* 分页 */
.pagination { display: flex; justify-content: center; gap: .1rem; margin-top: .45rem; }
.pagination a,
.pagination span {
  display: grid;
  place-items: center;
  min-width: .55rem;
  height: .55rem;
  padding: 0 .12rem;
  border: 1px solid #dfe4e5;
  font-size: .22rem;
  color: #4c5456;
}
.pagination .is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* CTA */
.problem-con { margin: 1.2rem 0; }

/* 移动端 */
@media (max-width: 768px) {
  .bread { padding: 12px 0; font-size: 12px; }

  .module { padding: 18px 0; }
  .module--intro { padding: 26px 0 16px; }
  .module--intro h1 { font-size: 24px; }
  .module--intro p { margin-top: 12px; font-size: 14px; line-height: 1.9; }
  .module h2 { font-size: 20px; }

  .prose p, .prose li { font-size: 14px; line-height: 1.95; }

  .md-row { flex-direction: column; gap: 16px; margin: 20px 0; }
  .md-row__img, .md-row__text { width: 100%; }
  .md-row p { font-size: 14px; }

  .fact-list li { width: 50%; padding: 20px 10px; }
  .fact-list b { font-size: 28px; }
  .fact-list span { font-size: 12px; }

  .cat-grid { gap: 14px 0; }
  .cat-card { width: 100%; padding: 16px; }
  .cat-card h3 { font-size: 18px; }
  .cat-card p { font-size: 13px; }

  .model-grid { gap: 24px 0; }
  .model-card { width: 100%; }
  .model-card h3 { font-size: 19px; }

  .product-hero { flex-direction: column; gap: 18px; padding: 20px 0 10px; }
  .product-hero__media, .product-hero__text { width: 100%; }
  .product-hero__text h1 { font-size: 26px; }
  .product-hero__text p { font-size: 14px; }

  .spec-table { font-size: 12px; }
  .spec-table th, .spec-table td { padding: 8px 10px; }

  .news-item { flex-direction: column; gap: 10px; padding: 18px 0; }
  .news-item__img { width: 100%; flex: none; }
  .news-item h3 { font-size: 17px; }
  .news-item p { font-size: 13px; }

  .article-head h1 { font-size: 22px; }
  .article-body p { font-size: 14px; }

  .download-grid { gap: 16px 0; }
  .download-card { width: 48%; }
  .download-card h3 { font-size: 13px; }

  .contact-form { max-width: none; }
  .contact-form .row { flex-direction: column; gap: 0; }
  .field label { font-size: 13px; }
  .field input, .field select, .field textarea { font-size: 14px; padding: 10px 12px; }
  .field textarea { min-height: 140px; }

  .region-grid { gap: 14px 0; }
  .region-tiles a,
  .region-tiles a:last-child { width: 100%; }
  .region-card { width: 100%; padding: 18px; }
  .region-card h3 { font-size: 18px; }
  .region-card p { font-size: 13px; }

  .timeline__item { flex-direction: column !important; gap: 12px; padding: 20px 0; }
  .timeline__img, .timeline__body { width: 100%; }
  .timeline__year { font-size: 32px; }
  .timeline__text { font-size: 13px; }

  .problem-con { margin: 24px 0; }
}