/**
 * Image Comparison Slider (Before/After)
 * 圖片對比滑桿樣式
 */

.image-comparison {
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	cursor: ew-resize;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.image-comparison img {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
}

/* Before 圖片（上層，用 clip-path 裁切顯示左半部） */
.image-comparison__before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 2;
}

.image-comparison__before img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* After 圖片（底層，完整顯示） */
.image-comparison__after {
	position: relative;
	width: 100%;
	z-index: 1;
}

.image-comparison__after img {
	display: block;
	width: 100%;
	height: auto;
}

/* 滑桿分隔線 */
.image-comparison__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 4px;
	background: #fff;
	cursor: ew-resize;
	z-index: 10;
	transform: translateX(-50%);
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}

/* 滑桿圓形手把 */
.image-comparison__handle::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* 手把箭頭圖示 */
.image-comparison__handle::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 24px;
	height: 24px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/%3E%3Cpath d='M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z' transform='rotate(180 12 12)'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* 標籤樣式 */
.image-comparison__label {
	position: absolute;
	bottom: 16px;
	padding: 6px 12px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	border-radius: 4px;
	z-index: 5;
	pointer-events: none;
}

.image-comparison__label--before {
	left: 16px;
}

.image-comparison__label--after {
	right: 16px;
}

/* 響應式調整 */
@media (max-width: 768px) {
	.image-comparison__handle::before {
		width: 36px;
		height: 36px;
	}

	.image-comparison__handle::after {
		width: 20px;
		height: 20px;
	}

	.image-comparison__label {
		font-size: 12px;
		padding: 4px 8px;
		bottom: 12px;
	}

	.image-comparison__label--before {
		left: 12px;
	}

	.image-comparison__label--after {
		right: 12px;
	}
}

/* 垂直模式（可選） */
.image-comparison--vertical {
	cursor: ns-resize;
}

.image-comparison--vertical .image-comparison__handle {
	width: 100%;
	height: 4px;
	left: 0;
	right: 0;
	top: auto;
	bottom: auto;
	transform: translateY(-50%);
}

.image-comparison--vertical .image-comparison__label--before {
	left: 50%;
	transform: translateX(-50%);
	top: 16px;
	bottom: auto;
}

.image-comparison--vertical .image-comparison__label--after {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}