/**
 * Qing 轮播小部件样式（全屏 Hero 风格）。
 *
 * 说明：结构类名（swiper / swiper-wrapper / swiper-slide 等）由 Elementor 自带
 * 的 Swiper v8 提供基础布局，此处仅补充本部件的自定义外观。
 * 尺寸、颜色、排版等具体数值均由 Elementor 控件通过内联 selectors 覆盖，
 * 这里只提供合理的默认表现与结构性布局。
 */

.qing-swiper {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* 单张幻灯片：作为背景与内容的定位容器。默认高度由控件覆盖。 */
.qing-swiper .qing-swiper-slide {
	position: relative;
	display: flex;
	height: 640px;
	overflow: hidden;
}

/* -------- 高度模式：按背景图原始比例（完整显示原图，不裁切、不撑满整屏）--------
 * 由控件「高度模式 = 按背景图原始比例」输出根类 .qing-swiper--fit-ratio + CSS 变量
 * --qing-hero-ratio（= 图片宽/高）。此时不再用固定高度，改用 aspect-ratio 让 banner
 * 高度随宽度按原始比例自适应；背景图仍 cover，但因容器比例与图片一致，故完整显示、无裁切。
 */
.qing-swiper--fit-ratio,
.qing-swiper--fit-ratio .swiper,
.qing-swiper--fit-ratio .swiper-wrapper,
.qing-swiper--fit-ratio .qing-swiper-slide {
	height: auto;
}

.qing-swiper--fit-ratio .qing-swiper-slide {
	aspect-ratio: var(--qing-hero-ratio, 16 / 9);
}

/* 图片背景层。悬停时由控件驱动 transform: scale() 平滑放大。 */
.qing-swiper-image {
	position: absolute;
	inset: 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 1;
	transform: scale(1);
	transition-property: transform;
	transition-duration: 0.6s;
	transition-timing-function: ease;
	will-change: transform;
}

/* 视频背景层：铺满并居中裁切，同样支持悬停放大。 */
.qing-swiper-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	transform: scale(1);
	transition-property: transform;
	transition-duration: 0.6s;
	transition-timing-function: ease;
	will-change: transform;
}

.qing-swiper-video-play {
	position: absolute;
	inset: 0;
	z-index: 4;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
}

.qing-swiper-video-play:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.9);
	outline-offset: -4px;
}

.qing-swiper-video-play span {
	display: none;
}

/* 遮罩层：置于背景之上、内容之下，颜色由控件设置，悬停时可切换颜色。 */
.qing-swiper-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	transition-property: background-color, background;
	transition-duration: 0.6s;
	transition-timing-function: ease;
}

/* 覆盖内容容器：flex 布局撑满整屏，对齐方式由控件设置。 */
.qing-swiper-content {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
}

.qing-swiper-content-inner {
	width: 100%;
	max-width: 760px;
}

/* 主标题：大号粗体，允许多行。 */
.qing-swiper-title {
	display: block;
	margin: 0 0 12px;
	color: #ffffff;
	font-size: 44px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: 0.5px;
	word-break: break-word;
}

/* 副标题 / 标语：彩色强调行。 */
.qing-swiper-subtitle {
	display: block;
	margin: 0 0 20px;
	color: #4d9bff;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
}

/* 描述段落：浅色小字。 */
.qing-swiper-desc {
	display: block;
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 15px;
	line-height: 1.8;
}

/* -------- 覆盖文字入场动画：仅「当前激活幻灯片」触发，切换时自动重放 --------
 * 通过 Swiper 在激活片上加的 .swiper-slide-active 类作为触发器，
 * 标题 → 副标题 → 描述 依次错峰淡入并轻微上移，营造层次感。
 * 用 animation 的 both 填充：动画前保持起始态（透明+下移），避免闪现。
 */
