fix: recipe card title cramped by badge on Explore/Search (v0.28.2)

Title shared a flex row with the difficulty badge, shrinking its
available width — now full-width on its own line with badge below,
plus a md: grid-column step so cards don't stay stuck at 2 columns
until the lg breakpoint like the Recipes page grid does.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

apps/web/components/search/search-page-content.tsx

@@ -203,7 +203,7 @@ export function SearchPageContent({ initialQuery }: { initialQuery: string }) {
       )}
 
       {hasQuery && loading && (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
           {Array.from({ length: 8 }).map((_, i) => (
             <div key={i} className="rounded-lg border bg-card p-4 space-y-3">
               <div className="h-5 bg-muted rounded animate-pulse" />
@@ -224,7 +224,7 @@ export function SearchPageContent({ initialQuery }: { initialQuery: string }) {
 
       {!loading && results.length > 0 && (
         <>
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
             {results.map((recipe) => (
               <SearchResultCard key={recipe.id} recipe={recipe} />
             ))}