/* Darthost Portfolio styles (frontend) */
.darthost-portfolio-wrapper{--gap:16px; --radius:16px; --shadow:0 4px 18px rgba(0,0,0,.08);}
.darthost-portfolio-filter{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; align-items:center}
.darthost-filter-btn{border:1px solid #e5e7eb; padding:6px 10px; border-radius:999px; background:#fff; cursor:pointer; font-size:14px; line-height:1}
.darthost-filter-btn.active{background:#111; color:#fff; border-color:#111}
.darthost-portfolio-grid{display:grid; grid-template-columns:repeat(1, minmax(0,1fr)); gap:var(--gap)}
@media (min-width:640px){.darthost-portfolio-grid{grid-template-columns:repeat(2, minmax(0,1fr));}}
@media (min-width:1024px){.darthost-portfolio-grid{grid-template-columns:repeat(3, minmax(0,1fr));}}

.darthost-portfolio-item{background:#fff; border:1px solid #f0f0f0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease}
.darthost-portfolio-item:hover{transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.12)}
.darthost-portfolio-thumb{display:block; aspect-ratio:16/10; background:#f8f8f8; overflow:hidden}
.darthost-portfolio-img{width:100%; height:100%; object-fit:cover; display:block}
.darthost-portfolio-placeholder{width:100%; height:100%; background:repeating-linear-gradient(45deg,#f2f2f2,#f2f2f2 10px,#ececec 10px,#ececec 20px)}
.darthost-portfolio-content{padding:14px}
.darthost-portfolio-title{font-size:18px; margin:0 0 6px}
.darthost-portfolio-excerpt{font-size:14px; color:#555; margin:0 0 8px}
.darthost-portfolio-link a{text-decoration:none; font-weight:600}
.darthost-portfolio-empty{padding:8px; color:#666}
.darthost-portfolio-item[hidden]{display:none !important;}