/* ==========================================================================
   最新消息．列表頁與內頁共用
   --------------------------------------------------------------------------
   ⚠️ 只放本頁版面。**卡片內部的樣式在 `style.css` §11.21**（共用元件層）——
      首頁 ⑦ 的輪播與這一頁的格線用的是同一種卡。
      原本它寫在 `index.css`，但**列表頁沒載那支，卡片會整個沒樣式**，建這一頁時抽出來了。
      這個檔只放「列表的排列方式」與內頁版面。
   ========================================================================== */

/* 列表：三欄格線（首頁那一組是輪播，這裡是格線——同樣的卡、不同的排列） */
.news-list {
  margin-top: var(--sp-10);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-12) var(--sp-8);
}

/* 整張卡可點：連結包住圖與文字，點哪裡都會進內頁。
   ⚠️ 長輩不會只點標題那幾個字——整張卡是點擊目標才對。 */
.news-card__link-wrap { display: block; }
.news-card__link-wrap:hover .news-card__title { color: var(--c-berry); }
.news-card__link-wrap:focus-visible { box-shadow: var(--shadow-focus); }

.news__tabs { margin-top: var(--sp-8); justify-content: center; }

/* ==========================================================================
   內頁
   ========================================================================== */
/* R7-18：兩張手繪插圖（左上 events-leaf、右下 about-leaf）。
   ⚠️ `pointer-events: none` 不可省——否則會擋住內文的選取與點擊。
   🔴 **1023px 以下整組隱藏**：`.post` 限寬 720px，在手機已經佔滿整個 wrap，
      插圖沒有可以待的空白，會直接壓在字上。
   ⚠️ 用 `position: absolute` 定位在 section 上，所以 section 要 relative。 */
.post-section { position: relative; overflow: hidden; }

.post__leaf {
  position: absolute;
  height: auto;
  opacity: 0.75;
  pointer-events: none;
  z-index: 0;
}
/* 🔴 R8-12（PM 2026-08-19，Figma 截圖 72）：兩張插圖**往內文靠**——
   左上那張在左上、右下那張在右下，但都貼近內文的左右邊界。

   ⚠️ **不可用固定的 `left`／`right` 值**：內文是 720px 置中，容器最寬 1400px，
      而視窗從 1024 到 1920 都要成立 → 兩側留白從 152px 一路變到 592px。
      寫死任一個值，就只有那一個寬度是對的，其餘不是離太遠就是壓到字。
   **算法**：`50% - 內文半寬(360px) - 插圖寬 - 間距`
      → 插圖的內側邊緣永遠離內文邊緣固定的距離，與視窗寬無關。
   ⚠️ 間距取 `--sp-6`(24px)：實測 1024px 時容器左右各剩 152px，
      而插圖寬 80／100px ＋ 24px 間距 ＝ 104／124px，**仍在容器內、不會被裁**。
   ⚠️ 1023px 以下維持隱藏（R7-18 的既有處理，見下方 media query）。 */
/* 🔴 R9-09（PM 2026-08-19）：兩張的**垂直位置**再調一次，水平**離內文遠一點**。
   R8-12 把它們往內文靠了，PM 看過畫面後要求：
     ・左上：往下移到「約照片高度的一半」，並往左移一點（離內文遠一些）
     ・右下：往上移到「約目前文字段落中間的高度」，並往右移一點

   **垂直（量出來的，`.post` 固定 720px 置中，所以四個寬度完全相同）**：
     照片 `.post__media` 距 section 頂 **148～628**（高 480）→ 中線 **388**
       → 插圖高 107.5，中心要落在 388 → `top` ＝ 388 − 54 ＝ 334 ≈ **21rem**（實測中心 390，差 2px）
     內文 `.post__body` 距 section 頂 **668～910**（高 242）→ 中線 **789**
       → 插圖高 188，中心要落在 789 → `top` ＝ 789 − 94 ＝ 695 ≈ **43.5rem**（實測中心 790，差 1px）
   ⚠️ 右下那張從 `bottom` 改成 `top`：**`bottom` 是從 section 底端起算的**，
      而 section 的高度隨文章長短變 → 同一個 bottom 值在不同文章會落在不同的段落位置。
      改用 `top` 之後它只跟著「照片與內文的起點」走，那才是規格講的那個高度。
   ⚠️ 這兩個值綁在「標題一行」的版面上；標題兩行時整體下移約一行。
      **那是可接受的**——規格寫的是「約」，而它是裝飾不是對位元素。

   **水平：間距 `--sp-6`(24) → `--sp-10`(40)，但外面包一層 `max()` 收斂。**
   🔴 **不可只把 24 改成 40 就算了**：1024px 時容器右側只剩 144.5px，
      而圖寬 100 ＋ 40 ＝ 140 → **離視窗只剩 4.5px**，看起來就是貼死在邊上。
      `max(var(--container-pad), …)` 讓它在窄螢幕自動退回、保證離視窗至少一份容器內距。
      （與 R9-10／11 的 `--decor-bleed` 是同一個思路：**位移量不可超過現有的留白**。）
   ⚠️ 1023px 以下維持整組隱藏（R7-18 的既有處理，見下方 media query）。 */
