/**
 * Qing 证书轮播（居中突出 / Coverflow）样式。
 *
 * 结构：.qing-cc（相对定位容器）
 *   > .swiper.qing-cc__swiper > .swiper-wrapper > .swiper-slide.qing-cc__slide
 *       > .qing-cc__img（图片框，统一高度）
 *   > .qing-carousel__arrow.qing-carousel__prev / __next（圆形箭头，两侧垂直居中）
 *   > .qing-cc__title.qing-carousel__active-title（仅显示选中项标题，居中于下方，宽度可调）
 *
 * 居中突出依赖 Swiper slide + centeredSlides + slidesPerView（数值，按显示数量分屏）：
 * 所有幻灯片统一高度，仅居中项由 CSS transform 放大（--qing-cc-scale）突出，
 * 避免 coverflow 逐级累积缩放造成「离中心越远越小」的非均匀问题。
 * 容器上下留白由 --qing-cc-h（图片高度）与 --qing-cc-scale 动态计算，
 * 保证放大后的居中项完整显示。
 */

.qing-cc {
	position: relative;
	width: 100%;
	padding: 10px 0 20px;
	box-sizing: border-box;
}

/* 上下留白按「图片高度 × (放大倍数 - 1) / 2」动态计算（再加少量缓冲），
   确保居中项放大后的上下溢出完整显示、不被 overflow:hidden 裁切。 */
.qing-cc__swiper {
	width: 100%;
	overflow: hidden;
	padding: calc((var(--qing-cc-scale, 1.16) - 1) * var(--qing-cc-h, 340px) / 2 + 12px) 0;
}

/* 单张幻灯片：宽度由 Swiper 按「显示数量」自动计算（内联 width）；
   统一高度，居中项靠 CSS 放大突出。 */
.qing-cc__slide {
	height: auto;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	/* 允许居中项放大后溢出自身，不被裁切。 */
	overflow: visible;
	/* 固定 slide 宽度：由 carousel.js 按「容器宽 ÷ 显示数量」算好写入 --qing-cc-slide-w。
	   配合 JS 端 slidesPerView:'auto'，Swiper 只读这个固定宽度，
	   不再自己用「容器宽 ÷ slidesPerView」做除法（该除法在 flex+loop 下基准失控会算出千万像素）。
	   未设变量时（如变量尚未写入的极短瞬间）回退到视口的 45%，避免 0 宽。 */
	width: var(--qing-cc-slide-w, 45vw);
	flex-shrink: 0;
}

/* 居中项抬升层级，放大时压在两侧之上。 */
.qing-cc__slide.swiper-slide-active {
	z-index: 2;
}

.qing-cc__link {
	display: block;
	width: 100%;
	text-decoration: none;
	color: inherit;
}

/* 图片框：统一高度（CSS 变量下发，供留白计算复用）、白底、居中显示证书；仅居中项放大。 */
.qing-cc__img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--qing-cc-h, 340px);
	background: #ffffff;
	border-radius: 4px;
	overflow: hidden;
	transform: scale(1);
	transform-origin: center center;
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* 居中项在统一高度基础上放大突出（倍数由 --qing-cc-scale 控制）。 */
.qing-cc__slide.swiper-slide-active .qing-cc__img {
	transform: scale(var(--qing-cc-scale, 1.16));
}

