/*
Theme Name: Shelby Harris Real Estate
Theme URI: 
Author: 
Author URI: 
Description: Custom WordPress theme for Shelby Harris Real Estate
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shelbyharris
*/

/* The main CSS is loaded from other files */ 

/* RealtyPress Homepage Listings Integration */
.custom-homepage-listings {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)); /* mobile: 1 column */
    gap: 2rem; /* Matches gap-8 */
}

@media (min-width: 768px) { /* md breakpoint */
    .custom-homepage-listings {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* tablet: 2 columns */
    }
}

@media (min-width: 1024px) { /* lg breakpoint */
    .custom-homepage-listings {
        grid-template-columns: repeat(3, minmax(0, 1fr)); /* desktop: 3 columns */
    }
}

.custom-homepage-listings .rps-listing-item, /* General card item from plugin */
.custom-homepage-listings .rps-property-result /* Another common plugin class for listing items */
{
    background-color: #fff; /* Card itself is white */
    border-radius: 8px; /* Consistent border-radius */
    box-shadow: 0 2px 12px rgba(0,0,0,0.1); /* Subtle shadow */
    overflow: hidden; /* To respect border-radius on images */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.custom-homepage-listings .rps-listing-item:hover,
.custom-homepage-listings .rps-property-result:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15); /* Slightly enhanced shadow on hover */
}

/* Image container - might be .image-holder, .rps-listing-figure, .rps-listing-image-wrap */
.custom-homepage-listings .image-holder,
.custom-homepage-listings .rps-listing-figure,
.custom-homepage-listings .rps-listing-image-wrap {
    position: relative; /* For price overlay and badges */
    margin: 0;
    padding: 0;
}

.custom-homepage-listings .image-holder a,
.custom-homepage-listings .rps-listing-figure a,
.custom-homepage-listings .rps-listing-image-wrap a { 
    display: block; /* Ensure link wraps image correctly */
}

.custom-homepage-listings .image-holder img,
.custom-homepage-listings .rps-listing-figure img,
.custom-homepage-listings .rps-listing-image-wrap img,
.custom-homepage-listings .rps-listing-image img { /* RealtyPress image selector */
    width: 100%;
    height: 220px; /* Adjust as needed, slightly taller than before */
    object-fit: cover;
    display: block; /* Remove any extra space below image */
    border-top-left-radius: 8px; /* If image is direct child of card */
    border-top-right-radius: 8px; /* If image is direct child of card */
}

/* Price Overlay - matching plugin's approach but with original design's text style */
.custom-homepage-listings .image-holder .rps-price {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0.75rem 1rem; /* Adjust padding */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%); /* Subtle gradient */
    color: #fff; /* White text for price on image */
    font-weight: 700; /* font-bold */
    font-size: 1.25rem; /* text-xl */
    text-align: left;
    z-index: 10; /* Ensure it's above image if structure is complex */
    box-sizing: border-box;
}

/* Badges (e.g., "FOR SALE", "Open House") - adapting to .rps-ribbon */
.custom-homepage-listings .image-holder .rps-ribbon {
    position: absolute;
    top: 1rem;    /* 16px */
    left: 1rem;   /* 16px */
    color: white;
    padding: 0.3rem 0.8rem; /* py-1 px-3 ish */
    border-radius: 0.375rem; /* rounded-md */
    font-size: 0.8rem;    /* text-xs or text-sm */
    font-weight: 600;     /* semibold */
    z-index: 10;
    line-height: 1.2;
}

.custom-homepage-listings .image-holder .rps-ribbon.rps-ribbon-primary, /* For 'FOR SALE' if blue */
.custom-homepage-listings .image-holder .rps-ribbon.rps-ribbon-info { /* Another blue option */
    background-color: #2563EB; /* Blue-600 from original static badge */
}

.custom-homepage-listings .image-holder .rps-ribbon.rps-ribbon-danger, /* For 'Sold' or other alerts */
.custom-homepage-listings .image-holder .rps-ribbon.rps-ribbon-open-house { /* If open house uses danger or needs specific red */
    background-color: #DC2626; /* Red-600 from original static badge */
}

