/* 首頁文章卡（刀 1009-COV4，WORK-BLOG-COVER-DESIGN 裁決 2、3、4）：公開首頁與登入後首頁共用。
   標記由 frontend/js/post-card.js 產生。封面底色依分類固定（低飽和），字色一律 #16304D；
   封面在深色模式維持同一組淡色（當成圖片處理），卡片本體跟著頁面的 --card／--text／--sub 走。
   刀 1010-B（Galant 2026-10-10 裁決）改成橫式：每張卡一列，封面在左（168×96），右側是
   分類標籤、閱讀時間、日期、NEW，下面是標題（最多 2 行）與副標題（1 行，超出省略）。
   卡片列本身寬度 ≤480px 時（手機，或登入後首頁變窄的主欄）封面縮成 96×72，封面字照比例縮小。 */
.post-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0 8px;
  container-type: inline-size;
}
.post-card {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--card-border, rgba(22, 48, 77, .12));
  border-radius: 14px;
  background: var(--card, #FFFDF8);
  color: var(--text, #16304D);
  text-decoration: none;
  transition: border-color var(--t-mark) ease, box-shadow var(--t-mark) ease;
}
.post-card:hover {
  border-color: rgba(30, 58, 95, .32);
  box-shadow: 0 4px 14px rgba(22, 48, 77, .08);
}
.post-card:hover .post-card-title { color: var(--primary, #1E3A5F); }
.post-card:focus-visible { outline: 2px solid var(--primary, #1E3A5F); outline-offset: 2px; }
.post-card-cover {
  flex: 0 0 168px;
  width: 168px;
  height: 96px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #ECE8DF;
  color: #16304D;
  container-type: inline-size;
}
.post-card-cover span {
  font-size: clamp(.8rem, 15cqi, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.post-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.post-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; line-height: 1.6; }
.post-card-meta:empty { display: none; }
.post-card-tag { padding: 0 8px; border-radius: 999px; color: #16304D; background: #ECE8DF; }
.post-card-time, .post-card-date { color: var(--sub, #55657A); }
.post-card-new {
  padding: 0 7px;
  border-radius: 999px;
  background: #A6452F;
  color: #FFFDF8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
}
.post-card-title {
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.45;
  /* 不用 inherit：app 主題層把所有 <a> 的字色鎖成 --primary !important（kumo-theme-cream-navy.css「連結」），
     卡片整張是 <a>，標題要的是內文色，所以在 h3 上直接指定。 */
  color: var(--text, #16304D);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--sub, #55657A);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.post-cards-updated { font-size: 12px; color: var(--sub, #55657A); white-space: nowrap; }
@container (max-width: 480px) {
  .post-card { gap: 12px; padding: 8px; }
  .post-card-cover { flex-basis: 96px; width: 96px; height: 72px; border-radius: 8px; }
  .post-card-title { font-size: 14.5px; }
  .post-card-desc { font-size: 12.5px; }
}
.post-card[data-category="conversation"] .post-card-cover,
.post-card[data-category="conversation"] .post-card-tag { background: #F3E4D0; }
.post-card[data-category="grammar"] .post-card-cover,
.post-card[data-category="grammar"] .post-card-tag { background: #DDEADF; }
.post-card[data-category="jlpt"] .post-card-cover,
.post-card[data-category="jlpt"] .post-card-tag { background: #DCE6F1; }
.post-card[data-category="speaking"] .post-card-cover,
.post-card[data-category="speaking"] .post-card-tag { background: #F2DEDA; }