.portfolio-filter{padding:2rem 0;border-bottom:1px solid var(--color-border);position:sticky;top:var(--header-height, 80px);background:var(--color-bg);z-index:90}.filter-wrapper{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}.filter-btn{display:inline-flex;align-items:center;padding:.625rem 1.25rem;background:var(--color-bg-soft);border:1px solid var(--color-border);border-radius:2rem;font-size:.875rem;font-weight:500;color:var(--color-text);text-decoration:none;transition:all .2s ease}.filter-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.filter-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.portfolio-masonry{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}.portfolio-masonry.portfolio-cols-2{grid-template-columns:repeat(2,1fr)}.portfolio-masonry.portfolio-cols-3{grid-template-columns:repeat(3,1fr)}.portfolio-masonry.portfolio-cols-4{grid-template-columns:repeat(4,1fr)}.portfolio-masonry.portfolio-cols-5{grid-template-columns:repeat(5,1fr)}.portfolio-masonry.portfolio-cols-6{grid-template-columns:repeat(6,1fr)}.portfolio-item{background:var(--color-bg);border-radius:1rem;overflow:hidden;border:1px solid var(--color-border);transition:all .3s ease}.portfolio-item:hover{transform:translateY(-8px);box-shadow:0 25px 50px #0000001f;border-color:transparent}.portfolio-item:hover .portfolio-image img{transform:scale(1.08)}.portfolio-item:hover .portfolio-overlay{opacity:1}.portfolio-item:hover .view-btn{transform:scale(1)}.portfolio-link{display:block;text-decoration:none;color:inherit}.portfolio-image{position:relative;padding-bottom:66.67%;overflow:hidden;background:var(--color-bg-soft)}.portfolio-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.portfolio-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-gray-100),var(--color-gray-200));color:var(--color-gray-400)}.portfolio-overlay{position:absolute;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}.view-btn{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:50%;color:var(--color-text);transform:scale(.8);transition:transform .3s ease}.portfolio-info{padding:1.5rem}.portfolio-category{display:inline-block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--color-primary);margin-bottom:.5rem}.portfolio-title{font-size:1.25rem;font-weight:600;margin-bottom:.5rem;line-height:1.3}.portfolio-excerpt{font-size:.9375rem;color:var(--color-text-muted);line-height:1.6;margin:0}.portfolio-item.image-only .portfolio-info{display:none}.pagination-wrapper{margin-top:3rem;display:flex;justify-content:center}.pagination{display:flex;gap:.5rem;margin:0;padding:0;list-style:none}.page-link{display:flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 1rem;border:1px solid var(--color-border);border-radius:.5rem;font-weight:500;color:var(--color-text);text-decoration:none;transition:all .2s ease}.page-link:hover{border-color:var(--color-primary);color:var(--color-primary)}.page-item.active .page-link{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.page-item.disabled .page-link{opacity:.5;pointer-events:none}.empty-state{text-align:center;padding:4rem 2rem;background:var(--color-bg-soft);border-radius:1rem}.empty-state svg{color:var(--color-gray-400);margin-bottom:1.5rem}.empty-state h3{font-size:1.5rem;margin-bottom:.5rem}.empty-state p{color:var(--color-text-muted);margin:0}@media(max-width:991px){.portfolio-filter{position:relative;top:0}}@media(max-width:991px)and (min-width:768px){.portfolio-masonry[class*=portfolio-cols-]{grid-template-columns:repeat(2,1fr)}}@media(max-width:767px){.portfolio-header{padding:6rem 0 2rem}.portfolio-masonry{grid-template-columns:1fr;gap:1.5rem}.filter-wrapper{overflow-x:auto;flex-wrap:nowrap;padding-bottom:.5rem;-webkit-overflow-scrolling:touch}.filter-btn{flex-shrink:0}}
