/* ==========================================================================
   Project List page stylesheet (projects.html)
   Page-specific styles only. Shared styles live in css/style.css (homepage)
   and css/news-detail.css (page-banner / page-wrap common layout).
   Visual language follows the homepage: primary blue #172A88, navy #101D5F,
   light grey #F7F8FA, KumbhSans headings, NotoSans body.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page container
   -------------------------------------------------------------------------- */
.project-page {
  /* 注意：切忌写成 padding: 4.5rem 0 5rem —— 会覆盖 .container 的横向留白
     （.container 的 padding: 0 var(--pad)），导致内容左右贴边。
     必须显式带上 var(--pad) 作为横向内边距。 */
  padding: 4.5rem var(--pad) 5rem;
}

/* --------------------------------------------------------------------------
   Project grid（3 列网格卡片，视觉与新闻列表卡片一致，无分类 tab）
   WP 转换后：archive-project.php 主循环（WP_Query 按发布时间倒序），
   每页 6 条（3 列 × 2 行，jc_project_archive_per_page 控制）。
   -------------------------------------------------------------------------- */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.4rem;
  list-style: none;
}

.project-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s, transform 0.3s;
}

.project-card:hover {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
  transform: translateY(-4px);
}

.project-card-link { display: block; }

.project-card-thumb {
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.project-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.project-card:hover .project-card-thumb img { transform: scale(1.05); }

.project-card-body {
  padding: 2rem 2.2rem 2.4rem;
}

.project-card-title {
  font-family: var(--font-head);
  font-weight: bold;
  font-size: 1.8rem;
  line-height: 1.5;
  color: var(--themeColor2);
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 5.4rem;
  transition: color 0.3s;
}

.project-card:hover .project-card-title { color: var(--themeColor1); }

.project-card-desc {
  font-size: 1.4rem;
  line-height: 1.75;
  color: #666;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 1.6rem;
}

.project-card-more {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: bold;
  font-size: 1.4rem;
  letter-spacing: 0.03em;
  color: var(--themeColor1);
  padding: 0.8rem 1.8rem;
  border: 1px solid var(--themeColor1);
  border-radius: 3px;
  transition: color 0.3s, background 0.3s;
}

.project-card:hover .project-card-more {
  color: #fff;
  background: var(--themeColor1);
}

/* --------------------------------------------------------------------------
   WP 分页适配（the_posts_pagination() 输出 .navigation.pagination .nav-links）
   -------------------------------------------------------------------------- */
.navigation.pagination {
  display: flex;
  justify-content: center;
  margin-top: 4.5rem;
}

.navigation.pagination .nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.navigation.pagination .page-numbers {
  min-width: 4.2rem;
  height: 4.2rem;
  padding: 0 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: bold;
  font-size: 1.5rem;
  color: #333;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  transition: color 0.3s, background 0.3s, border-color 0.3s;
}

.navigation.pagination .page-numbers:hover {
  color: var(--themeColor1);
  border-color: var(--themeColor1);
}

.navigation.pagination .page-numbers.current {
  color: #fff;
  background: var(--themeColor1);
  border-color: var(--themeColor1);
  cursor: default;
}

.navigation.pagination .page-numbers .jc-icon { width: 1.5rem; height: 1.5rem; }

.navigation.pagination .screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .project-grid { grid-template-columns: repeat(2, 1fr); gap: 1.8rem; }
}

@media (max-width: 640px) {
  .project-page { padding: 3rem var(--pad) 3.6rem; }
  .project-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .project-card-body { padding: 1.6rem 1.8rem 2rem; }
}