.qing-swiper .swiper-slide-active .qing-swiper-title,
.qing-swiper .swiper-slide-active .qing-swiper-subtitle,
.qing-swiper .swiper-slide-active .qing-swiper-desc {
	animation: qing-swiper-text-in 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.qing-swiper .swiper-slide-active .qing-swiper-title {
	animation-delay: 0.25s;
}

.qing-swiper .swiper-slide-active .qing-swiper-subtitle {
	animation-delay: 0.45s;
}

.qing-swiper .swiper-slide-active .qing-swiper-desc {
	animation-delay: 0.65s;
}

@keyframes qing-swiper-text-in {
	from {
		opacity: 0;
		transform: translateY(32px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* 左侧竖排品牌文字：贴左侧边缘，位置由修饰类决定（垂直居中 / 左下角）。 */
.qing-swiper-side {
	position: absolute;
	left: 24px;
	z-index: 4;
	color: rgba(255, 255, 255, 0.55);
	font-size: 12px;
	letter-spacing: 3px;
	text-transform: uppercase;
	pointer-events: none;
}

/* 垂直居中（旧版观感，保留为可选）。 */
.qing-swiper-side--middle {
	top: 50%;
	transform: translateY(-50%);
}

/*
 * 左下角：竖排文字紧贴左下角滚动指示器（.qing-swiper-scroll，bottom:28px、高约36px）
 * 正上方，二者组成「SCROLL DOWN + 滚动指示器」一组（对齐设计稿）。
 */
.qing-swiper-side--bottom {
	bottom: 78px;
}

.qing-swiper-side span {
	display: inline-block;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
}

/* 淡入淡出效果下，堆叠的幻灯片保持铺满。 */
.qing-swiper--effect-fade .swiper-slide {
	pointer-events: none;
}

.qing-swiper--effect-fade .swiper-slide-active {
	pointer-events: auto;
}

/* -------- 导航箭头：默认外观，颜色 / 尺寸由控件覆盖 -------- */
.qing-swiper .swiper-button-next,
.qing-swiper .swiper-button-prev {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-top: 0;
	transform: translateY(-50%);
	color: #ffffff;
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 50%;
	transition: background-color 0.25s ease, opacity 0.25s ease;
}

.qing-swiper .swiper-button-next::after,
.qing-swiper .swiper-button-prev::after {
	font-size: 20px;
	font-weight: 700;
}

/* -------- 分页器：底部居中，非激活为小圆点、激活为细长条（对齐设计稿）--------
 * 分页器整体绝对定位于容器底部，默认距底 15px（可由「分页圆点样式 - 距底部距离」控件覆盖）。
 * 小部件控件用 `{{WRAPPER}} .qing-swiper .swiper-pagination`（三层类）选择器覆盖，
 * 优先级高于 Swiper/Elementor 基础样式，无需 !important 即可稳定生效、避免「贴底」。
 */
.qing-swiper .swiper-pagination {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 4;
	bottom: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
}

/*
 * 非激活项：小圆点。border-radius:999px 恒为胶囊/圆形（宽=高时正圆、宽>高时药丸），
 * 避免 border-radius:50% 在宽>高时渲染成难看的横向椭圆。
 * 宽高由控件（dot_width / dot_size）内联覆盖，此处提供默认表现。
 */
.qing-swiper .swiper-pagination-bullet {
	width: 10px;
	height: 8px;
	margin: 0 !important;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.5);
	opacity: 1;
	transition: width 0.3s ease, background 0.3s ease;
}

/* 激活项拉伸为胶囊长条，形成「进度条式」分页观感（对齐设计稿）。 */
.qing-swiper .swiper-pagination-bullet.swiper-pagination-bullet-active,
.qing-swiper .swiper-pagination-bullet-active {
	width: 28px;
	background: #ffffff;
}

/* -------- 左下角鼠标滚动提示：胶囊外框 + 内部滚轮上下往复动画 -------- */
.qing-swiper-scroll {
	position: absolute;
	left: 24px;
	bottom: 28px;
	z-index: 4;
	color: rgba(255, 255, 255, 0.75);
	pointer-events: none;
}

.qing-swiper-mouse {
	display: block;
	width: 22px;
	height: 36px;
	border: 2px solid currentColor;
	border-radius: 12px;
	position: relative;
}

.qing-swiper-wheel {
	position: absolute;
	left: 50%;
	top: 7px;
	width: 3px;
	height: 7px;
	margin-left: -1.5px;
	border-radius: 3px;
	background: currentColor;
	animation: qing-swiper-scroll 1.6s ease-in-out infinite;
}

@keyframes qing-swiper-scroll {
	0% {
		opacity: 0;
		transform: translateY(0);
	}
	30% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY(12px);
	}
}

/* 尊重用户「减少动态效果」偏好：关闭滚轮与文字入场动画。 */
@media (prefers-reduced-motion: reduce) {
	.qing-swiper-wheel {
		animation: none;
	}

	.qing-swiper .swiper-slide-active .qing-swiper-title,
	.qing-swiper .swiper-slide-active .qing-swiper-subtitle,
	.qing-swiper .swiper-slide-active .qing-swiper-desc {
		animation: none;
	}
}

/* -------- 移动端适配 -------- */
@media (max-width: 1024px) {
	.qing-swiper-title {
		font-size: 34px;
	}

	.qing-swiper-subtitle {
		font-size: 18px;
	}
}

@media (max-width: 767px) {
	.qing-swiper-content-inner {
		max-width: 92%;
	}

	.qing-swiper-title {
		font-size: 26px;
	}

	.qing-swiper-subtitle {
		font-size: 16px;
	}

	.qing-swiper-side {
		display: none;
	}
}