/**
 * 首頁改版樣式 — 登月教育學院
 *
 * ⚠️ 這裡不是白紙。Blocksy 已經灌了自己的 reset、CSS 變數、字級與容器寬度，
 * 還有 Customizer 產生的動態 CSS。下面是疊在上面，不是從零開始。
 * 要蓋掉 Blocksy 的值時，先去 DevTools 看它實際套了什麼，不要用 !important 硬蓋。
 *
 * 設計稿基準：1440px 寬、hero 1440×527、媒體列的 logo 垂直置中。
 */

/* ---------------------------------------------------------------------------
 * 讓這一頁掙脫 Blocksy 的容器限制
 *
 * Blocksy 把內容包在 .ct-container（max-width 1290px）裡，hero 要滿版就得解開。
 *
 * 為什麼不用常見的 `width:100vw; margin-inline:calc(50% - 50vw)`：
 * 100vw 含捲軸寬度，桌機有垂直捲軸時會多出約 15px，整頁跑出橫向捲動。
 * 直接針對這一頁的 body class 解開容器沒有這個問題。
 *
 * 只作用於套用「首頁改版」範本的頁面，其他頁面完全不受影響。
 * ------------------------------------------------------------------------ */
body.page-template-home .ct-container {
	max-width: none;
	padding-inline: 0;
}

/* 各區塊自己決定內容寬度 */
.mld-home__container {
	max-width: var(--theme-container-width, 1290px);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

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

.mld-home__hero {
	/* 設計稿是 1440×527。用 aspect-ratio 而不是固定高度，換圖也不會破版。 */
	--mld-hero-ratio: 1440 / 527;
	position: relative; /* 圓點的定位基準 */
}

/*
 * 輪播軌道：scroll-snap 一次一張。無 JS 時仍可滑（觸控、觸控板、鍵盤），
 * home.js 只負責自動播放與圓點。捲軸藏起來——這是輪播不是捲動區。
 */
.mld-home__hero-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	cursor: grab; /* 桌機也可以按住拖曳換張（home.js 補的行為） */
}

.mld-home__hero-track::-webkit-scrollbar {
	display: none;
}

/* 拖曳中：snap 會跟 JS 設定的 scrollLeft 打架，先關掉，放開再貼齊。 */
.mld-home__hero-track.is-dragging {
	scroll-snap-type: none;
	cursor: grabbing;
}

.mld-home__hero-track img {
	-webkit-user-drag: none; /* 拖曳是換張，不是把圖拖出去 */
	user-select: none;
}

.mld-home__hero-slide {
	flex: 0 0 100%;
	min-width: 100%; /* flex-basis 遇到圖片內在寬度會被撐開，這行押住 */
	scroll-snap-align: start;
	scroll-snap-stop: always; /* 快速滑動也一次只過一張 */
	display: block; /* <a> 版的 slide 也要是塊 */
}

.mld-home__hero-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--mld-hero-ratio);
	object-fit: cover;
	object-position: center;
}

/*
 * 圓點指示。點是 8px（2026-08-28 依使用者要求從 12px 縮小），
 * 但按鈕含 padding 是 22px——手指還按得到。
 * 白點在深色 banner 上夠亮，淺色 banner（banner02 底是米白）靠陰影撐對比。
 */
.mld-home__hero-dots {
	position: absolute;
	inset-inline: 0;
	bottom: 14px;
	display: flex;
	justify-content: center;
	gap: 2px;
	z-index: 1;
}

.mld-home__hero-dot {
	width: 22px;
	height: 22px;
	padding: 7px;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.55);
	background-clip: content-box; /* 只有中間 8px 上色，外圈是純點擊範圍 */
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
	transition: background-color 0.2s;
}

.mld-home__hero-dot.is-active {
	background-color: #fff;
}

.mld-home__hero-dot:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -2px;
}

/*
 * 手機版比例 320:384，跟 banner02／03 的手機稿（92:425、92:594）一致，
 * 也是後台欄位說明建議的比例。第一張的舊手機圖是 320:393（設計稿 37:2），
 * 差 2.3%，cover 會把上下裁掉一點，內容置中所以看不出來。
 *
 * 沒上傳手機專用圖的 slide 會沿用桌機圖裁切中央——
 * 這正好就是 object-fit: cover 的行為，設計稿的手機版本來就是這樣做的。
 */
@media (max-width: 767.98px) {
	.mld-home__hero {
		--mld-hero-ratio: 320 / 384;
	}
}

/* ---------------------------------------------------------------------------
 * 媒體報導
 *
 * 設計稿裡 4 個 logo 的顯示尺寸各不相同（形狀不一樣，等高會很醜）。
 * 每一張的高度照設計稿個別指定，寬度由素材比例決定。
 * 素材已裁掉留白，所以「素材比例 ≈ 設計稿顯示比例」，換算得出來。
 * ------------------------------------------------------------------------ */
.mld-home__media {
	padding-block: clamp(1.75rem, 4vw, 2.75rem);
	background: #fff;
}

.mld-home__media-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1.25rem, 3.5vw, 3rem);
}

.mld-home__media-title {
	/*
	 * ⚠️ 待設計師確認：設計稿標示 Noto Sans TC（黑體），
	 * 但 Blocksy 全站載入的是 Noto Serif TC（明體），所以這裡實際會是明體。
	 *
	 * 目前刻意「不指定 font-family」，維持繼承全站設定——
	 * 這不是漏掉的。在設計師回覆前不要自作主張加黑體，
	 * 否則新舊區塊會混搭兩種字型，比整頁明體更難看。
	 *
	 * 確認之後的兩條路：只改這些新區塊（加 font-family），
	 * 或在 Blocksy Customizer 改全站（會動到現行頁面，且設定不在版控裡）。
	 */
	margin: 0;
	/*
	 * 設計稿：桌機 24px @1440（5:515）、手機 14px @320（37:2）。
	 * 原本照設計稿用 clamp(0.875rem, 1.75vw, 1.5rem)，但手機上 14px 跟
	 * 下方其他區塊標題（最小 24px）落差太大，使用者 2026-09-04 指定調一致。
	 * 固定 24px：手機、平板跟其他標題的下限一樣，桌機仍是設計稿的 24px。
	 */
	font-size: 1.5rem;
	font-weight: 700; /* 原設計稿 400，使用者 2026-09-01 指定改粗體 */
	letter-spacing: 0.1em;                     /* 設計稿 2.4px / 24px */
	line-height: 1.5;                          /* 全站標題統一 1.5（原設計稿 1.2）*/
	color: #000;
}

.mld-home__media-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(1.25rem, 3.5vw, 3rem);

	margin: 0;
	padding: 0;
	list-style: none;

	/* 窄螢幕整體縮小，維持 logo 之間的相對大小關係 */
	--mld-logo-scale: 1;
}

@media (max-width: 991px) {
	.mld-home__media-list {
		--mld-logo-scale: 0.85;
	}
}

/*
 * 窄螢幕：標題與 logo 列改成上下堆疊，logo 一排兩個。
 *
 * 標題要獨立一行，否則 logo 列身為 flex item 會被壓縮到 min-content 寬度
 * （＝最寬的那個 logo），可用空間被吃掉。
 *
 * 一排兩個用 grid 而不是 flex-wrap：flex 的換行點取決於每個 logo 的寬度，
 * 而這四張寬度都不一樣（110～197px），換行行為會隨螢幕寬度跳來跳去；
 * grid 兩欄是固定的，320 或 767 都一樣。
 *
 * 設計稿的手機 frame（37:2）沒有畫 logo 列，這個排法是使用者指定的。
 */
@media (max-width: 767.98px) {
	.mld-home__media-inner {
		flex-direction: column;
	}

	.mld-home__media-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		justify-items: center;
		width: 100%;
	}

	/*
	 * 欄寬不夠時等比縮小。
	 * 只設 max-width 而不動 height 的話圖會被壓扁，所以搭配 object-fit: contain：
	 * 寬度受限時整張等比縮進去，不變形也不溢出。
	 */
	.mld-home__media-item img {
		max-width: 100%;
		object-fit: contain;
	}
}

