/* -- Home: hero, heading, asset grid -- */
.home-hero {
  padding: 72px 24px 64px;
  text-align: center;
}

.home-title {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
}

.home-tagline {
  margin-top: 8px;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* -- Grid -- */
.browse-title {
  margin-bottom: 28px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.asset-grid {
  display: grid;
  --grid-gap: 28px;
  /* At most 3 across; drops to 2 then 1 once a card would go under 260px. */
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(100%, max(260px, (100% - 2 * var(--grid-gap)) / 3)), 1fr)
  );
  gap: var(--grid-gap);
  padding-bottom: 80px;
}

/* -- Asset card body -- */
.asset-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px;
}

.asset-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.asset-card-heading {
  flex: 1;
  min-width: 0;
}

.asset-card-heading .tag-list { margin-bottom: 12px; }

.asset-card-name {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.asset-card-desc {
  flex: 1;
  margin-top: 12px;
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* -- Responsive -- */
@media (max-width: 560px) {
  .home-hero { padding: 40px var(--gutter) 32px; }

  .home-tagline { font-size: 0.82rem; }

  .asset-grid {
    --grid-gap: 20px;
    padding-bottom: 56px;
  }

  .asset-card-body { padding: 16px; }

  .browse-title {
    margin-bottom: 20px;
    font-size: 1.3rem;
  }
}