/* =============================================================================
   news-detail.css — 最新消息內頁
   結構：文章標頭（返回、分類、日期、標題）→ 主圖＋內文（含外部連結）→
   上一則／回列表／下一則。欄位依 includes/news-data.php，資料只有文件提供的項目。
   字級、按鈕、標籤、面板、分類徽章使用元件庫；本檔負責閱讀版面與間距。
   ============================================================================= */

.news-detail-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-detail-container {
  width: min(100% - var(--news-gutter), var(--ds-container-max));
  margin-inline: auto;
}

.news-detail-container--narrow { width: min(100% - var(--news-gutter), 46rem); }

/* 閱讀進度：固定在頁首下緣，寬度由 js/news-detail.js 依捲動比例設定 */
.news-detail-progress {
  position: fixed;
  top: var(--ds-navbar-height);
  left: 0;
  right: 0;
  z-index: 40;
  height: 2px;
  pointer-events: none;
}

.news-detail-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ds-color-primary), var(--ds-color-secondary));
  transform-origin: left center;
  transform: scaleX(var(--read-progress, 0));
}

/* =============================================================================
   1. 文章標頭
   ============================================================================= */
.news-article__head {
  position: relative;
  padding-block: calc(var(--ds-navbar-height) + clamp(var(--ds-space-2xl), 6vw, var(--ds-space-4xl))) var(--ds-space-2xl);
  isolation: isolate;
}

.news-article__head::before {
  content: "";
  position: absolute;
  inset: 0 0 -40%;
  z-index: -1;
  background:
    radial-gradient(closest-side, var(--ds-color-primary-wash), transparent 70%) 10% 20% / 60% 80% no-repeat,
    radial-gradient(closest-side, var(--ds-color-secondary-wash), transparent 70%) 90% 50% / 50% 70% no-repeat;
  pointer-events: none;
}

.news-article__head .news-detail-container > * {
  opacity: 0;
  transform: translateY(14px);
  animation: news-rise .9s var(--news-ease-out) forwards;
}

.news-article__head .news-detail-container > :nth-child(2) { animation-delay: .08s; }

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

.news-article__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ds-space-sm) var(--ds-space-lg);
}

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

/* 沿用元件庫分類徽章配色，取消其疊在圖片上的絕對定位 */
.news-article__badge { position: static; }

.news-article__date {
  color: var(--ds-color-text-muted);
  font-size: var(--ds-text-body-sm-size);
  font-weight: var(--ds-weight-medium);
  font-variant-numeric: tabular-nums;
}

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

/* 中文標題以標點分句：分句整段換行，避免在詞語中間斷開 */
.news-phrase { display: inline-block; }

/* =============================================================================
   2. 主圖＋內文
   橫式主圖放在內文上方；直式與方形主圖在桌機改為左圖右文，圖片固定在視窗內，
   避免直式圖片在閱讀欄中拉成一整面長圖。方向由 news_detail.php 依圖片尺寸判斷。
   ============================================================================= */
/* 標頭與圖文共用同一寬度：直式／方形圖 64rem 左圖右文，橫式圖 52rem 上圖下文（不放大低解析主圖） */
.news-article__frame { width: min(100% - var(--news-gutter), 64rem); }
.news-article--landscape .news-article__frame { width: min(100% - var(--news-gutter), 52rem); }

.news-article__title { max-width: 46rem; }

.news-article__layout { padding-bottom: var(--ds-space-3xl); }

.news-article__media { margin: 0; }

.news-article__media-frame {
  overflow: hidden;
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-surface-inner);
  box-shadow: var(--ds-shadow-panel);
}

.news-article__media-frame img { display: block; width: 100%; height: auto; }

.news-article__body { max-width: 46rem; }

.news-article--landscape .news-article__body { margin: clamp(var(--ds-space-2xl), 5vw, var(--ds-space-3xl)) auto 0; }

