feat: unify all card styling to match working RecipeList pattern

Using RecipeList.css as the gold standard, applied consistent styling
across ALL cookbook and recipe card locations in Basil.

## Changes Summary

All cards now use RecipeList.css pattern:
- aspect-ratio: 1 / 1 (square cards)
- Image: height: 60% (not aspect-ratio 16/9)
- Padding: 0.5rem (not 1.25rem)
- Title: 0.75rem, 2-line clamp
- Description: 0.65rem, 1-line clamp
- Meta/stats: 0.6rem
- Tags: 0.55-0.6rem with minimal padding

## Files Updated

### CookbookDetail.css
**Recipes section:**
- Title: 0.9rem → 0.75rem, single-line → 2-line clamp
- Description: 0.75rem → 0.65rem
- Meta: 0.7rem → 0.6rem
- Tags: 0.65rem → 0.55rem with smaller padding

**Nested/included cookbooks section:**
- Title: 0.9rem → 0.75rem, nowrap → 2-line clamp
- Stats: 0.7rem → 0.6rem
- Cover placeholder: 2.5rem icon
- Padding: 0.5rem

### Cookbooks.css
**Main cookbook cards:**
- Title: 0.9rem → 0.75rem, nowrap → 2-line clamp
- Stats: 0.7rem → 0.6rem
- Cover: height 50%, 2.5rem icon
- Padding: 0.5rem

**Recent recipes section:**
- Card: height: 100% → aspect-ratio: 1/1
- Image: aspect-ratio: 16/9 → height: 60%
- Placeholder icon: 4rem → 3rem
- Padding: 1.25rem → 0.5rem
- Title: 1.2rem → 0.75rem
- Description: 0.9rem → 0.65rem, 2-line → 1-line clamp
- Meta: 0.85rem → 0.6rem

## Result

All cookbook and recipe displays now have:
✅ Consistent square cards across all column counts (3, 5, 7, 9)
✅ No text cutoff - all titles fit within 2 lines
✅ Proper text scaling at all column counts
✅ Same visual appearance as working RecipeList page

## Locations Fixed

1. All Recipes page (/recipes) - Already working ✅
2. My Cookbooks page (/cookbooks) - Fixed ✅
3. Cookbook Detail: Nested cookbooks - Fixed ✅
4. Cookbook Detail: Recipes section - Fixed ✅

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

packages/web/src/styles/CookbookDetail.css

@@ -443,50 +443,53 @@
 }
 
 .recipe-info h3 {
-  font-size: 0.9rem;
+  font-size: 0.75rem;
   color: #212121;
   margin: 0 0 0.25rem 0;
+  line-height: 1.2;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 1.2;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  flex-shrink: 0;
 }
 
 .recipe-info .description {
-  font-size: 0.75rem;
+  font-size: 0.65rem;
   color: #666;
-  margin: 0 0 0.5rem 0;
-  line-height: 1.3;
+  margin: 0;
+  line-height: 1.2;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
-  flex: 0 0 auto;
+  flex-shrink: 1;
 }
 
 .recipe-meta {
   display: flex;
-  gap: 0.5rem;
-  font-size: 0.7rem;
+  gap: 0.4rem;
+  font-size: 0.6rem;
   color: #757575;
-  margin-bottom: 0.5rem;
-  flex: 0 0 auto;
+  flex-shrink: 0;
+  margin-top: auto;
 }
 
 .recipe-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 0.25rem;
-  margin-top: auto;
+  margin-top: 0.25rem;
 }
 
 .recipe-tags .tag {
-  padding: 0.15rem 0.5rem;
+  padding: 0.1rem 0.4rem;
   background-color: #e8f5e9;
   color: #2e7d32;
-  border-radius: 10px;
-  font-size: 0.65rem;
+  border-radius: 8px;
+  font-size: 0.55rem;
   font-weight: 500;
 }
 
@@ -633,9 +636,15 @@
 }
 
 .cookbook-card.nested .cookbook-info h3 {
-  font-size: 0.9rem;
+  font-size: 0.75rem;
   margin: 0 0 0.25rem 0;
-  white-space: nowrap;
+  line-height: 1.2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  flex-shrink: 0;
 }
 
 .cookbook-card.nested .cookbook-info .description {
@@ -649,5 +658,6 @@
 
 .cookbook-card.nested .recipe-count,
 .cookbook-card.nested .cookbook-count {
-  font-size: 0.7rem;
+  font-size: 0.6rem;
+  line-height: 1.2;
 }

packages/web/src/styles/Cookbooks.css

@@ -204,13 +204,16 @@
 }
 
 .cookbook-info h3 {
-  font-size: 0.9rem;
+  font-size: 0.75rem;
   color: #212121;
   margin: 0 0 0.25rem 0;
+  line-height: 1.2;
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 1.2;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  flex-shrink: 0;
 }
 
 .cookbook-info .description {
@@ -226,10 +229,11 @@
 
 .cookbook-info .recipe-count,
 .cookbook-info .cookbook-count {
-  font-size: 0.7rem;
+  font-size: 0.6rem;
   color: #2e7d32;
   font-weight: 600;
   margin: 0;
+  line-height: 1.2;
   white-space: nowrap;
 }
 
@@ -270,7 +274,7 @@
   transition: transform 0.2s, box-shadow 0.2s;
   display: flex;
   flex-direction: column;
-  height: 100%;
+  aspect-ratio: 1 / 1;
 }
 
 .recipe-card:hover {
@@ -280,60 +284,63 @@
 
 .recipe-image {
   width: 100%;
-  aspect-ratio: 16 / 9;
+  height: 60%;
   object-fit: cover;
   flex-shrink: 0;
 }
 
 .recipe-image-placeholder {
   width: 100%;
-  aspect-ratio: 16 / 9;
+  height: 60%;
   background: linear-gradient(135deg, #ffb74d 0%, #ff9800 100%);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 4rem;
+  font-size: 3rem;
   flex-shrink: 0;
 }
 
 .recipe-info {
-  padding: 1.25rem;
+  padding: 0.5rem;
   display: flex;
   flex-direction: column;
   flex: 1;
   min-height: 0;
+  overflow: hidden;
 }
 
 .recipe-info h3 {
-  font-size: 1.2rem;
+  font-size: 0.75rem;
   color: #212121;
-  margin: 0 0 0.5rem 0;
+  margin: 0 0 0.25rem 0;
+  line-height: 1.2;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
-  line-height: 1.3;
+  flex-shrink: 0;
 }
 
 .recipe-info .description {
-  font-size: 0.9rem;
+  font-size: 0.65rem;
   color: #666;
-  margin: 0 0 0.75rem 0;
-  line-height: 1.4;
+  margin: 0;
+  line-height: 1.2;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
-  -webkit-line-clamp: 2;
+  -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
-  flex: 0 0 auto;
+  flex-shrink: 1;
 }
 
 .recipe-meta {
   display: flex;
-  gap: 1rem;
-  font-size: 0.85rem;
+  gap: 0.4rem;
+  font-size: 0.6rem;
   color: #757575;
+  flex-shrink: 0;
   margin-top: auto;
 }