/**
 * 頁尾主體（設計稿 Figma node 92:2）。
 *
 * 對應版型：template-parts/footer-main.php，由 [mld_footer] shortcode 叫出來，
 * 放在後台一個 Content Block 裡，再由 Blocksy 頁尾建構器的 top-row 顯示。
 *
 * ⚠️ 最下面那條黑色 copyright 帶不在這支的管轄範圍——那是 Blocksy 的
 * bottom-row，樣式在外觀自訂裡調，不要在這裡覆蓋它。
 *
 * ⚠️ 滿版處理：Blocksy 會把 Content Block 包進 .ct-container（有最大寬度和
 * 左右內距）。設計稿的金色區塊是從畫面最左邊貼齊的，所以這裡用負 margin
 * 把它推回滿版。用 100vw 會在有捲軸時多出橫向捲軸，所以改用 calc 從
 * .ct-container 自己的內距推——這是首頁 breakout 之外的另一種寫法，
 * 因為頁尾的容器不是我們的、不能直接改它的 max-width。
 *
 * 命名前綴 mld-（moonlitedu），跟首頁同一套。
 */

/* ---------------------------------------------------------------------------
 * 版面
 * ------------------------------------------------------------------------ */

/*
 * 把 Content Block 撐回滿版。
 * Blocksy 的頁尾容器結構是 .ct-container > .ct-header-content-block，
 * 兩層都有可能帶內距，所以清掉容器的內距、再讓自己往外長。
 */
.ct-footer .ct-container:has(.mld-footer) {
	/*
	 * Blocksy 的 .ct-container 是用「固定 width + auto margin」置中的，
	 * 不是 max-width——只清 max-width 沒有用，實測還是 1296/1440。
	 * 四個屬性要一起給。
	 */
	max-width: none;
	width: 100%;
	margin-inline: 0;

	/*
	 * 上下也要清成 0。Blocksy 給這個容器 padding-block: 30px，
	 * 頁尾底色是深藍黑（rgb(0,0,30)），所以金色區塊上下會各露出 30px 的深色帶。
	 * 這個值在外觀自訂的「頁尾 → 該列間距」裡，但寫在這裡才跟版型綁在一起，
	 * 不會有人動了設定就破版。上下留白由 .mld-footer 自己的內距負責。
	 */
	padding: 0;
}

.mld-footer {
	display: grid;
	/*
	 * 設計稿 2000 寬的稿子裡，金色區塊佔到約 800px（40%），右邊白底 60%。
	 * 用 fr 而不是百分比，這樣中間不會因為四捨五入露出一條白縫。
	 */
	grid-template-columns: 2fr 3fr;
	align-items: stretch;

	background: #fff;
	color: #231f20;
}

/* ---------------------------------------------------------------------------
 * 左：金色區塊（logo + 客服資訊）
 * ------------------------------------------------------------------------ */
.mld-footer__brand {
	background: #a58e6b; /* 全站品牌金，跟首頁標題同色 */
	color: #fff;

	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(1.5rem, 3.5vw, 3.25rem);

	padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem);
}

.mld-footer__logo {
	display: block;
	width: min(345px, 60%);
	height: auto;
	/* 設計稿裡 logo 沒有貼齊左緣，往內縮一段 */
	margin-inline: clamp(0px, 4vw, 3.5rem);
}

.mld-footer__contact {
	margin: 0;
	padding: 0;
	list-style: none;

	display: grid;
	gap: 0.75rem;

	/*
	 * 右邊不留外距。左邊要跟 logo 對齊所以保留，但右邊留著的話
	 * 「新北市中和區中正路738號17樓之7」會差 15px 放不下、把「之7」擠到第二行。
	 * 右側原本空著的 56px 拿來給地址用，視覺上看不出差別。
	 */
	margin-inline: clamp(0px, 4vw, 3.5rem) 0;

	font-size: 0.9375rem; /* 15px */
	line-height: 1.4;
}

.mld-footer__contact li {
	display: grid;
	grid-template-columns: 20px 1fr; /* 圖示固定寬，文字換行時不會跑到圖示底下 */
	align-items: start;
	gap: 0.5rem;
}

.mld-footer__icon {
	flex: none;
	margin-top: 0.1em; /* 視覺上跟第一行文字對齊，不是跟整塊置中 */
}

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

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

/* ---------------------------------------------------------------------------
 * 右：白底兩欄
 * ------------------------------------------------------------------------ */
