/* ==========================================================================
   版型型別：圖文並排（types/split-media.php）  twh:home-css

   🔴 T14 階段 6（2026-09-15）從子主題 assets/css/home.css 的
      .tz-about* / .tz-creds / .tz-btn-outline / .tz-acpc* / .tz-points / .tz-btn-solid 搬過來，
      兩種預設排法（淺色圖在右 ＝「品牌介紹」、深色圖在左 ＝「Acronis」）的全部樣式現在都在這一支。
      子主題那一份保留當備援（外掛不在時首頁靠它），內容不變。
      「twh:plugin-only」以前的規則必須與 home.css 相同 —— tools/selftest.php 組 O 在比。

   ⚠️ plugin-only 那一段只寫修飾 class，或「預設排法裡不存在的元素」的規則（深色段落裡的小標、說明文字）。
   ⚠️ 不得使用 vw / vh 單位。改完一定要跑 python3 tools/csscheck.py
   ========================================================================== */

/* --- 品牌介紹（淺色） --- */

.tz-about { padding: 100px 0; background: #ffffff; }

.tz-about__grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 72px;
	align-items: center;
}

.tz-about__text {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.tz-about__text h2 {
	margin: 0;
	font-size: 32px;
	line-height: 1.55;
	font-weight: 500;
	letter-spacing: .5px;
	color: #1c1e21;
}

.tz-about__text p {
	margin: 0;
	font-size: 16px;
	line-height: 2.05;
	font-weight: 300;
	color: #5a5f66;
}

.tz-creds {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 28px;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
}

.tz-creds li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #3d4248;
}

.tz-creds li::before {
	content: "";
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b9995a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 5.5 5.5L20 7'/%3E%3C/svg%3E");
}

.tz-btn-outline {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	height: 50px;
	padding: 0 28px;
	margin-top: 10px;
	border: 1px solid #1c1e21;
	font-size: 16px;
	color: #1c1e21;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

.tz-btn-outline:hover {
	background: #1c1e21;
	color: #ffffff;
}

.tz-about__figure { position: relative; }

.tz-about__figure img {
	width: 100%;
	height: 520px;
	object-fit: cover;
	display: block;
}

.tz-about__figure::after {
	content: "";
	position: absolute;
	left: -18px;
	bottom: -18px;
	width: 120px;
	height: 120px;
	border-left: 3px solid #d3b574;
	border-bottom: 3px solid #d3b574;
}

/* --- Acronis --- */

.tz-acpc { background: #23272b; }

.tz-acpc__grid {
	max-width: 1320px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
}

.tz-acpc__figure {
	min-height: 520px;
	overflow: hidden;
}

.tz-acpc__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tz-acpc__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 24px;
	padding: 80px 64px;
}

.tz-acpc__text h2 {
	margin: 0;
	font-size: 30px;
	line-height: 1.6;
	font-weight: 500;
	letter-spacing: .5px;
	color: #ffffff;
}

.tz-points {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tz-points li {
	display: flex;
	gap: 14px;
	margin: 0;
	font-size: 16px;
	line-height: 1.9;
	font-weight: 300;
	color: rgba(255, 255, 255, .78);
}

.tz-points li::before {
	content: "";
	width: 18px;
	height: 18px;
	margin-top: 6px;
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d3b574' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 5.5 5.5L20 7'/%3E%3C/svg%3E");
}

.tz-btn-solid {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	height: 52px;
	padding: 0 30px;
	margin-top: 8px;
	background: #d3b574;
	color: #1c1e21;
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color .2s ease;
}

.tz-btn-solid:hover { background: #e5cd97; color: #1c1e21; }

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

@media (max-width: 1200px) {
	.tz-about__grid { gap: 48px; }
	.tz-acpc__text { padding: 64px 44px; }
}

@media (max-width: 1024px) {
	.tz-about { padding: 72px 0; }
	.tz-about__grid { grid-template-columns: 1fr; gap: 40px; }
	.tz-about__figure img { height: 360px; }
	.tz-acpc__grid { grid-template-columns: 1fr; }
	/* ACPC 那張圖是 500x500 的完成稿（上方標題／中間插畫／下方標語），
	   單欄之後若還鎖 260px 高，cover 會從上下各裁掉 65px，正好切掉標題。
	   放掉高度限制，讓方形圖完整呈現。 */
	.tz-acpc__figure { min-height: 0; }
	.tz-acpc__figure img { height: auto; }
}

@media (max-width: 767px) {
	.tz-about { padding: 56px 0 60px; }
	.tz-about__text h2 { font-size: 25px; }
	.tz-creds { grid-template-columns: 1fr; gap: 11px; }
	.tz-btn-outline { align-self: stretch; justify-content: center; }
	.tz-acpc__text { padding: 44px 20px 50px; }
	.tz-acpc__text h2 { font-size: 24px; }
	.tz-btn-solid { align-self: stretch; justify-content: center; }
}

/* twh:plugin-only —— 以下規則子主題 home.css 沒有（預設排法以外的組合才用得到） */

/* ── 淺色、圖在左 ──────────────────────────────────────────────────── */

/* 預設是「文字 1.05 : 圖 1」；圖換到左邊之後比例跟著對調，文字那一欄才會一樣寬。 */
.tz-about--media-left .tz-about__grid {
	grid-template-columns: 1fr 1.05fr;
}

/* 金色角框原本在圖的左下角（圖在右邊時朝外）。圖換到左邊，角框換到右下角，仍然朝外。 */
.tz-about--media-left .tz-about__figure::after {
	left: auto;
	right: -18px;
	border-left: 0;
	border-right: 3px solid #d3b574;
}

@media (max-width: 1024px) {
	.tz-about--media-left .tz-about__grid {
		grid-template-columns: 1fr;
	}
}

/* ── 深色段落裡的小標與說明（首頁的 Acronis 那一段沒有，所以 home.css 沒有寫） ───── */

/* home.css 的小標是深金色 #7d6536，壓在深灰底上只有 2.2:1。
   換成 home.css 在深色段落用的亮金色 #d3b574（深灰底 #23272b 上 8.3:1）。 */
.tz-acpc .tz-eyebrow {
	color: #d3b574;
}

.tz-acpc .tz-eyebrow::before {
	background: #d3b574;
}

/* 與同一段條列文字（.tz-points li）相同的字級、行高與顏色。 */
.tz-acpc__text p {
	margin: 0;
	font-size: 16px;
	line-height: 1.9;
	font-weight: 300;
	color: rgba(255, 255, 255, .78);
}

/* ── 還沒有選圖 ───────────────────────────────────────────────────── */

.tz-about__figure.tz-about__figure--empty {
	min-height: 520px;
	background: #eef0f2;
}

.tz-acpc__figure.tz-acpc__figure--empty {
	background: #2e3338;
}

@media (max-width: 1024px) {
	.tz-about__figure.tz-about__figure--empty {
		min-height: 360px;
	}

	.tz-acpc__figure.tz-acpc__figure--empty {
		min-height: 320px;
	}
}