/**
 * 單篇閱讀版面：文章、一般頁面、案例內文
 *
 * 從 main.css 獨立出來——main.css 已超過 1000 行，不再往裡面加。
 * 排在 pages.css 之後載入，確保這裡的閱讀欄規則不被頁面樣式蓋掉。
 */
/*
 * 單篇文章與一般頁面的閱讀欄：標題、日期、圖片、內文、上下篇共用同一條置中欄。
 *
 * 原本只有內文限寬、沒有置中，標題又撐滿容器，桌機右邊空出 400 多 px，
 * 看起來像側欄沒載入。48rem 約每行 40 個中文字，是舒適的閱讀寬度。
 */
.article-col { max-width: 48rem; margin-inline: auto; }
.article-col .entry-content { max-width: none; }
.article-col__thumb { margin: 0 0 var(--space-4); }
.article-col__thumb img { width: 100%; height: auto; border-radius: var(--radius-card); }

/*
 * WordPress 內建的對齊 class。舊文章大量使用 [caption align="aligncenter"]，
 * 佈景沒寫樣式時一律貼左，「置中」的圖跟著內文一起偏向左邊。
 */
.entry-content .aligncenter { display: block; margin-inline: auto; }
.entry-content .alignleft { float: left; margin: var(--space-1) var(--space-3) var(--space-2) 0; }
.entry-content .alignright { float: right; margin: var(--space-1) 0 var(--space-2) var(--space-3); }
.entry-content::after { content: ""; display: table; clear: both; }

/* 圖說：短代碼會寫死 style="width: 592px"，窄螢幕必須壓回容器寬 */
.entry-content .wp-caption { max-width: 100%; margin-block: var(--space-3); }
.entry-content .wp-caption img { display: block; width: 100%; height: auto; margin: 0 0 var(--space-1); }
.entry-content .wp-caption-text { font-size: var(--fs-sm); color: var(--color-text-muted); text-align: center; }

/* 文章底部：上一篇／下一篇 */
.postnav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}
.postnav__item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  color: var(--color-text);
  transition: border-color var(--transition), background-color var(--transition);
}
.postnav__item--next { grid-column: 2; text-align: right; }
.postnav__item--empty { border: 0; padding: 0; }
.postnav__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-primary); }
.postnav__title {
  font-size: var(--fs-base);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
a.postnav__item:hover,
a.postnav__item:focus-visible { border-color: var(--color-primary); background: var(--color-primary-bg); }
.postnav__back { text-align: center; }

@media (max-width: 800px) {
  /* 手機：浮動圖片改回整欄，避免文字被擠成一兩個字一行 */
  .entry-content .alignleft,
  .entry-content .alignright { float: none; display: block; margin: var(--space-2) auto; }

  .postnav { grid-template-columns: 1fr; }
  .postnav__item--next { grid-column: auto; text-align: left; }
  .postnav__item--empty { display: none; }
}