.portfolio-container[data-v-fb89f4c0]{width:100%;max-width:1400px;margin:0 auto}.portfolio-grid[data-v-fb89f4c0]{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem}.portfolio-item[data-v-fb89f4c0]{cursor:pointer;border-radius:12px;overflow:hidden;height:100%;transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 4px 6px #0000001a;background-color:var(--gray-900);display:flex;flex-direction:column}.portfolio-item[data-v-fb89f4c0]:hover{transform:translateY(-5px);box-shadow:0 8px 12px #00000026}.portfolio-desc[data-v-fb89f4c0]{padding:1.25rem;flex-grow:1;display:flex;flex-direction:column;gap:.75rem}.title-container[data-v-fb89f4c0]{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}.portfolio-desc h4[data-v-fb89f4c0]{font-size:clamp(1.25rem,2vw,1.5rem);margin:0;line-height:1.2}.portfolio-desc p[data-v-fb89f4c0]{margin:0;font-size:clamp(.875rem,1.5vw,1rem);line-height:1.5}.categories[data-v-fb89f4c0]{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}.category-tag[data-v-fb89f4c0]{background:var(--gray-999);padding:.35em .75em;border-radius:6px;font-size:clamp(.75rem,1.25vw,.875rem);color:#666;white-space:nowrap}.live-link[data-v-fb89f4c0]{font-size:clamp(.8rem,1.25vw,.85rem);height:2.25rem;display:inline-flex;align-items:center;gap:.5rem;background:var(--accent-dark);color:#fff;padding:0 1rem;border-radius:6px;text-decoration:none;transition:background-color .2s,transform .2s;white-space:nowrap}.live-link[data-v-fb89f4c0]:hover{background:var(--accent-regular);transform:translateY(-2px)}.external-link-icon[data-v-fb89f4c0]{font-size:1.2em;line-height:1}.thumbnail[data-v-fb89f4c0]{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .3s ease}.portfolio-item:hover .thumbnail[data-v-fb89f4c0]{transform:scale(1.05)}.modal-overlay[data-v-fb89f4c0]{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000e6;display:flex;justify-content:center;align-items:center;z-index:9999;padding:1rem}.modal-content[data-v-fb89f4c0]{background:var(--gray-900);padding:clamp(1rem,3vw,2rem);border-radius:12px;width:100%;max-width:1200px;max-height:90vh;position:relative;overflow:auto}.close-button[data-v-fb89f4c0]{position:absolute;top:1rem;right:1rem;background:#00000080;color:#fff;border:none;width:2.5rem;height:2.5rem;border-radius:50%;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s;z-index:2}.close-button[data-v-fb89f4c0]:hover{background:#000000b3}.modal-navigation[data-v-fb89f4c0]{display:flex;align-items:center;gap:clamp(1rem,2vw,2rem)}.nav-button[data-v-fb89f4c0]{background:#00000080;color:#fff;border:none;width:2.5rem;height:2.5rem;border-radius:50%;font-size:1.25rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s,opacity .2s;flex-shrink:0}.nav-button[data-v-fb89f4c0]:hover:not(:disabled){background:#000000b3}.nav-button[data-v-fb89f4c0]:disabled{opacity:.3;cursor:not-allowed}.modal-body[data-v-fb89f4c0]{flex-grow:1;display:flex;flex-direction:column;gap:1.5rem}.modal-image[data-v-fb89f4c0]{width:100%;object-fit:contain;border-radius:8px}.pills{&[data-v-fb89f4c0]{display:flex;padding:0;gap:.4rem}li[data-v-fb89f4c0]{cursor:pointer}}@media (max-width: 768px){.portfolio-grid[data-v-fb89f4c0]{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.5rem}.modal-navigation[data-v-fb89f4c0]{flex-direction:column}.nav-button[data-v-fb89f4c0]{position:absolute;top:50%;transform:translateY(-50%)}.nav-button.prev[data-v-fb89f4c0]{left:1rem}.nav-button.next[data-v-fb89f4c0]{right:1rem}.modal-content[data-v-fb89f4c0]{padding:1rem}.close-button[data-v-fb89f4c0]{top:.5rem;right:.5rem}}@media (max-width: 480px){.pills[data-v-fb89f4c0]{overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}.pills[data-v-fb89f4c0]::-webkit-scrollbar{display:none}.portfolio-grid[data-v-fb89f4c0]{grid-template-columns:1fr;gap:1rem}.portfolio-desc[data-v-fb89f4c0]{padding:1rem}.modal-overlay[data-v-fb89f4c0]{padding:.5rem}.nav-button[data-v-fb89f4c0]{width:2rem;height:2rem;font-size:1rem}}@media (hover: none){.portfolio-item[data-v-fb89f4c0]:hover,.portfolio-item:hover .thumbnail[data-v-fb89f4c0]{transform:none}.nav-button[data-v-fb89f4c0]{opacity:1;background:#000000b3}}