.portfolio-breadcrumb ol{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0;font-size:.875rem;color:#475569}
.portfolio-breadcrumb li+li::before{content:"\2192";margin-right:.5rem;color:#94a3b8}
.portfolio-breadcrumb a{color:hsl(225 65% 45%);font-weight:600;text-decoration:none;border-radius:.25rem}
.portfolio-breadcrumb a:hover{text-decoration:underline}
.portfolio-breadcrumb li[aria-current]{color:#0f172a;font-weight:600}
.portfolio a:focus-visible,.portfolio button:focus-visible,.portfolio input:focus-visible,.portfolio-breadcrumb a:focus-visible{outline:3px solid hsl(225 65% 45%);outline-offset:2px}
.portfolio-toolbar{max-width:36rem;margin-bottom:1rem}
.portfolio-toolbar__label{display:block;font-weight:700;font-size:.9rem;color:#0f172a;margin-bottom:.5rem}
.portfolio-toolbar__row{display:flex;gap:.5rem;flex-wrap:wrap}
.portfolio-toolbar__input{flex:1 1 14rem;min-width:0;min-height:2.75rem;padding:.6rem .85rem;border:2px solid #94a3b8;border-radius:.375rem;background:#fff;color:#0f172a;font:inherit}
.portfolio-toolbar__input:focus{border-color:hsl(225 65% 45%)}
.portfolio-btn{min-height:2.75rem;padding:.6rem 1.1rem;border-radius:.375rem;font-weight:600;font-size:.9rem;cursor:pointer;border:2px solid transparent}
.portfolio-btn--ghost{background:#fff;border-color:#cbd5e1;color:#0f172a}
.portfolio-btn--ghost:hover{background:#f1f4fb}
.portfolio-btn--primary{background:hsl(225 65% 45%);color:#f8fafc}
.portfolio-btn--primary:hover{background:hsl(225 65% 40%)}
.portfolio-status{font-size:.875rem;color:#475569;margin:0 0 1.5rem}
.portfolio-error{border:2px solid #fca5a5;background:#fef2f2;color:#7f1d1d;border-radius:.5rem;padding:1rem 1.25rem;margin-bottom:1.5rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.portfolio-error[hidden],.portfolio-empty[hidden]{display:none}
.portfolio-error p{margin:0}
.portfolio-empty,.portfolio-noscript{border:2px dashed #cbd5e1;border-radius:.5rem;padding:2rem;text-align:center;color:#475569}
.portfolio-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem}
@media (min-width:640px){.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.portfolio-card{display:flex;flex-direction:column;min-width:0;background:#fff;border:2px solid #cbd5e1;border-radius:.5rem;overflow:hidden;box-shadow:0 1px 3px rgba(15,23,42,.08);transition:border-color .2s,box-shadow .2s}
.portfolio-card:hover,.portfolio-card:focus-within{border-color:hsl(225 65% 45%);box-shadow:0 10px 24px -8px rgba(15,23,42,.18)}
.portfolio-card__image{aspect-ratio:16/10;background:#f1f4fb;border-bottom:2px solid #e2e8f0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.portfolio-card__image img{width:100%;height:100%;object-fit:contain;display:block}
.portfolio-card__body{display:flex;flex-direction:column;gap:.75rem;padding:1.25rem;flex:1;min-width:0}
.portfolio-card__title{font-size:1.15rem;font-weight:700;line-height:1.3;color:#0f172a;margin:0;overflow-wrap:anywhere}
.portfolio-card__description{font-size:.925rem;line-height:1.6;color:#475569;margin:0;overflow-wrap:anywhere}
.portfolio-card__details{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.35rem .75rem;margin:0;font-size:.85rem;border-top:1px solid #e2e8f0;padding-top:.75rem}
.portfolio-card__details dt{font-weight:700;color:#0f172a}
.portfolio-card__details dd{margin:0;color:#475569;overflow-wrap:anywhere}
.portfolio-card__link{margin-top:auto;align-self:flex-start;font-weight:600;font-size:.9rem;color:hsl(225 65% 45%);text-decoration:none;border-radius:.25rem;padding:.15rem 0}
.portfolio-card__link:hover{text-decoration:underline}
.portfolio-grid[hidden]{display:none}
.portfolio-card__details>div{display:contents}
.portfolio-card__image-fallback{padding:1rem;text-align:center;font-size:.875rem;color:#475569}
@media (prefers-reduced-motion:reduce){.portfolio-card{transition:none}}