/* Cliptica — Projects dashboard. */

.proj-search{width:220px;padding:8px 12px;font-size:13px;}

.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;}

.proj-card{position:relative;display:flex;flex-direction:column;overflow:hidden;
  cursor:pointer;}
.proj-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.proj-thumb{position:relative;width:100%;padding-top:56.25%;background:#000;overflow:hidden;}
.proj-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.88;transition:opacity 160ms,transform 240ms var(--snap);}
.proj-card:hover .proj-thumb img{opacity:1;transform:scale(1.02);}
.proj-thumb-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--s2),var(--s1));}
.proj-thumb-ph svg{height:34px;width:auto;opacity:.5;}
.proj-thumb .pill{position:absolute;top:10px;left:10px;backdrop-filter:blur(4px);}
.proj-clipcount{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,.72);
  color:#fff;font-family:var(--mono);font-size:10.5px;padding:2px 8px;border-radius:5px;
  font-variant-numeric:tabular-nums;}

.proj-body{padding:13px 14px;display:flex;flex-direction:column;gap:7px;flex:1;}
.proj-title{font-size:13.5px;font-weight:600;line-height:1.35;color:var(--text);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.7em;}
.proj-title-input{background:var(--s2);border:1px solid var(--accent);border-radius:6px;
  padding:5px 8px;color:var(--text);font:inherit;font-size:13.5px;font-weight:600;
  width:100%;outline:none;}
.proj-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:auto;}
.proj-date{font-family:var(--mono);font-size:10.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;}
.proj-menu-btn{background:none;border:none;color:var(--muted);cursor:pointer;
  width:28px;height:28px;border-radius:6px;font-size:15px;line-height:1;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity 120ms,background 120ms,color 120ms;}
.proj-card:hover .proj-menu-btn,.proj-menu-btn:focus-visible{opacity:1;}
.proj-menu-btn:hover{background:var(--s3);color:var(--text);}

.proj-progress{padding:0 14px 13px;display:flex;flex-direction:column;gap:6px;}
.proj-progress-row{display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:10.5px;color:var(--muted);}
.proj-progress-row strong{color:var(--accent2);font-weight:500;}

/* skeleton cards */
.proj-skel{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);}
.proj-skel .sk-thumb{padding-top:56.25%;}
.proj-skel .sk-line{height:12px;margin:12px 14px 0;}
.proj-skel .sk-line:last-child{width:55%;margin-bottom:16px;}