fix: sponsor image cropping and progressive ad preview (#256)

- Change object-fit from cover to contain on all sponsor image
  placements (banner, feed card, showcase grid) so logos with text
  aren't cropped at the edges
- Make sponsor ad preview show progressively as fields are filled
  (title OR image OR description) instead of requiring both title
  AND image. Uses placeholder text for empty fields and lists
  remaining required fields below the preview.

Author: spe1020

src/components/SponsorBanner.svelte

@@ -54,7 +54,7 @@
   .sponsor-banner-image img {
     width: 100%;
     height: 100%;
-    object-fit: cover;
+    object-fit: contain;
   }
 
   .sponsor-banner-content {

src/components/SponsorFeedCard.svelte

@@ -75,7 +75,7 @@
   .sponsor-feed-image img {
     width: 100%;
     height: 100%;
-    object-fit: cover;
+    object-fit: contain;
   }
 
   .sponsor-feed-title {

src/routes/sponsors/+page.svelte

@@ -658,25 +658,32 @@
                 </div>
 
                 <!-- Live Preview -->
-                {#if adTitle.trim() && adImageUrl}
-                  <div class="mt-4">
+                {#if adTitle.trim() || adImageUrl || adDescription.trim()}
+                  <div class="mt-4 sponsor-preview-section">
                     <h3 class="text-xs font-semibold uppercase mb-2" style="color: var(--color-caption); letter-spacing: 0.06em;">
                       Preview
                     </h3>
-                    {#if selectedTier === 'headline'}
-                      <SponsorBanner
-                        title={adTitle}
-                        description={adDescription}
-                        imageUrl={adImageUrl}
-                        linkUrl={adLinkUrl || '#'}
-                      />
-                    {:else}
-                      <SponsorFeedCard
-                        title={adTitle}
-                        description={adDescription}
-                        imageUrl={adImageUrl}
-                        linkUrl={adLinkUrl || '#'}
-                      />
+                    <div class="sponsor-preview-box">
+                      {#if selectedTier === 'headline'}
+                        <SponsorBanner
+                          title={adTitle || 'Your ad headline'}
+                          description={adDescription || 'Short description of your ad'}
+                          imageUrl={adImageUrl || ''}
+                          linkUrl={adLinkUrl || '#'}
+                        />
+                      {:else}
+                        <SponsorFeedCard
+                          title={adTitle || 'Your ad headline'}
+                          description={adDescription || 'Short description of your ad'}
+                          imageUrl={adImageUrl || ''}
+                          linkUrl={adLinkUrl || '#'}
+                        />
+                      {/if}
+                    </div>
+                    {#if !adTitle.trim() || !adImageUrl || !adLinkUrl.trim()}
+                      <p class="text-xs mt-1.5" style="color: var(--color-caption); opacity: 0.6;">
+                        {#if !adTitle.trim()}Title required. {/if}{#if !adImageUrl}Image required. {/if}{#if !adLinkUrl.trim()}Link URL required.{/if}
+                      </p>
                     {/if}
                   </div>
                 {/if}
@@ -917,7 +924,7 @@
   .showcase-card-image img {
     width: 100%;
     height: 100%;
-    object-fit: cover;
+    object-fit: contain;
   }
 
   .showcase-card-body {
@@ -1141,6 +1148,17 @@
     object-fit: cover;
   }
 
+  .sponsor-preview-section {
+    padding: 0.75rem;
+    border: 1px dashed var(--color-input-border);
+    border-radius: 0.75rem;
+    background: var(--color-bg-primary);
+  }
+
+  .sponsor-preview-box {
+    pointer-events: none;
+  }
+
   .tier-card {
     display: flex;
     flex-direction: column;