Home hero search: polish mobile layout (stacked bordered input + full-width button)

On small screens the pill now stacks cleanly: a bordered, padded input above
a full-width جستجو button; icon hidden; chips centered. Shorter placeholder so
it never overflows.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/JobsMedical.Web/Pages/Index.cshtml

@@ -18,7 +18,7 @@
             <div class="hero-search-pill">
                 <span class="hs-ico">🔎</span>
                 <input type="search" name="Q" autocomplete="off"
-                       placeholder="جستجو کن: پرستار شب تهران، mmt، دندان‌پزشک پروانه‌دار، آماده به کار…" />
+                       placeholder="جستجو: پرستار، mmt، دندان‌پزشک…" />
                 <button type="submit" class="btn btn-accent btn-lg">جستجو</button>
             </div>
             <div class="hero-chips">

src/JobsMedical.Web/wwwroot/css/site.css

@@ -317,11 +317,15 @@ mark { background: #fff3bf; color: inherit; padding: 0 2px; border-radius: 3px;
 .hero-chips .hc-label { color: rgba(255,255,255,.85); }
 .hero-chips a { background: rgba(255,255,255,.16); color: #fff; padding: 5px 13px; border-radius: 999px; font-weight: 600; transition: background .15s; }
 .hero-chips a:hover { background: rgba(255,255,255,.3); }
-@media (max-width: 520px) {
-  .hero-search-pill { flex-wrap: wrap; }
-  .hero-search-pill input { flex: 1 1 100%; order: 1; }
-  .hero-search-pill .btn { flex: 1 1 100%; order: 2; }
+@media (max-width: 560px) {
+  .hero-search { margin-top: 6px; }
+  .hero-search-pill { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; border-radius: 14px; }
   .hero-search-pill .hs-ico { display: none; }
+  .hero-search-pill input { width: 100%; border: 1px solid var(--line); border-radius: 10px;
+    padding: 12px 14px; font-size: 15px; background: var(--bg); }
+  .hero-search-pill .btn { width: 100%; }
+  .hero-chips { gap: 6px; }
+  .hero-chips .hc-label { flex-basis: 100%; text-align: center; margin-bottom: 2px; }
 }
 /* Big search box on the /Search page head */
 .search-hero { display: flex; gap: 8px; max-width: 640px; margin: 6px 0 4px; }