/**
 * 首頁 sticky / cover 捲動效果
 *
 * #home-sec01 的 bottom 抵達視窗底端時固定住，
 * #home-sec02 繼續往上、蓋過 #home-sec01。
 *
 * 需求：#home-sec02 在 Elementor 要設「不透明底色」，否則會透出下方的 sec01。
 */

/* 父主題/Elementor 在 body 設了 overflow-x: hidden，會讓 body 變成捲動容器、
   破壞 position: sticky。改用 overflow-x: clip：一樣不出現水平捲軸，
   但不建立捲動容器，sticky 即可正常運作。只在首頁生效（本檔僅首頁載入）。 */
body {
	overflow-x: clip !important;
	overflow-y: visible !important;
	/* 中和 Elementor HTML 元件 <style> 裡外洩的 body{padding:40px 20px}。
	   根本解法：到 Elementor 那兩個 HTML 元件移除該行 body{}。 */
	padding: 0 !important;
}

/* sec01、sec02、sec03 都用 sticky + 負 top 位移凍結：
   top =（視窗高 − 該 section 高）由 JS 寫入 --pin-top（比視窗高時為負值），
   讓 section 的底端貼齊視窗底端時才凍結、維持凍結讓下一段蓋上來。
   預設 0px（section 比視窗矮時退化為頂端固定）。 */
#home-sec01,
#home-sec02,
#home-sec03 {
	position: -webkit-sticky;
	position: sticky;
	top: var(--pin-top, 0px);
}

/* z-index 遞增：下一段永遠蓋住上一段（每段都需在 Elementor 設不透明底色） */
#home-sec01 { z-index: 1; }
#home-sec02 { z-index: 2; } /* 蓋住 sec01 */
#home-sec03 { z-index: 3; } /* 蓋住 sec02 */
#home-sec04 { position: relative; z-index: 4; } /* 蓋住 sec03 */

/* 修正 stretched（全寬）section 與 sticky 的衝突：
   父主題用 left: calc(...) 把全寬 section 往左拉，但在 position:sticky 上
   left 變成「水平黏著約束」而非位移，導致往右跑版。改用 margin-left
   達成同樣的往左位移（不受 position 影響）。只影響有 stretched class 的釘住段。 */
@media screen and (min-width: 1181px) {
	#home-sec01.elementor-section-stretched,
	#home-sec02.elementor-section-stretched,
	#home-sec03.elementor-section-stretched {
		left: auto !important;
		margin-left: calc(var(--clb-container-offset) * -1) !important;
	}
}