/* =========================================================================
   cards.css — 文章卡片元件
   出現位置：首頁專欄區、文章列表、分類、搜尋、單篇的延伸閱讀
   ========================================================================= */

.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.post-card{
  display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;
  background:var(--surface-1);border:1px solid var(--line-2);transition:var(--dur-base);
}
.post-card:hover{transform:translateY(-6px);border-color:rgba(127,126,255,.45)}

/* 封面：有精選圖用圖，沒有就用品牌漸層當底 */
.post-cover{
  aspect-ratio:16/9;display:flex;align-items:flex-end;padding:18px;
  position:relative;overflow:hidden;
}
.post-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post-cover.has-thumb::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,14,16,0) 40%,rgba(14,14,16,.75) 100%);
}
.post-cover .cat{
  position:relative;z-index:2;font-size:11px;font-weight:800;letter-spacing:.08em;
  padding:5px 12px;border-radius:var(--radius-pill);
  background:rgba(14,14,16,.55);color:#fff;backdrop-filter:blur(6px);
}

/* 無圖時的三種漸層色票（依迴圈索引循環） */
.pc-1{background:linear-gradient(140deg,rgba(92,92,255,.85),rgba(30,30,30,.95))}
.pc-2{background:linear-gradient(140deg,rgba(0,214,179,.6),rgba(30,30,30,.96))}
.pc-3{background:linear-gradient(140deg,rgba(189,189,189,.5),rgba(30,30,30,.96))}

.post-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.post-body time{font-family:var(--font-en);font-size:11.5px;letter-spacing:.08em;color:var(--metal-gray)}
.post-body h3{font-size:17px;font-weight:800;color:#fff;line-height:1.6}
.post-body h3 a{transition:color var(--dur-fast)}
.post-card:hover .post-body h3 a{color:var(--manganese-light)}
.post-body p{font-size:13.5px;color:var(--metal-gray);line-height:1.8;flex:1;margin:0}
.post-body .read{font-size:13px;font-weight:700;color:var(--manganese-light)}

@media(max-width:960px){
  .posts{grid-template-columns:1fr;max-width:440px;margin:0 auto}
}