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/recipe/search-result-card.tsx

@@ -44,19 +44,17 @@ export function SearchResultCard({ recipe, className }: { recipe: SearchResultRe
         className
       )}
     >
-      <div className="flex items-start justify-between gap-2">
-        <h3 className="font-semibold text-card-foreground group-hover:text-primary line-clamp-2 flex-1">
-          {recipe.title}
-        </h3>
-        {recipe.difficulty && (
-          <Badge
-            variant="secondary"
-            className={`shrink-0 capitalize text-xs ${DIFFICULTY_COLORS[recipe.difficulty] ?? ""}`}
-          >
-            {difficultyLabel}
-          </Badge>
-        )}
-      </div>
+      <h3 className="font-semibold text-sm leading-tight text-card-foreground group-hover:text-primary line-clamp-2">
+        {recipe.title}
+      </h3>
+      {recipe.difficulty && (
+        <Badge
+          variant="secondary"
+          className={`mt-1.5 capitalize text-xs ${DIFFICULTY_COLORS[recipe.difficulty] ?? ""}`}
+        >
+          {difficultyLabel}
+        </Badge>
+      )}
       {recipe.description && (
         <p className="mt-1 text-sm text-muted-foreground line-clamp-2">{recipe.description}</p>
       )}