/* Content body below image */
.custom-homepage-listings .rps-listing-body, /* General selector */
.custom-homepage-listings .rps-property-info /* Plugin's grid result info box */
{
    padding: 1.5rem; /* Matches p-6 */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allows button to stick to bottom */
    background-color: #f7fafc; /* light gray - bg-gray-50 equivalent */
    border-top: 3px solid #2563EB; /* Blue top border as per plugin's grid style, but theme's blue */
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.custom-homepage-listings .rps-listing-title,
.custom-homepage-listings .rps-listing-title a {
    font-size: 1.125rem; /* text-lg (slightly smaller than original xl, adjust if needed) */
    font-weight: 600; /* font-semibold */
    margin-bottom: 0.5rem; /* mb-2 */
    color: #1F2937; /* text-gray-900 */
    text-decoration: none;
}
.custom-homepage-listings .rps-listing-title a:hover {
    color: #2563EB; /* text-blue-600 */
}

.custom-homepage-listings .rps-listing-address,
.custom-homepage-listings .rps-listing-address a {
    color: #4B5563; /* text-gray-600 */
    margin-bottom: 1rem; /* mb-4 */
    font-size: 0.875rem; /* text-sm */
    text-decoration: none;
    line-height: 1.4;
}
.custom-homepage-listings .rps-listing-address a:hover {
    color: #2563EB; /* text-blue-600 */
}

/* Details like beds, baths, sqft */
.custom-homepage-listings .rps-listing-meta-wrap, /* This class might vary, inspect generated HTML */
.custom-homepage-listings .property-features /* Plugin's class for features */
{
    display: flex;
    /* justify-content: space-between; -- remove if details are grouped */
    align-items: center;
    margin-bottom: 1rem; /* mb-4 */
    gap: 1rem; /* space-x-4 for individual items */
    flex-wrap: wrap; /* Allow wrapping if many details */
}

/* Individual detail items - ensure plugin uses distinct classes or spans */
.custom-homepage-listings .rps-listing-beds,
.custom-homepage-listings .rps-listing-baths,
.custom-homepage-listings .rps-listing-sqft, /* Check actual classes from RealtyPress */
.custom-homepage-listings .property-features .label /* Plugin uses .label for features */
{
    color: #4B5563; /* text-gray-600 */
    font-size: 0.875rem; /* text-sm */
    background-color: #E5E7EB; /* bg-gray-200 for label background */
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.custom-homepage-listings .property-features .label i { /* Ensure FontAwesome icons are styled if used */
    margin-right: 0.35rem;
}

/* Hide Price from this section if it's overlaid on image */
.custom-homepage-listings .rps-listing-body .rps-listing-price {
    display: none !important; 
}

/* Styling for the "View Details" button */
.custom-homepage-listings .rps-listing-button a,
.custom-homepage-listings .rps-property-view-details a,
.custom-homepage-listings .rps-listing-read-more a {
    display: block;
    text-align: center;
    background-color: #2563EB; /* btn-primary bg (blue-600) */
    color: white !important; /* Ensure text is white */
    padding: 0.65rem 1.5rem; /* Adjusted padding */
    border-radius: 0.375rem; /* rounded-md */
    text-decoration: none;
    font-weight: 500; /* medium */
    transition: background-color 0.3s ease;
    margin-top: auto; /* Pushes button to the bottom of the card */
    line-height: 1.5;
}

.custom-homepage-listings .rps-listing-button a:hover,
.custom-homepage-listings .rps-property-view-details a:hover,
.custom-homepage-listings .rps-listing-read-more a:hover {
    background-color: #1D4ED8; /* Darker blue on hover (blue-700) */
}

/* Hide pagination */
.custom-homepage-listings .rps-pagination,
.custom-homepage-listings .pagination,
.custom-homepage-listings .rps-results-pagination { /* Common pagination class from plugins */
    display: none !important;
}

/* Clearfix or any other general utility if RealtyPress adds floats that need clearing */
.custom-homepage-listings::after {
    content: "";
    clear: both;
    display: table;
}