/* =============================================================================
   news.css — 最新消息列表頁
   結構：Hero（麵包屑、眉標、標題、導言）→ 篩選工具列 → 消息卡片網格 → 分頁。
   卡片、頁籤、欄位、分頁、徽章一律使用元件庫（ds-card、ds-pill-tabs、ds-field、
   ds-pagination、ds-card__media-badge），本檔只負責版面、間距、圖片構圖與進場動態。
   每頁 9 則（3 × 3）由 js/news.js 控制。
   ============================================================================= */

.news-page {
  --ds-font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --news-gutter: clamp(32px, 8vw, 64px);
  --news-ease-out: cubic-bezier(.16, 1, .3, 1);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--ds-font-sans);
  background: var(--ds-color-page);
}

.news-container {
  width: min(100% - var(--news-gutter), var(--ds-container-max));
  margin-inline: auto;
}

/* =============================================================================
   1. Hero — 淺色滿版圖片，文字疊在左側留白處
   ============================================================================= */
.news-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(380px, 52vh, 520px);
  padding-block: calc(var(--ds-navbar-height) + var(--ds-space-2xl)) var(--ds-space-3xl);
  overflow: hidden;
  isolation: isolate;
  background: var(--ds-color-surface-inner);
}

.news-hero__media { position: absolute; inset: 0; z-index: -1; margin: 0; }

.news-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--ds-color-page) 0%, transparent 18%),
    linear-gradient(90deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .82) 36%, rgba(255, 255, 255, .15) 62%, transparent 78%);
}

.news-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 40%;
  transform: scale(1.06);
  animation: news-hero-settle 2.4s var(--news-ease-out) forwards;
}

@keyframes news-hero-settle { to { transform: scale(1); } }

.news-hero__inner > * {
  max-width: 40rem;
  opacity: 0;
  transform: translateY(16px);
  animation: news-rise .9s var(--news-ease-out) forwards;
}

.news-hero__inner > :nth-child(2) { animation-delay: .08s; }
.news-hero__inner > :nth-child(3) { animation-delay: .16s; }

@keyframes news-rise { to { opacity: 1; transform: none; } }

.news-hero__crumbs {
  display: flex;
  align-items: center;
  gap: var(--ds-space-xs);
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-body-sm-size);
  line-height: var(--ds-text-body-sm-line);
}

.news-hero__crumbs a { transition: color var(--ds-duration-fast) var(--ds-ease); }
.news-hero__crumbs a:hover { color: var(--ds-color-text-primary); }
.news-hero__crumbs [aria-current] { color: var(--ds-color-text-primary); font-weight: var(--ds-weight-medium); }

.news-hero__flag { margin-top: var(--ds-space-xl); }
.news-hero__title { margin-top: var(--ds-space-md); }

@media (width <= 768px) {
  .news-hero { min-height: 340px; padding-bottom: var(--ds-space-2xl); }
  .news-hero__media::after {
    background:
      linear-gradient(to top, var(--ds-color-page) 0%, transparent 18%),
      linear-gradient(180deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .88) 50%, rgba(255, 255, 255, .92) 100%);
  }
}

/* =============================================================================
   2. 篩選工具列 — 捲動時固定在頁首下方
   ============================================================================= */
.news-toolbar {
  position: sticky;
  top: var(--ds-navbar-height);
  z-index: 10;
  padding-block: var(--ds-space-md);
  background: color-mix(in srgb, var(--ds-color-page) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: var(--ds-border-width) solid transparent;
  transition: border-color var(--ds-duration-slow) var(--ds-ease), box-shadow var(--ds-duration-slow) var(--ds-ease);
}

/* js/news.js 在工具列貼齊頁首時加上 is-stuck */
.news-toolbar.is-stuck {
  border-bottom-color: var(--ds-color-border);
  box-shadow: var(--ds-shadow-ambient);
}

.news-toolbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-md) var(--ds-space-xl);
  flex-wrap: wrap;
}

