/* =====================================================================
   列表頁與內容頁 · 版面組合 · css/list.css
   ▸ 元件樣式一律在 guideline/components.css（.wl-*）；這支只寫頁面層的組合與底色節奏
   ▸ 頁面：stories.html 主題專頁、notices.html 重要公告、events.html 活動訊息、plans.html 年度計畫、detail.html 內容頁
   ▸ 底色節奏（v1.4 R1，對齊關注領域內頁）：情境 KV（inverse）→ 篩選列＋列表區同一片米白（surface），只用篩選列下緣 hairline 分段 → Footer
   ===================================================================== */

body.page-inner{background:var(--wl-surface)}

/* nav 在情境 KV 上：跟首頁深色 Hero、關注領域內頁一樣不鋪底板（base.css 的 .nav--on-dark 預設有 .8 深綠底板，只給首頁以外的深色區塊用） */
body.page-inner .nav--on-dark:not(.nav--solid):not(.nav--over-media):not(.nav--over-footer)::before,
body.page-inner .nav--on-dark:not(.nav--solid):not(.nav--over-media):not(.nav--over-footer)::after{opacity:0}
html.nav-open body.page-inner .nav::before,html.nav-open body.page-inner .nav::after{opacity:1}

/* 列表區 */
.list{position:relative;min-height:60vh;padding:var(--wl-section-compact) var(--wl-margin) var(--wl-section);background:var(--wl-surface)}
.list__panel:focus{outline:none}
.list__feature{margin-bottom:var(--wl-space-8)}
.list__feature[hidden]{display:none}

/* R3 列表收尾：卡片網格結束後一條 hairline；有「看更多」時線在按鈕上方，沒有時單獨收一條（清單頁的清單列自帶下緣線，不加） */
.list__panel:not(.wl-container--list) > .wl-more{margin-top:var(--wl-space-12);padding-top:var(--wl-space-12);box-shadow:inset 0 1px 0 var(--wl-border)}
.list__panel:not(.wl-container--list):has(> .wl-more[hidden])::after{content:"";display:block;height:1px;margin-top:var(--wl-space-12);background:var(--wl-border)}

/* 文字清單頁（重要公告）R2：5/7 分割——左欄標題列黏住（header＋篩選列下方 48），右欄清單上限 720，避免清單孤零零置中留兩大片空白 */
.list__split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--wl-split-gap-wide);align-items:start}
.list__split > .wl-list-head{position:sticky;top:calc(var(--wl-nav-h) + var(--wl-subnav-h) + var(--wl-space-12));flex-direction:column;align-items:flex-start;gap:var(--wl-space-4);margin:0;padding:0;box-shadow:none}
.list__split > .list__panel{margin-inline:0}
@media (max-width:1100px){
  .list__split{grid-template-columns:minmax(0,1fr)}
  /* 單欄時清單本身有上緣 hairline，標題列不再畫第二條線 */
  .list__split > .wl-list-head{position:static;flex-direction:row;align-items:flex-end;margin-bottom:var(--wl-space-6);padding-bottom:0;box-shadow:none}
}
@media (max-height:860px){.list__split > .wl-list-head{position:static}}

/* 內容頁：底色維持 surface，上一則／下一則用 hairline 清單列（R4） */
body.page-detail .wl-article{min-height:70vh}