/* ========================================================================
 * 星艦工具艙（page-templates/tools.php，設計稿 92:307，1440×1606）。
 *
 * 版面：全寬 banner（1440×432）＋ 內容欄 1176px（設計稿 132–1308），
 * 三列「左圖 611 / 右文 500」，圖文間距 65px，列與列之間約 10px。
 *
 * 行高不照設計稿的緊排，用 2026-08-31 定下的全站標準：標題 1.5、內文 1.8。
 * 顏色照設計稿：標題金 #A58E6B、內文灰 #6D6E71、按鈕紅 #DD5041
 * （按鈕規格 150×45 / 圓角 5 / 20px 粗體，跟首頁 .mld-cards__btn 同一套，
 * 但 home.css 只在首頁模板載入，所以這裡自己寫一份）。
 * ======================================================================== */
.mld-tools {
	background: #fff;
}

/*
 * 客戶 2026-08-28 把選單背景改成不透明，「透明頁首疊在 banner 上」就沒有意義了，
 * 反而會蓋住版頭圖頂端。Blocksy 的透明頁首是母主題 static CSS 的
 * [data-transparent]{position:absolute} 疊上來的，這裡推回文流，
 * 版頭從選單下方開始。跟 home.css 同一條規則（那邊有完整說明）。
 * tools.css 只在 tools.php 範本載入，所以只影響這一頁。
 */
.ct-header [data-transparent] {
	position: static;
}

/* 頁面標題給搜尋引擎和讀屏器；畫面上 banner 圖裡已經有字了 */
.mld-tools__sr-title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* 版頭包了一層 <picture>（手機另一張圖），它預設是行內元素會留下基線空隙 */
.mld-tools__hero picture {
	display: block;
}

.mld-tools__hero img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1440 / 432; /* 設計稿 banner 尺寸 */
	object-fit: cover;
}

/*
 * 手機另一張版頭（客戶 2026-09-04 提供，320×315 @3x = 960×945），
 * 斷點跟 tools.php 裡 <source media> 的 767.98px 一致。
 * 比例要跟著換，不然 1440/432 的框會把接近正方形的手機圖裁到只剩中間一條。
 */
@media (max-width: 767.98px) {
	.mld-tools__hero img {
		aspect-ratio: 320 / 315;
	}
}

.mld-tools__list {
	max-width: calc(1176px + 2 * 20px);
	margin-inline: auto;
	/*
	 * 上：設計稿 banner 底 512 到第一列 589 = 77，維持流動。
	 * 下：設計稿是 59，使用者 2026-08-31 指定改成固定 60px。
	 *     原本是 clamp(32px, 4.1vw, 59px)，窄視窗只有 32px；改固定值之後
	 *     手機、平板的頁尾間距都會跟桌機一樣寬鬆，這是刻意的。
	 */
	padding: clamp(2.5rem, 5.35vw, 4.8125rem) 20px 80px; /* 2026-09-15 客戶指定底部 80px（原 60px）*/

	display: flex;
	flex-direction: column;
	gap: clamp(2.5rem, 5.55vw, 5rem); /* 設計稿列距只有 ~10px，太擠；2026-09-15 客戶指定桌機 80px（原 clamp(1.5rem, 2.2vw, 2rem)）*/
}

/*
 * 平板以上內容區左右外距 40px（使用者 2026-08-31 指定，版頭不動、維持滿版）。
 *
 * max-width 也跟著從 +20 改成 +40，這樣 1256px 以上的桌機內容欄仍然是設計稿的
 * 1176px——只加 padding 不加 max-width 的話，桌機的內容欄會被縮成 1136px。
 * 手機（767.98px 以下）維持 20px，40px 在 390px 螢幕上會把內容擠到只剩 310px。
 */
@media (min-width: 768px) {
	.mld-tools__list {
		max-width: calc(1176px + 2 * 40px);
		padding-inline: 40px;
	}
}

.mld-tools__row {
	display: grid;
	grid-template-columns: 611fr 500fr;         /* 設計稿 圖 611 / 文 500 */
	gap: clamp(1.5rem, 4.5vw, 4.0625rem);       /* 設計稿 圖文間距 65px */
	align-items: stretch;
}

/* 那一列沒有圖片時（客戶沒選圖）改單欄，不要留一塊空白的圖片欄 */
.mld-tools__row--no-image {
	grid-template-columns: 1fr;
}

.mld-tools__figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 5px;
}

/* 文字欄跟圖等高：按鈕 margin-top auto 貼底、靠右，對齊設計稿 */
.mld-tools__text {
	display: flex;
	flex-direction: column;
}

.mld-tools__title {
	margin: 0;
	font-size: clamp(1.25rem, 1.67vw, 1.5rem); /* 設計稿 24px */
	font-weight: 700;
	letter-spacing: 0.1em;                     /* 設計稿 2.4px / 24px */
	line-height: 1.5;                          /* 全站標題統一 1.5 */
	color: #a58e6b;
}

.mld-tools__sub {
	margin: 0.1em 0 0;
	font-size: clamp(1rem, 1.39vw, 1.25rem); /* 設計稿 20px */
	font-weight: 500;
	line-height: 1.5;
	color: #6d6e71;
}

.mld-tools__body {
	/* 上：設計稿副標底 647 到內文 692 = 45px；下：跟按鈕至少留 20px（使用者指定） */
	margin: clamp(1rem, 3.1vw, 2.8125rem) 0 20px;
	font-size: clamp(1rem, 1.39vw, 1.25rem); /* 設計稿 20px */
	font-weight: 400;
	line-height: 1.8;                        /* 全站內文統一 1.8（設計稿較緊）*/
	color: #6d6e71;
}

.mld-tools__btn {
	margin-top: auto;      /* 貼齊列底 */
	align-self: flex-end;  /* 靠右，對齊設計稿 x=1158–1308 */

	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 150px; /* 設計稿 150×45 */
	min-height: 45px;
	padding-inline: 1rem;

	background: #dd5041;
	border-radius: 5px;

	font-size: 1.25rem; /* 設計稿 20px */
	font-weight: 700;
	letter-spacing: 0.1em; /* 設計稿 2px / 20px */
	line-height: 1.2;
	color: #fff;
	text-decoration: none;
}

.mld-tools__btn:hover,
.mld-tools__btn:focus-visible {
	background: #c9412f;
	color: #fff;
}

/* 窄螢幕改直排：圖上文下（按鈕跟內文的 20px 間距由 .mld-tools__body 的下距負責）*/
@media (max-width: 991.98px) {
	.mld-tools__row {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.mld-tools__list {
		gap: 3.5rem; /* 2026-09-15 客戶要再拉開（原 2.5rem）*/
	}
}