/* =============================================================
   BTSE Blog — 內頁排版 + 右欄
   -------------------------------------------------------------
   放置位置：子主題 /assets/btse-blog.css
   由 functions.php 的 btse_blog_assets() 只在文章內頁載入。

   品牌色取自站上實測值：
     CTA 藍  #015FE5  (rgb 1,95,229)   — Subscribe 按鈕
     深色    #222222                    — 深底區塊
     標題    #333333                    — 現行 H1
   註：現行內文連結是 #2EA3F2，那是 Divi 預設強調色，
       白底對比僅約 2.6:1，未達 WCAG AA。此處統一改為 #015FE5（約 5.6:1）。
   ============================================================= */

:root {
  --btse-blue:        #015FE5;
  --btse-blue-dark:   #0149B8;
  --btse-blue-wash:   #EEF4FF;
  --btse-ink:         #1F2328;
  --btse-ink-soft:    #5A6472;
  --btse-line:        #E4E7EC;
  --btse-surface:     #FFFFFF;
  --btse-surface-alt: #F7F9FC;
  --btse-radius-btn:  4px;   /* 對齊現行 Subscribe 按鈕 */
  --btse-radius-card: 10px;
  --btse-sticky-top:  96px;  /* 吸頂 header 高度 + 餘裕 */
  --btse-font:        BTSE-Regular, inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --btse-font-med:    BTSE_Medium, inter, -apple-system, sans-serif;
  --btse-font-bold:   BTSE_BOLD, inter, -apple-system, sans-serif;
}


/* =============================================================
   PART 0 — 根因修正（最重要，優先套用）
   -------------------------------------------------------------
   實測發現 Divi 的 Theme Customizer 設了一條全站規則：

     h1,h2,h3,h4,h5,h6 { line-height: 0.8em }
     （來源：et-divi-customizer-global.min.css）

   這一條就解釋了所有「密密麻麻」的現象：
     · 文章頁 H2：24px 字 / 19.2px 行高
     · 列表頁卡片標題：16px 字 / 12.8px 行高  ← 行高比字還小 3.2px，字會疊
   只有 H1 因為另有 .et_pb_text_0_tb_body h1 { line-height:1.3em } 而倖免。

   站上其實已經有人嘗試修過：
     body.archive #left-area .et_pb_post h2 { line-height: 1.2em }
   但它限定在 #left-area，而 Divi Theme Builder 的模板不產生 #left-area，
   所以這條override 從來沒生效。

   >>> 最乾淨的做法：直接改 Divi → Theme Customizer → Typography →
       Heading Line Height，從 0.8 改成 1.3。改一個值，全站一次修好。
       若不想動 Customizer，用下面這段 CSS 覆蓋。
   ============================================================= */

#main-content h1, #main-content h2, #main-content h3,
#main-content h4, #main-content h5, #main-content h6 {
  line-height: 1.3;
}

/* ---- 列表頁／Hub 卡片標題 ---- */
#main-content .et_pb_post .entry-title,
#main-content h2.entry-title {
  font-size: 17px;
  line-height: 1.35;
  font-weight: 600;
  color: #0B0D0E;
  margin: 0 0 8px;
  padding-bottom: 0;
  /* 夾到 3 行，卡片高度才會一致。
     實測該列表頁標題長度為 103/99/98/86/83/83/77/75/68 字元，
     會折成 4–6 行，卡片高度參差不齊。 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- 卡片的 meta 與摘要要有層級差異 ----
   現況兩者都是 14px / #666，完全沒有對比 */
#main-content .et_pb_post .post-meta {
  font-size: 12.5px;
  line-height: 1.5;
  color: #8A94A6;
  margin: 0 0 8px;
}
#main-content .et_pb_post .post-content p,
#main-content .et_pb_post .post-content-inner p {
  font-size: 14px;
  line-height: 1.6;
  color: #5A6472;
}

