/* ==========================================================================
   tw-homepage —— 跨型別共用的基元  twh:home-css
   （.tz-wrap / .tz-eyebrow / .tz-section-head / .tz-section-title / .tz-section-more）

   🔴 T14 階段 6（2026-09-15）從子主題 assets/css/home.css 搬過來。
      子主題那一份**保留、不要刪、內容不變**：部署只上傳不刪除，而且外掛不在
      （停用、熔斷、接管關閉、檔案沒傳完）的時候首頁要靠它。
      誰載入由 includes/assets.php 的 twh_home_css_owned() 決定，任何時刻只有一邊。

   🔴 規則要與 home.css 一致：這一支 ＋ sections/{news,cards,split-media,logo-wall}.css
      「twh:plugin-only」標記以前的規則，拆成「@media｜選擇器｜屬性：值」之後，
      與 home.css **逐條相同、沒有多也沒有少**。tools/selftest.php 組 O 在比。
      改首頁外觀要兩邊一起改（或者決定不要備援，把 home.css 換成只剩註解的路標）。

   ⚠️ 載入順序：這一支永遠排在各型別的 CSS 前面（與 home.css 裡的先後相同）。
   ⚠️ 不得使用 vw / vh 單位。改完一定要跑 python3 tools/csscheck.py
   ========================================================================== */

/* WordPress 會給每個頂層區塊 24px 的 block-gap（--wp--style--block-gap）。
   首頁的六個區塊各自帶背景色與 96–100px 的上下留白，
   那 24px 只會在兩個區塊之間露出一條頁面底色 ——
   深色 Hero 下方最明顯，看起來像一個空掉的區塊。
   （2026-09-03：同一個症狀的另一半在 hero.css 的 margin-bottom。） */
body.home .entry-content > .wp-block-group {
	margin-block: 0;
}

.tz-wrap {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 40px;
}

/* --- 區塊標頭 --- */

.tz-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: "Manrope", "Helvetica Neue", Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	/* 2026-09-05 無障礙修正：原 #b9995a 在白底只有 2.70:1、在 #f6f7f8 只有
	   2.52:1，12px/700 的門檻是 4.5:1。色相（39.8°）與飽和度（40.4%）
	   完全不動，只把明度從 53.9% 壓到 35% —— 白底 5.55:1、#f6f7f8 5.17:1。 */
	color: #7d6536;
}

.tz-eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background: #7d6536;   /* 與文字同色，見上 */
	display: block;
}

.tz-eyebrow--plain::before { display: none; }

.tz-section-title {
	margin: 0;
	font-size: 34px;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 1.4;
	color: #1c1e21;
}

.tz-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 44px;
}

.tz-section-head__text {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tz-section-head--center {
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-bottom: 48px;
}

.tz-section-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid #d8dbdf;
	font-size: 15px;
	color: #5a5f66;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
}

/* 2026-09-05：同一顆金色 token。靜止狀態是 #5a5f66（白底 6.43:1，達標），
   hover 之後換成金色 —— 原 #b9995a 只有 2.70:1，而 WCAG 的門檻對 hover
   狀態一樣成立。 */
.tz-section-more:hover {
	color: #7d6536;
	border-bottom-color: #7d6536;
}

/* --- 響應式 --- */

@media (max-width: 1024px) {
	.tz-wrap { padding: 0 28px; }
}

@media (max-width: 767px) {
	.tz-wrap { padding: 0 20px; }
	.tz-section-title { font-size: 26px; }
	.tz-section-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 26px; }
}

/* twh:plugin-only —— 以下規則子主題 home.css 沒有（目前沒有） */