/* 文章內頁（/blog/<slug>）
   手寫 CSS，沒有 SCSS 來源檔。內文區的樣式（.article__body 底下）要能吃到
   文章 HTML 裡直接寫的 h2/h3/p/ul/table/img，所以用後代選擇器而不是 class。 */

/* ── 麵包屑 ── */
.page#page--blog__detail .blog__breadcrumb {
  font-size: 13px;
  color: #666;
  margin-bottom: 1.5rem;
}

.page#page--blog__detail .blog__breadcrumb a {
  color: #666;
  transition: color 0.2s;
}

.page#page--blog__detail .blog__breadcrumb a:hover {
  color: rgba(217, 32, 40, 1);
}

.page#page--blog__detail .blog__breadcrumb__sep {
  margin: 0 0.4rem;
  color: #bbb;
}

/* ── 版面容器 ── */
.page#page--blog__detail .section#section__article__header,
.page#page--blog__detail .section#section__article__body {
  background-color: #fff;
}

.page#page--blog__detail .section#section__article__header .section__body {
  padding: 5rem 1.5rem 0;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.page#page--blog__detail .section#section__article__body .section__body {
  padding: 0 1.5rem 5rem;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 992px) {
  .page#page--blog__detail .section#section__article__header .section__body {
    padding: 7rem 2rem 0;
  }

  .page#page--blog__detail .section#section__article__body .section__body {
    padding: 0 2rem 7rem;
  }
}

/* ── 文章頁首 ── */
.page#page--blog__detail .article__category {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(217, 32, 40, 1);
  margin-bottom: 0.7rem;
}

.page#page--blog__detail .article__title {
  font-size: 26px;
  font-weight: 900;
  line-height: 1.45;
  color: #000;
  margin: 0 0 1.1rem;
  /* 中文標題在窄螢幕最容易擠出孤字，允許在字元間換行比硬撐好看 */
  word-break: break-word;
}

@media (min-width: 992px) {
  .page#page--blog__detail .article__title {
    font-size: 38px;
    line-height: 1.4;
  }
}

.page#page--blog__detail .article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  font-size: 13px;
  color: #888;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid #e5e5e5;
}

.page#page--blog__detail .article__cover {
  margin: 2rem 0 0;
}

.page#page--blog__detail .article__cover img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── 本文大綱 ── */
.page#page--blog__detail .article__outline {
  margin: 2.5rem 0 0;
  padding: 1.4rem 1.5rem;
  background-color: #f7f7f7;
  border-left: 4px solid rgba(217, 32, 40, 1);
}

.page#page--blog__detail .article__outline__title {
  font-size: 14px;
  font-weight: 700;
  color: #000;
  margin: 0 0 0.7rem;
}

.page#page--blog__detail .article__outline__list {
  margin: 0;
  padding-left: 1.2rem;
}

.page#page--blog__detail .article__outline__item {
  font-size: 14px;
  line-height: 2;
}

.page#page--blog__detail .article__outline__item a {
  color: #333;
  transition: color 0.2s;
}

.page#page--blog__detail .article__outline__item a:hover {
  color: rgba(217, 32, 40, 1);
}

/* ── 內文 ── */
.page#page--blog__detail .article__body {
  margin-top: 2.5rem;
  font-size: 16px;
  line-height: 2;
  color: #333;
  word-break: break-word;
}

.page#page--blog__detail .article__body h2 {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.5;
  color: #000;
  margin: 3rem 0 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid #000;
  /* 從大綱錨點跳過來時，標題不要被固定頁首蓋住。
     捲動後頁首會變成 position:fixed，實測高度：窄螢幕 82px、992px 以上 131px。
     這裡取 100px，桌機的值在下方的 media query 加大。 */
  scroll-margin-top: 100px;
}

@media (min-width: 992px) {
  .page#page--blog__detail .article__body h2 {
    font-size: 26px;
  }
}

.page#page--blog__detail .article__body h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  color: #000;
  margin: 2.2rem 0 0.8rem;
  scroll-margin-top: 100px;
}