.news-toolbar__controls {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm);
}

.news-toolbar__search { width: min(260px, 100%); }

.news-sort .ds-field__control { position: relative; }

.news-sort select {
  padding-right: 40px;
  appearance: none;
  cursor: pointer;
}

.news-sort__caret {
  position: absolute;
  right: 12px;
  top: 50%;
  color: var(--ds-color-text-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

@media (width <= 768px) {
  .news-toolbar { position: static; }
  .news-toolbar__inner { flex-direction: column; align-items: stretch; }
  .news-toolbar__controls { width: 100%; }
  .news-toolbar__search { flex: 1; width: auto; }
}

/* =============================================================================
   3. 消息卡片網格
   ============================================================================= */
.news-listing { padding-block: var(--ds-space-2xl) var(--ds-space-4xl); }

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--ds-space-lg), 2.4vw, var(--ds-space-xl));
}

.news-card {
  position: relative;
  transition: box-shadow var(--ds-duration-slow) var(--ds-ease), transform 500ms var(--news-ease-out);
}

/* 維持 1px 邊框避免元件庫 hover 加粗邊框造成內容位移 */
.news-card:hover,
.news-card:focus-within {
  border-width: var(--ds-border-width);
  border-color: var(--ds-color-primary-55);
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -24px rgba(30, 14, 98, .28);
}

/* 元件庫 ds-card__media 預設固定 128px 高，消息縮圖改依比例 */
.news-card__media {
  position: relative;
  height: auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ds-color-surface-inner);
}

.news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--news-ease-out);
}

.news-card:hover .news-card__media img { transform: scale(1.05); }

.news-card__body { gap: var(--ds-space-md); }

.news-card__date { font-variant-numeric: tabular-nums; }

.news-card__title {
  display: -webkit-box;
  margin-top: var(--ds-space-xs);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* 標題連結延伸到整張卡片，整張卡片可點 */
.news-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.news-card__link:focus-visible { outline: none; }
.news-card:has(.news-card__link:focus-visible) { box-shadow: var(--ds-shadow-focus); }

.news-card__excerpt {
  display: -webkit-box;
  margin-top: var(--ds-space-xs);
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.news-card__more .ds-icon { transition: transform var(--ds-duration-slow) var(--ds-ease); }
.news-card:hover .news-card__more .ds-icon { transform: translateX(4px); }

/* 切換分類、搜尋或分頁時，js/news.js 為顯示中的卡片加上 is-entering 並設定 --i 錯落進場 */
.news-card.is-entering { animation: news-card-in .6s var(--news-ease-out) both; animation-delay: calc(var(--i, 0) * 50ms); }

@keyframes news-card-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

.news-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-sm);
  padding: var(--ds-space-4xl) var(--ds-space-lg);
  border: var(--ds-border-width) dashed var(--ds-color-border);
  border-radius: var(--ds-radius-lg);
  color: var(--ds-color-text-secondary);
  text-align: center;
}

.news-empty .ds-icon { font-size: 32px; color: var(--ds-color-text-muted); }

.news-pagination { margin-top: var(--ds-space-2xl); }

/* 資訊文字由 js/news.js 以行內文字組成，取消元件庫的 flex 間距避免字距被拉開 */
.news-pagination .ds-pagination__info { display: block; }

@media (width <= 1024px) {
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (width <= 768px) {
  .news-grid { grid-template-columns: 1fr; }
  .news-pagination { flex-direction: column; gap: var(--ds-space-md); }
}

@media (prefers-reduced-motion: reduce) {
  .news-hero__image,
  .news-hero__inner > * { animation: none; opacity: 1; transform: none; }
  .news-card,
  .news-card__media img,
  .news-card__more .ds-icon { transition: none; }
  .news-card:hover,
  .news-card:focus-within { transform: none; }
  .news-card.is-entering { animation: none; }
}