/*
 * Design system: busca e navegação por tag (E4-07).
 * Reusa .ds-cat-grid/.ds-cat-pager (category.css), .ds-vcard, .ds-state, .ds-chip. Só tokens.
 */

.ds-search-form {
  display: flex;
  gap: var(--space-3);
  max-width: 640px;
  margin-block-end: var(--space-6);
}

.ds-search-box { position: relative; flex: 1 1 auto; min-width: 0; }
.ds-search-box .ds-icon {
  position: absolute;
  inset-inline-start: var(--space-3);
  inset-block-start: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--muted-foreground);
  pointer-events: none;
}
.ds-search-box .ds-input { padding-inline-start: var(--space-10); }
.ds-search-form .btn { min-height: var(--target-min); }

.ds-search-head { display: flex; flex-direction: column; gap: var(--space-2); margin-block-end: var(--space-6); }
.ds-search-title {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}
.ds-search-term { color: var(--brand-text); }
.ds-search-meta { margin: 0; color: var(--muted-foreground); font-size: var(--text-base); }

.ds-search-tags { margin-block-start: var(--space-8); }
.ds-search-tags-title { margin: 0 0 var(--space-3); font-size: var(--text-lg); font-weight: 600; }

@media (max-width: 480px) {
  .ds-search-form { flex-direction: column; }
}