Add WebP thumbnail endpoint for MLS property images

- Create MLS_Image_Endpoint class with on-demand thumbnail generation
- Use ImageMagick to convert images to WebP format
- Thumbnail sizes: 800px (thumb) and 1800px (full), maintain aspect ratio
- Only downsize images, never upsize
- Cache thumbnails in wp-content/uploads/mls-thumbnails/
- Add mls_get_image_url() helper function (1-based index)
- Update property cards to display thumbnail as background-cover image
- Long cache headers (1 year) with ETag support

URL format: /mls-image/{listing_key}/{index}/{size}/

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

wp-content/themes/homeproz/template-parts/property/property-card-mls.php

@@ -59,18 +59,23 @@ if ($status === 'Pending') {
 } elseif ($status === 'Closed' || $status === 'Sold') {
     $status_class = 'badge-sold';
 }
+
+// Get thumbnail image URL (index 1 = first image)
+$image_url = function_exists('mls_get_image_url') ? mls_get_image_url($listing_key, 1, 'thumb') : '';
+$has_image = !empty($image_url);
 ?>
 
 <article id="property-<?php echo esc_attr($listing_key); ?>" data-property-id="<?php echo esc_attr($listing_key); ?>" class="property-card card mls-property">
     <a href="<?php echo esc_url($property_url); ?>" class="property-card-link-overlay" aria-hidden="true" tabindex="-1"></a>
-    <div class="property-card-image">
-        <!-- Photo placeholder - will be implemented later -->
+    <div class="property-card-image<?php echo $has_image ? ' has-image' : ''; ?>"<?php if ($has_image) : ?> style="background-image: url('<?php echo esc_url($image_url); ?>');"<?php endif; ?>>
+        <?php if (!$has_image) : ?>
         <div class="property-card-placeholder">
             <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
                 <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                 <polyline points="9 22 9 12 15 12 15 22"/>
             </svg>
         </div>
+        <?php endif; ?>
 
         <?php if ($status) : ?>
             <span class="property-card-badge badge <?php echo esc_attr($status_class); ?>">

wp-content/themes/homeproz/template-parts/property/property-card.scss

@@ -40,6 +40,14 @@
     aspect-ratio: 16 / 10;
     overflow: hidden;
     background-color: var(--color-bg-dark);
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+
+    &.has-image {
+        // Loading state - shows subtle animation while image loads
+        background-color: var(--color-bg-card);
+    }
 
     img {
         width: 100%;