/* ================================================================
   mas-home.css - 完整穩定版 (2026-05-01)
   適用於首頁左右分欄佈局
   ================================================================ */

/* 1. 基礎佈局：確保左側列表有適當間距 */
.mas-home-article-list {
  display: flex;
  flex-direction: column;
  gap: 12px; /* 統一控制卡片之間的垂直間距 */
  width: 100%; /* 確保預設填滿父容器 */
  max-width: 800px; /* 限制最大寬度，避免卡片變得太細長 */
  margin: 0 auto; /* 如果設定了寬度，這能讓列表置中 */
}

/* 2. 移除連結預設顏色與底線 (解決截圖中的藍色底線問題) */
.mas-home-article-list a.mas-nav-item {
  text-decoration: none !important;
  color: inherit !important;
  display: block;
}

/* 3. 文章卡片主體設計[cite: 1, 4] */
.mas-nav-item {
  background: #ffffff;
  border: 1px solid #eaeaea;
  border-left: 5px solid #f1c40f; /* 標誌性的金黃色書脊[cite: 4] */
  border-radius: 8px;
  padding: 25px;
  margin-bottom: 0 !important; /* 強制歸零，只靠父層 gap 控制[cite: 4] */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* 淡淡的陰影增加立體感[cite: 4] */
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
}

/* 滑鼠移上的互動感 (提供專業的親切回饋)[cite: 1, 4] */
.mas-nav-item:hover {
  transform: translateY(-4px); /* 輕微浮起[cite: 4] */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
  background-color: #fffdf5; /* 極輕微變色，像舊書頁[cite: 4] */
}

/* 4. 卡片內文字層次[cite: 1, 4] */
.mas-nav-item h3 {
  margin: 0 0 10px 0;
  font-family: "Noto Serif TC", serif;
  font-size: 1.5rem;
  color: #1a1a1a !important;
  text-decoration: none !important; /* 再次確保標題無底線[cite: 4] */
}

.mas-nav-item p.mas-excerpt {
  margin: 0;
  color: #666;
  font-size: 1rem;
  line-height: 1.6;
}

/* 5. 數據標籤樣式 (例如：15 則讀者標註)[cite: 4] */
.mas-badge {
  display: inline-block;
  background: #f0f0f0;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.85rem;
  color: #888;
  margin-top: 15px;
}

/* 7. 手機版響應式微調 (確保未來在小螢幕也能正常顯示)[cite: 4] */
@media (max-width: 768px) {
  .mas-home-article-list {
    margin-bottom: 40px; /* 手機版下方留白，避免跟搜尋框黏在一起[cite: 4] */
  }

  .mas-nav-item {
    padding: 15px; /* 手機版縮小內距，節省空間[cite: 4] */
  }

  .mas-nav-item h3 {
    font-size: 1.25rem; /* 手機版標題稍微縮小[cite: 4] */
  }
}

/*================================================================================*/

/* 1. 右側搜尋容器外框 */
.mas-home-search-box {
  padding: 25px;
  background: #f9f9f9; /* 淺灰色背景與左側白底卡片區隔 */
  border: 1px solid #eee;
  border-radius: 12px;
  margin: 10px 0 8px 0;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02); /* 輕微內陰影增加深度感 */
}

/* 2. 標題與副標題[cite: 4] */
.mas-search-title {
  font-family: "Noto Serif TC", serif;
  font-size: 1.6rem;
  color: #1a1a1a;
  margin: 0 0 8px 0;
}

.mas-search-subtitle {
  font-size: 0.95rem;
  color: #888;
  margin: 0 0 25px 0;
}

/* 3. 搜尋表單佈局[cite: 1] */
.mas-search-form {
  margin-bottom: 25px;
}

.mas-search-input-group {
  display: flex;
  flex-direction: column; /* 手機版優先堆疊，桌機版可用 flex-row 調整 */
  gap: 12px;
}

/* 4. 輸入框美化[cite: 1, 4] */
.mas-search-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
  font-family: "Noto Serif TC", serif; /* 統一學術字體[cite: 1] */
  transition: all 0.3s ease;
}

.mas-search-input:focus {
  outline: none;
  border-color: #f1c40f; /* 專屬金黃色書脊色[cite: 1, 4] */
  box-shadow: 0 0 0 3px rgba(241, 196, 15, 0.1);
}

/* 5. 搜尋按鈕：從強烈黑改為親切的深灰色或主題色 */
.mas-search-submit {
  /* 方案 A：深石板灰 (更沉穩、不刺眼)
    background: #444;
    color: white;
    */
  /* 或者 方案 B：使用你的書脊金黃色 (更有品牌感) */
  background: #f1c40f;
  color: #1a1a1a;
  border: none;
  padding: 12px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.2rem;
  font-family: "Noto Serif TC", serif; /* 統一字體 */
  transition: all 0.2s ease;
}

.mas-search-submit:hover {
  background: #555; /* 輕微變亮[cite: 4] */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 6. 熱門搜尋標籤 (Hot Topics)[cite: 1, 4] */
.mas-hot-topics {
  font-size: 0.85rem;
  color: #666;
  line-height: 1.8;
}

.mas-badge-link {
  display: inline-block;
  background: #eee;
  color: #666 !important;
  padding: 2px 8px;
  border-radius: 4px;
  text-decoration: none !important;
  margin-right: 5px;
  transition: all 0.2s ease;
}

.mas-badge-link:hover {
  background: #f1c40f; /* 滑過時變黃色，增加親切感[cite: 4] */
  color: #1a1a1a !important;
}

/* ======= 分頁導覽容器 ======== */
.mas-pagination {
  margin-top: 40px;
  padding: 10px 0;
  text-align: center; /* 置中 */
}

.mas-pagination .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px; /* 按鈕間距 */
}

/* 頁碼與上下頁通用樣式 */
.mas-pagination a,
.mas-pagination .current {
  text-decoration: none !important; /* 移除截圖中的底線 */
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.2s ease;
  border: 1px solid #eee;
  color: #666;
  background: #fff;
}

/* 滑鼠經過效果 */
.mas-pagination a:hover {
  background-color: #f5f5f5;
  border-color: #ccc;
  color: #333;
}

/* 當前頁碼樣式 (強調) */
.mas-pagination .current {
  background-color: #f1c40f; /* 建議使用與您卡片左邊條一致的黃色 */
  color: #fff;
  border-color: #f1c40f;
  font-weight: bold;
}

/* 針對「上一頁」與「下一頁」的特殊微調 */
.mas-pagination .prev,
.mas-pagination .next {
  font-weight: 500;
}

.mas-list-header {
  width: 100%;
  text-align: center;
  min-height: 40px; /* 💡 改用 min-height 更安全 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0px;
}

.mas-list-header h2 {
  margin: 0;
  font-family: "Noto Serif TC", serif;
  font-size: 36px; /* 💡 置中大字體 */
  color: #222;
  font-weight: 200;
  letter-spacing: 2px;
}
@media (max-width: 768px) {
  .mas-list-header h2 {
    font-size: 32px; /* 手機版稍微縮小，避免破格 */
  }
}