/*
 * 平板以上一排四個。
 *
 * 768 剛好是最擠的斷點：四個 logo 加間距約 675px，再加上「媒體報導」標題與
 * 它的間距就超出容器，會被擠成 3+1 兩列。
 *
 * 解法是不換行（nowrap）並允許縮小：
 *   min-width: 0        flex item 預設不能縮到內容寬度以下，不解開就會溢出
 *   max-width: 100%     配合上面那條，寬度不夠時才縮得動
 *   object-fit: contain 高度是固定的（--mld-logo-h），只縮寬度會壓扁
 * 桌機空間足夠，這三條不會生效，維持設計稿指定的尺寸。
 */
@media (min-width: 768px) {
	.mld-home__media-list {
		flex-wrap: nowrap;
	}

	.mld-home__media-item {
		min-width: 0;
	}

	.mld-home__media-item img {
		max-width: 100%;
		object-fit: contain;
	}
}

@media (max-width: 575px) {
	.mld-home__media-list {
		--mld-logo-scale: 0.7;
	}
}

.mld-home__media-item {
	/*
	 * 每個 logo 的顯示高度由版型檔用 inline 的 --mld-logo-h 指定（單位是 px 的數字），
	 * 來源是後台 ACF 的「顯示高度」欄位，或版型檔內建的預設值。
	 * 這裡的 56 只是萬一沒帶值時的保險。
	 */
	--mld-logo-h: 56;
	margin: 0;
}

.mld-home__media-item img {
	display: block;
	width: auto;
	height: calc(var(--mld-logo-h) * var(--mld-logo-scale) * 1px);
}

/* ---------------------------------------------------------------------------
 * 使命願景（設計稿 8:2550，1440×449）
 *
 * 設計稿裡的三個 SVG，有兩個用 CSS 取代比較合理：
 *   底圖遮罩 → 只是一塊 opacity 0.65 的白色矩形，用 CSS 疊一層就好
 *   分隔線   → 只是 1px 的 #A58E6B 線段，用 border-top
 * 月亮圖示是真的圖形，用匯出的 SVG（assets/images/vision-icon.svg）。
 *
 * 卡片底色是 SVG 的漸層：#0E0E0E → 黑 0.7，外層再乘 fill-opacity 0.86，
 * 換算成下面的 rgba。
 * ------------------------------------------------------------------------ */
.mld-vision {
	position: relative;
	isolation: isolate; /* 讓下面的遮罩只蓋住這一區，不影響其他區塊 */

	background-image: url("../images/vision-bg.jpg?v=20260831");
	background-size: cover;
	background-position: center;

	padding-block: clamp(2.5rem, 7.7vw, 6.94rem); /* 設計稿 111px @1440 */
}

/* 65% 白色遮罩：設計稿是一塊蓋在底圖上的白色矩形 */
.mld-vision::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.65);
	z-index: -1;
}

.mld-vision__inner {
	/*
	 * 刻意不用 Blocksy 的 1290px 容器：設計稿的兩張卡片是從 x=169 到 1265，
	 * 合計 1096px，比容器窄。用 1290 的話卡片會被撐成 609 寬（設計稿 528）。
	 */
	max-width: 1136px; /* 1096 內容 + 左右各 20 內距 */
	margin-inline: auto;
	padding-inline: 1.25rem;

	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1rem, 2.7vw, 2.45rem); /* 設計稿卡片間距 39px @1440 */
}

.mld-vision__card {
	/* SVG 漸層 #0E0E0E → 黑 0.7，整體再乘 fill-opacity 0.86 */
	background: linear-gradient(
		180deg,
		rgba(14, 14, 14, 0.86) 0%,
		rgba(0, 0, 0, 0.602) 100%
	);

	display: flex;
	flex-direction: column;
	align-items: center;

	/*
	 * 設計稿量出來的內距：上 39.6px、下 46.6px（下方比上方多，不是對稱的）。
	 * 卡片總高 229.25 = 39.6 + 圖示列 32 + 15.4 + 分隔線 1 + 16 + 內文 79.6 + 46.6
	 */
	padding: clamp(1.5rem, 2.75vw, 2.475rem) clamp(1rem, 1.5vw, 1.375rem)
		clamp(1.75rem, 3.24vw, 2.9125rem);
}

.mld-vision__label {
	display: flex;
	align-items: center;
	gap: 0.75rem;

	margin: 0;
	font-size: clamp(1rem, 1.25vw, 1.125rem); /* 設計稿 18px */
	font-weight: 700;
	letter-spacing: 0.1em;                    /* 設計稿 1.8px / 18px */
	line-height: 1.5;                         /* 全站標題統一 1.5（原設計稿 1.2）*/
	color: #a58e6b;
}

.mld-vision__icon {
	display: block;
	width: auto;
	height: clamp(1.5rem, 2.2vw, 2rem); /* 設計稿 32px */
}

.mld-vision__text {
	/*
	 * ⚠️ 分隔線與內文的寬度是不一樣的：
	 *   分隔線 362 / 528.4 = 68.5% 卡片寬
	 *   內文   484.8 / 528.4 = 91.7% 卡片寬
	 * 一開始我把兩者合成同一個元素（border-top），結果內文被壓成 68.5% 寬，
	 * 兩行的文案被擠成四行。分隔線改用 ::before 獨立畫。
	 */
	width: 91.7%;
	margin: 0;

	font-size: clamp(1.125rem, 1.95vw, 1.75rem); /* 設計稿 28px */
	font-weight: 400;
	letter-spacing: 0.1em;                       /* 設計稿 2.8px / 28px */
	line-height: 1.8;                            /* 全站內文統一 1.8（原設計稿 1.42，兩行共 79.6px）*/
	text-align: center;
	color: #fff;
}

/* 分隔線：362 / 484.8 = 74.7% 的內文寬度，1px、#A58E6B */
.mld-vision__text::before {
	content: "";
	display: block;
	width: 74.7%;
	height: 1px;
	background: #a58e6b;
	margin-inline: auto;
	margin-block: clamp(0.7rem, 1.07vw, 0.9625rem) clamp(0.75rem, 1.11vw, 1rem);
}

/* 窄螢幕：兩張卡片改成上下堆疊，分隔線放寬免得字被擠斷 */
@media (max-width: 767.98px) {
	.mld-vision__inner {
		grid-template-columns: 1fr;
	}

	.mld-vision__text {
		width: 90%;

		/*
		 * 讓瀏覽器把每行字數配平均，避免最後掉出「會。」這種單字行
		 * （2026-09-01 使用者回報）。舊瀏覽器不支援就照常斷行，無害。
		 */
		text-wrap: balance;
	}

	/*
	 * 設計稿指定的換行位置是配合「桌機」卡片寬度的；手機卡片窄、
	 * 加上使用者字級可能放大，指定行塞不下會被二次折行，掉出孤字。
	 * 手機取消 <br>，讓兩句接起來自然流動 + 上面的 balance 配平。
	 */
	.mld-vision__text br {
		display: none;
	}
}

/* ===========================================================================
 * 共用卡片輪播 .mld-cards__*
 *
 * 設計稿裡有三個區塊用了「完全相同」的卡片：370×410、圖 345×230、間距 16。
 *   區塊 3 最新講座（8:2541）  底金色、講師 + 紅色按鈕
 *   區塊 4 最新課程（8:2668）  底白色、講師 + 課程形式 + 紅色按鈕
 *   區塊 7 新聞報導（17:5222） 底金色、摘要 + 閱讀更多，沒有按鈕
 * 所以這一組是共用的基底，各區塊只用 --course / --news 修飾字寫差異。
 *
 * ⚠️ 這組原本叫 .mld-seminar__*，是切區塊 3 時取的名字。區塊 4 沿用之後名字
 * 就不精確了（裝的是課程），當時在註解裡留了「出現第三種同規格卡片就改名」。
 * 區塊 7 就是第三種，所以在 2026-08-11 整組改成 .mld-cards__*。
 *
 * 設計稿的三個 SVG 全部是純形狀，一個都不需要當素材：
 *   卡片   → 白底、圓角 5px
 *   按鈕   → #DD5041、圓角 5px
 *   左右箭頭 → 2px 折線，用匯出的原始路徑內嵌成 <svg>
 *
 * 版面用 CSS scroll-snap，不引入輪播套件：沒有 JS 也能滑、能鍵盤操作，
 * JS 只負責把箭頭接上去（靠 data-mld-* 屬性，不認 class）。
 * ======================================================================== */