.mld-footer__lists {
	display: grid;
	/*
	 * 兩欄等寬（使用者 2026-08-28 指定）。
	 *
	 * 原本是 1fr auto——右欄由推薦碼內容撐開（334px），左欄拿剩下的（只剩 210px），
	 * 結果「新配置學院x水丰刀特別講座 (914)」這種不算長的標題也被折成兩行。
	 *
	 * minmax(0, 1fr) 的 0 下限是必要的：預設下限是 auto，長字串會把欄位撐爆，
	 * grid 就不再等寬了。
	 */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-content: start;

	/*
	 * 左右內距不對稱，是照設計稿的比例來的（設計稿 2000 寬）：
	 *
	 *   金色區塊右緣 40%　→　最新講座標題左緣 51.5%　＝ 左內距 11.5%
	 *   推薦碼右緣 93.75%　→　畫面右緣 100%　　　　　 ＝ 右內距 6.25%
	 *
	 * 原本左右都給 4vw（56px @1440），標題落在 43.9%、離金色區塊太近，
	 * 看起來就像中間那條分隔線偏右。
	 *
	 * ⚠️ 分隔線的位置「不受左內距影響」——右欄是 auto 寬（由內容決定）並貼齊右緣，
	 * 所以分隔線 = 版面寬 − 右內距 − 右欄寬。要把分隔線往左移是調「右內距」，
	 * 不是左內距。這裡右內距 56 → 90px，分隔線才會從 73.5% 回到設計稿的 71.25%。
	 */
	/*
	 * 左內距縮小、右內距維持，等於把「兩欄一組」往右靠（使用者指定）。
	 *
	 * ⚠️ 這裡沒辦法同時滿足「兩欄等寬」和「左欄從設計稿的 51.5% 開始」。
	 * 推薦碼那欄的內容需要 278px，兩欄等寬就是 2×334 + 間距 56 = 724px，
	 * 但 .mld-footer__lists 只有 855px（整個頁尾的 3fr），
	 * 左內距最多只能留 40 幾 px。要兩者兼得就得把左邊金色區塊改窄
	 * （.mld-footer 的 2fr 3fr），那會動到設計稿的 40% 比例，所以沒動。
	 *
	 * 右內距 6.25vw 是照設計稿：推薦碼右緣 93.75% → 畫面右緣 100%。
	 */
	/*
	 * 左內距決定兩欄多寬——欄寬 =（本區寬 − 左內距 − 右內距 − 間距）÷ 2。
	 * 855 − 109 − 90 − 56 = 600，兩欄各 300px。
	 *
	 * ⚠️ 300 已經接近下限，不要再往下調。推薦碼最寬的一列
	 * 「MEXC 抹茶 推薦碼　mexc-daodao」需要 265px，加上分隔線內距 24px
	 * 就是 289px；再窄推薦碼會開始斷行，那比留白難看得多。
	 *
	 * 右內距 6.25vw 照設計稿：推薦碼右緣 93.75% → 畫面右緣 100%。
	 */
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
	padding-inline: clamp(1.5rem, 7.6vw, 109px) clamp(1.5rem, 6.25vw, 90px);
}

.mld-footer__heading {
	margin: 0 0 clamp(1rem, 2.5vw, 2rem);
	font-size: 1.125rem; /* 18px */
	font-weight: 700;
	line-height: 1.3;
	color: #231f20;
}

/* 設計稿在兩欄之間有一條細直線 */
.mld-footer__col--refs {
	border-inline-start: 1px solid #d9d9d9;
	/* 欄位收窄到 300px 之後這裡只能吃 24px，推薦碼的 265px 內容才放得下 */
	padding-inline-start: clamp(0.75rem, 1.7vw, 1.5rem);
}

.mld-footer__links,
.mld-footer__refs {
	margin: 0;
	padding: 0;
	list-style: none;

	display: grid;
	gap: 0.5rem;

	font-size: 0.9375rem; /* 15px */
	line-height: 1.5;
	color: #a58e6b;
}

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

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

/*
 * 推薦碼：名稱靠左、代碼靠右，中間用 grid 撐開。
 * 不用 justify-content: space-between，因為代碼長度差很多
 * （puff66 vs 6192276359），要的是「代碼那一欄靠右對齊」。
 */
.mld-footer__refs li > a,
.mld-footer__refs li > span:first-child {
	color: inherit;
	text-decoration: none;
}

.mld-footer__refs li,
.mld-footer__refs li > a {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 0.75rem;
}

/*
 * ⚠️ 有連結的那些列，格線只能放在 <a> 上，<li> 自己不可以也是格線。
 *
 * 結構是 <li><a><span>名稱</span><span>代碼</span></a></li>。
 * 如果 <li> 也套 1fr auto，它會為「只有一個子元素」的內容多切一個空的
 * auto 欄，再加上 12px 間距——<a> 實際只拿得到 264px。
 * 最寬那列「MEXC 抹茶 推薦碼　mexc-daodao」需要 265px，就差這 1px 斷行。
 *
 * 這個坑很難看出來：欄位可用寬有 276px，看起來明明夠。
 */
.mld-footer__refs li:has(> a) {
	display: block;
}

.mld-footer__refs li > a:hover .mld-footer__ref-code,
.mld-footer__refs li > a:focus-visible .mld-footer__ref-code {
	text-decoration: underline;
}

.mld-footer__ref-code {
	text-align: end;
	white-space: nowrap; /* 代碼被折行會看不懂 */
}

/* ---------------------------------------------------------------------------
 * 手機／平板
 *
 * 斷點沿用 home.css 那組 767.98，全站一致。
 * 金色區塊改成上下堆疊，右邊兩欄也拆成上下，中間那條直線改成上方的橫線。
 * ------------------------------------------------------------------------ */
@media (max-width: 991.98px) {
	.mld-footer {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767.98px) {
	.mld-footer__logo,
	.mld-footer__contact {
		margin-inline: 0;
	}

	.mld-footer__lists {
		grid-template-columns: 1fr;

		/*
		 * 桌機的左內距是照設計稿比例給的 11.5vw，那是為了跟金色區塊拉開距離。
		 * 手機上金色區塊已經變成上下堆疊、沒有並排關係了，再留那麼寬只是浪費版面。
		 */
		padding-inline: clamp(1.5rem, 5vw, 2rem);
	}

	.mld-footer__col--refs {
		border-inline-start: 0;
		padding-inline-start: 0;

		border-block-start: 1px solid #d9d9d9;
		padding-block-start: clamp(1.5rem, 6vw, 2rem);
	}
}