/* Portfolio page styles */
.portfolio { padding: 20px 0 40px; }
.portfolio-container { max-width: var(--max-width); margin: 0 auto; padding: 0 15px; }
.portfolio-intro { margin-bottom: 20px; font-size: 0.938rem; line-height: 1.7; color: #666; }

/* Filter tabs */
.portfolio-filters { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; margin-bottom: 30px; }
.portfolio-filters .pipe { color: #999; font-size: 0.85rem; }
.filter-btn { background: none; border: none; color: var(--color-accent); cursor: pointer; font-size: 0.9rem; padding: 4px 8px; font-family: var(--font-primary); }
.filter-btn:hover { text-decoration: underline; }
.filter-btn.active { font-weight: 700; }

/* Project list */
.portfolio-list { display: flex; flex-direction: column; gap: 22px; }
.portfolio-item { display: flex; flex-direction: row; align-items: stretch; }
.portfolio-item.alt { flex-direction: row-reverse; }

/* Image side */
.portfolio-item-image { flex: 0 0 48%; position: relative; overflow: hidden; aspect-ratio: 470 / 264; }
.portfolio-item-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portfolio-item-image .overlay { position: absolute; inset: 0; background: rgba(164, 92, 106, 0.85); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; }
.portfolio-item-image .overlay span { color: #fff; font-size: 1.1rem; font-weight: 700; }
.portfolio-item-image:hover .overlay { opacity: 1; }

/* Text side */
.portfolio-item-text { flex: 1; padding: 0 20px; display: flex; flex-direction: column; justify-content: center; }
.portfolio-item-icon { width: 40px; height: 40px; background: var(--color-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; text-decoration: none; margin-bottom: 8px; }
.portfolio-item-title { font-size: 1.08rem; font-weight: 700; color: #666; margin: 0 0 4px; }
.portfolio-item-title a { color: inherit; text-decoration: none; }
.portfolio-item-title a:hover { color: var(--color-accent); }
.portfolio-item-category { font-size: 0.844rem; color: #666; margin-bottom: 8px; }
.portfolio-item-excerpt { font-size: 0.844rem; color: #666; line-height: 1.6; }

/* Responsive */
@media (max-width: 767px) {
  .portfolio-item, .portfolio-item.alt { flex-direction: column !important; }
  .portfolio-item-image { flex: none; width: 100%; aspect-ratio: 16/9; }
  .portfolio-item-text { padding: 15px 0; }
}