/* ==========================================================================
   博客：列表卡片 / 详情页骨架 / 响应式 / 日·夜
   引入位置：_includes/head.html（在 site.css 之后）
   复用 hero-map.css 定义的主题变量：--bg --panel --line --text --muted
   --accent --accent2 --btn-bg（日/夜两套已在那里定义好）
   设计约束：零 JS。hover 缩放用 CSS transform，懒加载用原生 loading="lazy"
   ========================================================================== */

/* ---------- 1. 网格 ---------- */
.post-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:18px;
  margin:20px 0 0;
  padding:0;
  list-style:none;
}

/* ---------- 2. 卡片 ---------- */
.post-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.post-card:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.post-card__link{
  display:block;
  color:inherit;
  text-decoration:none;
}

/* ---------- 3. 封面：16:9 锁定 + 缩放容器 ---------- */
.post-card__cover{
  position:relative;
  aspect-ratio:16 / 9;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(128,128,128,.16), rgba(128,128,128,.04));
}
/* 不支持 aspect-ratio 的旧浏览器：退回 padding 占位法 */
@supports not (aspect-ratio: 16 / 9) {
  .post-card__cover{height:0;padding-top:56.25%}
  .post-card__img{position:absolute;top:0;left:0}
}
.post-card__img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
/* 悬停放大：在容器内缩放，不产生任何布局位移（CLS = 0） */
.post-card:hover .post-card__img{transform:scale(1.05)}

/* 缺封面时的降级：渐变块 + 标题首字，不出现破图 */
.post-card__cover--empty{
  display:flex;
  align-items:center;
  justify-content:center;
}
.post-card__initial{
  font-family:var(--font-brand, inherit);
  font-size:34px;
  font-weight:600;
  line-height:1;
  opacity:.32;
}

/* ---------- 4. 卡片文字 ---------- */
.post-card__body{padding:14px 16px 16px}
.post-card__title{
  margin:0;
  font-size:15.5px;
  font-weight:600;
  line-height:1.5;
}
.post-card__desc{
  margin:8px 0 0;
  font-size:13px;
  line-height:1.7;
  color:var(--muted);
  /* 摘要最多 3 行，超出省略，保证同排卡片高度一致 */
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.post-card__meta{
  margin:10px 0 0;
  font-size:12.5px;
  line-height:1.6;
  color:var(--muted);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 8px;
}
.post-card__taglist{display:flex;flex-wrap:wrap;gap:6px}
.post-card__tag{
  display:inline-block;
  padding:2px 8px;
  font-size:11.5px;
  line-height:1.6;
  border:1px solid var(--line);
  border-radius:999px;
  opacity:.85;
}

/* ---------- 5. 首页「最新博文」条 ---------- */
.latest-posts{margin-top:26px}
.latest-posts__more{
  margin:14px 0 0;
  font-size:13.5px;
}
.latest-posts__more a{text-decoration:underline;text-underline-offset:2px}

/* ---------- 6. 详情页 ---------- */
.post-summary{
  margin:10px 0 0;
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
}
.post-cover{margin:20px 0 24px}
.post-cover__img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--line);
  border-radius:12px;
}
.post-cover__caption{
  margin:8px 0 0;
  font-size:12.5px;
  line-height:1.7;
  color:var(--muted);
  text-align:center;
}
.post-body{margin-top:2px}

/* 正文内插图（markdown 里的 <figure>/<img>） */
.post-body figure{margin:26px 0;text-align:center}
.post-body figure img{
  display:block;
  max-width:100%;
  height:auto;
  margin:0 auto;
  border:1px solid var(--line);
  border-radius:10px;
}
.post-body figcaption{
  margin:8px 0 0;
  font-size:12.5px;
  line-height:1.7;
  color:var(--muted);
}
/* 小尺寸插图（如 283px 的地理位置图）：按原始尺寸居中，不放大到全宽 */
.post-body figure.post-fig--small img{max-width:340px}

.post-footer{
  margin-top:34px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.post-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 20px;
}

/* 上下篇 */
.post-nav{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.post-nav__item{
  flex:1 1 240px;
  max-width:calc(50% - 6px);
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:10px;
  color:inherit;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  gap:4px;
  transition:border-color .2s ease;
}
.post-nav__item:hover{border-color:var(--accent2)}
.post-nav__next{margin-left:auto;text-align:right}
.post-nav__placeholder{
  flex:1 1 240px;
  max-width:calc(50% - 6px);
  border-color:transparent;
}
.post-nav__label{font-size:12px;color:var(--muted)}
.post-nav__title{font-size:14px;line-height:1.5}

.post-back{margin:18px 0 0;font-size:13.5px}
.post-back a{text-decoration:underline;text-underline-offset:2px}

.post-empty{
  margin:20px 0 0;
  font-size:14px;
  color:var(--muted);
}

/* ---------- 7. 响应式 ---------- */
@media (max-width:640px){
  .post-grid{grid-template-columns:1fr;gap:14px}
  .post-nav__item,
  .post-nav__placeholder{flex-basis:100%;max-width:100%}
  .post-nav__next{margin-left:0;text-align:left}
}

/* ---------- 8. 夜间模式微调（其余变量已由 hero-map.css 提供） ---------- */
html[data-theme="night"] .post-card:hover{box-shadow:0 8px 22px rgba(0,0,0,.42)}
html[data-theme="night"] .post-card__cover{
  background:linear-gradient(135deg, rgba(180,200,225,.14), rgba(180,200,225,.04));
}
html[data-theme="night"] .post-card__initial{opacity:.38}