/* ============================================================
   views.css — 首頁中欄與右欄清單
   ============================================================ */

/* 中欄頭列：檢視切換（最新/精選/全部）+ 篇數 */
.center-head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; padding-bottom:10px; border-bottom:2px solid var(--ink); }
.view-toggle{ display:flex; gap:6px; flex-wrap:wrap; }
.view-btn{ font-family: var(--font-mono); font-size:.82rem; background:transparent; border:1px solid var(--line);
  color: var(--ink-soft); padding:5px 13px; border-radius:20px; cursor:pointer; }
.view-btn:hover{ color: var(--ink); }
.view-btn.active{ background: var(--teal); border-color: var(--teal); color:#fff; }
.center-head .count{ margin-left:auto; font-family: var(--font-mono); font-size:.76rem; color: var(--ink-soft); }

/* 卡片格線：3 → 2 → 1 欄 */
.grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; }
@media (max-width:1200px){ .grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px){ .grid{ grid-template-columns:1fr; } }

/* 空狀態 */
.empty-state{ text-align:center; color: var(--ink-soft); font-family: var(--font-serif); padding:50px 0; }
.muted{ color: var(--ink-soft); font-family: var(--font-serif); }

/* 右欄：最新文章清單 */
.mini-item{ display:flex; gap:10px; padding:10px 0; border-bottom:1px dashed var(--line); text-decoration:none; color:inherit; align-items:flex-start; }
.mini-item:last-child{ border-bottom:none; }
.mini-emoji{ font-size:1.3rem; }
.mini-emoji .emoji{ width:1.35rem; height:1.35rem; vertical-align:middle; }
.mini-title{ font-family: var(--font-display); font-size:.92rem; line-height:1.3; }
.mini-zh{ color: var(--ink-soft); font-size:.8rem; }
.mini-item:hover .mini-title{ text-decoration:underline; }