/* =========================================================================
   文章頁

   ⚠ 這支只負責「讓 Kadence 的原生輸出長得像我們的設計」，
     不接管結構。所有選擇器都對著 Kadence 自己吐出來的 class：
       .entry-hero.post-hero-section   標題色帶
       .entry-hero-container-inner     色帶內層（背景圖掛在這）
       .hero-section-overlay           覆蓋層（顏色由 Customizer 控制）
       .entry-taxonomies               分類
       .entry-title                    H1
       .entry-meta                     作者與日期

     色帶的高度、背景、覆蓋色、文字顏色都在 Customizer 設定，
     這裡不重複宣告 —— 否則 Mark 在後台調了會沒反應，看起來像壞掉。
   ========================================================================= */

/* -------------------------------------------------------------------------
   標題色帶
   ---------------------------------------------------------------------- */

/*
 * 內容靠下對齊。
 *
 * Kadence 預設垂直置中，但色帶裡由上而下是「分類 → 標題 → 日期」，
 * 置中會讓這組資訊浮在中間、和下方內容斷開。靠下貼齊時，
 * 標題與它所引導的內文距離最近，讀者的視線是連續的。
 */
.entry-hero.post-hero-section .entry-hero-container-inner {
	display: flex;
	align-items: flex-end;
}

.post-hero-section .hero-container {
	padding-bottom: 3rem;
	width: min(calc(100% - 3rem), var(--aark-max));
	margin-inline: auto;
}

/*
 * 分類標籤
 *
 * 套用跟其他頁 .aark-eyebrow 相同的處理：等寬字、字距拉開、字級縮小。
 * 顏色不寫在這裡 —— Customizer 的 post_title_category_color 說了算。
 */
.post-hero-section .entry-taxonomies {
	font-family: var(--aark-mono);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin-bottom: 1.1rem;
}

.post-hero-section .entry-taxonomies a { text-decoration: none; }

/*
 * H1
 *
 * 與 .aark-phead h1 同一組級距與行高，兩者並排看不出是不同樣板。
 * 30ch 限寬的理由同頁首：長標題折行時不要留孤字。
 */
.post-hero-section .entry-title {
	font-family: var(--aark-serif);
	font-size: clamp(1.9rem, 3.6vw, 2.9rem);
	line-height: 1.2;
	font-weight: 900;
	max-width: 30ch;
	text-wrap: balance;
	margin: 0;
}

/* 日期與作者：等寬字，和眉標同一個家族，維持「資料」的語氣 */
.post-hero-section .entry-meta {
	font-family: var(--aark-mono);
	font-size: .75rem;
	letter-spacing: .04em;
	margin-top: 1.25rem;
}

.post-hero-section .entry-meta a { text-decoration: none; }

/*
 * 麵包屑
 *
 * 本機看不到 —— Kadence 的麵包屑要靠 Rank Math／Yoast 提供，
 * 本機沒裝。正式站有 Rank Math，上線後會出現，所以樣式先備好。
 */
.post-hero-section .kadence-breadcrumbs {
	font-family: var(--aark-mono);
	font-size: .72rem;
	letter-spacing: .04em;
	margin-bottom: 1rem;
}

/* -------------------------------------------------------------------------
   內文

   排版主體已由 style.css 裡 .single 的相容層處理（標題、連結、引用、
   清單都在那裡）。這裡只補色帶接上內文之後的節奏。
   ---------------------------------------------------------------------- */

/*
 * 色帶到內文的距離。
 *
 * 原本空了 240px —— 其他頁的頁首下方已經照要求取消白色間隔，
 * 文章頁留著就是另一套節奏。Kadence 的內容垂直留白已在 Customizer
 * 關掉，這裡再處理兩個殘留來源：
 *   .entry-content-wrap 的 2rem 內距（Kadence 的 boxed 樣式，保留）
 *   首段自己的上邊距（歸零，否則與上面的內距疊加）
 * 兩者相加約 64px，文章需要一點喘息，但不該是一片空白。
 */
.single .content-area { padding-top: 2rem; }

.single .entry-content > *:first-child { margin-top: 0; }

/* 文章內的圖片給滿內容欄寬，並收掉 Kadence 的圓角 —— 品牌語彙是硬邊 */
.single .entry-content img {
	width: 100%;
	height: auto;
	border-radius: 0;
}

