/* =====================================================================
   CARE PUBLIC DIRECTORY — browse.html
   Shares design tokens with styles.css; card layout borrows spacing
   conventions from care-app.css's .care-app-card family.
   ===================================================================== */

.browse-filters{
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 28px;
}
.browse-field{ display: flex; flex-direction: column; gap: 6px; min-width: 160px; }
.browse-field label{ font-size: 0.8rem; font-weight: 600; color: var(--ink); }
.browse-field input, .browse-field select{
  font-family: var(--font-body);
  font-size: 0.92rem;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}

.browse-status{ color: var(--slate-soft); font-family: var(--font-mono); font-size: 0.85rem; margin-bottom: 18px; }
.browse-status[data-state="error"]{ color: #A03E3E; }

.browse-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.browse-card{
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.browse-card h3{ margin: 0; font-size: 1.05rem; }
.browse-card .browse-title{ font-size: 0.82rem; color: var(--slate); margin: 0; }
.browse-card .browse-meta{ font-size: 0.78rem; color: var(--slate-soft); margin: 4px 0 0; }
.browse-card .browse-bio{ font-size: 0.85rem; color: var(--slate); margin: 8px 0 0; flex: 1; }
.browse-card .browse-slot{ font-size: 0.82rem; color: var(--moss-dark); margin: 10px 0 0; font-weight: 600; }
.browse-card .browse-slot.is-none{ color: var(--slate-soft); font-weight: 400; }
.browse-card .btn{ margin-top: 12px; align-self: flex-start; }

@media (max-width: 620px){
  .browse-filters{ flex-direction: column; align-items: stretch; }
  .browse-field{ min-width: 0; }
}