/* ============================================================
   news-extra.css — PHP 版新增樣式(承接 news.css 的設計語彙)
   news.css 為交付版型,請勿改動;PHP 化後新增的元件樣式集中在本檔。
   ============================================================ */

/* 側欄快速分類改為 GET 表單,消除 form 預設間距 */
form.category-grid { margin: 0; }

/* 無封面圖的卡片:保留版面比例,不放假圖 */
.article-card.no-photo > a,
.brief-card.no-photo,
.featured-card.no-photo { background: var(--paper); }
.article-card.no-photo > a { padding-top: 14px; }
.brief-card.no-photo .brief-copy { padding-left: 14px; }
.featured-card.no-photo .featured-copy { position: static; background: none; color: var(--ink); padding: 20px; }
.featured-card.no-photo .featured-copy .read-more { color: var(--ocean); }
.featured-card.no-photo .featured-tag { position: static; display: inline-block; margin: 14px 0 0 14px; }

/* 麵包屑 */
.crumb { font-size: 12px; color: var(--muted); margin: 4px 0 16px; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--ocean); }
.crumb span { margin: 0 4px; }

/* ---------- 文章內頁 ---------- */
.news-article { max-width: 760px; }
.news-article .meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.news-article .meta .region { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.news-article .meta .region .lucide { width: 13px; height: 13px; }
.news-article h1 { font: 500 31px/1.45 var(--serif); margin: 0 0 18px; letter-spacing: .01em; }

.article-cover { margin: 0 0 26px; }
.article-cover img { width: 100%; height: auto; display: block; }
.article-cover figcaption { font-size: 12px; color: var(--muted); margin-top: 7px; }

.article-body { font-size: 16px; line-height: 2; }
.article-body > :first-child { margin-top: 0; }
.article-body p { margin: 0 0 18px; }
.article-body h2 { font: 500 22px/1.5 var(--serif); margin: 34px 0 12px; padding-left: 13px; border-left: 3px solid var(--ocean); }
.article-body h3 { font: 500 18px/1.5 var(--serif); margin: 26px 0 10px; color: var(--ocean); }
.article-body ul, .article-body ol { margin: 0 0 18px; padding-left: 24px; }
.article-body li { margin: 6px 0; }
.article-body a { color: var(--ocean); text-decoration: underline; }
.article-body img { max-width: 100%; height: auto; margin: 8px 0; }
.article-body figure { margin: 18px 0; }
.article-body figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; }
.article-body blockquote { margin: 18px 0; padding: 10px 16px; border-left: 3px solid var(--gold); background: var(--paper); }
.article-body table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: 8px 11px; text-align: left; vertical-align: top; }
.article-body th { background: var(--paper); white-space: nowrap; }

.article-source .source-list { margin: 6px 0 0; padding-left: 20px; }
.article-source .source-list a { display: inline; margin: 0; }
.article-source .byline { margin: 14px 0 4px; }
.article-source .note { margin: 0; }

.related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 34px; }
.back-link { margin: 28px 0 0; font-size: 13px; }
.back-link a { display: inline-flex; align-items: center; gap: 7px; color: var(--ocean); }
.back-link .lucide { width: 15px; height: 15px; }

/* ---------- 分頁 ---------- */
.pager { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.pager a, .pager span {
  display: inline-block; min-width: 36px; padding: 6px 11px; text-align: center;
  border: 1px solid var(--line); font-size: 13px; background: #fff; color: var(--ink);
}
.pager a:hover { border-color: #91aaa0; background: #e8f0ec; }
.pager span[aria-current] { background: var(--ocean); color: #fff; border-color: var(--ocean); }

@media (max-width: 960px) {
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .news-article h1 { font-size: 25px; }
  .article-body { font-size: 15px; }
  .related-grid { grid-template-columns: 1fr; }
}

/* 無 JavaScript 時仍可完整閱讀:內容皆由 PHP 輸出,此處僅隱藏純裝飾的圖示位 */
.no-js .lucide { display: none; }