/* 容器布局：通用基础样式（仅宽度、外边距，不涉及高度） */
.product-card-box {
	width: 90%;
	margin: clamp(1rem, 2vw, 1.5rem) auto 0;
	padding: 0;
}

.product-card-container {
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap: nowrap;
	overflow: hidden;
	padding: 0 clamp(0.2rem, 0.6vw, 0.3rem);
}

/* ######################################################################### */
/* 移动端样式（单独配置，max-width: 1023px）- 后续修改仅改这里 */
/* ######################################################################### */
@media (max-width: 1023px) {
	/* 卡片容器：移动端特有 */
	.product-card-container {
		align-items: stretch;
	}

	/* 卡片核心：移动端固定宽高比 */
	.product-card {
		background: rgb(242, 243, 245);
		border-radius: clamp(0.375rem, 1vw, 0.5rem);
		cursor: pointer;
		width: calc(25% - clamp(0.3rem, 0.5vw, 0.36rem));
		flex: none;
		box-shadow: 0 clamp(0.1rem, 0.2vw, 0.125rem)
			clamp(0.3rem, 0.8vw, 0.5rem) rgba(0, 0, 0, 0.05);
		margin: 0 clamp(0.16rem, 0.24vw, 0.2rem);
		display: flex;
		flex-direction: column;
		aspect-ratio: 3 / 4.2;
		/* 移动端固定宽高比 */
	}

	/* 卡片hover效果：移动端特有 */
	.product-card:hover {
		transform: scale(clamp(1.01, 1.02, 1.03));
		transition: transform 0.3s ease;
	}

	/* 图片容器：移动端固定占比 */
	.product-card-img {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		flex: 0 0 72%;
		/* 移动端图片区占比 */
		margin-bottom: clamp(0.4rem, 0.6vw, 0.5rem);
		overflow: hidden;
		border-radius: clamp(0.2rem, 0.4vw, 0.25rem);
	}

	/* 产品图片：移动端特有 */
	.product-card img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center;
	}

	/* 文字容器：移动端固定占比 */
	.product-card-text {
		flex: 0 0 20%;
		/* 移动端文字区占比 */
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: clamp(0.8rem, 2vw, 1.5rem);
		padding-right: clamp(0.8rem, 2vw, 1.5rem);
	}

	/* 标题样式：移动端特有 */
	.product-card-title {
		font-size: clamp(0.8rem, 1.3vw, 1.2rem);
		font-weight: 600;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		height: 35%;
		/* 移动端标题固定高度 */
		line-height: 1.2;
	}

	/* 描述样式：移动端固定2行高度 */
	.product-card-desc {
		font-size: clamp(0.7rem, 1.1vw, 0.9rem);
		color: #656565;
		word-break: break-word;
		height: 65%;
		/* 移动端描述固定高度（2行） */
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		line-height: 1.4;
	}

	/* 链接图标容器：移动端固定占比 */
	.product-card-link {
		width: 100%;
		display: flex;
		align-items: center;
		flex: 0 0 10%;
		/* 移动端链接区占比 */
		padding: clamp(0.8rem, 2vw, 1.5rem);
	}

	/* 链接图标：移动端特有 */
	.product-card-link img {
		width: clamp(2.5rem, 5vw, 4.5rem);
		height: auto;
		object-fit: contain;
	}

	/* 移动端768px以上补充样式 */
	@media (min-width: 768px) and (max-width: 1023px) {
		.product-card-img {
			flex: 0 0 72%;
		}

		.product-card-link img {
			width: clamp(5rem, 4vw, 6rem);
		}
	}
}

/* ######################################################################### */
/* PC端样式（单独配置，min-width: 1024px）- 后续修改仅改这里 */
/* ######################################################################### */
@media (min-width: 1024px) {
	/* 卡片容器：PC端特有（高度自适应） */
	.product-card-container {
		align-items: stretch;
		height: clamp(30vw, 35vw, 480px);
		/* PC端容器高度自适应 */
	}

	/* 卡片核心：PC端高度自适应 */
	.product-card {
		background: rgb(242, 243, 245);
		border-radius: clamp(0.375rem, 1vw, 0.5rem);
		cursor: pointer;
		width: calc(25% - clamp(0.3rem, 0.5vw, 0.36rem));
		flex: none;
		box-shadow: 0 clamp(0.1rem, 0.2vw, 0.125rem)
			clamp(0.3rem, 0.8vw, 0.5rem) rgba(0, 0, 0, 0.05);
		margin: 0 clamp(0.16rem, 0.24vw, 0.2rem);
		display: flex;
		flex-direction: column;
		height: 100%;
		/* PC端卡片高度继承父容器 */
	}

	/* 卡片hover效果：PC端特有 */
	.product-card:hover {
		transform: scale(clamp(1.01, 1.02, 1.03));
		transition: transform 0.3s ease;
	}

	/* 图片容器：PC端固定占比 */
	.product-card-img {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		flex: 0 0 72%;
		/* PC端图片区占比 */
		margin-bottom: clamp(0.4rem, 0.6vw, 0.5rem);
		overflow: hidden;
		border-radius: clamp(0.2rem, 0.4vw, 0.25rem);
	}

	/* 产品图片：PC端特有 */
	.product-card img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center;
	}

	/* 文字容器：PC端固定占比 */
	.product-card-text {
		flex: 0 0 15%;
		/* PC端文字区占比 */
		/* display: flex; */
		flex-direction: column;
		justify-content: center;
		padding-left: clamp(0.8rem, 2vw, 1.5rem);
		padding-right: clamp(0.8rem, 2vw, 1.5rem);
	}

	/* 标题样式：PC端特有 */
	.product-card-title {
		font-size: clamp(0.8rem, 1.3vw, 1.2rem);
		font-weight: 600;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		/* height: 35%; */
		/* PC端标题固定高度 */
		line-height: 1.2;
		display: flex;
		align-items: center;
	}

	/* 描述样式：PC端固定2行高度 */
	.product-card-desc {
		font-size: clamp(0.7rem, 1.1vw, 0.9rem);
		color: #656565;
		word-break: break-word;
		/* height: 65%; */
		/* PC端描述固定高度（2行） */
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		line-height: 1.4;
	}

	/* 链接图标容器：PC端固定占比 */
	.product-card-link {
		width: 100%;
		/* display: flex; */
		/* align-items: center; */
		flex: 0 0 12%;
		/* PC端链接区占比 */
		padding-left: clamp(0.8rem, 2vw, 1.5rem);
	}

	/* 链接图标：PC端特有 */
	.product-card-link img {
		width: clamp(2.5rem, 5vw, 4.5rem);
		height: auto;
		object-fit: contain;
	}
}