/* =============================================================
   PART 1 — 內文排版修正
   （與附錄 A §2 相同，收在同一支檔案方便維護）
   ============================================================= */

.et_pb_post_content { --btse-measure: 68ch; }

.et_pb_post_content p {
  font-size: 17px;
  line-height: 1.75;
  color: var(--btse-ink);
  margin: 0 0 1.5em;
  padding-bottom: 0;              /* 覆寫 Divi 的 p{padding-bottom:1em} */
  max-width: var(--btse-measure);
}

.et_pb_post_content h2 {
  font-family: var(--btse-font-med);
  font-size: 28px;
  line-height: 1.3;               /* 原 0.80 ← bug */
  font-weight: 600;
  color: #0B0D0E;
  margin: 2.5em 0 0.75em;         /* 原 margin-top:0 ← 主因 */
  padding-bottom: 0;
  scroll-margin-top: var(--btse-sticky-top);
}

.et_pb_post_content h3 {
  font-family: var(--btse-font-med);
  font-size: 21px;
  line-height: 1.35;
  font-weight: 600;
  color: #0B0D0E;
  margin: 1.75em 0 0.5em;
  padding-bottom: 0;
  scroll-margin-top: var(--btse-sticky-top);
}

.et_pb_post_content ul,
.et_pb_post_content ol {
  font-size: 17px;
  margin: 0 0 1.5em;
  padding-left: 1.5em;
  max-width: var(--btse-measure);
}
.et_pb_post_content li {
  line-height: 1.75;              /* 原 1.0 ← bug */
  margin-bottom: 0.5em;
  color: var(--btse-ink);
}
.et_pb_post_content li:last-child { margin-bottom: 0; }

.et_pb_post_content h2 + p,  .et_pb_post_content h3 + p,
.et_pb_post_content h2 + ul, .et_pb_post_content h3 + ul,
.et_pb_post_content h2 + ol, .et_pb_post_content h3 + ol { margin-top: 0; }

.et_pb_post_content p a,
.et_pb_post_content li a {
  color: var(--btse-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.et_pb_post_content p a:hover,
.et_pb_post_content li a:hover { color: var(--btse-blue-dark); }

.et_pb_post_content img   { margin: 2em 0; border-radius: 8px; }
.et_pb_post_content table { margin: 2em 0; font-size: 15px; }
.et_pb_post_content blockquote {
  margin: 2em 0;
  padding: 0.25em 0 0.25em 1.25em;
  border-left: 3px solid var(--btse-blue);
  font-size: 18px;
  line-height: 1.6;
}

/* 目錄跳轉的平滑捲動（尊重使用者的減少動態設定） */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}


/* =============================================================
   PART 2 — 版位比例
   現況 3/4 + 1/4 在 1024px 下右欄只有 186px，目錄塞不進去。
   改為 68 / 32，右欄下限 300px。
   ============================================================= */

@media (min-width: 1024px) {
  .et_pb_row .et_pb_column.et_pb_column_3_4 { width: 66% !important; margin-right: 2% !important; }
  .et_pb_row .et_pb_column.et_pb_column_1_4 { width: 32% !important; min-width: 300px; }
}

/* sticky 失效的兩個原因，兩個都要處理：

   (1) Divi 的 row／section 常帶 overflow:hidden，會讓所有子孫元素的
       position:sticky 整個失效。
   (2) 更隱蔽的一個：sticky 元素只能在「父元素的 box」範圍內移動。
       右欄如果只有內容高度（例如 700px），而文章有 3,600px，
       那 sticky 捲到 700px 就會停住然後被推走 —— 看起來就像沒生效。
       必須讓右欄被拉伸到與內文欄同高。
   實測註記：不要用 height:100% 來拉伸。對 auto 高度的 row 來說
   百分比高度是 indefinite，會無聲地取消 stretch。要用 align-self:stretch。 */
.et_pb_section, .et_pb_row, .et_pb_column { overflow: visible !important; }

@media (min-width: 1024px) {
  /* 讓 row 以 flex 管理欄位，右欄才會被拉伸到整列高度 */
  .et_pb_row { display: flex !important; align-items: stretch !important; }
  .et_pb_row > .et_pb_column { align-self: stretch !important; float: none !important; }
}


/* =============================================================
   PART 3 — 右欄容器與 sticky
   ============================================================= */

#btse-blog-sidebar,
.btse-sidebar {
  font-family: var(--btse-font);
}

@media (min-width: 1024px) {
  .btse-sidebar__inner {
    position: sticky;
    top: var(--btse-sticky-top);
    max-height: calc(100vh - var(--btse-sticky-top) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--btse-line) transparent;
    padding-right: 4px;
  }
  .btse-sidebar__inner::-webkit-scrollbar       { width: 6px; }
  .btse-sidebar__inner::-webkit-scrollbar-thumb { background: var(--btse-line); border-radius: 3px; }
}

@media (max-width: 1023px) {
  .btse-sidebar__inner {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

.btse-widget { margin: 0 0 20px; }
.btse-widget:last-child { margin-bottom: 0; }

.btse-widget__title {
  font-family: var(--btse-font-med);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--btse-ink-soft);
  margin: 0 0 10px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--btse-line);
}


/* =============================================================
   PART 4 — 卡片（註冊卡 / 交易 CTA / App）
   ============================================================= */

.btse-card {
  background: var(--btse-surface);
  border: 1px solid var(--btse-line);
  border-radius: var(--btse-radius-card);
  overflow: hidden;
}

.btse-card__media { display: block; line-height: 0; }
.btse-card__media img {
  width: 100%; height: auto; display: block;
  margin: 0;                 /* 覆寫 PART 1 的 img margin */
  border-radius: 0;
}

.btse-card__content { padding: 16px; }

.btse-card__eyebrow {
  font-family: var(--btse-font-med);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--btse-blue);
  margin-bottom: 6px;
}

