/* =========================================================================
   category.css
   Styles for site-wide category listings, search-results header, the contact
   page form, and the dedicated trending page. These share a calm listing look.
   ========================================================================= */

/* Search results */
.search-results__meta { color: var(--muted); margin-top: var(--sp-2); }
.search-results__count {
  font-weight: 700; color: var(--ink-2); margin: var(--sp-4) 0;
}

/* Trending page */
.trending-page .page-sub { margin-bottom: var(--sp-6); }

/* Contact */
.contact__grid {
  display: grid; gap: var(--sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 820px) {
  .contact__grid { grid-template-columns: 1.6fr 1fr; align-items: start; }
}
.contact__form {
  display: grid; gap: var(--sp-4);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: var(--sp-6); box-shadow: var(--shadow-sm);
}
.field { display: grid; gap: 6px; }
.field__label { font-weight: 700; font-size: .92rem; }
.field__input {
  font-family: var(--body); font-size: 1rem;
  padding: 10px 12px; border: 2px solid var(--line-2);
  border-radius: var(--r-sm); background: var(--paper);
  color: var(--ink); transition: border-color .18s;
  width: 100%;
}
.field__input:focus { outline: none; border-color: var(--signal); background: #fff; }
textarea.field__input { resize: vertical; }

.contact__status { font-weight: 700; min-height: 1.2em; }
.contact__status.is-error { color: var(--signal); }
.contact__status.is-ok { color: #1a8a3c; }

.contact__info {
  background: var(--ink); color: var(--paper);
  border-radius: var(--r-md); padding: var(--sp-6);
}
.contact__info h3 { font-family: var(--display); color: #fff; margin-bottom: var(--sp-3); }
.contact__info p { color: #d3c9bc; margin: var(--sp-2) 0; }