/* ============================================
   Global typography & spacing (homepage tone)
   ============================================ */

.page__content {
  font-size: 1rem;
  line-height: 1.6;
}

/* 主标题、副标题间距稍紧，学术主页风格 */
.page__content h1 {
  margin-bottom: 0.4rem;
  font-weight: 700;
}
.page__content h2 {
  margin-top: 2.2rem;
  margin-bottom: 0.8rem;
  font-weight: 650;
}
.page__content h3 {
  margin-top: 1.6rem;
  margin-bottom: 0.4rem;
  font-weight: 620;
}

/* 段落行距与段间距统一 */
.page__content p {
  margin-top: 0;
  margin-bottom: 0.85rem;
}

/* ============================================
   Hero block
   ============================================ */

.hero-block {
  margin-bottom: 1.8rem;
}

/* HERO IMAGE — 16:9、无出血、caption 居中 */
.page__content .hero-figure {
  margin: 1.2rem 0 0.6rem 0;
  text-align: center !important;           /* caption 居中 */
}

.page__content .hero-figure img {
  width: 100%;
  max-width: 100%;                         /* 不超出内容宽度 */
  height: auto;
  aspect-ratio: 16 / 9;                    /* 统一比例 */
  object-fit: cover;
  border-radius: 14px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 8px 22px rgba(0,0,0,.08);
}

/* Hero caption 居中、浅灰色、略小一号 */
.page__content .hero-figure figcaption {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: #666;
  text-align: center !important;           /* 强制覆盖主题默认样式 */
  width: 100%;
  display: block;
}

/* 分割线，宽度略小于正文宽 */
.hero-divider {
  margin: 1.8rem auto 1.5rem;
  max-width: 720px;
  border: 0;
  border-top: 1px solid #e2e2e2;
}

/* Dark mode 调整 */
@media (prefers-color-scheme: dark) {
  .page__content .hero-figure img {
    box-shadow: 0 8px 22px rgba(0,0,0,.55);
  }
  .page__content .hero-figure figcaption {
    color: #b8b8b8;
  }
  .hero-divider {
    border-top-color: #444;
  }
}

/* ============================================
   Back-to-back champion cards (FIXED)
   ============================================ */

.figure-pair {
  display: grid;
  /* 强制两列等宽，minmax(0, 1fr) 防止图片尺寸撑破网格 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 1.5rem auto 2rem;
  width: 100%;
  max-width: 1100px;
}

/* 关键修复：figure 标签默认有 margin，这会导致网格内宽度计算不一致 */
.figure-card {
  margin: 0 !important;      /* 去除浏览器默认边距 */
  width: 100%;               /* 强制占满网格单元 */
  text-align: center !important;
  position: relative;        /* 确保定位稳定 */
}

/* 让 picture 负责“几何形状”和占位 */
.figure-card picture {
  display: block;
  width: 100%;
  /* 这里的 aspect-ratio 非常重要，保持 16:9 */
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  /* 修复部分浏览器下图片高度坍塌的问题 */
  background-color: #f0f0f0; 
}

/* 图片绝对定位填满 picture 容器 */
.page__content .figure-card picture > img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease;
  margin: 0; /* 确保图片本身没有 margin */
}

.page__content .figure-card picture > img:hover {
  transform: scale(1.015);
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

.figure-card figcaption {
  margin-top: 0.6rem;
  font-size: 1rem;
  font-weight: 600; /* 加粗一点更好看 */
  color: #444;
  text-align: center !important;
  width: 100%;
}

/* 调整断点：建议调大一点 (比如 960px 或 1000px)
   防止在 ipad 横屏或窄窗口下两个图片挤在一起变得太小 */
@media (max-width: 960px) {
  .figure-pair {
    grid-template-columns: 1fr; /* 变为单列 */
    max-width: 640px;           /* 限制单列时的最大宽度，防止图片过大 */
  }
}

@media (prefers-color-scheme: dark) {
  .figure-card figcaption { color: #ccc; }
  .figure-card picture { background-color: #333; }
}

/* ============================================
   Project block formatting (Ongoing Work)
   ============================================ */

.project-block {
  margin-bottom: 1.8rem;
}

.project-title {
  font-size: 1.05rem;
  font-weight: 650;
  margin-bottom: 0.15rem;
}

.project-meta {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 0.5rem;
}

.project-time {
  color: #888;
}

.project-desc {
  margin-top: 0.3rem;
  font-size: 0.97rem;
  line-height: 1.55;
}