/* ============================================================
    SwiperJS 輪播自定義樣式
    用於首頁 Hero Banner 輪播
   ============================================================ */

/* ============================================================
    1. 輪播容器基礎結構
   ============================================================ */

.carousel-container {
	position: relative;
	overflow: hidden;
}

.swiper {
	width: 100%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	overflow: hidden;
	list-style: none;
	padding: 0;
	z-index: 1;
}

.swiper-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: flex;
	transition-property: transform;
	box-sizing: content-box;
}

.swiper-slide {
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	position: relative;
	transition-property: transform;
}

/* ============================================================
    2. Banner 幻燈片樣式
   ============================================================ */

.banner-slide {
	background-position: center;
	background-size: cover;
	position: relative;
	width: 100%;
	height: 100%;
}

/* Banner 漸層遮罩 - 左側白色到右側透明 */
.banner-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.9) 0%,
		rgba(255, 255, 255, 0.6) 45%,
		rgba(255, 255, 255, 0) 70%
	);
	pointer-events: none;
}

.banner-slide .container {
	position: relative;
	z-index: 1;
}

/* ============================================================
    3. 輪播指示器 (Pagination)
   ============================================================ */

.carousel-indicators {
	position: absolute;
	bottom: 0.5rem;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	z-index: 10;
}

.swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.5);
	opacity: 1;
	transition: background-color 0.3s ease;
}

.swiper-pagination-bullet-active {
	background-color: #fb8d98;
}

/* ============================================================
    4. 輪播控制按鈕
   ============================================================ */

.carousel-control {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	width: clamp(35px, 5vw, 50px);
	height: clamp(50px, 5vw, 60px);
	cursor: pointer;
	transition: all 0.3s ease;
	font-weight: 300;
	color: white;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
}

.carousel-control::after {
	font-size: clamp(40px, 5vw, 60px);
	font-weight: 300;
}

.carousel-control:hover {
	transform: translateY(-50%) scale(1.1);
	text-shadow: 0 3px 12px rgba(0, 0, 0, 0.8);
}

.carousel-control-prev {
	left: clamp(8px, 2vw, 20px);
}

.carousel-control-next {
	right: clamp(8px, 2vw, 20px);
}

.swiper-button-prev::after {
	content: "‹";
}

.swiper-button-next::after {
	content: "›";
}

/* ============================================================
    5. 響應式調整
   ============================================================ */

/* 平板版：sm (≥ 640px) */
@media (min-width: 640px) {
	.swiper-pagination-bullet {
		width: 10px;
		height: 10px;
	}

	.carousel-indicators {
		bottom: 0.75rem;
	}
}

/* 桌面版：md (≥ 768px) */
@media (min-width: 768px) {
	.swiper-pagination-bullet {
		width: 12px;
		height: 12px;
	}

	.carousel-indicators {
		bottom: 1rem;
	}
}

/* ============================================================
    6. 無障礙與動畫偏好設定
   ============================================================ */

/* 尊重使用者的動畫偏好設定 */
@media (prefers-reduced-motion: reduce) {
	.swiper-slide,
	.carousel-control,
	.swiper-pagination-bullet {
		transition: none;
	}

	.carousel-control:hover {
		transform: translateY(-50%);
	}
}