/**
 * 怡和設計 — 施工成果輪播 (yh-construction-slider)
 *
 * 掛在 blocksy:hero:title:after，資料來自 ACF Gallery 欄位 construction-gallery。
 * 版面原則：等高不等寬、維持原始比例、主圖水平置中。
 */

.yh-consl {
	/*
	 * hero 是 750px 的窄容器。高度訂太高的話，一張橫圖就吃掉整個寬度，
	 * 置中效果會看不出來，所以壓在 340px 讓兩側露得出相鄰照片。
	 */
	--yh-consl-h: clamp(190px, 24vw, 340px);
	--yh-consl-gap: 14px;
	--yh-consl-accent: var(--wp--preset--color--palette-color-2, var(--theme-palette-color-2, #9d6c6c));
	--yh-consl-ink: var(--wp--preset--color--palette-color-1, var(--theme-palette-color-1, #2c2c2c));

	margin: 30px 0 6px;
}

/* ---------------------------------------------------------------- 標題 */

.yh-consl__head {
	margin: 0 0 16px;
}

.yh-consl__title {
	margin: 0;
	font-size: clamp(1.05rem, 1.5vw, 1.35rem);
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.3;
	color: var(--yh-consl-ink);
}

/* ---------------------------------------------------------------- 輪播本體 */

.yh-consl__viewport {
	position: relative;
	overflow: hidden;
}

/* 尚未初始化前先用 flex 排好，避免 Swiper 載入前圖片疊成一坨 */
.yh-consl__track {
	display: flex;
	align-items: center;
	gap: var(--yh-consl-gap);
}

.swiper-initialized .yh-consl__track {
	gap: 0;
}

/* 外觀狀態（特異性 0,1,0） */
.yh-consl__slide {
	position: relative;
	opacity: 0.4;
	transition: opacity 0.45s ease;
	cursor: zoom-in;
	background: rgba(0, 0, 0, 0.04);
}

/*
 * 等高不等寬的關鍵：固定 height，再用每張圖自己的 aspect-ratio 反推 width。
 * 圖片還沒下載完寬度就已經確定，不會有版面位移 (CLS)。
 *
 * 尺寸單獨拉出來寫，而且選擇器要夠長。
 *
 * Swiper 12 的 bundle 帶了 `.swiper .swiper-slide { width:100%; height:100% }`，
 * 特異性是 0,2,0，會直接壓過單一 class 的 .yh-consl__slide，
 * 結果變成「等寬不等高」，跟需求正好相反。這裡用 0,3,0 蓋回來。
 *
 * 尺寸與 opacity 分開寫，才不會連帶把 swiper-slide-active 的狀態一起壓掉。
 */
.yh-consl .yh-consl__viewport .yh-consl__slide {
	flex: none;
	width: auto;
	height: var(--yh-consl-h);
	aspect-ratio: var(--yh-ar, 3 / 2);
}

.yh-consl .yh-consl__slide img {
	display: block;
	width: 100%;
	height: 100%;
	/*
	 * 方框比例 (--yh-ar) 就是這張圖的原始比例，所以這裡不會發生裁切。
	 * cover 只是防呆：萬一某張圖沒有尺寸 metadata、落到預設比例，
	 * 寧可裁邊也不要把圖片壓扁變形。
	 */
	object-fit: cover;
}

/*
 * 圖說只是帶給燈箱用的資料，輪播本身不顯示。
 * 用視覺隱藏而非 display:none，燈箱與輔助技術才讀得到。
 */
.yh-consl__cap {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* 水平置中的那一張才是主圖 */
.yh-consl__slide.swiper-slide-active {
	opacity: 1;
}

.yh-consl__viewport:not(.swiper-initialized) .yh-consl__slide:first-child {
	opacity: 1;
}

/* ---------------------------------------------------------------- 左右箭頭 */

.yh-consl__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;

	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;

	background: rgba(255, 255, 255, 0.88);
	color: var(--yh-consl-ink);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
	cursor: pointer;
	transition: background 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease;
}

.yh-consl__nav:hover,
.yh-consl__nav:focus-visible {
	background: #fff;
	box-shadow: 0 3px 14px rgba(0, 0, 0, 0.2);
}

.yh-consl__nav svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.yh-consl__nav--prev {
	left: 12px;
}

.yh-consl__nav--next {
	right: 12px;
}

/* 非循環模式走到頭尾時淡出 */
.yh-consl__nav.swiper-button-disabled {
	opacity: 0;
	pointer-events: none;
}

/* Swiper 沒載入時，箭頭與 bullet 按了也沒作用，直接不顯示 */
.yh-consl__viewport:not(.swiper-initialized) .yh-consl__nav,
.yh-consl:not(:has(.swiper-initialized)) .yh-consl__pagination {
	display: none;
}

/* ---------------------------------------------------------------- Bullet */

.yh-consl__pagination {
	/*
	 * Swiper 的 `.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet`
	 * （特異性 0,3,0）會給每顆 bullet 左右各 4px margin，壓過下面的 margin:0。
	 * 用它自己的變數歸零，間距只由 gap 決定，才算得準。
	 */
	--swiper-pagination-bullet-horizontal-gap: 0px;

	position: static;
	margin-top: 14px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	line-height: 1;
}

.yh-consl__pagination .swiper-pagination-bullet {
	/* 容器寬度不夠時寧可換行，也不能讓 flex 把 bullet 擠成 0 寬 */
	flex: none;
	width: 7px;
	height: 7px;
	margin: 0;
	border-radius: 50%;
	background: var(--yh-consl-accent);
	opacity: 0.28;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.yh-consl__pagination .swiper-pagination-bullet-active {
	opacity: 1;
	transform: scale(1.3);
}

/* ---------------------------------------------------------------- 手機 */

@media (max-width: 767.98px) {
	.yh-consl {
		--yh-consl-h: clamp(160px, 42vw, 240px);
		--yh-consl-gap: 10px;
		margin-top: 22px;
	}

	.yh-consl__head {
		margin-bottom: 12px;
	}

	/*
	 * 張數上限 15 張：15 × 7px + 14 × 10px = 245px，
	 * 320px 寬的手機也排得進一排，不會剩一顆掉到第二排。
	 */
	.yh-consl__pagination {
		gap: 10px;
	}

	.yh-consl__nav {
		width: 36px;
		height: 36px;
	}

	/*
	 * 視覺上維持 36px 才不會擋掉太多照片，
	 * 但實際可點範圍補到 44x44，符合 WCAG 的觸控目標建議。
	 */
	.yh-consl__nav::before {
		content: '';
		position: absolute;
		inset: -4px;
	}

	.yh-consl__nav svg {
		width: 17px;
		height: 17px;
	}

	.yh-consl__nav--prev {
		left: 6px;
	}

	.yh-consl__nav--next {
		right: 6px;
	}
}

/* 使用者偏好減少動態效果 */
@media (prefers-reduced-motion: reduce) {
	.yh-consl__slide {
		transition: none;
	}

	.yh-consl__nav {
		transition: none;
	}
}