/* ==========================================
   links.html 專屬樣式

   本頁沿用的共用元件（都在 style.css，這裡只做必要覆寫）：
     .pill-tabs / .pill-tab            分類頁籤
     .filter-bar / .filter-search      篩選列（關鍵字搜尋）
     .link-card                        連結卡片
     .pagination / .pagination-btn     分頁
   ========================================== */
/* ==========================================
   內頁標頭
   ------------------------------------------
   背景圖寫在 CSS 而不是 inline style（2026-08-18 從 inline style 收進來；
   全站 11 個 .page-hero 現在一律走 CSS，沒有例外）。
   只寫 background-image：background-size: cover ＋ 置中由 .page-hero 提供，
   構圖靠上傳前裁好，不在 CSS 寫死縮放與位移。
   ⚠️ page-hero.jpg 是通用圖，**contact／downloads／links／member-center／privacy／sitemap
      六頁共用**（2026-08-26 更正：舊註解寫「五頁」且把 gallery 算進來，兩處都是錯的
      ——gallery 早在 2026-08-18 就換成自己的 gallery-hero.jpg，
      而 downloads／privacy 一直也在用這張）。
   ⚠️ S10（客戶 2026-08-26）換新圖的做法是**直接覆蓋 page-hero.jpg 這個檔名**，
      六頁一次到位、不必改 CSS，也不會產生「兩張通用圖並存、日後要判斷用哪張」的分叉。
      日後某一頁要換成專屬照片時才改這一條。
   ========================================== */
.links-hero {
  background-image: url('../../images/hero/page-hero.jpg');
}

.links-section {
  padding: 64px var(--page-gutter) 96px;
}

.links-inner {
  max-width: var(--container-max);
  margin: 0 auto;
}

.links-inner .pill-tabs {
  margin-bottom: 40px;
}

/* 分類按鈕靠左，不置中（客戶要求）。
   .pill-tabs 是 style.css 的共用元件、預設 justify-content: center，
   這裡用本頁的 id 覆寫，不改共用元件本身——其他頁面仍需要置中。
   同一個做法已用在 index.css 的 #home-course-tabs 與 news.css 的 #news-tabs。 */
#links-tabs {
  justify-content: flex-start;
}

.link-grid {
  display: grid;
  /* minmax(0, 1fr) 而不是 1fr：軌道的預設下限是 min-content，
     連結名稱很長時（例如「財政部北區國稅局板橋分局」）會把整列撐得比容器寬。 */
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

/* 分頁：按鈕由 script.js 產生。
   🔴 用 :not(:empty) 而不是無條件給 margin——JS 沒跑時 <nav> 是空的，
      無條件的 40px 會在清單下方留一段沒人要的空白。
      （HTML 那邊的 <nav> 刻意寫成沒有內部空白的 ></nav>，:empty 才成立。） */
#link-pagination:not(:empty) {
  margin-top: 40px;
}

@media (min-width: 640px) {
  .link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .link-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}