.single .entry-content figure { margin: 2.5rem 0; }

.single .entry-content figcaption {
	font-family: var(--aark-mono);
	font-size: .72rem;
	color: var(--aark-slate);
	margin-top: .6rem;
}

/* -------------------------------------------------------------------------
   結尾 CTA

   標記來自同步區塊（slug: aark-single-cta），沿用 pages.css 的
   .aark-page-cta。這裡只處理它接在文章內容之後的位置關係。
   ---------------------------------------------------------------------- */

/*
 * CTA 帶要滿版。
 *
 * 文章頁的內容欄是 narrow + boxed，CTA 掛在 .entry-content 裡面，
 * 預設只會有內容欄那麼寬 —— 其他頁的 CTA 都是橫跨整個視窗，
 * 只有文章頁縮成一條會很突兀。
 *
 * 用負邊距拉出容器。100vw 含捲軸寬度，可能撐出水平捲軸，
 * 所以在祖層加 overflow-x: clip 收掉（clip 不會產生捲動容器，
 * 不影響頁面內的錨點跳轉）。
 */
.single .site-content,
.single .content-area { overflow-x: clip; }

.single .aark-page-cta {
	margin-top: 4rem;
	margin-inline: calc(50% - 50vw);
	width: 100vw;
	max-width: none;
}

/* -------------------------------------------------------------------------
   相關文章

   Kadence 原生的 Similar Posts。卡片縮圖邏輯見 inc/post-thumbs.php。
   ---------------------------------------------------------------------- */

.entry-related-title {
	font-family: var(--aark-serif);
	font-weight: 900;
	color: var(--aark-navy);
}

@media (max-width: 782px) {
	.post-hero-section .hero-container {
		padding-bottom: 2.25rem;
		width: min(calc(100% - 2rem), var(--aark-max));
	}

	.single .content-area { padding-top: 1.25rem; }
}

/* -------------------------------------------------------------------------
   側邊欄

   小工具內容存在 WordPress 的小工具區（外觀 → 小工具 → Sidebar 1），
   這裡只負責外觀。刻意用 class 而不是行內樣式 ——
   頁尾那幾個小工具是行內樣式，要改字級得在一長串 style 屬性裡翻，
   側邊欄不重蹈覆轍。
   ---------------------------------------------------------------------- */

.single .primary-sidebar .widget {
	margin-bottom: 2.5rem;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid var(--aark-line);
}

.single .primary-sidebar .widget:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

/* 小工具標題沿用全站眉標語彙：等寬字、字距拉開 */
.single .primary-sidebar .widget-title {
	font-family: var(--aark-mono);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--aark-slate);
	margin: 0 0 1.1rem;
}

/* --- 連結清單（服務、最新文章共用） --- */

.aark-side-links,
.single .primary-sidebar .widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.aark-side-links li,
.single .primary-sidebar .widget ul li {
	margin: 0;
	padding: .55rem 0;
	border-bottom: 1px solid var(--aark-line);
	line-height: 1.5;
}

.aark-side-links li:last-child,
.single .primary-sidebar .widget ul li:last-child { border-bottom: 0; }

/*
 * ⚠ 一定要排除 .aark-btn。
 *   這條的特異性是 (0,3,1)，蓋得過 .aark-btn-solid 的 (0,1,0)，
 *   側邊欄 CTA 的按鈕文字會被染成藏青 —— 配上橘底就看不清楚。
 *   同樣的坑在 .single .entry-content a 也發生過一次。
 */
.single .primary-sidebar .widget a:not(.aark-btn) {
	color: var(--aark-navy);
	font-weight: 600;
	font-size: .9rem;
	text-decoration: none;
	border-bottom: 0;
}

