/* HF Spaces page specific styles - follows Platform UI tokens and components */
:root{
  --hf-card-bg: #ffffff;
  --hf-card-text: #0f172a;
  --hf-card-muted: #475569;
  --hf-card-border: #e2e8f0;
}

.hf-spaces-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hf-space-card {
  background: var(--hf-card-bg);
  border: 1px solid var(--hf-card-border);
  border-radius: var(--radius-md,12px);
  padding: 12px;
  color: var(--hf-card-text);
  box-shadow: 0 10px 18px rgba(15,23,42,0.08);
  display:flex; flex-direction:column;
}
.hf-space-card .title { font-weight:var(--font-weight-semibold,600); font-size:var(--font-size-base,1rem); color: var(--hf-card-text); }
.hf-space-card .desc { font-size:0.9rem; color: var(--hf-card-muted); margin-top:6px; min-height:48px; overflow:hidden; }
.hf-space-card .meta { margin-top:8px; font-size:0.78rem; color:var(--hf-card-muted); display:flex; gap:8px; align-items:center; }
.hf-space-card .thumb { width:100%; height:120px; border-radius:8px; background-size:cover; background-position:center; margin-bottom:8px; flex-shrink:0; }
.hf-space-badges { display:flex; gap:6px; flex-wrap:wrap; }
.hf-space-badges .badge { font-size:0.65rem; }

/* Hero search bar style (Google-inspired) */
.hf-hero-search { display:flex; flex-direction:column; align-items:center; }
.hf-search-bar { display:flex; align-items:center; gap:8px; width:min(900px, 100%); background:#fff; border:1px solid #e2e8f0; border-radius:999px; padding:10px 14px; box-shadow:0 10px 24px rgba(15,23,42,0.1); }
.hf-search-icon { font-size:1rem; color:#64748b; margin-left:4px; }
.hf-search-input { border:none; flex:1; outline:none; font-size:1rem; padding:6px 8px; color:#0f172a; }
.hf-search-input::placeholder { color:#94a3b8; }
.hf-search-btn { background: linear-gradient(90deg,#667eea,#764ba2); border:none; color:#fff; padding:8px 16px; border-radius:999px; font-weight:600; box-shadow:0 8px 16px rgba(102,126,234,0.35); transition:transform .12s ease, box-shadow .12s ease; }
.hf-search-btn:hover { transform:translateY(-1px); box-shadow:0 10px 20px rgba(102,126,234,0.4); }

.hf-secondary-filters .form-select { min-width:180px; }
.hf-secondary-filters .btn { min-width:120px; }

/* logo */
.hf-logo { width:48px; height:48px; display:inline-block; }

/* Visual polish to match 'Spaces of the week' */
.hf-space-card {
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hf-space-card::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; height: 6px;
  background: linear-gradient(90deg, rgba(102,126,234,1), rgba(118,75,162,1));
}
.hf-space-card:hover { transform: translateY(-6px); box-shadow: var(--box-shadow-lg); border-color: rgba(118,75,162,0.24); }

.card-media { position: relative; width:100%; height:120px; border-radius:8px; overflow:hidden; }
.card-media .thumb { width:100%; height:100%; background-size:cover; background-position:center; }

.likes-bubble { position:absolute; left:12px; bottom:12px; background: linear-gradient(90deg,#ff6b81,#ffb86b); color:#fff; padding:6px 10px; border-radius:20px; font-weight:600; font-size:0.85rem; display:flex; gap:8px; align-items:center; box-shadow: 0 6px 16px rgba(0,0,0,0.35); }
.likes-bubble i { transform: translateY(1px); }

.hf-space-card .title { margin-top:8px; }
.hf-space-card .author { font-size:0.8rem; color: #64748b; }

.visit-btn { background: linear-gradient(90deg,#667eea,#764ba2); border:none; color:#fff; padding:6px 10px; border-radius:8px; font-size:0.85rem; }
.visit-btn:hover { filter:brightness(1.05); }

/* small badges style like HF */
.hf-space-badges .badge { background: #f1f5f9; color: #0f172a; padding: 4px 8px; border-radius: 999px; }

/* compact meta row */
.hf-space-card .meta { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:10px; }

.hf-space-stats { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; font-size:0.75rem; color:var(--hf-card-muted); }
.hf-space-pill { background:#f8fafc; border:1px solid #e2e8f0; padding:4px 8px; border-radius:999px; display:flex; align-items:center; gap:6px; }
.hf-space-pill i { color:#64748b; }

/* labels for metadata */
.space-labels { position:absolute; top:10px; left:10px; display:flex; gap:8px; z-index:6; }
.space-label { font-size:0.65rem; padding:4px 8px; border-radius:999px; color:#0f172a; font-weight:600; }
.label-featured { background: linear-gradient(90deg,#ffa726,#ff7043); box-shadow: 0 6px 14px rgba(255,112,66,0.14); color:#fff; }
.label-running { background: #e2e8f0; color:#0f172a; border: 1px solid #cbd5e1; }

/* default empty thumb (white) */
.thumb.empty { background-color: #f8fafc; border-radius:6px; border:1px solid #e2e8f0; }


@media (min-width: 1200px) { .hf-spaces-grid { grid-template-columns: repeat(3, 1fr); } }

/* accessibility focus */
.hf-space-card a:focus, .hf-space-card button:focus { outline: 2px solid var(--primary, #667eea); outline-offset: 2px; }

/* pagination */
#spaces-pagination .btn { min-width:40px; }

/* loading/empty states */
#spaces-loading p { margin:0; }

/* small screens optimizations */
@media (max-width: 1024px) {
  .hf-spaces-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .hf-spaces-grid { grid-template-columns: 1fr 1fr; gap:12px; }
  .hf-space-card .desc { min-height:40px; }
}

@media (max-width: 480px) {
  .hf-spaces-grid { grid-template-columns: 1fr; }
}