/* ═══════════════════════════════════════════════════════════════════════════
   文章推送到 WordPress 的內容樣式(WP 外掛載入;佈景主題出頁首尾,這份只管內容)。

   ⚠ 選擇器 scope 是 `.sunny-article`(article_wp_content.html.j2 的外層 div)——
   **不是** `.sunny-tour`,兩邊片段互不干擾。片段裡的類名清單:
   sunny-article / art-intro / art-h3 / art-fig,其餘(h2、h3、table、ul…)是裸標籤。

   設計對齊 article-page.css(自有網域文章頁):紅三角 H2、紅直線 H3。
   顏色不依賴外部變數(佈景主題沒有我們的 --red),fallback 直接寫死品牌色;
   若該站外掛帶 sunny-tour-theme.css(定義 --red 等),var() 會自動吃到站台配色。
   ═══════════════════════════════════════════════════════════════════════════ */

.sunny-article { line-height: 1.95; font-size: 1.02rem; }
.sunny-article > * + * { margin-top: 1.1em; }

/* 備援標題/封面:預設隱藏,外掛 article-wp.js 偵測「頁上已有標題/封面沒」才亮出
   (佈景不印標題也沒自組 JS 的站,如 germany/nepal —— 2026-09-03 全站實測) */
.sunny-article .art-fallback-head, .sunny-article .art-fallback-cover { display: none; }
.sunny-article .art-fallback-head.art-show { display: block; }
.sunny-article .art-fallback-cover.art-show { display: block; }
.sunny-article .art-title {
  font-size: 1.72rem; font-weight: 900; color: #16212b;
  line-height: 1.45; letter-spacing: .5px; margin: 0 0 .3em;
}
.sunny-article .art-meta { font-size: .85rem; color: #7a8691; margin: 0 0 .8em; }

/* 導言 */
.sunny-article .art-intro { font-size: 1.05rem; color: #3c4854; }

/* H2:紅三角(對齊自有網域文章頁) */
.sunny-article h2 {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.28rem; font-weight: 900; letter-spacing: 1px;
  color: var(--red, #a4232b);
  margin: 2.2em 0 .7em; line-height: 1.4;
}
.sunny-article h2::before {
  content: ""; flex: none; width: 0; height: 0;
  border-left: 11px solid var(--red, #a4232b);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}

/* H3:紅直線(compile_blocks 出 art-h3;FAQ 的 h3 是裸標籤,一起蓋) */
.sunny-article h3, .sunny-article .art-h3 {
  font-size: 1.08rem; font-weight: 900; color: #16212b;
  border-left: 4px solid var(--red, #a4232b);
  padding-left: 12px; margin: 1.6em 0 .5em; line-height: 1.5;
}

/* 圖片:內文圖預設裁成寬幅 1.91:1 顯示(使用者 2026-09-03 拍板全部統一;object-fit 蓋掉直式大圖撐爆版面;
   使用者 2026-09-03「放圖可以預設一個比例嗎」—— 業務在編輯器另裁的仍以裁的為準,
   這只是顯示層的預設,原圖不動) */
.sunny-article figure, .sunny-article .art-fig { margin: 1.4em 0; }
.sunny-article img { max-width: 100%; height: auto; border-radius: 12px; display: block; }
.sunny-article figure img, .sunny-article .art-fig img {
  width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover;
}
.sunny-article figcaption { font-size: .85rem; color: #7a8691; margin-top: 6px; }

/* 清單 */
.sunny-article ul, .sunny-article ol { padding-left: 1.4em; }
.sunny-article li { margin-bottom: .45em; }
.sunny-article li::marker { color: var(--red, #a4232b); }

/* 表格(產線會送:月份 / 均溫 那種)。⚠ display:block 不能放在桌機:
   表格會失去 table 版面、縮成內容寬,跟佈景的表格卡片樣式打架(2026-09-03 法國站實案:
   表頭擠在左邊、右邊一大塊空白)→ 桌機維持正常表格排版,手機才轉塊狀橫向捲。 */
.sunny-article table {
  border-collapse: collapse; width: 100%; margin: 1.4em 0; font-size: .95rem;
}
@media (max-width: 768px) {
  /* ⚠ 不用 display:block:表頭/表身會被拆成各自排版,欄寬對不齊(2026-09-04 土耳其站實踩)。
     手機改「允許換行」讓表格塞進版面 —— 對齊保持、絕大多數產線表格(2~3 欄)剛好。 */
  .sunny-article th, .sunny-article td { white-space: normal; }
}
.sunny-article th, .sunny-article td {
  border: 1px solid #ded9d1; padding: 9px 13px; text-align: left; white-space: nowrap;
}
.sunny-article thead th, .sunny-article tr:first-child th {
  background: #f6f4f0; font-weight: 900;
}

/* 引用 / 程式碼(產線偶爾會送) */
.sunny-article blockquote {
  border-left: 4px solid #ded9d1; margin: 1.4em 0; padding: .3em 0 .3em 16px; color: #4c5966;
}

/* highlight(編輯器打 ==文字==) */
.sunny-article mark { background: #ffe89a; color: inherit; padding: 0 3px; border-radius: 3px; }

/* 連結:品牌紅、hover 才畫線(對齊文章頁) */
.sunny-article a { color: var(--red, #a4232b); text-decoration: none; font-weight: 700; }
.sunny-article a:hover { text-decoration: underline; }