.btse-card__heading {
  font-family: var(--btse-font-bold);
  font-size: 19px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--btse-ink);
  margin: 0 0 8px;
  padding: 0;
}

.btse-card__body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--btse-ink-soft);
  margin: 0 0 14px;
  padding: 0;
  max-width: none;           /* 覆寫 PART 1 的 measure */
}

.btse-card__foot {
  font-size: 11px;
  line-height: 1.45;
  color: #8A94A6;
  margin: 10px 0 0;
  padding: 0;
  max-width: none;
}

/* 註冊卡：淡藍底強化層級 */
.btse-card--signup { background: var(--btse-blue-wash); border-color: #D3E2FF; }

/* 交易 CTA：深色底，與註冊卡區分 */
.btse-card--trade {
  background: #222;
  border-color: #222;
  padding: 16px;
}
.btse-card--trade .btse-card__eyebrow { color: #7FB4FF; }
.btse-card--trade .btse-card__heading { color: #fff; }
.btse-card--trade .btse-card__body    { color: #B9C2D0; }


/* =============================================================
   PART 5 — 按鈕
   ============================================================= */

.btse-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 16px;
  font-family: var(--btse-font-med);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  border-radius: var(--btse-radius-btn);
  transition: background-color .15s ease;
}

.btse-btn--primary {
  background: var(--btse-blue);
  color: #fff !important;
}
.btse-btn--primary:hover { background: var(--btse-blue-dark); color: #fff !important; }

.btse-btn:focus-visible {
  outline: 2px solid var(--btse-blue);
  outline-offset: 2px;
}


/* =============================================================
   PART 6 — 目錄
   ============================================================= */

.btse-toc {
  background: var(--btse-surface-alt);
  border: 1px solid var(--btse-line);
  border-radius: var(--btse-radius-card);
  padding: 14px 16px;
}

.btse-toc__title {
  font-family: var(--btse-font-med);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--btse-ink-soft);
  margin: 0 0 10px;
  padding: 0;
  line-height: 1.3;
}

.btse-toc__nav  { max-height: 44vh; overflow-y: auto; scrollbar-width: thin; }
.btse-toc__list { list-style: none; margin: 0; padding: 0; counter-reset: toc; }

.btse-toc__item { margin: 0; padding: 0; line-height: 1.4; }

.btse-toc__link {
  display: block;
  padding: 7px 0 7px 12px;
  border-left: 2px solid transparent;
  font-size: 14px;
  line-height: 1.45;
  color: var(--btse-ink-soft);
  text-decoration: none !important;
  transition: color .12s ease, border-color .12s ease;
}
.btse-toc__link:hover { color: var(--btse-blue); }

/* H3 縮排 */
.btse-toc__item--h3 .btse-toc__link {
  padding-left: 24px;
  font-size: 13px;
}

/* 捲動高亮（由 btse-toc.js 加上 .is-active） */
.btse-toc__link.is-active {
  color: var(--btse-blue);
  border-left-color: var(--btse-blue);
  font-family: var(--btse-font-med);
  font-weight: 600;
}

/* 手機版折疊樣式（shortcode 傳 collapse="yes" 時用 <details>） */
.btse-toc[open] .btse-toc__title { margin-bottom: 10px; }
.btse-toc summary.btse-toc__title { cursor: pointer; list-style: none; }
.btse-toc summary.btse-toc__title::-webkit-details-marker { display: none; }
.btse-toc summary.btse-toc__title::after {
  content: "";
  float: right;
  width: 7px; height: 7px;
  margin-top: 3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s ease;
}
.btse-toc[open] summary.btse-toc__title::after { transform: rotate(-135deg); }


/* =============================================================
   PART 7 — 熱門文章 / 分類 / App / 社群
   ============================================================= */

.btse-poplist { list-style: none; margin: 0; padding: 0; }
.btse-poplist__item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  margin: 0;
  border-bottom: 1px solid var(--btse-line);
  line-height: 1.45;
}
.btse-poplist__item:last-child { border-bottom: 0; padding-bottom: 0; }
.btse-poplist__rank {
  flex: 0 0 auto;
  font-family: var(--btse-font-bold);
  font-size: 14px;
  font-weight: 700;
  color: var(--btse-blue);
  min-width: 14px;
}
.btse-poplist__link {
  font-size: 14px;
  line-height: 1.45;
  color: var(--btse-ink);
  text-decoration: none !important;
}
.btse-poplist__link:hover { color: var(--btse-blue); }

/* 內建分類小工具 */
.btse-widget.widget_categories ul { list-style: none; margin: 0; padding: 0; }
.btse-widget.widget_categories li {
  padding: 8px 0;
  margin: 0;
  border-bottom: 1px solid var(--btse-line);
  font-size: 14px;
  line-height: 1.45;
}
.btse-widget.widget_categories li:last-child { border-bottom: 0; }
.btse-widget.widget_categories a {
  color: var(--btse-ink);
  text-decoration: none !important;
}
.btse-widget.widget_categories a:hover { color: var(--btse-blue); }

/* App 模組 */
.btse-app { display: flex; gap: 12px; align-items: center; }
.btse-app__qr { flex: 0 0 auto; margin: 0; border-radius: 6px; }
.btse-app__stores { display: flex; flex-direction: column; gap: 6px; }
.btse-app__stores img { margin: 0; border-radius: 4px; display: block; }

/* 社群 */
.btse-social {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.btse-social li { margin: 0; }
.btse-social a {
  display: block;
  padding: 9px 10px;
  text-align: center;
  font-size: 13px;
  font-family: var(--btse-font-med);
  color: var(--btse-ink) !important;
  background: var(--btse-surface-alt);
  border: 1px solid var(--btse-line);
  border-radius: var(--btse-radius-btn);
  text-decoration: none !important;
}
.btse-social a:hover {
  color: var(--btse-blue) !important;
  border-color: var(--btse-blue);
}


/* =============================================================
   PART 8 — 手機
   ============================================================= */

@media (max-width: 767px) {
  .et_pb_post_content p,
  .et_pb_post_content ul,
  .et_pb_post_content ol { font-size: 16px; }
  .et_pb_post_content h2 { font-size: 24px; margin-top: 2em; }
  .et_pb_post_content h3 { font-size: 19px; }

  /* 手機版把註冊卡留在右欄（即內文下方），
     目錄則改掛在內文上方 —— 見 03-mobile-toc.md */
  .btse-toc__nav { max-height: none; }
}

/* =============================================================
   PART 9 — 列表頁卡片的分類 pill
   -------------------------------------------------------------
   Divi Blog module 實測產生的結構（2026/10/13，/blog/）：

     <article class="et_pb_post">
       <div class="et_pb_image_container">…</div>
       <h2 class="entry-title">標題</h2>
       <p class="post-meta">
         <span class="published">Oct 16, 2025</span>
         "|"                                  ← 純文字節點，選不到
         <a rel="tag">Announcements</a>
       </p>
       <div class="post-content">摘要</div>
     </article>

   也就是「日期 | 分類」擠在同一行、同一個灰色。Divi 的 Blog module
   沒有提供調整這四個元素順序的選項，所以分成兩個方案：

   方案 A（預設啟用）—— pill 留在原位（標題下方），只做視覺分層。
   方案 B（下方註解）—— 把 pill 移到標題上方，符合 mockup；用
                        display:contents + grid 達成，不需改 PHP，
                        但依賴 Divi 的 markup，升級後要回歸測試。
   ============================================================= */

/* ---- 方案 A：pill 在原位 ---------------------------------- */

#main-content .et_pb_post .post-meta {
  line-height: 1.5;
  color: #5A6472;              /* 6.0:1，取代 #666666 的 5.74:1 */
  margin: 0;
  padding-bottom: 0;           /* Divi 用 padding-bottom 當段距 */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* 把 Divi 硬寫在 markup 裡的「|」藏掉：
   文字節點選不到，所以用 font-size:0 讓它不佔位，再把子元素的
   字級補回來。gap 已經負責間距。 */
#main-content .et_pb_post .post-meta { font-size: 0; }
#main-content .et_pb_post .post-meta > * { font-size: 12px; }

#main-content .et_pb_post .post-meta a[rel~="tag"] {
  font-family: var(--btse-font-med);   /* inter 只有 400，用 BTSE_Medium 避免假粗 */
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 999px;
  background: #EEF4FF;
  color: #0149B8;
  text-decoration: none;
  white-space: nowrap;
}

#main-content .et_pb_post .post-meta a[rel~="tag"]:hover {
  background: #DCE8FF;
  color: #013A94;
}

#main-content .et_pb_post .post-meta .published { color: #5A6472; }

/* ---- 方案 B：pill 移到標題上方（要用就解除註解）-------------
   article 變 grid，post-meta 用 display:contents 把子元素「升級」
   成 article 的 grid item，再分別指派到具名區域。
   注意：取消註解後請連同 PART 0 的 .entry-title 一起回歸測試。

@media (min-width: 0) {
  #main-content .et_pb_post {
    display: grid;
    grid-template-areas:
      "img"
      "cat"
      "title"
      "excerpt"
      "date";
    grid-template-rows: auto auto auto 1fr auto;
  }
  #main-content .et_pb_post .et_pb_image_container { grid-area: img; }
  #main-content .et_pb_post .entry-title           { grid-area: title; }
  #main-content .et_pb_post .post-content          { grid-area: excerpt; }
  #main-content .et_pb_post .post-meta             { display: contents; }
  #main-content .et_pb_post .post-meta a[rel~="tag"] {
    grid-area: cat;
    justify-self: start;
    margin-bottom: 8px;
  }
  #main-content .et_pb_post .post-meta .published  { grid-area: date; }
}
---------------------------------------------------------------- */