@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;

}



/* ===== 文章列表 ===== */

.knowledge-list-section {

  padding: 20px 0;

  background-color: #fff;

}



.knowledge-grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 12px;

}



.knowledge-card {

  background-color: #f2ece7;

  border-radius: 8px;

  overflow: hidden;

  display: flex;

  flex-direction: column;

}



.card-top {

  display: flex;

  padding: 12px;

  gap: 12px;

}



.card-date {

  background: #fff;

  padding: 12px 10px;

  text-align: center;

  display: flex;

  flex-direction: column;

  justify-content: center;

  min-width: 65px;

}



.card-date .day {

  font-size: 22px;

  font-weight: 700;

  color: var(--text-dark);

  line-height: 1;

}



.card-date .month {

  font-size: 11px;

  color: var(--text-gray);

  margin-top: 5px;

}



.card-title {

  flex: 1;

  display: flex;

  align-items: center;

}



.card-title h3 {

  font-size: 14px;

  font-weight: 500;

  color: var(--text-dark);

  line-height: 1.6;

  display: -webkit-box;

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.card-btn {

  width: max-content;

  margin-left: auto;

  background: #ddd3c9;

  padding: 3px 12px;

  transition: background 0.3s ease;

}



.knowledge-card:hover .card-btn {

  background: #e59e44;

}



.knowledge-card:hover .card-title h3 {

  color: #e59e44;

}



.card-btn span {

  font-size: 13px;

  color: #fff;

  font-weight: 500;

  width: max-content;

}



/* ===== 分页 ===== */

.pagination {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 6px;

  margin-top: 25px;

}



.pagination a {

  min-width: 36px;

  height: 36px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 6px;

  text-decoration: none;

  color: var(--text-gray);

  font-size: 14px;

  transition: all 0.3s ease;

  background-color: #fff;

  border: 1px solid #e0e0e0;

  padding: 0 8px;

}



.pagination a:hover,

.pagination a.active {

  background-color: var(--primary-color);

  color: #fff;

  border-color: var(--primary-color);

}

}