/* ==========================================================================
   SEARCH.CSS
   Styles specific to search.html only.
   Auto-split from the original style.css — no CSS rules were modified.
   Load AFTER common.css
   ========================================================================== */


/* =========================================================================
   10. SEARCH PAGE (search.html)
   ========================================================================= */

.search-hero { padding-block: 54px 28px; text-align: center; }

.search-hero h1 { font-size: clamp(28px, 4vw, 42px); }

.search-hero-form {
  max-width: 640px; margin: 26px auto 0;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  padding: 6px 6px 6px 22px;
  box-shadow: var(--shadow-sm);
}

.search-hero-form svg { width: 20px; height: 20px; color: var(--text-muted); flex-shrink: 0; }

.search-hero-form input { flex: 1; min-width: 0; height: 52px; font-size: 15.5px; }

.search-meta { font-size: 14px; color: var(--text-muted); margin-top: 20px; }

.search-meta strong { color: var(--text-primary); }

.search-results-wrap { padding-block: 18px clamp(48px, 6vw, 80px); }

.search-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.search-empty { text-align: center; padding: 90px 20px; }

.search-empty svg { width: 46px; height: 46px; color: var(--text-muted); margin: 0 auto 20px; }

.search-empty h3 { font-size: 20px; margin-bottom: 8px; }

.search-empty p { color: var(--text-secondary); font-size: 14.5px; }

@media (max-width: 980px) {
  .search-results { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .search-results { grid-template-columns: 1fr; }

  .search-hero-form { flex-wrap: wrap; border-radius: var(--r-lg); padding: 14px; }

  .search-hero-form input { height: 44px; order: 2; flex-basis: 100%; }

  .search-hero-form button { order: 3; flex: 1; justify-content: center; }
}