fix: grid-card favorite button too prominent, move next to visibility icon

Was floating over the cover photo with a circular dark backdrop — too
heavy. Moved into the bottom meta row next to the visibility lock icon,
plain ghost icon button matching the recipe detail page's style exactly
(no background, same size/variant). List and compact rows were already
placed there with no backdrop, only the grid card needed this.

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

apps/web/components/recipe/recipes-grid.tsx

@@ -110,13 +110,6 @@ function GridCard({ recipe, selected, selectMode }: { recipe: Recipe; selected:
       )}
     >
       <RecipeThumb recipe={recipe} selectMode={selectMode} selected={selected} className="aspect-video" />
-      {!selectMode && (
-        <div className="absolute right-1.5 top-1.5 rounded-full bg-black/30 backdrop-blur-sm">
-          <StopPropagation>
-            <FavoriteButton recipeId={recipe.id} initialFavorited={recipe.isFavorited} iconClassName="text-white" />
-          </StopPropagation>
-        </div>
-      )}
       <div className="flex flex-col flex-1 p-3 gap-1">
         <h3 className={cn("font-semibold leading-tight line-clamp-2 text-sm transition-colors", !selectMode && "group-hover:text-primary")}>
           {recipe.title}
@@ -145,7 +138,14 @@ function GridCard({ recipe, selected, selectMode }: { recipe: Recipe; selected:
             <Badge variant={DIFFICULTY_COLOR[recipe.difficulty]} className="text-xs h-4 px-1.5">{t(`difficulty.${recipe.difficulty}`)}</Badge>
           )}
         </div>
-        <VisibilityIcon className="h-3 w-3 shrink-0" />
+        <div className="flex items-center gap-1 shrink-0">
+          {!selectMode && (
+            <StopPropagation>
+              <FavoriteButton recipeId={recipe.id} initialFavorited={recipe.isFavorited} />
+            </StopPropagation>
+          )}
+          <VisibilityIcon className="h-3 w-3" />
+        </div>
       </div>
     </div>
   );