@media (min-width: 992px) {
  .page#page--blog__detail .article__body h3 {
    font-size: 20px;
  }
}

.page#page--blog__detail .article__body p {
  margin: 0 0 1.4rem;
}

.page#page--blog__detail .article__body ul,
.page#page--blog__detail .article__body ol {
  margin: 0 0 1.4rem;
  padding-left: 1.4rem;
}

.page#page--blog__detail .article__body ul {
  list-style: disc;
}

.page#page--blog__detail .article__body ol {
  list-style: decimal;
}

.page#page--blog__detail .article__body li {
  margin-bottom: 0.4rem;
}

.page#page--blog__detail .article__body strong {
  font-weight: 700;
  color: #000;
}

.page#page--blog__detail .article__body a,
.page#page--blog__detail .article__faq__a a {
  color: rgba(217, 32, 40, 1);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s;
}

.page#page--blog__detail .article__body a:hover,
.page#page--blog__detail .article__faq__a a:hover {
  opacity: 0.75;
}

.page#page--blog__detail .article__body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.75rem 0;
}

.page#page--blog__detail .article__body figcaption {
  font-size: 13px;
  color: #888;
  margin-top: -1rem;
  margin-bottom: 1.75rem;
}

/* ── 內文表格：窄螢幕讓表格自己橫向捲，不要把整頁撐開 ── */
.page#page--blog__detail .article__table__wrap {
  overflow-x: auto;
  margin: 0 0 1.75rem;
  -webkit-overflow-scrolling: touch;
}

.page#page--blog__detail .article__table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.8;
}

.page#page--blog__detail .article__table th,
.page#page--blog__detail .article__table td {
  border: 1px solid #e0e0e0;
  padding: 0.7rem 0.9rem;
  text-align: left;
  vertical-align: top;
}

.page#page--blog__detail .article__table th {
  background-color: #f5f5f5;
  font-weight: 700;
  color: #000;
  white-space: nowrap;
}

/* ── 文中 CTA ── */
.page#page--blog__detail .article__cta {
  margin: 2.5rem 0;
  padding: 1.6rem 1.5rem;
  background-color: #111;
  color: #fff;
}

.page#page--blog__detail .article__cta__text {
  font-size: 15px;
  line-height: 1.9;
  margin: 0 0 1.1rem;
  color: #eee;
}

.page#page--blog__detail .article__cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.8rem;
  background-color: rgba(217, 32, 40, 1);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s;
}

.page#page--blog__detail .article__cta__btn:hover {
  opacity: 0.85;
}

/* ── 文末 FAQ ── */
.page#page--blog__detail .article__faq {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid #e5e5e5;
}

.page#page--blog__detail .article__faq__title {
  font-size: 22px;
  font-weight: 900;
  color: #000;
  margin: 0 0 1.5rem;
  scroll-margin-top: 100px;
}

@media (min-width: 992px) {
  .page#page--blog__detail .article__faq__title {
    font-size: 26px;
  }
}

.page#page--blog__detail .article__faq__list {
  margin: 0;
}

.page#page--blog__detail .article__faq__item {
  padding: 1.2rem 0;
  border-bottom: 1px solid #eee;
}

.page#page--blog__detail .article__faq__q {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  line-height: 1.7;
  margin-bottom: 0.5rem;
}

.page#page--blog__detail .article__faq__a {
  font-size: 15px;
  line-height: 1.95;
  color: #555;
  margin: 0;
}

/* ── 標籤 ── */
/* 標籤：單行純文字，不做成膠囊按鈕。
   按鈕外觀會讓讀者以為點得下去，但標籤頁刻意不建置（P1-6），
   外觀與行為必須一致。 */
.page#page--blog__detail .article__tags {
  margin: 2rem 0 0;
  font-size: 13px;
  line-height: 1.9;
  color: #888;
}

/* ── 文末 CTA 區塊 ── */
.page#page--blog__detail .article__footer__cta {
  margin-top: 3rem;
  padding: 2.2rem 1.6rem;
  background-color: #f7f7f7;
  text-align: center;
}

