/* Portfolio page styles (placeholder) */
.portfolio-filter { cursor: pointer; }
.portfolio-item { transition: opacity 0.28s ease, transform 0.28s ease; }

/* Portfolio styles extracted from main stylesheet */
.portfolio { background: var(--gray-100); }
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: var(--spacing-md); }
.portfolio-item { position: relative; overflow: hidden; border-radius: 1rem; box-shadow: var(--shadow-md); transition: var(--transition-normal); aspect-ratio: 16/9; min-height: 200px; height: auto; }
.portfolio-item:hover { transform: scale(1.05); box-shadow: var(--shadow-xl); }
.portfolio-image { width: 100%; height: 100%; background-size: cover; background-position: center; position: relative; transition: var(--transition-normal); }
.portfolio-item:hover .portfolio-image { transform: scale(1.05); }
.portfolio-overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.9); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--spacing-md); opacity: 0; transition: var(--transition-normal); text-align: center; }
.portfolio-item:hover .portfolio-overlay { opacity: 1; }
.portfolio-overlay h3 { color: var(--white); margin-bottom: var(--spacing-sm); }
.portfolio-overlay p { color: rgba(255, 255, 255, 0.8); margin-bottom: var(--spacing-md); }
.portfolio-link { color: var(--secondary-color); font-weight: 600; display: inline-flex; align-items: center; gap: 0.5rem; transition: var(--transition-fast); padding: 0.5rem 1rem; border: 2px solid var(--secondary-color); border-radius: 0.5rem; }
.portfolio-link:hover { background: var(--secondary-color); color: var(--dark-bg); gap: 1rem; transform: translateY(-2px); }

/* Responsive design for portfolio */
@media (max-width: 1024px) {
	.portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
	.portfolio-item { aspect-ratio: 16/9; min-height: 180px; }
}

@media (max-width: 768px) {
	.portfolio-grid { grid-template-columns: 1fr; gap: 1.25rem; }
	.portfolio-item { aspect-ratio: 16/9; min-height: 160px; }
	.portfolio-overlay { padding: 1.25rem; }
}

@media (max-width: 480px) {
	.portfolio-item { aspect-ratio: 4/3; min-height: 140px; }
	.portfolio-overlay h3 { font-size: 1.25rem; }
	.portfolio-overlay p { font-size: 0.9rem; }
}