/*
 * lis-sheet.css — 最新消息列表 / 單則消息 / 輪播圖樣式
 * 首頁最新消息沿用舊站 .lnpd_* 樣式（template 內原有），這裡只補新元件。
 *
 * 部署：上傳到 /assets/lis-sheet/lis-sheet.css，頁面 <head> 內載入
 *       （tools/make_pages.py 會自動加上）。
 * 驗證：輪播圖比例與舊站一致（550:450）、左右箭頭與圓點可點；
 *       列表頁分類按鈕、翻頁正常；手機寬度不出現橫向捲軸。
 * 回復：移除 <link>，或換回舊版本檔案。
 */

:root {
  --lis-text: #7B5858;
  --lis-accent: #e96656;
  --lis-line: #cccccc;
  --lis-muted: #8a7a7a;
  --lis-chip-bg: #f4eeee;
}

/* ---------- 輪播圖 ---------- */
.lis-banner {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  overflow: hidden;
  background: #f2f2f2;
}
.lis-banner-track {
  position: relative;
  aspect-ratio: 550 / 450;
}
.lis-banner-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility .6s;
}
.lis-banner-slide.is-active { opacity: 1; visibility: visible; }
.lis-banner-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lis-banner-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px 12px 26px;                 /* 下方留位置給圓點 */
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 1em;
}
.lis-banner-prev,
.lis-banner-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 48px;
  border: 0;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 28px;
  line-height: 48px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .2s;
}
.lis-banner-prev { left: 0; }
.lis-banner-next { right: 0; }
.lis-banner:hover .lis-banner-prev,
.lis-banner:hover .lis-banner-next,
.lis-banner-prev:focus-visible,
.lis-banner-next:focus-visible { opacity: 1; }
.lis-banner-dots {
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.lis-banner-dots button {
  width: 10px; height: 10px;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
  cursor: pointer;
}
.lis-banner-dots button.is-active { background: #fff; }
@media (hover: none) {
  .lis-banner-prev, .lis-banner-next { opacity: .8; }
}
@media (prefers-reduced-motion: reduce) {
  .lis-banner-slide { transition: none; }
}

/* ---------- 首頁最新消息（補充） ---------- */
.lnpd_item_wrapper .lis-pinned .lnpd_item_title { font-weight: bold; }

/* ---------- 列表頁 ---------- */
.lis-news-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}
.lis-chip {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 14px;
  background: var(--lis-chip-bg);
  color: var(--lis-text);
  font-size: .95em;
  text-decoration: none;
}
.lis-chip:hover,
.lis-chip.is-active {
  background: var(--lis-accent);
  color: #fff;
  text-decoration: none;
}
.lis-news-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lis-news-list li {
  display: flex;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--lis-line);
  color: var(--lis-text);
}
.lis-news-list li.lis-pinned .lis-news-title { font-weight: bold; }
.lis-news-date {
  flex: 0 0 auto;
  color: var(--lis-muted);
  font-variant-numeric: tabular-nums;
}
.lis-news-title { color: var(--lis-text); min-width: 0; overflow-wrap: anywhere; }
.lis-news-title:hover { color: var(--lis-accent); }
@media (max-width: 600px) {
  .lis-news-list li { flex-direction: column; gap: 2px; }
}
.lis-pager {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 16px 0;
  color: var(--lis-muted);
}
.lis-archive { margin-top: 20px; color: var(--lis-muted); }
.lis-empty { color: var(--lis-muted); padding: 12px 0; }

/* ---------- 單則消息 ---------- */
.lis-news-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--lis-muted);
}
.lis-news-body { overflow-wrap: anywhere; }
.lis-news-body p { margin: 0 0 1em; line-height: 1.8; }
.lis-news-files {
  margin: 20px 0;
  padding: 12px 16px;
  border: 1px solid var(--lis-line);
  border-radius: 4px;
}
.lis-news-files h3 { margin: 0 0 6px; font-size: 1.1em; }
.lis-news-files ul { margin: 0; padding-left: 1.2em; }
.lis-news-files a { overflow-wrap: anywhere; }
.lis-back { margin-top: 24px; }