@charset "UTF-8";

/* 文章外層：取消橫幅，以麵包屑與留白進入閱讀 */
.article-page { padding: 44px 0 100px; }
.article-layout { max-width: 1040px; }
.article-breadcrumb { margin-bottom: 36px; color: var(--color-muted); font-size: var(--font-small); }
.article-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0; padding: 0; list-style: none; }
.article-breadcrumb li + li::before { content: "/"; margin-right: 14px; color: var(--color-muted); }
.article-breadcrumb a { display: inline-block; padding-block: 6px; text-underline-offset: 5px; }
.article-breadcrumb a:hover { text-decoration: underline; }
.article-breadcrumb [aria-current] { padding-block: 6px; }

/* 純白文章紙面：高於全站紋理層，保留按鈕四角延伸的交錯細框 */
.article-panel { position: relative; z-index: 21; padding: 64px 72px 44px; background: #fff; }
.article-panel::before, .article-panel::after { content: ""; position: absolute; pointer-events: none; border: solid var(--color-ink); }
.article-panel::before { inset: 0 -11px; border-width: 1px 0; }
.article-panel::after { inset: -11px 0; border-width: 0 1px; }
.article-heading { max-width: 744px; margin: 0 auto 38px; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-bottom: 24px; }
.article-meta .news-category { padding: 4px 14px; font-size: var(--font-small); }
.article-meta time { color: var(--color-muted); font: 400 var(--font-small)/1.8 var(--font-en); letter-spacing: .04em; }
.article-meta time span { margin-left: 8px; }
.page-article .article-heading h1 { margin: 0; font-size: clamp(28px, 3vw, 40px); font-weight: 500; line-height: 1.6; letter-spacing: .06em; overflow-wrap: anywhere; }
.page-article .article-description { margin-top: 24px; color: var(--color-muted); line-height: 2; letter-spacing: .04em; }
.article-cover img { width: 100%; height: auto; }

/* 版型測試標註：只用於示範內容，正式編輯器排版另見 article-content-style.css */
.page-article .article-style-label { display: block; margin-bottom: 8px; color: var(--color-muted); font: 400 var(--font-note)/1.8 var(--font-body); letter-spacing: .04em; }

/* 更多照片：固定縮圖比例，桌機三欄、平板兩欄、手機單欄 */
.article-gallery { margin-top: 52px; padding-top: 32px; border-top: 1px solid var(--color-line); }
.article-section-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; margin-bottom: 24px; }
.page-article .article-section-heading h2 { font-size: var(--font-large); font-weight: 500; line-height: 1.8; letter-spacing: .06em; }
.article-section-heading > p { color: var(--color-muted); font-size: var(--font-small); }
.article-gallery-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.article-gallery-list a { position: relative; display: block; overflow: hidden; }
.article-gallery-list img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--transition); }
.article-gallery-list figcaption { padding-top: 12px; color: var(--color-muted); font-size: var(--font-note); line-height: 1.8; }
.article-photo-zoom { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 36px; height: 36px; background: #fff; color: var(--color-ink); font-size: var(--font-small); }

/* 來源與分享：有字標的細框按鈕，操作狀態可由輔助工具讀取 */
.article-footer { margin-top: 36px; }
.article-source { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-block: 24px; border-top: 1px solid var(--color-line); font-size: var(--font-small); overflow-wrap: anywhere; }
.article-source > span { color: var(--color-muted); }
.page-article .article-source a { text-decoration: underline; text-underline-offset: 5px; }
.article-source .fa { margin-left: 6px; font-size: var(--font-note); }
.article-share { padding-top: 28px; border-top: 1px solid var(--color-line); }
.article-share > p:first-child { margin-bottom: 18px; font-size: var(--font-small); }
.article-share-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.article-share-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 10px 18px; border: 1px solid var(--color-line); border-radius: 0; background: #fff; font-size: var(--font-small); line-height: 1.6; letter-spacing: .03em; transition: color var(--transition), background-color var(--transition), border-color var(--transition); }
.article-share-button .fa { width: 16px; text-align: center; font-size: var(--font-base); }
.article-share-button:disabled { cursor: wait; }
.page-article .article-share-status { min-height: 24px; margin-top: 12px; color: var(--color-muted); font-size: var(--font-small); line-height: 1.7; letter-spacing: .02em; }
.article-copy-fallback { margin-top: 12px; font-size: var(--font-small); }
.article-copy-fallback label { display: block; }
.article-copy-fallback input { width: 100%; min-height: 46px; padding: 10px; border: 1px solid var(--color-line); border-radius: 0; background: #fff; font-size: var(--font-base); }
.article-noscript { padding-top: 24px; font-size: var(--font-small); }
.page-article [hidden] { display: none; }

/* 返回按鈕：沿用既有 class 與交錯邊線 */
.article-actions { position: relative; z-index: 21; margin-top: 48px; text-align: center; }
.page-article .box_btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 242px; max-width: calc(100% - 22px); min-height: 48px; margin: 11px; padding: 16px 42px; border: 0; border-radius: 0; background: #fff; color: var(--color-ink); font-size: var(--font-base); line-height: 1.5; transition: color var(--transition), background-color var(--transition); }
.page-article .box_btn:focus-visible { outline-offset: 14px; }
@media (hover: hover) {
  .page-article .box_btn:hover, .article-share-button:hover { color: #fff; background: var(--color-ink); border-color: var(--color-ink); }
  .article-gallery-list a:hover img { transform: scale(1.03); }
}

/* 平板：縮小紙面內距與照片欄數 */
@media (max-width: 1199px) {
  .article-panel { padding: 48px 40px 32px; }
  .article-gallery-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 手機：維持 16px 內文、舒適行高與完整觸控範圍 */
@media (max-width: 767px) {
  .article-page { padding-block: 24px 64px; }
  .article-layout { width: calc(100% - 40px); }
  .article-breadcrumb { margin-bottom: 28px; }
  .article-panel { padding: 32px 20px 24px; }
  .article-meta { gap: 12px 16px; margin-bottom: 20px; }
  .article-meta .news-category { padding-inline: 10px; }
  .article-heading { margin-bottom: 28px; }
  .page-article .article-heading h1 { font-size: 28px; line-height: 1.6; letter-spacing: .04em; }
  .page-article .article-description { margin-top: 20px; }
  .article-gallery { margin-top: 36px; padding-top: 24px; }
  .article-gallery-list { grid-template-columns: 1fr; gap: 24px; }
  .article-footer { margin-top: 28px; }
  .article-share-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .article-share-button { padding-inline: 10px; }
  .article-actions { margin-top: 36px; }
  .page-article .box_btn { width: 212px; padding: 14px 35px; font-size: var(--font-small); }
}

/* 減少動態偏好：停用非必要的縮放與轉場 */
@media (prefers-reduced-motion: reduce) {
  .article-gallery-list img, .article-share-button, .page-article .box_btn { transition: none; }
  .article-gallery-list a:hover img { transform: none; }
}