@media (max-width: 768px) {

/* ===== 页面Banner ===== */

.page-banner {

  width: 100%;

  height: 35vw;

  overflow: hidden;

  margin-top: var(--header-height-mobile);
}



.page-banner img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



/* ===== 文章详情 ===== */

.news-detail-section {

  padding: 20px 0;

  background-color: #fff;

}



.news-article {

  max-width: 100%;

  margin: 0;

}



.article-header {

  margin-bottom: 20px;

  padding-bottom: 15px;

  border-bottom: 1px solid var(--border-color);

}



.article-title {

  font-size: 20px;

  font-weight: 600;

  color: var(--text-dark);

  line-height: 1.4;

  margin-bottom: 10px;

}



.article-meta {

  font-size: 12px;

  color: var(--text-gray);

  display: flex;

  gap: 12px;

  flex-wrap: wrap;

}



.article-content {

  font-size: 15px;

  color: var(--text-dark);

  line-height: 1.9;

}



.article-content p {

  margin-bottom: 15px;

  text-indent: 2em;

}



.article-content h3 {

  font-size: 18px;

  font-weight: 600;

  color: var(--text-dark);

  margin: 25px 0 15px;

}



.article-content h4 {

  font-size: 16px;

  font-weight: 600;

  color: var(--primary-color);

  margin: 18px 0 10px;

}



.article-image {

  margin: 20px 0;

  text-align: center;

}



.article-image img {

  max-width: 100%;

  border-radius: 8px;

}



/* ===== 文章底部 ===== */

.article-footer {

  margin-top: 25px;

  padding-top: 15px;

  border-top: 1px solid var(--border-color);

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: 12px;

}



.article-tags {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

}



.article-tags span {

  background-color: var(--bg-light);

  color: var(--primary-color);

  padding: 5px 12px;

  border-radius: 4px;

  font-size: 12px;

}



.article-share {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 13px;

  color: var(--text-gray);

}



/* ===== 相关文章 ===== */

.related-articles {

  margin-top: 30px;

  padding-top: 25px;

  border-top: 1px solid var(--border-color);

}



.related-title {

  font-size: 17px;

  font-weight: 600;

  color: var(--text-dark);

  margin-bottom: 18px;

}



.related-grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 12px;

}



.related-item {

  background-color: var(--bg-light);

  padding: 15px;

  border-radius: 8px;

  text-decoration: none;

  display: block;

}



.related-item h4 {

  font-size: 14px;

  font-weight: 500;

  color: var(--text-dark);

  line-height: 1.6;

  margin-bottom: 8px;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.related-item span {

  font-size: 12px;

  color: var(--text-gray);

}

}