.post__leaf--tl {
  /* PM 2026-09-01：往左再挪一點 → 與內文的間隙 `--sp-10`(40) 改為 `--sp-12`(48)。
     ⚠️ 式子裡的 `5rem` 必須等於下面的 `width`——它是「把自己整個推到內文左緣外」的位移量，
        改寬度就要同步改這裡，否則間隙會跟著跑掉（而且不會報錯）。 */
  left: max(var(--container-pad), calc(50% - 22.5rem - 5rem - var(--sp-12)));
  top: 21rem;
  width: 5rem;
}
.post__leaf--br {
  /* PM 2026-09-01：尺寸調小並往右挪一點。
     寬 `6.25rem`(100) → `5.5rem`(88)、間隙 `--sp-10`(40) → `--sp-12`(48)。
     ⚠️ 式子裡的 `5.5rem` 與下面的 `width` 是同一個值的兩份，**改一邊要改兩邊**。 */
  right: max(var(--container-pad), calc(50% - 22.5rem - 5.5rem - var(--sp-12)));
  top: 43.5rem;
  width: 5.5rem;
}

/* 內文要壓在插圖之上（插圖是 z-index: 0） */
.post-section > .wrap { position: relative; z-index: 1; }

@media (max-width: 1023px) {
  .post__leaf { display: none; }
}


.post { max-width: 45rem; margin-inline: auto; }

/* 🔴 R8-14：「分享給家人：」＋ 複製連結，靠左對齊**內文**（不是容器）。
   ⚠️ 因此外框沿用 `.post` 的 720px 置中，裡面再靠左——
      直接對容器 `text-align: left` 會讓它跑到離內文 300px 遠的地方。
   ⚠️ 標題與按鈕同一列，窄螢幕才折成兩行（`flex-wrap`）——PM 說閱讀習慣是從左到右，
      上下兩行會讓那顆按鈕再往下掉一階。 */
