improve listing

css/components.css

@@ -150,6 +150,31 @@
     .grid-cols-4, .grid-cols-3, .grid-cols-2 { grid-template-columns: 1fr; }
 }
 
+/* Listings Grid - responsive 2/3/4/5 columns */
+.listings-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: var(--space-md);
+}
+
+@media (min-width: 640px) {
+    .listings-grid {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+@media (min-width: 900px) {
+    .listings-grid {
+        grid-template-columns: repeat(4, 1fr);
+    }
+}
+
+@media (min-width: 1200px) {
+    .listings-grid {
+        grid-template-columns: repeat(5, 1fr);
+    }
+}
+
 /* Badges */
 .badge {
     display: inline-flex;

js/components/pages/page-home.js

@@ -33,6 +33,7 @@ class PageHome extends HTMLElement {
             <listing-card 
                 listing-id="${i + 1}"
                 title="${t('home.placeholderTitle')}"
+                price="699"
                 location="${t('home.placeholderLocation')}"
             ></listing-card>
         `).join('');
@@ -56,17 +57,5 @@ style.textContent = /* css */`
     page-home section h2 {
         margin-bottom: var(--space-lg);
     }
-    
-    page-home .listings-grid {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: var(--space-md);
-    }
-    
-    @media (min-width: 768px) {
-        page-home .listings-grid {
-            grid-template-columns: repeat(5, 1fr);
-        }
-    }
 `;
 document.head.appendChild(style);

js/components/pages/page-search.js

@@ -185,18 +185,6 @@ style.textContent = /* css */`
         margin-bottom: var(--space-md);
     }
     
-    page-search .listings-grid {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: var(--space-md);
-    }
-    
-    @media (min-width: 768px) {
-        page-search .listings-grid {
-            grid-template-columns: repeat(4, 1fr);
-        }
-    }
-    
     page-search .loading {
         display: flex;
         flex-direction: column;

js/components/search-box.js

@@ -16,7 +16,7 @@ const RADIUS_OPTIONS = [5, 10, 20, 50, 100, 200];
 
 class SearchBox extends HTMLElement {
     static get observedAttributes() {
-        return ['compact', 'category', 'subcategory', 'country', 'query'];
+        return ['category', 'subcategory', 'country', 'query'];
     }
 
     constructor() {
@@ -121,15 +121,9 @@ class SearchBox extends HTMLElement {
         }
     }
 
-    get isCompact() {
-        return this.hasAttribute('compact');
-    }
-
     render() {
-        const compact = this.isCompact;
-        
         this.innerHTML = /* html */`
-            <form class="search-box ${compact ? 'search-box--compact' : ''}" id="search-form">
+            <form class="search-box" id="search-form">
                 <div class="search-row search-row-query">
                     <div class="search-field search-field-query">
                         <svg class="field-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -140,7 +134,7 @@ class SearchBox extends HTMLElement {
                     </div>
                 </div>
                 
-                ${!compact ? this.renderFilters() : ''}
+                ${this.renderFilters()}
                 
                 <div class="search-row search-row-submit">
                     <button type="submit" class="btn btn-primary btn-search">
@@ -690,26 +684,26 @@ style.textContent = /* css */`
             width: auto;
         }
         
-        search-box .search-box:not(.search-box--compact) {
+        search-box .search-box {
             display: grid;
             grid-template-columns: 1fr auto;
             grid-template-rows: auto auto;
             border-radius: var(--radius-xl);
         }
         
-        search-box .search-box:not(.search-box--compact) .search-row {
+        search-box .search-box .search-row {
             border-bottom: none;
         }
         
         /* Row 1: Search field + Button */
-        search-box .search-box:not(.search-box--compact) .search-row-query {
+        search-box .search-box .search-row-query {
             grid-column: 1;
             grid-row: 1;
             border-right: 1px solid var(--color-border);
             border-bottom: 1px solid var(--color-border);
         }
         
-        search-box .search-box:not(.search-box--compact) .search-row-submit {
+        search-box .search-box .search-row-submit {
             grid-column: 2;
             grid-row: 1;
             padding: var(--space-xs);
@@ -718,25 +712,25 @@ style.textContent = /* css */`
         }
         
         /* Row 2: Filters */
-        search-box .search-box:not(.search-box--compact) .search-row-filters {
+        search-box .search-box .search-row-filters {
             grid-column: 1 / -1;
             grid-row: 2;
             display: flex;
             border-right: none;
         }
         
-        search-box .search-box:not(.search-box--compact) .btn-search {
+        search-box .search-box .btn-search {
             width: auto;
             padding: var(--space-md);
             border-radius: var(--radius-md);
         }
         
-        search-box .search-box:not(.search-box--compact) .btn-search-text {
+        search-box .search-box .btn-search-text {
             display: none;
         }
         
         /* Category truncation */
-        search-box .search-box:not(.search-box--compact) .category-dropdown-label {
+        search-box .search-box .category-dropdown-label {
             max-width: 250px;
         }
     }
@@ -911,37 +905,6 @@ style.textContent = /* css */`
         background: var(--color-primary-light);
         color: var(--color-primary);
     }
-    
-    /* Compact mode */
-    search-box .search-box--compact {
-        max-width: 500px;
-        display: flex;
-        border-radius: var(--radius-xl);
-    }
-    
-    search-box .search-box--compact .search-row {
-        border-bottom: none;
-    }
-    
-    search-box .search-box--compact .search-row-query {
-        flex: 1;
-    }
-    
-    search-box .search-box--compact .search-row-submit {
-        flex: 0 0 auto;
-        padding: var(--space-xs);
-        background: transparent;
-    }
-    
-    search-box .search-box--compact .btn-search {
-        width: auto;
-        padding: var(--space-sm) var(--space-md);
-        border-radius: var(--radius-md);
-    }
-    
-    search-box .search-box--compact .btn-search-text {
-        display: none;
-    }
 `;
 document.head.appendChild(style);