.mld-cards {
	background: #a58e6b;
	padding-block: clamp(2.5rem, 5.7vw, 5.125rem); /* 設計稿 82px @1440 */
}

.mld-cards__title {
	margin: 0 0 clamp(1.5rem, 3.3vw, 3rem); /* 設計稿標題到卡片 48px */
	font-size: clamp(1.5rem, 2.22vw, 2rem); /* 設計稿 32px */
	font-weight: 700;
	letter-spacing: 0.1em;                  /* 設計稿 3.2px / 32px */
	line-height: 1.5;                       /* 全站標題統一 1.5（原設計稿 1.2）*/
	text-align: center;
	color: #fff;
}

/*
 * 箭頭在卡片外側：設計稿卡片區 149–1291（寬 1142），箭頭 104 與 1340。
 *
 * ⚠️ max-width 一定要用 calc 從內距推回去，不能自己填估計值。
 * 原本寫死 1240px，但 padding 的 clamp 在 1440 實際是 50.4px，
 * 軌道只剩 1139.2 < 三張卡的 1142（370×3 + 16×2），
 * 於是「新聞報導」那種剛好三張卡的區塊就被判定成捲得動，
 * 右邊憑空多一顆按了只會捲 3px 的箭頭。
 * 區塊 3、4 是六張卡、本來就會溢出，這個修正對它們沒有影響。
 */
.mld-cards__viewport {
	--mld-cards-pad: clamp(1.25rem, 3.5vw, 3.4rem);

	position: relative;
	max-width: calc(1142px + 2 * var(--mld-cards-pad));
	margin-inline: auto;
	padding-inline: var(--mld-cards-pad);
}

.mld-cards__track {
	display: grid;
	grid-auto-flow: column;
	/*
	 * 設計稿卡片寬 370。
	 *
	 * ⚠️ 不要寫成 minmax(0, 370px)：下限是 0 的話，grid 會為了把所有卡片
	 * 塞進可視範圍而一路壓縮（6 張時實測被壓成 177px），輪播就沒有意義了。
	 * 用 min() 給一個不可壓縮的寬度，超出的部分才會真的變成可捲動。
	 * 窄螢幕取 78%，剛好露出下一張的邊，暗示可以滑。
	 */
	--mld-cards-gap: 16px;               /* 設計稿卡片間距 16 */

	grid-auto-columns: min(370px, 78%);  /* 桌機取 370；下面的斷點會覆蓋平板 */
	gap: var(--mld-cards-gap);

	/*
	 * 2026-09-15：課程卡的陰影會被這個捲動容器裁掉（overflow-x: auto 連帶
	 * 把 overflow-y 變成 auto，卡片外的陰影就不見了），所以上下留 20px 給陰影，
	 * 再用等量負外距抵銷，版面位置不變。scroll-padding 讓輪播的對齊點跟著內縮，
	 * 卡片停的位置也跟以前一樣。
	 *
	 * ⚠️ 左右只能留「比間距小」的空間：留到等於或超過間距，相鄰的卡片就會在
	 * 邊緣露出一條（等於間距時實測還會因次像素捨入露 1px；使用者 2026-08-28
	 * 起就不接受露出下一張）。所以取間距減 1px = 15px，陰影模糊 16px 只少最外
	 * 圈 1px，看不出來。
	 */
	--mld-cards-shadow-room: 20px;
	--mld-cards-shadow-room-x: calc(var(--mld-cards-gap) - 1px);
	margin: calc(-1 * var(--mld-cards-shadow-room)) calc(-1 * var(--mld-cards-shadow-room-x));
	padding: var(--mld-cards-shadow-room) var(--mld-cards-shadow-room-x);
	scroll-padding-inline: var(--mld-cards-shadow-room-x);
	/*
	 * 左右那 15px 再加漸層遮罩往邊界淡出：畫面外那張卡片的陰影會伸進這個區域，
	 * 不遮的話會在軌道邊界被硬切成一條直直的灰線（使用者 2026-09-15 抓到）。
	 * 畫面內卡片自己的陰影本來就是往外淡的，遮了看不出差別。
	 */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--mld-cards-shadow-room-x), #000 calc(100% - var(--mld-cards-shadow-room-x)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--mld-cards-shadow-room-x), #000 calc(100% - var(--mld-cards-shadow-room-x)), transparent 100%);
	list-style: none;

	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;               /* 捲軸藏起來，用箭頭操作 */
	overscroll-behavior-x: contain;
}

.mld-cards__track::-webkit-scrollbar {
	display: none;
}

/*
 * 手機一張佔滿版（使用者 2026-08-28 指定，講座／課程／新聞／師資四區一致）。
 * 78% 的「露出下一張」在手機上看起來像破版——跟學員好評區當時把 92% 改成
 * 100% 是同一個教訓。左右 20px 外距由區塊本身的內距負責，卡片＝軌道內容寬；
 * 可以滑這件事由左右箭頭提示（手機上箭頭一樣會顯示）。
 */
@media (max-width: 767.98px) {
	.mld-cards__track {
		grid-auto-columns: 100%;
	}
}

/*
 * 平板不留半張卡（使用者 2026-08-31 指定：切在按鈕中間看起來就是破版）。
 *
 * 平板一律兩張填滿，1228px 起（量出來的分界）才換回設計稿的 370px 三張。
 *
 * ⚠️ 768~812 不要做成「一張滿版」——卡片會撐成 714px 的巨無霸（2026-08-31
 * 試過，使用者一眼就看出不對）。這個區間兩張是 349px，比設計稿的 370 略窄，
 * 但比撐大好得多。露出下一張來暗示可滑這件事交給左右箭頭。
 */
@media (min-width: 768px) and (max-width: 1227.98px) {
	.mld-cards__track {
		grid-auto-columns: calc((100% - var(--mld-cards-gap)) / 2);
	}
}

.mld-cards__card {
	scroll-snap-align: start;

	display: flex;
	flex-direction: column;

	background: #fff;
	border-radius: 5px;
	padding: 13px 12px 17px; /* 設計稿：上 13、左右 12、下 17 */
}

.mld-cards__thumb {
	display: block;
	border-radius: 5px;
	overflow: hidden;
}

/*
 * 文章完全找不到圖時的佔位。
 * 撐出跟有圖時一樣的高度，卡片才會等高、版面不會忽高忽低。
 * 用品牌色的淡色調而不是刺眼的灰，讓它看起來像設計的一部分。
 */
.mld-cards__thumb--empty {
	aspect-ratio: 345 / 230;
	background: linear-gradient(135deg, #e8e1d6 0%, #d6cbb9 100%);
}

.mld-cards__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 345 / 230; /* 設計稿商品圖尺寸 */
	object-fit: cover;
}