.single .primary-sidebar .widget a:not(.aark-btn):hover,
.single .primary-sidebar .widget a:not(.aark-btn):focus-visible {
	color: var(--aark-orange-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 最新文章的日期 */
.single .primary-sidebar .post-date {
	display: block;
	font-family: var(--aark-mono);
	font-size: .68rem;
	color: var(--aark-slate);
	margin-top: .2rem;
}

/* --- 側邊欄 CTA --- */

.aark-side-cta {
	background: var(--aark-navy);
	color: var(--aark-white);
	padding: 1.75rem 1.5rem;
}

.aark-side-cta b {
	display: block;
	font-family: var(--aark-serif);
	font-size: 1.25rem;
	font-weight: 900;
	line-height: 1.3;
	margin-bottom: .75rem;
}

.aark-side-cta p {
	font-size: .85rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, .78);
	margin: 0 0 1.25rem;
}

/*
 * 藏青底上用橘色按鈕。
 * 其他地方的 CTA 是橘底配藏青鈕，這裡底色相反，按鈕就換過來 ——
 * 白橘 2.79:1 不夠，但橘底配白字加粗在按鈕這種大字級上是可接受的，
 * 且與全站主要按鈕的視覺一致。
 */
.aark-side-cta .aark-btn-solid {
	/* 明寫白字，不靠繼承 —— 這顆按鈕被上面那條規則咬過一次 */
	color: var(--aark-white);
	display: block;
	text-align: center;
	font-size: .85rem;
	padding: .8rem 1rem;
	box-shadow: 5px 5px 0 rgba(255, 110, 52, .3);
}

/* -------------------------------------------------------------------------
   作者資訊框

   Kadence 原生輸出（template-parts/content/entry_author.php），
   內容全部來自後台的使用者資料 —— 姓名、職稱、簡介、照片、社群連結
   都在 使用者 → 個人資料 編輯，不寫死在程式裡。

   為什麼要有這一塊：E-E-A-T 的評分指南明確要求能辨識「誰製作了這份
   內容」。名字、資歷、照片是最基本的三項。
   ---------------------------------------------------------------------- */

.entry-author {
	background: var(--aark-paper);
	border-left: 4px solid var(--aark-orange);
	padding: 2rem 2rem 1.75rem;
	margin-top: 3rem;
}

.entry-author .entry-author-profile {
	display: grid;
	grid-template-columns: 88px 1fr;
	column-gap: 1.5rem;
	row-gap: .35rem;
	align-items: start;
}

.entry-author .entry-author-avatar {
	grid-column: 1;
	grid-row: 1 / span 4;
}

.entry-author .entry-author-avatar img {
	width: 88px;
	height: 88px;
	object-fit: cover;
	border-radius: 0;   /* 品牌語彙是硬邊，不用圓形頭像 */
	display: block;
}

.entry-author .entry-author-name {
	grid-column: 2;
	font-family: var(--aark-serif);
	font-size: 1.15rem;
	font-weight: 900;
	color: var(--aark-navy);
	line-height: 1.3;
}

.entry-author .entry-author-name a {
	color: inherit;
	text-decoration: none;
	border-bottom: 0;
}

.entry-author .entry-author-name a:hover { color: var(--aark-orange-ink); }

.entry-author .entry-author-occupation {
	grid-column: 2;
	font-family: var(--aark-mono);
	font-size: .72rem;
	letter-spacing: .1em;
	color: var(--aark-slate);
	margin: 0 0 .6rem;
}

.entry-author .entry-author-description {
	grid-column: 2;
	font-size: .9rem;
	line-height: 1.85;
	color: var(--aark-slate);
}

.entry-author .entry-author-follow {
	grid-column: 2;
	display: flex;
	gap: .75rem;
	margin-top: .9rem;
}

.entry-author .entry-author-follow:empty { display: none; }

.entry-author .entry-author-follow a {
	color: var(--aark-navy);
	border-bottom: 0;
	line-height: 0;
}

.entry-author .entry-author-follow a:hover { color: var(--aark-orange-ink); }

@media (max-width: 600px) {
	.entry-author { padding: 1.5rem 1.25rem; }

	/* 窄螢幕改成單欄，頭像放上面 —— 88px 的頭像加文字會把行長壓到不能讀 */
	.entry-author .entry-author-profile {
		grid-template-columns: 1fr;
	}

	.entry-author .entry-author-avatar {
		grid-row: auto;
		margin-bottom: 1rem;
	}

	.entry-author .entry-author-name,
	.entry-author .entry-author-occupation,
	.entry-author .entry-author-description,
	.entry-author .entry-author-follow { grid-column: 1; }
}