/* ===== article card ===== */
.card{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(11,42,78,.07);transition:box-shadow .18s,transform .18s,border-color .18s}
.card:hover{box-shadow:0 10px 26px rgba(11,42,78,.13);transform:translateY(-4px);border-color:#dfe3e9}
.card-fig{position:relative;display:block}
.card .thumb{aspect-ratio:16/10;background:var(--bg-soft);object-fit:cover;width:100%}
.card .thumb-ph{display:block;background:linear-gradient(135deg,#eef1f5,#e4e9f0)}
.cat{display:inline-block;background:var(--navy);color:#fff;font-size:12px;font-weight:var(--fw-bold);padding:4px 11px;border-radius:3px;letter-spacing:var(--tracking-wide);line-height:1.4}
.cat:hover{color:#fff}
.card .cat{position:absolute;top:11px;left:11px;background:rgba(11,42,78,.92);letter-spacing:.03em}
.card .body{padding:16px 17px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.card h3{font-weight:var(--fw-bold);font-size:var(--fs-card);line-height:var(--line-title);letter-spacing:var(--tracking-normal);margin:0;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card h3 a{color:inherit}
.card h3 a{transition:color .15s}
.card h3 a:hover{color:var(--navy-3)}   /* 深墨藍 → 亮一階的藍，滑鼠移入看得出變色（--navy 幾乎同色，看不出來）*/
.card .meta{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted-2);margin-top:auto}
.card .meta .dot{opacity:.5}
.card-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:22px}

/* ===== buttons ===== */
.btn{display:inline-block;font-size:14px;font-weight:var(--fw-bold);border-radius:30px;padding:11px 30px;cursor:pointer;transition:all .15s;border:1.5px solid var(--navy);background:#fff;color:var(--navy)}
.btn:hover{background:var(--navy);color:#fff}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.btn-gold:hover{background:var(--gold-light);border-color:var(--gold-light);color:var(--navy)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff}

/* ===== tags ===== */
.tag{display:inline-block;font-size:13px;color:#3d4a5c;background:var(--bg-soft);border:1px solid var(--line);border-radius:30px;padding:6px 14px;font-weight:var(--fw-medium);margin:3px}
.tag:hover{border-color:var(--gold);color:var(--navy);background:#fff}
/* 尺寸與 .cat 分類標籤一致（同高、同圓角），只差配色 */
.type-badge{display:inline-block;background:var(--gold);color:var(--navy);font-size:12px;font-weight:var(--fw-bold);padding:4px 11px;border-radius:3px;letter-spacing:var(--tracking-wide);line-height:1.4}

/* ===== section title ===== */
.section-title{font-weight:var(--fw-extrabold);font-size:var(--fs-section);line-height:var(--line-heading);letter-spacing:var(--tracking-heading);color:var(--navy);margin:0;display:flex;align-items:center;gap:11px}
.section-title::before{content:"";width:5px;height:.88em;background:var(--gold);border-radius:2px;display:inline-block;flex-shrink:0}
.section-title a{color:inherit}

/* ===== pagination ===== */
.pagination{display:flex;gap:8px;margin:24px 0;flex-wrap:wrap}
.pagination a,.pagination span{padding:8px 14px;border:1px solid var(--line);border-radius:6px;font-size:var(--text-sm);font-weight:var(--fw-medium)}
.pagination a:hover{border-color:var(--navy)}
.pagination .current{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ===== flash ===== */
.flash{padding:12px 16px;border-radius:6px;margin:16px 0}
.flash.success{background:#e7f6ec;color:#1b5e36}
.flash.error{background:#fdeaea;color:#a12626}