.mld-cards__name {
	/* 設計稿：圖片下方 18px，24px、兩行的高度 */
	margin: 18px 0 0;
	font-size: clamp(1.125rem, 1.67vw, 1.5rem); /* 設計稿 24px */
	font-weight: 500;
	line-height: 1.5;    /* 全站標題統一 1.5（原設計稿 1.48）*/
	color: #201d1d;

	/* 標題長度不一，限制兩行讓每張卡片等高 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mld-cards__name a {
	color: inherit;
	text-decoration: none;
}

.mld-cards__name a:hover,
.mld-cards__name a:focus-visible {
	text-decoration: underline;
}

/* 講師與按鈕同一列，貼齊卡片底部 */
.mld-cards__foot {
	margin-top: auto;
	padding-top: 16px;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.mld-cards__instructor {
	margin: 0;
	font-size: 0.875rem; /* 設計稿 14px */
	font-weight: 500;
	/* 原設計稿 1.2——單行沒差，但手機折成兩行會擠在一起，
	   使用者 2026-09-01 指定改照全站內文的 1.8 */
	line-height: 1.8;
	color: #9f9f9f;
}

.mld-cards__btn {
	flex: none;

	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-cards__btn:hover,
.mld-cards__btn:focus-visible {
	background: #c9412f;
	color: #fff;
}

/* 左右箭頭 */
.mld-cards__nav {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	z-index: 1;

	display: grid;
	place-items: center;

	width: clamp(1.75rem, 2.4vw, 2.25rem);
	height: 45px;
	padding: 0;

	background: none;
	border: 0;
	color: #fff;
	cursor: pointer;
}

.mld-cards__nav[hidden] {
	display: none;
}

.mld-cards__nav--prev {
	left: 0;
}

.mld-cards__nav--next {
	right: 0;
	scale: -1 1; /* 同一個路徑水平翻轉成右箭頭 */
}


/* ---------------------------------------------------------------------------
 * 最新課程（設計稿 8:2668，1440×760）
 *
 * 卡片規格與「最新講座」完全相同，所以沿用 .mld-cards__* 那一組樣式，
 * 這裡只寫差異：白底、標題金色、卡片有陰影、meta 兩行。
 * ------------------------------------------------------------------------ */
.mld-cards--course {
	background: #fff;
}

.mld-cards--course .mld-cards__title {
	color: #a58e6b; /* 設計稿 #A58E6B，跟講座區的白字不同 */
}

.mld-cards--course .mld-cards__card {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16); /* 2026-09-15 客戶要求加深；原 0 2px 12px / 0.12 */
}

/* 白底上的箭頭要看得見 */
.mld-cards--course .mld-cards__nav {
	color: #a58e6b;
}

/*
 * 課程卡不放講師與課程形式（使用者 2026-08-28 指示），底部只剩一顆按鈕。
 * .mld-cards__foot 是 space-between，只有一個子元素時會被推到左邊——
 * 這裡改成靠右，跟正上方「最新講座」卡片的按鈕位置對齊。
 */
.mld-cards--course .mld-cards__foot {
	justify-content: flex-end;
}

/* ---------------------------------------------------------------------------
 * 新聞報導（設計稿 17:5222，1440×615）
 *
 * 第三個沿用 .mld-cards__* 的區塊。底色與標題顏色跟「最新講座」相同（金底白字），
 * 所以基底不用改，這裡只寫差異：垂直節奏比較緊、卡片沒有按鈕、改成摘要 + 閱讀更多。
 * ------------------------------------------------------------------------ */

/*
 * 設計稿的垂直節奏比另外兩區緊：卡片從 142 開始（那兩區是 168），下緣留 63（那兩區 82）。
 * 62 + 標題 38.4 + 41.6 = 142，142 + 卡片 410 + 63 = 615 ✓
 */
.mld-cards--news {
	padding-block: clamp(2rem, 4.31vw, 3.875rem) clamp(2rem, 4.375vw, 3.9375rem);
}

.mld-cards--news .mld-cards__title {
	margin-bottom: clamp(1.25rem, 2.9vw, 2.6rem); /* 設計稿標題到卡片 41.6px */
}

.mld-cards__excerpt {
	/*
	 * 設計稿：標題下 10px、14px、#9F9F9F、三行。
	 * 行高改照全站內文統一 1.8（設計稿量出 17/14 ≈ 1.21）。
	 */
	margin: 10px 0 0;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.8;
	color: #9f9f9f;

	/*
	 * 字距跟著全站（Blocksy 的 0.08em）。設計稿這個圖層其實沒有字距，
	 * 原本照稿歸零過，但使用者 2026-09-01 反映跟旁邊文字比起來明顯偏擠，
	 * 指定改回全站共用字距。代價是三行截斷的位置會比設計稿早一點點。
	 */

	/* 摘要長度不一，限制三行讓每張卡片的「閱讀更多」對齊 */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mld-cards__more {
	/*
	 * 貼齊卡片底部而不是跟著摘要走——摘要行數會變，用 auto 撐開才能讓
	 * 三張卡的「閱讀更多」在同一條水平線上。
	 */
	margin-top: auto;
	padding-top: 12px;
	text-align: right;

	font-size: 0.875rem; /* 設計稿 14px */
	line-height: 1.2;
	color: #6d6e71;
	text-decoration: none;
}

a.mld-cards__more:hover,
a.mld-cards__more:focus-visible {
	color: #6d6e71;
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * 院長的話（設計稿 8:2869，1440×760）
 *
 * 版面是「照片在右、文字壓在左」：
 *   底圖   x=427 起，設計稿寬 1156，右邊超出畫面 143px 被裁掉
 *   白漸層 x=427 到 1180（寬 753），右透明、左純白，讓文字有乾淨的底
 *   文字   x=238 起、寬 550
 *
 * 漸層的角度來自設計稿的 -89.93deg，實質就是水平方向，所以用 to left；
 * 色標 76.41% 也照抄——那是白色完全不透明的位置。
 * ------------------------------------------------------------------------ */
.mld-dean {
	position: relative;
	background: #fff;
	overflow: hidden; /* 照片超出右緣的部分要裁掉，否則整頁會有橫向捲動 */
}

.mld-dean__media {
	position: absolute;
	inset-block: 0;
	left: 29.65%;   /* 設計稿 427 / 1440 */
	width: 80.28%;  /* 設計稿 1156 / 1440，右邊超出畫面由 overflow 裁掉 */
}

.mld-dean__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
}

/*
 * 白色漸層：寬度是照片的 753/1156。
 *
 * ⚠️ 左邊要比照片多蓋 2px：在非整數 DPR（例如 4K 螢幕 150% 縮放 = 1.5）
 * 子像素捨入會讓照片左緣多畫出 1 個裝置像素、沒被漸層蓋到，
 * 整段高度露出一條淡灰直線。漸層左端本來就是純白，多蓋沒有視覺差異。
 */
.mld-dean__media::after {
	content: "";
	position: absolute;
	inset-block: 0;
	left: -2px;
	width: calc(65.14% + 2px);
	background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, #fff 76.41%);
}

.mld-dean__inner {
	position: relative; /* 疊在照片與漸層之上 */
	max-width: 1440px;  /* 設計稿基準，再寬不繼續拉開文字 */
	margin-inline: auto;

	/* 設計稿：上 193、左 238、下 168 */
	padding: clamp(2.5rem, 13.4vw, 12.0625rem) 1.25rem clamp(2.5rem, 11.67vw, 10.5rem)
		clamp(1.25rem, 16.53vw, 14.875rem);
}

/*
 * ⚠️ 文字欄寬要「跟著視窗等比縮」，不能固定 550px。
 *
 * 白色漸層的位置與寬度都是百分比、會跟著視窗縮；文字欄如果固定 550，
 * 視窗一窄文字就會伸出白色區、直接壓在人像上看不清楚。
 * 實測 768 寬時文字右半段整個蓋在臉上。
 *
 * 38.19vw = 設計稿的 550 / 1440，這樣不管多寬，文字結束的位置在漸層上的
 * 相對深度都一樣（實測 1440 與 992 都落在約 68% 白）。
 */
.mld-dean__heading,
.mld-dean__text {
	max-width: min(550px, 38.19vw);
}

.mld-dean__heading {
	margin: 0 0 clamp(1.5rem, 3.28vw, 2.95rem); /* 設計稿標題到內文 47.2px */
	font-size: clamp(1.125rem, 1.67vw, 1.5rem); /* 設計稿 24px */
	font-weight: 700;
	letter-spacing: 0.1em;                      /* 設計稿 2.4px / 24px */
	line-height: 1.5;                           /* 全站標題統一 1.5（原設計稿 1.2）*/
	color: #a58e6b;
}

.mld-dean__text {
	margin: 0;

	font-size: clamp(1rem, 1.39vw, 1.25rem); /* 設計稿 20px */
	font-weight: 400;
	/* 設計稿三段共 323px：10 行 + 2 個空行，323 / 12 ≈ 26.9 → 1.35 */
	line-height: 1.8;   /* 全站內文統一 1.8（原設計稿量出 1.35）*/
	color: #6d6e71;
}

/* 段落之間空一行，跟設計稿的空白段落等高 */
.mld-dean__text + .mld-dean__text {
	margin-top: 1.35em;
}

/*
 * 窄螢幕：改成上下排——照片在上、文字在下。
 *
 * ⚠️ 斷點是 992 不是 768。等比縮的文字欄在 768 只剩 293px（20px 字大約
 * 一行 14 個字），讀起來太擠；而且再窄下去人像會被壓成一條。
 * 992 以下堆疊，文字就能吃滿整個寬度。
 *
 * 設計稿沒有手機版，這個排法是自行判斷的（同區塊 3～7 的處理方式）。
 */
@media (max-width: 991.98px) {
	.mld-dean__media {
		/* relative 不能是 static：::after 要以照片為定位基準，
		   static 的話漸層會改抓整個 section、往下蓋到文字區 */
		position: relative;
		inset: auto;
		width: 100%;
		aspect-ratio: 1156 / 760;
	}

	/*
	 * 白色刷淡照留（2026-09-01 修正）。
	 *
	 * 原本這裡把 ::after 關掉，理由是「堆疊後文字不壓在照片上、漸層沒意義」，
	 * 但使用者指出：設計稿的照片本身就是帶白色刷淡的視覺，關掉之後手機版
	 * 露出整張未處理的原圖（投影幕上的字全部清晰可見），跟設計稿的調性不符。
	 * 漸層是照片視覺的一部分，不是只為了給文字墊底，所以照桌機的參數保留。
	 */

	.mld-dean__inner {
		padding: clamp(1.5rem, 6vw, 2.5rem) 1.25rem clamp(2rem, 8vw, 3rem);
	}

	/* 堆疊之後沒有人像要閃，文字吃滿寬度 */
	.mld-dean__heading,
	.mld-dean__text {
		max-width: none;
	}
}

/* ---------------------------------------------------------------------------
 * 學員好評（設計稿 8:2917，1440×862）
 *
 * 純圖片區塊：每一則好評都是一張留言截圖，353×327、圓角無、陰影 0 4px 4px 25%。
 * 設計稿是 3 欄 × 2 列共 6 張，欄距 24、列距 31，第一列 y=119、第二列 y=477。
 *
 * ⚠️ 版面是「兩列、往右長」的格線，不是一般的一列輪播：
 * grid-auto-flow: column 搭配兩個 row，項目會先往下填滿一欄再往右開新欄。
 * 剛好 6 張時排滿 3 欄、寬度正好等於軌道，箭頭自動隱藏（＝設計稿的樣子）；
 * 客戶在後台加到第 7 張以上才會變成可以左右捲。
 * 一份程式碼同時滿足設計稿與使用者要的「照片輪播」。
 * ------------------------------------------------------------------------ */
.mld-voice {
	background: #fff;
	/*
	 * 設計稿：標題距上緣 50、最後一列距下緣 58。
	 * 下緣扣掉軌道自己的 4px 內距（見下方說明）＝ 54。
	 */
	padding-block: clamp(1.75rem, 3.47vw, 3.125rem) clamp(2rem, 3.75vw, 3.375rem);
}

.mld-voice__title {
	/* 設計稿標題到第一列 30.6px，扣掉軌道的 4px 內距 = 26.6 */
	margin: 0 0 clamp(1rem, 1.85vw, 1.6625rem);
	font-size: clamp(1.5rem, 2.22vw, 2rem);        /* 設計稿 32px */
	font-weight: 700;
	letter-spacing: 0.1em;                         /* 設計稿 3.2px / 32px */
	line-height: 1.5;                              /* 全站標題統一 1.5（原設計稿 1.2）*/
	text-align: center;
	color: #a58e6b;
}

/*
 * 三欄 353 + 兩個欄距 24 = 1107，左右再各留一段給箭頭站。
 * max-width 一定要用 calc 從內距推——寫死估計值會讓剛好排滿的情況
 * 差幾像素被判定成「捲得動」，憑空多一顆箭頭（區塊 6、7 都踩過）。
 */
.mld-voice__viewport {
	--mld-voice-pad: clamp(1.25rem, 3.5vw, 3.4rem);

	/*
	 * 軌道自己要留一圈內距，否則截圖的陰影會被 overflow 切掉
	 * （overflow-x: auto 會連垂直方向一起裁）。
	 *
	 * ⚠️ 這一圈內距「算在 scrollWidth 裡」，所以 max-width 必須把它加回去。
	 * 少加的話六張剛好排滿卻多出 8px，會被判定成捲得動、兩顆箭頭都跑出來。
	 */
	--mld-voice-shadow-pad: 4px;

	/*
	 * ⚠️ 一次要看到幾欄，是這一區 RWD 的唯一旋鈕。
	 *
	 * 原本每欄固定 353px、軌道寬度自己算，結果平板（768）軌道只有 691px、
	 * 兩欄加間距要 730px，第二欄被切掉 39px，看起來像壞掉而不是「可以滑」。
	 *
	 * 改成：先決定這個斷點要完整顯示幾欄，max-width 與欄寬都從這個數字推。
	 * 欄寬取 min(353px, 平分寬)——空間夠就維持設計稿的 353（＝素材的兩倍圖
	 * 剛好對上），不夠就等比縮，但永遠是整數欄、不會出現切一半的欄。
	 */
	--mld-voice-cols: 3;      /* 設計稿桌機是三欄 */
	--mld-voice-col-w: 353px; /* 設計稿欄寬 */
	--mld-voice-gap: 24px;    /* 設計稿欄距 */

	position: relative;
	max-width: calc(
		var(--mld-voice-cols) * var(--mld-voice-col-w) +
		(var(--mld-voice-cols) - 1) * var(--mld-voice-gap) +
		2 * var(--mld-voice-shadow-pad) + 2 * var(--mld-voice-pad)
	);
	margin-inline: auto;
	padding-inline: var(--mld-voice-pad);
}

.mld-voice__track {
	display: grid;
	grid-auto-flow: column;          /* 先往下填滿一欄，再往右開新欄 */
	grid-template-rows: repeat(2, auto);

	/*
	 * 空間夠就用設計稿的 353px（素材是 706 的兩倍圖，剛好對上）；
	 * 不夠就把可用寬度平分給 --mld-voice-cols 欄，永遠不會切出半欄。
	 * 這裡的 100% 是軌道的內容寬（已扣掉自己的 4px 內距）。
	 */
	grid-auto-columns: min(
		var(--mld-voice-col-w),
		calc(
			(100% - (var(--mld-voice-cols) - 1) * var(--mld-voice-gap)) /
			var(--mld-voice-cols)
		)
	);
	column-gap: var(--mld-voice-gap); /* 設計稿欄距 24 */
	row-gap: 31px;                    /* 設計稿列距 */

	margin: 0;
	padding: var(--mld-voice-shadow-pad); /* 陰影不要被 overflow 切掉，寬度已在 viewport 補回 */
	list-style: none;

	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/*
	 * ⚠️ 沒有這一行，卡片會偏左 4px。
	 *
	 * scroll-snap-align: start 預設是把卡片左緣對齊容器的「內距框」，
	 * 所以瀏覽器會自動捲掉 padding-left 那 4px（實測 scrollLeft 停在 4）。
	 * 結果手機上左邊距 20、右邊距 28，看起來沒置中。
	 * 把貼齊點改成對齊內容框，scrollLeft 就會停在 0、左右對稱。
	 */
	scroll-padding-inline: var(--mld-voice-shadow-pad);
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.mld-voice__track::-webkit-scrollbar {
	display: none;
}

.mld-voice__item {
	scroll-snap-align: start;
	margin: 0;
}

.mld-voice__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1887 / 1747;  /* 設計稿截圖比例，同時預留空間避免版面跳動 */
	object-fit: contain;        /* 去背圖：整張放進去，不要裁掉對話框的尖角 */

	/*
	 * ⚠️ 用 filter: drop-shadow 而不是 box-shadow。
	 *
	 * 這些截圖是「去背的對話框」——PNG 有 alpha，對話框外面那一圈（約 8%）是透明的。
	 * box-shadow 畫的是元素的「矩形邊框」，會在對話框外圍浮出一個方框；
	 * drop-shadow 是照 alpha 通道畫的，陰影會貼著對話框的輪廓（含左下角的小尖角），
	 * 這才是設計稿的樣子。
	 *
	 * 之前這裡是錯的：我輸出 WebP 時寫了 convert('RGB') 把 alpha 丟掉，
	 * 透明區變成白色，於是只能用 box-shadow、陰影就成了整張圖的方框。
	 * 素材已重新輸出成 RGBA。
	 */
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

/* 白底上的箭頭要看得見 */
.mld-voice__nav {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	z-index: 1;

	display: grid;
	place-items: center;

	width: clamp(1.75rem, 2.4vw, 2.25rem);
	height: 45px;
	padding: 0;

	background: none;
	border: 0;
	color: #a58e6b;
	cursor: pointer;
}

.mld-voice__nav[hidden] {
	display: none;
}

.mld-voice__nav--prev {
	left: 0;
}

.mld-voice__nav--next {
	right: 0;
	scale: -1 1; /* 同一個路徑水平翻轉成右箭頭 */
}

/*
 * 平板：改成完整顯示兩欄。
 *
 * 三欄需要 1107 + 8 + 左右內距 ≈ 1216 的視窗才排得下，再窄就會切到第三欄。
 * 所以 1216 以下降成兩欄——欄寬由上面的 min() 自動處理，
 * 空間夠維持 353、不夠就平分，兩欄一定都是完整的。
 * 六張是三欄的量，看得到兩欄、滑一下看第三欄。
 */
@media (max-width: 1215.98px) {
	.mld-voice__viewport {
		--mld-voice-cols: 2;
	}
}

/*
 * 手機：一次一張、接近滿版，而且只剩一列。
 *
 * 這些截圖的字是燒在圖裡的，縮小就讀不到——320 寬時原本每張只有 200px
 * （螢幕的 63%），字幾乎看不清楚。改成單列 88% 寬（320 時約 282px，
 * 大了 40%），左右滑一張一張看；露出的 12% 邊也順便暗示可以滑。
 *
 * 兩列改成一列是使用者指定的：兩列在手機上會讓這一區變得很高，
 * 而且每張還是一樣小，沒有好處。
 */
@media (max-width: 767.98px) {
	.mld-voice__viewport {
		max-width: none; /* 手機不受欄數公式限制，吃滿可用寬度 */

		/*
		 * 左右外距。實際看到的邊距 = 這個值 + 軌道的 4px 陰影內距，
		 * 所以 16px 會呈現成 20px。要調寬窄改這一個值就好，卡片會跟著變、
		 * 而且維持置中。
		 */
		--mld-voice-pad: 1rem;
	}

	.mld-voice__track {
		grid-template-rows: auto; /* 單列 */

		/*
		 * ⚠️ 一定要 100%，不能留「露出下一張」的縫。
		 *
		 * 原本設 92%，結果卡片只佔軌道的 92%、靠左對齊，剩下的 8% 全跑到右邊——
		 * 實測 320 時左邊距 12px、右邊距 34.5px，看起來沒置中，
		 * 而多出來的那一段又剛好露出下一張圖的邊，像是破版。
		 *
		 * 改成 100% 之後卡片寬度＝軌道內容寬，左右邊距由 --mld-voice-pad
		 * 對稱撐出來，自然置中，也不會看到下一張。
		 * 可以滑這件事由左右箭頭提示（手機上箭頭一樣會顯示）。
		 */
		grid-auto-columns: 100%;
	}
}

/* ---------------------------------------------------------------------------
 * 權威師資（設計稿 8:2763，1440×760）
 *
 * ⚠️ 這一區「刻意不共用」.mld-cards__* 那組卡片樣式。
 * 卡片規格完全不同：直式照片 291×410、沒有紅色按鈕、姓名下有一條分隔線、
 * 簡介五行。硬套那組只會一直在覆蓋別人的值。
 * 共用的只有輪播機制，而那是靠版型檔的 data-mld-* 屬性接上 home.js 的，
 * 跟 class 名字無關——所以這裡可以自由命名。
 *
 * 設計稿的兩個 SVG 都用 CSS 還原（已比對過原始檔，不是目測）：
 *   照片外框 → 圓角 5px、white → #A58E6B 的線性漸層
 *   分隔線   → 1px 的 #A58E6B
 *
 * 設計稿座標（1440 寬、760 高的 frame）：
 *   標題 top 24 → 卡片 top 91 → 照片 bottom 501 → 姓名 top 520
 *   → 分隔線 562 → 簡介首行 577 → 末行 659 → 閱讀更多 690
 * ------------------------------------------------------------------------ */
.mld-faculty {
	background: #f7f8fa; /* 2026-09-15 客戶要求：權威師資整區改淺灰 */
	/*
	 * 設計稿：標題距上緣 24px、「閱讀更多...」的文字底距下緣 53px。
	 *
	 * 下緣一開始抓成 36px 是量錯了——設計稿那個文字圖層裡有一個空的第二行，
	 * 圖層的 bounding box 比看得見的文字低了 17px，我拿了 box 的底當基準。
	 */
	padding-block: clamp(1.25rem, 1.67vw, 1.5rem) clamp(2.25rem, 3.68vw, 3.3125rem);
}

.mld-faculty__title {
	/* 設計稿標題底到照片頂 28.6px */
	margin: 0 0 clamp(1rem, 2vw, 1.8rem);
	font-size: clamp(1.5rem, 2.22vw, 2rem); /* 設計稿 32px */
	font-weight: 700;
	letter-spacing: 0.1em;                  /* 設計稿 3.2px / 32px */
	line-height: 1.5;                       /* 全站標題統一 1.5（原設計稿 1.2）*/
	text-align: center;
	color: #a58e6b;
}

/*
 * 三張卡片 + 兩個間距 = 軌道寬，左右再各留一段給箭頭站。
 * 設計稿的卡片區是 238.9–1195.9，並不是完美置中（差 2.6px），這裡取置中。
 *
 * ⚠️ max-width 一定要用 calc 從卡片寬、間距、內距算出來，不能自己填估計值。
 * 原本寫死 1055px，但 padding 的 clamp 在 1440 實際算出來是 50.4px（不是我估的 49），
 * 軌道只剩 954.2 < 內容 956.5，桌機三張卡就被判定成「捲得動」，
 * 右邊憑空多一顆按了只會捲 2px 的箭頭。
 */
.mld-faculty__viewport {
	/*
	 * 卡片寬與容器寬「一定要一起改」，不然就會踩到上面那個幽靈箭頭的坑。
	 * 所以抽成變數、容器寬用算式推出來——要調寬度只動 --mld-faculty-card。
	 *
	 * 291 → 320（2026-08-28）：客戶給了三位師資的真實文案之後，最長的一行
	 * 「從總體經濟、產業趨勢到企業基本面進行市場分析」需要 312px，291 會斷行、
	 * 尾巴掉兩個字。312 是剛好不斷行的下限，取 320 留一點餘裕給之後改字。
	 * 照片是 aspect-ratio 291/410，卡片變寬照片會等比變高，比例不變。
	 */
	--mld-faculty-card: 320px;
	--mld-faculty-gap: 42px;
	/* 實際用到的間距。抽成變數是因為下面「平板剛好兩張」的算式要減掉它 */
	--mld-faculty-gap-now: clamp(1rem, 2.9vw, var(--mld-faculty-gap));
	--mld-faculty-pad: clamp(1.25rem, 3.5vw, 3.4rem);

	position: relative;
	max-width: calc(
		3 * var(--mld-faculty-card) + 2 * var(--mld-faculty-gap) + 2 * var(--mld-faculty-pad)
	);
	margin-inline: auto;
	padding-inline: var(--mld-faculty-pad);
}

.mld-faculty__track {
	display: grid;
	grid-auto-flow: column;
	/*
	 * 跟講座區同樣的理由：不能用 minmax(0, 291px)，下限是 0 的話 grid 會把所有
	 * 卡片壓進可視範圍，輪播就沒有意義。窄螢幕取 78%，露出下一張的邊暗示可以滑。
	 */
	grid-auto-columns: min(var(--mld-faculty-card), 78%); /* 78% 只給平板；手機在下面改成滿版 */
	gap: var(--mld-faculty-gap-now); /* 設計稿卡片間距 42 @1440 */

	margin: 0;
	padding: 0;
	list-style: none;

	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.mld-faculty__track::-webkit-scrollbar {
	display: none;
}

/* 手機一張佔滿版，理由同 .mld-cards__track 那段（四區一致）。 */
@media (max-width: 767.98px) {
	.mld-faculty__track {
		grid-auto-columns: 100%;
	}
}

/*
 * 平板剛好放兩張，右邊不露出第三張（使用者 2026-08-31 指定，已經有箭頭提示可捲）。
 *
 * 上界 1152.98 是量出來的：1153px 起三張就完整放得下，不需要這條。
 * 這個區間原本第三張會露出 30px（768）到 319px（1100）——1100 那個最糟，
 * 差 1px 就是完整一張，看起來像壞掉。
 */
@media (min-width: 768px) and (max-width: 1152.98px) {
	.mld-faculty__track {
		grid-auto-columns: calc((100% - var(--mld-faculty-gap-now)) / 2);
	}
}

/*
 * 主講老師（水丰刀）桌機放中間、手機第一（客戶 2026-09-04 指定）。
 *
 * 2026-09-15 客戶要求後台順序改成跟桌機一樣：Indigo、水丰刀、朱老師，
 * 所以 repeater 第二位才是主講老師，桌機三張全開時照資料順序她就在中間。
 * 手機一次一張、平板一次兩張（1152.98px 以下）用 order 把第二張提到最前，
 * 主講老師第一眼就看得到。畫面跟 9/4 那版完全一樣，只有後台順序變了。
 */
@media (max-width: 1152.98px) {
	.mld-faculty__card:nth-child(2) {
		order: -1;
	}
}

.mld-faculty__card {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
}

/*
 * 照片框。
 *
 * 底色漸層永遠在，所以沒上傳照片時不需要另外做佔位——露出來的就是設計稿本來的
 * 底色，高度也由 aspect-ratio 撐住，不會出現忽高忽低的空洞。
 *
 * 漸層角度換算自設計稿 SVG 的 linearGradient 向量 (235.3, 546.5) → 156.7deg。
 */
.mld-faculty__photo {
	display: block;
	aspect-ratio: 291 / 410;    /* 設計稿照片框尺寸 */
	border-radius: 5px;
	overflow: hidden;
	background: linear-gradient(157deg, #fff 0%, #a58e6b 100%);
}

.mld-faculty__photo img {
	display: block;
	width: 100%;
	height: 100%;
	/*
	 * 設計稿的去背 PNG 是放大後裁切的（可視範圍約落在原圖的 51% / 14% 位置）。
	 * 換算成 object-position 就是水平置中、垂直偏上——人像的頭部才不會被切掉。
	 * 客戶上傳的照片比例不一定相同，偏上裁切對一般直式人像也是安全的預設。
	 */
	object-fit: cover;
	object-position: center 15%;
}

/*
 * 卡片文字跟著全站字距（Blocksy 的 0.08em）。
 *
 * 設計稿這一區的卡片文字其實「沒有字距」，原本照稿歸零過，
 * 但使用者 2026-09-01 指定整頁不要有字距歸零的狀態，所以拿掉覆寫。
 * 代價：簡介的「新金融投資人 / 連續創業家 / 資本機構CEO」被字距撐寬後
 * 超過卡片寬，「CEO」會折到下一行（設計稿五行變六行）——使用者知情。
 */

/*
 * 姓名列：姓名靠左、「老 師」靠右，兩者對齊基線（設計稿量得出來兩行基線同高）。
 *
 * 分隔線做成這一列的 border-bottom，而不是掛在簡介上——簡介是選填的，
 * 掛在簡介上的話後台沒填簡介就會連分隔線一起消失。
 */
.mld-faculty__name {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;

	margin: 19px 0 0;           /* 設計稿照片底到姓名 19px */
	padding-bottom: 13px;       /* 設計稿姓名底到分隔線 13.2px */
	border-bottom: 1px solid #a58e6b;

	font-size: clamp(1.125rem, 1.67vw, 1.5rem); /* 設計稿 24px */
	font-weight: 500;
	line-height: 1.5;                           /* 全站標題統一 1.5（原設計稿 1.2）*/
	color: #201d1d;
}

.mld-faculty__name a {
	color: inherit;
	text-decoration: none;
}

.mld-faculty__name a:hover,
.mld-faculty__name a:focus-visible {
	text-decoration: underline;
}

.mld-faculty__role {
	flex: none;
	font-size: 0.875rem; /* 設計稿 14px */
	font-weight: 400;
	color: #6d6e71;
}

.mld-faculty__bio {
	margin: 15px 0 0;    /* 設計稿分隔線到簡介首行 15px */
	font-size: 0.875rem; /* 設計稿 14px */
	font-weight: 400;
	/* 全站內文統一 1.8（設計稿量出 16.3 / 14 ≈ 1.16）*/
	line-height: 1.8;
	color: #6d6e71;

	/*
	 * 後台是一個 textarea，換行照打即可：
	 * 單一換行 = 換行，空一行 = 段落間距（設計稿第 2、3 行之間就是空一行）。
	 * 版型檔用 esc_html() 輸出，不轉 <br>，所以還原的工作在這裡做。
	 */
	white-space: pre-line;
}

.mld-faculty__more {
	/* 設計稿：簡介末行底下 14px，靠右對齊卡片右緣 */
	margin-top: 14px;
	text-align: right;

	font-size: 0.875rem; /* 設計稿 14px */
	line-height: 1.2;
	color: #6d6e71;
	text-decoration: none;
}

.mld-faculty__more:hover,
.mld-faculty__more:focus-visible {
	color: #6d6e71;
	text-decoration: underline;
}

/* 左右箭頭：結構與講座區相同，白底上要用金色才看得見 */
.mld-faculty__nav {
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	z-index: 1;

	display: grid;
	place-items: center;

	width: clamp(1.75rem, 2.4vw, 2.25rem);
	height: 45px;
	padding: 0;

	background: none;
	border: 0;
	color: #a58e6b;
	cursor: pointer;
}

.mld-faculty__nav[hidden] {
	display: none;
}

.mld-faculty__nav--prev {
	left: 0;
}

.mld-faculty__nav--next {
	right: 0;
	scale: -1 1; /* 同一個路徑水平翻轉成右箭頭 */
}

/* ===========================================================================
 * 課程紀錄 .mld-record__*（設計稿 74:61，1440×760）
 *
 * 上白下深的兩段式區塊：
 *    40– 95  標題
 *   108–350  照片列（高 242，滿版出血）
 *   350–361  11px 白底空隙
 *   361–760  深色背景照片帶，中間浮一塊 839×259 的半透明面板
 *
 * ⚠️ 照片列刻意「沒有」左右箭頭，是使用者 2026-08-12 決定的純滑動版本，
 * 所以這裡不共用 .mld-cards__nav 那一組，版型檔也沒掛 data-mld-carousel。
 *
 * 面板底色與按鈕底色在設計稿裡是 SVG，但都是純形狀（漸層矩形／圓角矩形），
 * 用 CSS 畫比貼圖精確也好維護，沒有存成素材。
 * ======================================================================== */

.mld-record {
	padding-block-start: clamp(1.5rem, 2.78vw, 2.5rem); /* 設計稿 40px */
	background: #fff;
}

.mld-record__title {
	margin: 0 0 clamp(1rem, 2.08vw, 1.875rem); /* 設計稿 標題底到照片列 13px + 行高差 */
	font-size: clamp(1.5rem, 2.22vw, 2rem);    /* 設計稿 32px */
	font-weight: 700;
	letter-spacing: 0.1em;                     /* 設計稿 3.2px / 32px */
	line-height: 1.5;                          /* 全站標題統一 1.5（原設計稿 1.2）*/
	text-align: center;
	color: #a58e6b;
}

/*
 * 照片列。滿版、彼此無間距，接成一條連續的帶子。
 * 設計稿桌機一次露出 4 張（4 × 364 = 1456 > 1440，第 4 張本來就被切到），
 * 這個溢出交給捲動容器自己處理，不用另外算。
 */
.mld-record__strip {
	margin-bottom: clamp(0.5rem, 0.76vw, 0.6875rem); /* 設計稿 11px */
}

.mld-record__track {
	display: grid;
	grid-auto-flow: column;

	/*
	 * ⚠️ 不要寫成 minmax(0, 364px)：下限 0 會被 grid 一路壓縮。
	 * 用 min() 給不可壓縮的寬度，超出的才會真的變成可捲動。（同 .mld-cards__track）
	 */
	grid-auto-columns: min(364px, 78%); /* 設計稿 364px */
	gap: 0;                             /* 設計稿照片彼此相接，沒有間距 */

	margin: 0;
	padding: 0;
	list-style: none;

	overflow-x: auto;
	scrollbar-width: none;
	overscroll-behavior-x: contain;

	/*
	 * ⚠️ 這一列刻意「沒有」scroll-snap。它是由 home.js 的 data-mld-marquee
	 * 每一幀推 scrollLeft 自動流動的，開了 snap 會一直把位置吸回格點，
	 * 變成一頓一頓的。要 snap 的只有「使用者要求減少動態效果」那個情況，
	 * 見檔案下面的 prefers-reduced-motion 區塊。
	 */
}

/*
 * 手指滑動時不要選到圖片、也不要觸發瀏覽器原生的「拖曳圖片」。
 * （沒有做滑鼠拖曳捲動，所以不給 cursor: grab——那會暗示按住可以拖，實際不行。）
 */
.mld-record__item {
	user-select: none;
}

.mld-record__item img {
	-webkit-user-drag: none;
}

.mld-record__item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 364 / 242; /* 設計稿 364×242 */
	object-fit: cover;
}

/*
 * 深色背景帶。設計稿的可視窗口是原圖的中段偏下，換算成 background-position
 * 大約是垂直 53%（原圖顯示 825.5 高，窗口從 227 起、高 399）。
 */
.mld-record__band {
	display: grid;
	place-items: center;

	padding-block: clamp(2rem, 3.75vw, 3.375rem) clamp(2.5rem, 5.97vw, 5.375rem); /* 設計稿 54px / 86px */
	padding-inline: 1.25rem;

	background-color: #201d1d; /* 圖載入前不要露出白底 */
	background-image: url('../images/record-bg.webp?v=20260831');
	background-repeat: no-repeat;
	background-position: center 53%;
	background-size: cover;
}

/*
 * 半透明面板。設計稿是 #0E0E0E → 透明黑的垂直漸層，整體再乘 0.86 不透明度，
 * 這裡直接把 0.86 乘進去寫成一道漸層，省掉一層 opacity。
 */
.mld-record__panel {
	width: min(839px, 100%); /* 設計稿 839px */
	padding-block: clamp(1.75rem, 3.54vw, 3.1875rem) clamp(1.25rem, 2.01vw, 1.8125rem); /* 設計稿 51px / 29px */
	padding-inline: clamp(1.25rem, 7.22vw, 6.5rem); /* 設計稿 (839 − 631) / 2 = 104px */

	background: linear-gradient(180deg, rgba(14, 14, 14, 0.86) 0%, rgba(0, 0, 0, 0.602) 100%);
	text-align: center;
}

.mld-record__slogan {
	margin: 0 0 clamp(0.75rem, 1.46vw, 1.3125rem); /* 設計稿 標語底到副文 21px */
	font-size: clamp(1.25rem, 2.22vw, 2rem);       /* 設計稿 32px */
	font-weight: 700;
	letter-spacing: 0.1em;                         /* 設計稿 3.2px / 32px */
	line-height: 1.5;                              /* 全站標題統一 1.5（原設計稿 1.2）*/
	color: #fff;
	white-space: nowrap;                           /* 設計稿是單行 */
}

/* 標語裡逗號後的 <br> 只給手機用（見 home.php），這裡先藏起來 */
.mld-record__slogan br {
	display: none;
}

.mld-record__text {
	max-width: 586px; /* 設計稿 586px，兩行 */
	margin: 0 auto clamp(1rem, 1.67vw, 1.5rem); /* 設計稿 副文底到按鈕 24px */

	font-size: clamp(1rem, 1.25vw, 1.125rem); /* 設計稿 18px */
	font-weight: 500;
	line-height: 1.8;                         /* 全站內文統一 1.8（原設計稿 25.2px / 18px = 1.4）*/
	color: #fff;
}

/* Line 按鈕。圓角 5px 與高度 45px 跟 .mld-cards__btn 同規格，只有底色與內容不同 */
.mld-record__line {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;

	min-width: min(293px, 100%); /* 設計稿 293×45 */
	min-height: 45px;
	padding-inline: 16px;

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

	font-size: clamp(1rem, 1.25vw, 1.125rem); /* 設計稿 18px */
	font-weight: 500;
	line-height: 1.2;
	color: #fff;
	text-decoration: none;

	/*
	 * 窄螢幕放不下一行時會換行。中文預設可以在任意兩字之間斷，會斷出
	 * 「⋯獲取免 / 費講座」這種把詞拆開的結果；keep-all 讓它只在空格處斷，
	 * 變成「加入官方 Line / 獲取免費講座」。
	 *
	 * ⚠️ 只加在按鈕上。標語沒有空格，加了會變成整行不能斷、直接溢出面板。
	 */
	word-break: keep-all;
}

a.mld-record__line:hover,
a.mld-record__line:focus-visible {
	background: #4e9a47;
	color: #fff;
}

.mld-record__line-icon {
	flex: none;
	width: 27px;  /* 設計稿 27.16×26.01 */
	height: 26px;
}

/* 面板變窄之後標語就撐不住單行了，讓它可以換行 */
@media (max-width: 991.98px) {
	.mld-record__panel {
		width: min(839px, 92%);
	}

	.mld-record__slogan {
		white-space: normal;
	}
}

@media (max-width: 767.98px) {
	.mld-record__panel {
		width: 100%;
		padding-inline: clamp(1rem, 5vw, 2rem);
	}

	/*
	 * 手機一張圖吃滿全寬（使用者 2026-09-01 指定，取代原本「露出一張半」）。
	 * 「右邊還有」由 marquee 自動流動本身表達，不再靠露出半張。
	 */
	/* 標語從逗號處換成兩行（使用者 2026-09-04 指定），<br> 在 home.php */
	.mld-record__slogan br {
		display: inline;
	}

	/*
	 * 第二行「都始於一次願意學習的決定」12 個字，20px 加 0.1em 字距要 264px，
	 * 320px 的手機可用寬只有 248，「定」會掉成第三行（使用者 2026-09-04 回報）。
	 * 字級改成跟著螢幕寬縮：5.5vw 在 320 是 17.6px（12 字 232px，放得下），
	 * 上限 1.25rem 跟原本一樣，所以 364px 以上的手機完全不受影響。
	 */
	.mld-record__slogan {
		font-size: clamp(1.0625rem, 5.5vw, 1.25rem);
	}

	.mld-record__track {
		grid-auto-columns: 100%;
	}
}

/*
 * 系統設定要求「減少動態效果」時，home.js 不會啟動自動流動、也不會複製內容。
 * 這時候它就是一條純手動滑的照片列，把 scroll-snap 補回來讓它停得整齊。
 */
@media (prefers-reduced-motion: reduce) {
	.mld-record__track {
		scroll-snap-type: x mandatory;
	}

	.mld-record__item {
		scroll-snap-align: start;
	}
}