/* ============================================
   OpenToad — projects.css
   Browse page: hot / needs-a-boost project grids,
   search bar, category + role + sort filters.
   ============================================ */

/* --- Page header --- */
.proj-head {
  max-width: var(--max-w); margin: 0 auto; padding: 2.5rem var(--content-pad) 0.5rem;
}
.proj-head p { max-width: 560px; margin-top: 0.4rem; }

/* --- Search + filter toolbar --- */
.proj-toolbar {
  max-width: var(--max-w); margin: 1.75rem auto 0; padding: 0 var(--content-pad);
  display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center;
}
.proj-search {
  flex: 1 1 240px; position: relative; display: flex; align-items: center;
}
.proj-search svg {
  position: absolute; left: 14px; width: 16px; height: 16px; color: var(--slate); pointer-events: none;
}
.proj-search input {
  width: 100%; font-family: 'DM Sans', sans-serif; font-size: 0.9rem;
  padding: 0.7rem 0.9rem 0.7rem 2.5rem;
  border: 1px solid var(--bdr); border-radius: var(--r-md);
  background: var(--wht); color: var(--ink);
}
.proj-search input:focus { outline: none; border-color: var(--canopy); }
.proj-toolbar select {
  font-family: 'DM Sans', sans-serif; font-size: 0.85rem; color: var(--inkm);
  padding: 0.68rem 2.2rem 0.68rem 0.9rem;
  border: 1px solid var(--bdr); border-radius: var(--r-md);
  background: var(--wht) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%238a8f85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 0.7rem center;
  background-size: 15px; appearance: none; cursor: pointer;
}
.proj-toolbar select:focus { outline: none; border-color: var(--canopy); }
.proj-clear {
  font-family: 'DM Sans', sans-serif; font-size: 0.82rem; font-weight: 500; color: var(--slate);
  background: none; border: none; cursor: pointer; padding: 0.68rem 0.4rem;
  white-space: nowrap;
}
.proj-clear:hover { color: var(--canopy); }

/* --- Section headers --- */
.proj-section { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--content-pad); }
.proj-section-head {
  display: flex; align-items: baseline; gap: 0.6rem; margin: 2.5rem 0 1.25rem;
}
.proj-section-head h3 { font-size: 1.15rem; }
.proj-section-count {
  font-family: 'DM Mono', monospace; font-size: 0.72rem; color: var(--slate);
  background: var(--surf); border: 1px solid var(--bdr); border-radius: 20px; padding: 2px 9px;
}
.proj-section-sub { font-size: 0.8rem; color: var(--slate); margin: -0.9rem 0 1.25rem; }

/* --- Project grid + card --- */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; padding-bottom: 0.5rem; }
.proj-card {
  padding: 0; overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.proj-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(13,74,44,0.09); }
.proj-thumb {
  height: 108px; position: relative; display: flex; align-items: flex-start; justify-content: space-between;
  padding: 12px; flex-shrink: 0;
}
.proj-thumb .pill { background: rgba(255,255,255,0.88); }
.proj-status-badge {
  font-family: 'DM Mono', monospace; font-size: 0.66rem; font-weight: 600;
  padding: 3px 9px; border-radius: 20px; display: flex; align-items: center; gap: 4px;
}
.proj-status-hot  { background: rgba(255,255,255,0.92); color: #b5460e; }
.proj-status-cold { background: rgba(255,255,255,0.85); color: #3a5568; }
.proj-body { padding: 1.1rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.proj-title { font-size: 1.05rem; }
.proj-pitch {
  font-size: 0.83rem; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.proj-creator { font-size: 0.76rem; color: var(--slate); display: flex; align-items: center; gap: 6px; }
.proj-creator .av {
  width: 18px; height: 18px; border-radius: 50%; background: var(--forest); color: var(--lime);
  font-family: 'DM Mono', monospace; font-size: 0.56rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.proj-fund-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.proj-fund-bar-wrap { flex: 1; height: 5px; background: var(--dew); border-radius: 4px; overflow: hidden; }
.proj-fund-bar-fill { height: 100%; background: var(--moss); border-radius: 4px; }
.proj-fund-pct { font-family: 'DM Mono', monospace; font-size: 0.68rem; color: var(--forest); flex-shrink: 0; }
.proj-roles { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.proj-role-tag {
  font-family: 'DM Mono', monospace; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em;
  background: var(--surf); border: 1px solid var(--bdr); color: var(--stone);
  padding: 2px 7px; border-radius: 8px;
}
.proj-meta-row {
  display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px;
  border-top: 1px solid #f0f1ec;
}
.proj-activity { font-size: 0.74rem; color: var(--slate); }
.proj-activity.is-hot  { color: var(--canopy); font-weight: 500; }
.proj-activity.is-cold { color: #a35a1f; font-weight: 500; }
.proj-view { font-size: 0.8rem; font-weight: 600; color: var(--forest); }

/* --- Empty state --- */
.proj-empty {
  max-width: var(--max-w); margin: 0 auto; padding: 4rem var(--content-pad); text-align: center;
}
.proj-empty p { max-width: 380px; margin: 0.5rem auto 1.25rem; }

@media (max-width: 640px) {
  .proj-toolbar { flex-direction: column; align-items: stretch; }
  .proj-toolbar select, .proj-clear { width: 100%; }
  .proj-clear { text-align: center; border: 1px solid var(--bdr); border-radius: var(--r-md); }
}