.page#page--blog__detail .article__footer__cta__title {
  font-size: 20px;
  font-weight: 900;
  color: #000;
  margin: 0 0 0.7rem;
}

.page#page--blog__detail .article__footer__cta__text {
  font-size: 15px;
  line-height: 1.9;
  color: #555;
  margin: 0 auto 1.5rem;
  max-width: 30em;
}

.page#page--blog__detail .article__footer__cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2.4rem;
  background-color: rgba(217, 32, 40, 1);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  transition: opacity 0.2s;
}

.page#page--blog__detail .article__footer__cta__btn:hover {
  opacity: 0.85;
}

/* ── 回列表 ── */
.page#page--blog__detail .article__back {
  margin-top: 2.5rem;
  font-size: 14px;
}

.page#page--blog__detail .article__back a {
  color: #666;
  transition: color 0.2s;
}

.page#page--blog__detail .article__back a:hover {
  color: rgba(217, 32, 40, 1);
}

/* ── 四欄以上的寬表格：手機版靠外層容器橫向捲動 ── */
.page#page--blog__detail .article__table--wide {
  min-width: 720px;
}

/* ── 編輯用的引言區塊（【待補】這類提示） ── */
.page#page--blog__detail .article__note {
  margin: 0 0 1.75rem;
  padding: 1.1rem 1.3rem;
  background-color: #fafafa;
  border-left: 4px solid #ccc;
  font-size: 14px;
  line-height: 1.9;
  color: #666;
}

.page#page--blog__detail .article__note p {
  margin: 0 0 0.5rem;
}

.page#page--blog__detail .article__note p:last-child {
  margin-bottom: 0;
}

.page#page--blog__detail .article__note strong {
  color: #333;
}

/* ── 文中 CTA 的文字版：一段話帶一個連結，比深色方塊輕 ── */
.page#page--blog__detail .article__cta--text {
  background-color: #f7f7f7;
  color: #333;
  padding: 1.2rem 1.4rem;
  border-left: 4px solid rgba(217, 32, 40, 1);
}

.page#page--blog__detail .article__cta--text .article__cta__text {
  color: #333;
  margin: 0;
}

.page#page--blog__detail .article__cta--text .article__cta__text a {
  color: rgba(217, 32, 40, 1);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
}

/* ── 文末資料來源與作者行 ── */
.page#page--blog__detail .article__sources {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid #eee;
  font-size: 13px;
  line-height: 1.9;
  color: #888;
}

.page#page--blog__detail .article__sources__title {
  font-size: 13px;
  font-weight: 700;
  color: #666;
  margin: 0 0 0.5rem;
}

.page#page--blog__detail .article__sources__note {
  margin: 0 0 0.7rem;
}

.page#page--blog__detail .article__sources__list {
  list-style: disc;
  margin: 0 0 0.9rem;
  padding-left: 1.3rem;
}

.page#page--blog__detail .article__sources__list li {
  margin-bottom: 0.3rem;
}

.page#page--blog__detail .article__sources__author {
  margin: 0;
  font-style: italic;
}

/* ── 草稿預覽提示條（?preview=1 才會出現，正式訪客看不到） ── */
.page#page--blog__detail .blog__preview__bar {
  background-color: #ffd400;
  color: #1a1a1a;
  font-size: 13px;
  line-height: 1.7;
  padding: 0.7rem 1.5rem;
  text-align: center;
}

.page#page--blog__detail .blog__preview__bar code {
  background-color: rgba(0, 0, 0, 0.12);
  padding: 0.1em 0.4em;
  border-radius: 3px;
  font-family: inherit;
  white-space: nowrap;
}

/* ── 本機用的 alt 缺漏提醒（class_articles::isLocal() 為真才會輸出） ── */
.page#page--blog__detail .blog__devwarn {
  background-color: #b3121b;
  color: #fff;
  padding: 0.9rem 1.5rem;
  font-size: 13px;
  line-height: 1.8;
}