@media (width > 768px) {
  .news-article--portrait .news-article__layout,
  .news-article--square .news-article__layout {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    align-items: start;
    gap: clamp(var(--ds-space-2xl), 5vw, var(--ds-space-4xl));
  }

  .news-article--portrait .news-article__media,
  .news-article--square .news-article__media {
    position: sticky;
    top: calc(var(--ds-navbar-height) + var(--ds-space-xl));
  }
}

@media (width <= 768px) {
  .news-article--portrait .news-article__media-frame,
  .news-article--square .news-article__media-frame { max-width: 420px; }
  .news-article--portrait .news-article__body,
  .news-article--square .news-article__body { margin-top: var(--ds-space-2xl); }
}

.news-article__lead {
  padding-left: var(--ds-space-lg);
  border-left: 3px solid var(--ds-color-primary);
  line-height: 1.9;
}

.news-article__body > p + p {
  margin-top: var(--ds-space-lg);
  line-height: 1.95;
}

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

.news-article__missing { padding-bottom: var(--ds-space-5xl); }
.news-article__missing .ds-lead { margin-block: var(--ds-space-md) var(--ds-space-lg); }

/* =============================================================================
   4. 上一則／回列表／下一則
   ============================================================================= */
.news-detail-pager-section {
  padding-block: var(--ds-space-2xl) var(--ds-space-4xl);
  border-top: var(--ds-border-width) solid var(--ds-color-border);
  background: var(--ds-color-surface-inner);
}

.news-pager {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: var(--ds-space-md);
}

.news-pager__item {
  display: grid;
  gap: var(--ds-space-xs);
  padding: var(--ds-space-lg);
  border: var(--ds-border-width) solid var(--ds-color-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-card);
  transition: border-color var(--ds-duration-slow) var(--ds-ease), box-shadow var(--ds-duration-slow) var(--ds-ease), transform 500ms var(--news-ease-out);
}

.news-pager__item--next { text-align: right; }

a.news-pager__item:hover,
a.news-pager__item:focus-visible {
  border-color: var(--ds-color-primary-55);
  box-shadow: var(--ds-shadow-cyan);
  transform: translateY(-2px);
  outline: none;
}

.news-pager__item.is-disabled { opacity: .55; }

.news-pager__label {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-xxs);
  color: var(--ds-color-secondary);
  font-size: var(--ds-text-label-sm-size);
  font-weight: var(--ds-weight-semibold);
}

.news-pager__item--next .news-pager__label { justify-content: flex-end; }

.news-pager__label .ds-icon { transition: transform var(--ds-duration-slow) var(--ds-ease); }
a.news-pager__item--prev:hover .news-pager__label .ds-icon { transform: translateX(-4px); }

.news-pager__title {
  color: var(--ds-color-text-primary);
  font-weight: var(--ds-weight-semibold);
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.news-pager__all {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--ds-space-xxs);
  padding-inline: var(--ds-space-lg);
  border: var(--ds-border-width) solid var(--ds-color-border);
  border-radius: var(--ds-radius-lg);
  background: var(--ds-color-card);
  color: var(--ds-color-text-primary);
  font-size: var(--ds-text-label-sm-size);
  font-weight: var(--ds-weight-semibold);
  transition: border-color var(--ds-duration-slow) var(--ds-ease), color var(--ds-duration-slow) var(--ds-ease);
}

.news-pager__all:hover,
.news-pager__all:focus-visible { border-color: var(--ds-color-primary-55); color: var(--ds-color-secondary); outline: none; }

@media (width <= 768px) {
  .news-pager { grid-template-columns: 1fr; }
  .news-pager__item--next { text-align: left; }
  .news-pager__item--next .news-pager__label { justify-content: flex-start; }
  .news-pager__all { display: flex; justify-content: center; gap: var(--ds-space-xs); padding-block: var(--ds-space-md); }
}

@media (prefers-reduced-motion: reduce) {
  .news-article__head .news-detail-container > * { animation: none; opacity: 1; transform: none; }
  .news-pager__item,
  .news-pager__label .ds-icon { transition: none; }
  a.news-pager__item:hover { transform: none; }
}