.qing-cc__img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* 标题：仅显示选中项，居中于轮播下方，最大宽度由控件设定，超出行数省略。 */
.qing-cc__title {
	margin: 20px auto 0;
	max-width: 480px;
	width: 100%;
	color: #333333;
	font-size: 15px;
	line-height: 1.5;
	text-align: center;
	word-break: break-word;
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* -------- 圆形导航箭头（实心圆，作用域限定在 .qing-cc 内）-------- */
.qing-cc .qing-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: #ffffff;
	background-color: #2f6bd6;
	cursor: pointer;
	border: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transition: background-color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

.qing-cc .qing-carousel__arrow:hover {
	transform: translateY(-50%) scale(1.06);
}

.qing-cc .qing-carousel__arrow svg {
	width: 46%;
	height: 46%;
	display: block;
}

.qing-cc .qing-carousel__prev {
	left: 8px;
}

.qing-cc .qing-carousel__next {
	right: 8px;
}

/* 安全兜底：旧实例可能残留 Elementor 生成的 `left/right:0`（贴边，配合祖先裁切会被切掉）。
   用更高优先级（.qing-carousel.qing-cc 双类）覆盖，使箭头始终内缩显示，
   无需等待 Elementor「重新生成 CSS」即可生效。用户拖动「箭头水平偏移」控件仍可再覆盖本值。 */
.qing-carousel.qing-cc .qing-carousel__prev {
	left: 8px;
}

.qing-carousel.qing-cc .qing-carousel__next {
	right: 8px;
}

/* Swiper 禁用态（非 loop、到头）。 */
.qing-cc .qing-carousel__arrow.swiper-button-disabled {
	opacity: 0.4;
	cursor: default;
	pointer-events: none;
}

/* -------- 移动端：保持中间突出、两侧露出（显示数量由控件的手机端断点控制） -------- */
@media (max-width: 767px) {
	.qing-cc {
		--qing-cc-h: 260px;
		padding: 10px 0 20px;
	}

	/* 手机端幻灯片宽度不再写死（此前 64vw / auto 都会让「显示数量」控件失效）：
	   宽度交回 carousel.js 按「容器宽 ÷ 手机端显示数量」算出的 --qing-cc-slide-w，
	   这样「显示数量」控件在手机端正常生效；图片填充方式沿用「图片填充方式」控件（object-fit）。
	   仅保留 max-width 兜底：万一 JS 一时算出异常大的宽度，也不会撑爆屏幕（正常值远小于此）。 */
	.qing-cc__slide {
		max-width: 96vw;
	}

	/* 手机端隐藏左右导航箭头（仅手机端；PC / 平板端箭头照常显示）。
	   手机端靠滑动切换，不需要箭头。 */
	.qing-cc .qing-carousel__arrow,
	.qing-cc .qing-carousel__prev,
	.qing-cc .qing-carousel__next {
		display: none !important;
	}
}


/* ==========================================================================
   修复：防止 Swiper 在 Elementor flex 容器中宽度失控（关键）
   --------------------------------------------------------------------------
   现象：slide 被 Swiper 算成千万像素（inline width:1.78e7px），撑爆页面横向，
        并连带破坏 position:sticky / 使内容被挤成窄列。
   根因：轮播小部件作为 flex 项，min-width 默认 auto（不小于内容），配合 Swiper 的
        observeParents 反复测量，形成「越量越宽」的指数级反馈循环。
   修法：让小部件/容器在 flex 中可收缩（min-width:0）、不超过父级（max-width:100%），
        并在小部件层裁掉横向溢出，切断循环，使 Swiper 测得正常的视口宽度。
   ========================================================================== */
.elementor-widget-qing-cert-carousel {
	/* 仅解除 flex 项的内容宽度下限并限制不超过父级 —— 不改 flex-basis / 高度，
	   避免在纵向 flex 容器里把轮播高度压塌（曾导致整块空白）。
	   不在此裁横向：会把浮在两侧的绝对定位箭头一并裁掉（PC 端箭头看不到）。
	   横向溢出兜底在页面级 html,body { overflow-x: clip }。
	   宽度失控的真正修复在 carousel.js（关闭 observer 雪崩 + 初始化后 update）。 */
	min-width: 0;
	max-width: 100%;
}

.qing-cc {
	min-width: 0;
	max-width: 100%;
	/* 不在此层裁剪：绝对定位的左右箭头（left/right:8px）依赖 .qing-cc 作为定位父级，
	   若这里 overflow-x: clip 会把箭头一并裁掉导致 PC 端看不到箭头。
	   横向溢出的兜底放在页面级 html,body { overflow-x: clip }（见 overflow-carousel.css）
	   以及 .qing-cc__swiper 自身的 overflow:hidden。 */
	overflow: visible;
}

/* 关键硬上限：Swiper 测量的就是这个 .qing-cc__swiper。
   用 100%（相对已被 max-width:100% 限制的父级）而非 100vw ——
   100vw 会把竖向滚动条宽度也算进去，反而比可视内容宽，导致页面横向溢出。
   配合祖先的 overflow-x: clip，即使 Swiper 一时量宽也不会撑爆页面。 */
.qing-cc__swiper {
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
}