/**
 * 百家 产品展示（Portfolio）样式
 */

.baijia-portfolio {
	width: 100%;
}

.baijia-portfolio-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

/* 单项卡片 */
.baijia-portfolio-item {
	--bjp-duration: 0.7s;
	--bjp-delay: 0s;
	position: relative;
	overflow: hidden;
}

.baijia-portfolio-inner {
	position: relative;
	display: block;
	height: 100%;
}

/* 图片容器 */
.baijia-portfolio-media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: #f3f3f3;
	text-decoration: none;
}

.baijia-portfolio-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: transparent;
	transition: background-color 0.4s ease;
	pointer-events: none;
	z-index: 1;
}

.baijia-portfolio-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}

.baijia-portfolio-placeholder {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(45deg, #f0f0f0 0 10px, #fafafa 10px 20px);
}

/* 标题区 */
.baijia-portfolio-body {
	padding: 18px 4px 0;
}

.baijia-portfolio-title {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

.baijia-portfolio-title a {
	color: #111;
	text-decoration: none;
	transition: color 0.25s ease;
}

.baijia-portfolio-item:hover .baijia-portfolio-title a {
	color: #a6ce39;
}

/* 右下角箭头按钮：悬停时从右下角滑入 */
.baijia-portfolio-btn {
	position: absolute;
	top: calc(var(--aspect-h, 100%) - 24px);
	right: 10px;
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #a6ce39;
	color: #fff;
	border-radius: 50%;
	text-decoration: none;
	transform: translate(10px, -10px) scale(0.6);
	opacity: 0;
	transition: transform 0.35s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.25s ease;
	z-index: 2;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* 用 JS 无关的 CSS 定位：按钮浮在图片右下角 */
.baijia-portfolio-inner {
	position: relative;
}

.baijia-portfolio-btn {
	top: auto;
	right: 16px;
	bottom: 82px; /* 图片区 100% - 底下标题 ~ 80px 对齐在图片下缘之上 */
}

.baijia-portfolio-item:hover .baijia-portfolio-btn {
	opacity: 1;
	transform: translate(0, 0) scale(1);
}

.baijia-portfolio-btn svg {
	width: 50%;
	height: 50%;
	display: block;
}

/* 入场动画：默认隐藏，添加 .is-inview 类时显示 */
.baijia-portfolio.has-enter-anim .baijia-portfolio-item {
	opacity: 0;
	will-change: transform, opacity;
	transition: transform var(--bjp-duration, 0.7s) cubic-bezier(0.2, 0.65, 0.3, 1),
	            opacity var(--bjp-duration, 0.7s) ease;
	transition-delay: var(--bjp-delay, 0s);
}

.baijia-portfolio.anim-fade-up .baijia-portfolio-item   { transform: translateY(40px); }
.baijia-portfolio.anim-fade-in .baijia-portfolio-item   { transform: none; }
.baijia-portfolio.anim-zoom-in .baijia-portfolio-item   { transform: scale(0.92); }
.baijia-portfolio.anim-slide-left  .baijia-portfolio-item { transform: translateX(-40px); }
.baijia-portfolio.anim-slide-right .baijia-portfolio-item { transform: translateX(40px); }

.baijia-portfolio.has-enter-anim .baijia-portfolio-item.is-inview {
	opacity: 1;
	transform: none;
}

/* 减弱动画偏好 */
@media (prefers-reduced-motion: reduce) {
	.baijia-portfolio-item { transition: none !important; }
	.baijia-portfolio-item { opacity: 1 !important; transform: none !important; }
}

/* 响应式 */
@media (max-width: 1024px) {
	.baijia-portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.baijia-portfolio-grid { grid-template-columns: 1fr; gap: 20px; }
	.baijia-portfolio-title { font-size: 18px; }
}