.post__share {
  max-width: 45rem;
  margin: var(--sp-10) auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border-soft);
}
.post__share-label {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* R8-13：分類標籤與日期同一列。
   ⚠️ 併進原本那條 `.post__meta`，**不要另外開一條**——同一個選擇器寫兩次
      就是隱形分叉，之後改字色的人只會找到其中一條。 */
.post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.post__media {
  margin-top: var(--sp-6);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: var(--bg-alt);
}
.post__media img { width: 100%; height: 100%; object-fit: cover; }
/* 骨架在圖真的載入之後才撤（見 news-detail.js）——先撤版面會塌一下再撐開 */
.post__media .skeleton { width: 100%; height: 100%; }

.post__body { margin-top: var(--sp-10); }

/* 上下篇：走完一篇之後給下一步，不要讓人只能按上一頁

   🔴 R10-16（PM 2026-08-24）：**下方分隔線的上下間距改成與上方分隔線同一組值。**
      原本 `margin-top: var(--sp-16)`(64) ＋ `padding-top: var(--sp-8)`(32)
      → 改成 `var(--sp-10)`(40) ＋ `var(--sp-6)`(24)，＝ `.post__share` 那條線的 40／24。
   **為什麼**：同一篇文章底下連著兩條一模一樣的細線，上面那條是 40／24、
      下面那條是 64／32，**看起來像下半截被推開了一階**，而不是一組節奏。
   ⚠️ **間距由容器提供**（第 7 節第 2 條）：這裡改的是 `.post__nav` 自己既有的
      margin／padding 宣告，**沒有新增任何子元件的 margin**——
      `.post-section > .wrap` 是共用元件層的東西，本頁不可動，所以用不了 `gap`。
   ⚠️ 量過了：上方那 40px 確實由 `.post__share` 的 `margin-top` 提供，
      不是 `<p>`／`<blockquote>` 的預設 margin 穿出來的（9.23 那個坑）——
      `.post__body` 最後一個 `<p>` 的 `margin-bottom` 實測為 0。 */
.post__nav {
  max-width: 45rem;
  /* 🔴 PM 2026-09-01：`--sp-10`(40) → `--sp-6`(24)。
     **修的是「分享列被兩條線夾住時上下不對稱」**：上方留白由 `.post__share` 的
     `padding-top`(24) 提供，下方留白則是本條的 `margin-top`——原本 40，比上面多 16px，
     看起來像分享列被往上推。改成 24 之後，「線→分享列→線→上下篇」整段的節奏
     一律是 24，不再有一階落差。
     ⚠️ R10-16 當時把兩條線統一成 40／24，指的是「每條線各自的 margin/padding」；
        這一次看的是**分享列自己的上下留白**，兩者不衝突——線本身仍是同一組值。 */
  margin: var(--sp-6) auto 0;
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border-soft);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
}
.post__nav-item {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-heading);
  line-height: var(--lh-body);
}
.post__nav-item:hover { color: var(--c-berry); }
.post__nav-item--next { text-align: right; }
.post__nav-label {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* 🔴 R10-17（PM 2026-08-24）：標題那一行 ＝ 箭頭 ＋ 標題。
   **原本**：標題是 `<a>` 裡的裸文字，沒有箭頭。**改成**：包一層 flex。
   ⚠️ **間距走 `gap` 不走 margin**（第 7 節第 2 條）——箭頭與文字的距離由這個容器提供，
      `.btn__arrow` 自己一條 margin 都沒有。
   ⚠️ `align-items: center`：與站上既有的圖示＋文字寫法一致
      （`.btn`／`.site-nav__link--icon` 都是 flex ＋ center ＋ gap）。
      標題兩行時箭頭落在兩行的中間——**那是刻意的**，它指的是「這一則」整體，不是第一行。
   ⚠️ 標題那個 `<span>` 不必設 `min-width: 0`：中文的 min-content ＝ 一個字，
      本來就縮得下去，實測 320–1440 都不溢出。 */
.post__nav-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
/* 下一則整組靠右——`text-align: right` 只管文字，flex 的主軸要另外講 */
.post__nav-item--next .post__nav-title { justify-content: flex-end; }

/* 箭頭**不另外指定顏色**，讓它跟著連結的 `currentColor` 走
   → hover 變莓紅時箭頭一起變，不必再寫一條 hover 覆蓋。
   位移方向各自朝外，與 `.btn:hover .btn__arrow` 的語彙一致
   （`.btn__arrow` 已帶 `transition: transform`，這裡只給終點值）。 */
.post__nav-item--prev:hover .post__nav-arrow { transform: translateX(-0.25rem); }
.post__nav-item--next:hover .post__nav-arrow { transform: translateX(0.25rem); }

/* ==========================================================================
   響應式
   ⚠️ 斷點沿用首頁那一組（900／599），全站的格線節奏才一致。
   ========================================================================== */
@media (max-width: 899px) {
  .news-list { grid-template-columns: repeat(2, 1fr); gap: var(--sp-10) var(--sp-6); }
}

@media (max-width: 599px) {
  .news-list { grid-template-columns: 1fr; }
  /* 上下篇在窄螢幕堆疊，右邊那一則也改成靠左——
     一欄之下靠右會讓兩則的起點不一樣，讀起來像沒對齊 */
  .post__nav { grid-template-columns: 1fr; gap: var(--sp-5); }
  .post__nav-item--next { text-align: left; }
  /* R10-17：一欄之下「下一則」也改成靠左，箭頭那一列的主軸要跟著翻回去，
     否則文字靠左、箭頭卻被推到最右邊，中間空一大段。 */
  .post__nav-item--next .post__nav-title { justify-content: flex-start; }
}