/**
 * Qing 证书卡片轮播样式。
 *
 * 结构：.qing-ccard
 *   > .swiper.qing-ccard__swiper > .swiper-wrapper > .swiper-slide.qing-ccard__slide
 *       > .qing-ccard__card（白卡）> .qing-ccard__img + .qing-ccard__title
 *   > .qing-ccard__nav（底部导航）> 箭头(span) + .qing-carousel__fraction + 箭头(span)
 *
 * 说明：共享类 .qing-carousel__arrow 的基础样式在此以父类 .qing-ccard 限定作用域，
 * 避免与其他轮播小部件（实心圆箭头）互相覆盖。
 */

.qing-ccard {
	width: 100%;
	/* 关键：作为 flex 子项可收缩，切断 Swiper 宽度失控的放大循环（否则 slide 被算成千万像素）。 */
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

/* 关键收敛：Elementor 小部件容器可收缩，避免 flex 下被撑爆的内容把它撑开。 */
.elementor-widget-qing-cert-cards {
	min-width: 0;
	max-width: 100%;
	overflow-x: clip;
}

.qing-ccard__swiper {
	width: 100%;
	/* 硬上限：用 100%（相对已被 max-width:100% 限制的父级）而非 100vw。
	   100vw 会把竖向滚动条宽度也算进去，在手机端比可视区略宽，导致右侧溢出。 */
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	padding: 6px 0;
}

.qing-ccard__slide {
	height: auto;
	box-sizing: border-box;
}

/* 白色卡片：纵向排布，图片在上、标题在下。 */
.qing-ccard__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #ffffff;
	border-radius: 10px;
	padding: 20px;
	box-sizing: border-box;
	text-decoration: none;
	color: inherit;
	/* 初始无阴影，仅链接卡片悬停时浮起阴影。 */
	box-shadow: none;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

a.qing-ccard__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

/* 图片框：固定高度、证书完整显示。 */
.qing-ccard__img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 200px;
	overflow: hidden;
}

.qing-ccard__img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 8px;
	box-sizing: border-box;
	display: block;
}

/* 标题：默认单行省略，可由控件放宽行数。 */
.qing-ccard__title {
	margin-top: 14px;
	color: #333333;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
	word-break: break-word;
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
}

/* -------- 底部导航：左右箭头 + N of N 分数，居中一行（紧凑，对齐设计稿）-------- */
.qing-ccard__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 18px;
}

/* 描边圆形箭头（span 承载自定义 SVG / 内置回退 SVG）。 */
.qing-ccard .qing-carousel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid #d0d5dd;
	color: #9aa4b2;
	background: transparent;
	cursor: pointer;
	transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.qing-ccard .qing-carousel__arrow svg,
.qing-ccard .qing-carousel__arrow i {
	width: 40%;
	height: 40%;
	font-size: 14px;
	line-height: 1;
	display: block;
}

.qing-ccard .qing-carousel__arrow img {
	width: 40%;
	height: 40%;
	object-fit: contain;
}

.qing-ccard .qing-carousel__arrow:hover {
	color: #2f6bd6;
	border-color: #2f6bd6;
}

.qing-ccard .qing-carousel__arrow.swiper-button-disabled {
	opacity: 0.45;
	cursor: default;
	pointer-events: none;
}

/* 分数指示「4 of 4」：垂直居中、灰色、最小宽度防止翻页时抖动。
   width:auto + flex:0 0 auto 覆盖 Swiper 注入的 .swiper-pagination-fraction{width:100%}，
   否则分数会被撑满全宽、把左右箭头挤到两端。 */
.qing-ccard .qing-carousel__fraction {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: auto;
	min-width: 40px;
	color: #6b7688;
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
}

.qing-ccard .qing-carousel__fraction-sep {
	margin: 0 4px;
}

/* -------- 移动端：一排两个（由 breakpoints 控制），此处兜底导航尺寸 -------- */
@media (max-width: 767px) {
	.qing-ccard__img {
		height: 150px;
	}

	.qing-ccard__card {
		padding: 12px;
	}

	.qing-ccard .qing-carousel__arrow {
		width: 28px;
		height: 28px;
	}
}