/* ============================================ LISTINGS PAGE - CARD GRID SYSTEM ============================================ */ .listings-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important; gap: 32px !important; padding: 40px 20px !important; max-width: 1400px !important; margin: 0 auto !important; } .listing-card { background: #ffffff !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; display: flex !important; flex-direction: column !important; height: 100% !important; } .listing-card:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 24px rgba(0,0,0,0.15) !important; } .card-image { position: relative !important; width: 100% !important; height: 240px !important; overflow: hidden !important; background: #f5f5f5 !important; } .card-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.4s ease !important; } .listing-card:hover .card-image img { transform: scale(1.05) !important; } .price-badge { position: absolute !important; top: 16px !important; right: 16px !important; background: rgba(0, 0, 0, 0.85) !important; color: #ffffff !important; padding: 8px 16px !important; border-radius: 6px !important; font-weight: 700 !important; font-size: 18px !important; letter-spacing: -0.5px !important; backdrop-filter: blur(10px) !important; } .card-content { padding: 24px !important; display: flex !important; flex-direction: column !important; flex-grow: 1 !important; } .business-name { font-size: 22px !important; font-weight: 700 !important; color: #1a1a1a !important; margin: 0 0 12px 0 !important; line-height: 1.3 !important; } .location { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 14px !important; color: #666 !important; margin: 0 0 16px 0 !important; font-weight: 500 !important; } .location-icon { width: 16px !important; height: 16px !important; color: #0066cc !important; } .summary { font-size: 15px !important; line-height: 1.6 !important; color: #4a4a4a !important; margin: 0 0 20px 0 !important; flex-grow: 1 !important; } .card-footer { margin-top: auto !important; padding-top: 20px !important; border-top: 1px solid #e5e5e5 !important; } .metrics { display: flex !important; gap: 20px !important; margin-bottom: 16px !important; flex-wrap: wrap !important; } .metric { font-size: 13px !important; color: #666 !important; } .metric strong { color: #1a1a1a !important; font-weight: 600 !important; } .btn-view-listing { display: inline-block !important; width: 100% !important; padding: 14px 24px !important; background: #0066cc !important; color: #ffffff !important; text-align: center !important; text-decoration: none !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 15px !important; transition: all 0.2s ease !important; border: 2px solid #0066cc !important; } .btn-view-listing:hover { background: #0052a3 !important; border-color: #0052a3 !important; transform: translateY(-1px) !important; } /* ============================================ RESPONSIVE BREAKPOINTS ============================================ */ /* Mobile */ @media (max-width: 768px) { .listings-grid { grid-template-columns: 1fr !important; gap: 24px !important; padding: 24px 16px !important; } .card-image { height: 200px !important; } .business-name { font-size: 20px !important; } .price-badge { font-size: 16px !important; padding: 6px 12px !important; } .metrics { gap: 12px !important; } } /* Tablet */ @media (min-width: 769px) and (max-width: 1024px) { .listings-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* Large Desktop */ @media (min-width: 1400px) { .listings-grid { grid-template-columns: repeat(3, 1fr) !important; max-width: 1600px !important; } }