.wp-hero-portfolio-filter { margin-bottom: 20px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.wp-hero-filter-btn { padding: 8px 16px; border-radius: 100px; color: #6F7178; cursor: pointer; border: 1px solid #FAF8F5; background: #FAF8F5; transition: background-color 0.3s, color 0.3s; }
.wp-hero-filter-btn:hover, .wp-hero-filter-btn.active { background: #004B97; color: #fff; border-color: #004B97; }
.wp-hero-portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 40px 30px; }
.wp-hero-portfolio-item { border: 1px solid rgba(0,0,0,0.08); padding: 0; border-radius: 20px; background: #FAF8F5; }
.wp-hero-portfolio-item img { object-fit: cover; border-radius: 20px 20px 0 0; height: 250px; width: 100%; display: block; margin-bottom: 15px; }
.wp-hero-portfolio-item a { text-decoration: none; color: inherit; display: block; }

.wp-hero-tag { display: inline-block; color: #004B97; background: #004B9710; padding: 4px 15px; font-weight: 600; margin-bottom: 6px; border-radius: 100px; margin-right: 3px; font-size: 12px; }
.cs-excerpt { color: #6F7178; font-size: 14px; margin-bottom: 20px;}
.cs-excerpt p:last-of-type { margin-bottom: 0;}
.cs-title {color: #171A24; font-weight: 600; font-size: 18px; margin-bottom: 10px; display: block;}
.cs-wrapper { padding: 3px 20px 20px; }
.wp-hero-portfolio-item.hidden { display: none; }
.cs-link { color: #E26500; font-size: 14px; font-weight: 600; display: flex; align-items: center; margin-top: 10px;}
.cs-link:hover {text-decoration: underline;}
.cs-link svg { width: 15px; margin-left: 5px; }
.cs-link svg path { fill: #E26500; }

.wp-hero-portfolio-item.animate-in {
	animation: wp-HeroFadeInScale 0.5s ease forwards;
}

@keyframes wp-HeroFadeInScale {
	0% {
		opacity: 0;
		transform: scale(0.9) translateY(10px);
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.wp-hero-portfolio-item.is-featured > a {
	display: flex;
	justify-content: center;
	align-items: center;
}

.wp-hero-portfolio-item.is-featured {
	grid-column: span 3;
	flex-direction: row;
	align-items: center;
	gap: 50px;
	border-radius: 20px;
}

.wp-hero-portfolio-item.is-featured .cs-wrapper {
	padding: 0 40px;
}

.wp-hero-portfolio-item.is-featured .cs-excerpt {
	font-size: 16px;
}
	
.wp-hero-portfolio-item.is-featured img {
	width: 50%;
	height: 400px;
	margin-bottom: 0;
	border-radius: 20px 0 0 20px;
}

.wp-hero-portfolio-item.is-featured .wp-hero-item-content {
	width: 50%;
}

.wp-hero-portfolio-item.is-featured h3 {
	font-size: 2rem;
}

@media (max-width: 1024px) {
	.wp-hero-portfolio-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.wp-hero-portfolio-item.is-featured {
		grid-column: span 2;
		flex-direction: column;
		padding: 20px;
	}
	.wp-hero-portfolio-item.is-featured img,
	.wp-hero-portfolio-item.is-featured .wp-hero-item-content {
		width: 100%;
		height: auto;
	}
}

@media (max-width: 767px) {
	.wp-hero-portfolio-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.wp-hero-portfolio-item.is-featured {
		grid-column: span 1;
		border-width: 1px;
	}
	.wp-hero-portfolio-item.is-featured h3 {
		font-size: 1.5rem;
	}
}