.page#page--blog__detail .blog__devwarn__title {
  font-weight: 700;
  margin: 0 0 0.4rem;
}

.page#page--blog__detail .blog__devwarn__list {
  list-style: disc;
  margin: 0 0 0.5rem;
  padding-left: 1.3rem;
}

.page#page--blog__detail .blog__devwarn__note {
  margin: 0;
  opacity: 0.85;
}

/* ── 錨點預留高度：桌機的固定頁首比較高（131px），要留更多 ── */
@media (min-width: 992px) {
  .page#page--blog__detail .article__body h2,
  .page#page--blog__detail .article__body h3,
  .page#page--blog__detail .article__faq__title {
    scroll-margin-top: 150px;
  }
}

/* ── 表格的第一欄（階段、影片類型這類標籤欄）不要被壓縮到中文從中間斷開 ──
   瀏覽器的自動表格排版會把「最短內容寬度」給文字少的欄位，而中文可以在任意
   兩字之間換行，所以它敢把這一欄壓到只剩一個字寬——「企劃（前製）」就會變成
   企劃／（前／製）三行。實測「企劃（前製）」不斷行需要 113px（含左右內距），
   這裡給 8.5em（14px 字級約 119px）保留餘裕。文字較長的欄位本來就比這寬，不受影響。 */
.page#page--blog__detail .article__table th:first-child,
.page#page--blog__detail .article__table td:first-child {
  min-width: 8.5em;
}


/* ── 文末延伸閱讀（P1-5a） ── */
.page#page--blog__detail .article__related {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #e5e5e5;
}

.page#page--blog__detail .article__related__title {
  font-size: 18px;
  font-weight: 900;
  color: #000;
  margin: 0 0 1.1rem;
}

@media (min-width: 992px) {
  .page#page--blog__detail .article__related__title {
    font-size: 20px;
  }
}

.page#page--blog__detail .article__related__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.page#page--blog__detail .article__related__item {
  border-bottom: 1px solid #eee;
}

.page#page--blog__detail .article__related__item:first-child {
  border-top: 1px solid #eee;
}

.page#page--blog__detail .article__related__link {
  display: block;
  padding: 1rem 0;
  color: inherit;
  transition: color 0.2s;
}

.page#page--blog__detail .article__related__link:hover {
  color: rgba(217, 32, 40, 1);
}

.page#page--blog__detail .article__related__category {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(217, 32, 40, 1);
  margin-bottom: 0.3rem;
}

.page#page--blog__detail .article__related__name {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  word-break: break-word;
}

.page#page--blog__detail .article__related__date {
  display: block;
  font-size: 12px;
  color: #999;
  margin-top: 0.35rem;
}

/* ── 內文引言區塊（備註第 3 點：段首層級聲明、段末來源標記要能用 blockquote） ── */
.page#page--blog__detail .article__body blockquote {
  margin: 0 0 1.75rem;
  padding: 1rem 1.3rem;
  border-left: 4px solid #ddd;
  background-color: #fafafa;
  font-size: 15px;
  line-height: 1.9;
  color: #666;
}

.page#page--blog__detail .article__body blockquote p {
  margin: 0 0 0.6rem;
}

.page#page--blog__detail .article__body blockquote p:last-child {
  margin-bottom: 0;
}

/* ── 案例的收斂句「→ 這一類的問題是…」（備註第 5 點：樣式要與正文有區別） ──
   每個案例段落最後那一句是整段的結論，跟正文混在一起會被讀者滑過去。
   用淺底加左側色條與正文區隔，但不要做得像引言——它是結論不是引用。 */
.page#page--blog__detail .article__takeaway {
  margin: 0 0 1.75rem;
  padding: 0.9rem 1.2rem;
  border-left: 4px solid rgba(217, 32, 40, 1);
  background-color: #f7f7f7;
  font-size: 15px;
  line-height: 1.9;
  color: #333;
}

.page#page--blog__detail .article__takeaway strong {
  color: #000;
}