@charset "UTF-8";

/*
 * Shared Property Hive property-card styling.
 * Used on: Property Search, Buy a Home, Rent a Home,
 * and homepage Latest Properties (.suja-home-latest-properties).
 * Loaded late to override Divi page CSS / PH Template Assistant.
 *
 * Layout note:
 * - Property Search uses flex widths (below).
 * - Buy/Rent keep their Divi CSS-grid (.sales-property-grid).
 * - Homepage Latest Properties uses its own 3-col grid (below).
 * Card CONTENT chrome is shared via :is(...).
 */

/* =========================================
   SHARED CARD SHELL
========================================= */

:is(body.suja-property-cards, .suja-home-latest-properties) ul.properties li,
:is(body.suja-property-cards, .suja-home-latest-properties) ul.properties li.property,
:is(body.suja-property-cards, .suja-home-latest-properties) ul.properties li.ph-cols-3 {
    display: flex !important;
    flex-direction: column;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--suja-white);
    border: 1px solid var(--suja-border) !important;
    border-radius: var(--suja-radius);
    overflow: hidden;
    box-sizing: border-box;
    text-align: left !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
    :is(body.suja-property-cards, .suja-home-latest-properties) ul.properties li:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 28px rgba(25, 47, 85, 0.1);
    }
}

:is(body.suja-property-cards, .suja-home-latest-properties) ul.properties li .thumbnail {
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

:is(body.suja-property-cards, .suja-home-latest-properties) ul.properties li .thumbnail a {
    display: block;
    aspect-ratio: 16 / 10;
    height: auto !important;
    overflow: hidden;
    background: var(--suja-bg-light);
}

:is(body.suja-property-cards, .suja-home-latest-properties) ul.properties li .thumbnail img,
:is(body.suja-property-cards, .suja-home-latest-properties) ul.properties li img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    object-fit: cover;
    margin: 0 !important;
}

:is(body.suja-property-cards, .suja-home-latest-properties) ul.properties li .details {
    display: flex;
    flex-direction: column;
    flex: 1;
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 18px 18px 20px !important;
    box-sizing: border-box;
    text-align: left !important;
}

:is(body.suja-property-cards, .suja-home-latest-properties) ul.properties li h3 {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    font-size: 22px !important;
    font-weight: 600;
    line-height: 1.3;
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    text-align: left !important;
}

:is(body.suja-property-cards, .suja-home-latest-properties) ul.properties li h3 a {
    color: var(--suja-navy) !important;
    text-decoration: none !important;
}

:is(body.suja-property-cards, .suja-home-latest-properties) ul.properties li h3 a:hover {
    color: #132038 !important;
}

:is(body.suja-property-cards, .suja-home-latest-properties) ul.properties li .price {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 10px !important;
    color: var(--suja-navy) !important;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left !important;
}

:is(body.suja-property-cards, .suja-home-latest-properties) ul.properties li .price .price-qualifier {
    font-weight: 500;
    font-size: 14px;
    color: var(--suja-text-muted);
}

:is(body.suja-property-cards, .suja-home-latest-properties) ul.properties li .summary {
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 14px !important;
    color: var(--suja-text-muted);
    font-size: 14px;
    line-height: 1.65;
    text-align: left !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

:is(body.suja-property-cards, .suja-home-latest-properties) ul.properties li .actions {
    margin: 0 0 14px !important;
    text-align: left !important;
}

:is(body.suja-property-cards, .suja-home-latest-properties) ul.properties li .actions .button,
:is(body.suja-property-cards, .suja-home-latest-properties) ul.properties li .actions a.button {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--suja-navy) !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none !important;
    text-align: left !important;
}

:is(body.suja-property-cards, .suja-home-latest-properties) ul.properties li .actions .button::after {
    content: " \2192"; /* → — unicode escape for encoding-safe mobile rendering */
}

:is(body.suja-property-cards, .suja-home-latest-properties) ul.properties li .actions .button:hover {
    text-decoration: underline !important;
}

/* Compact inline meta — same markup on all three pages */
:is(body.suja-property-cards, .suja-home-latest-properties) ul.properties li .rooms {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 6px;
    margin: auto 0 6px !important;
    color: var(--suja-text-muted);
    font-size: 13px;
    line-height: 1.4;
    text-align: left !important;
}

:is(body.suja-property-cards, .suja-home-latest-properties) ul.properties li .room {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

:is(body.suja-property-cards, .suja-home-latest-properties) ul.properties li .room:not(:last-child)::after {
    content: "\2022"; /* • — unicode escape for encoding-safe mobile rendering */
    margin-left: 6px;
    color: #c0c4cc;
}

:is(body.suja-property-cards, .suja-home-latest-properties) ul.properties li .room-label {
    font-size: 0;
}

:is(body.suja-property-cards, .suja-home-latest-properties) ul.properties li .room-bedrooms .room-label::before {
    content: "Beds";
    font-size: 13px;
}

:is(body.suja-property-cards, .suja-home-latest-properties) ul.properties li .room-bathrooms .room-label::before {
    content: "Baths";
    font-size: 13px;
}

:is(body.suja-property-cards, .suja-home-latest-properties) ul.properties li .room-receptions .room-label::before {
    content: "Receptions";
    font-size: 13px;
}

:is(body.suja-property-cards, .suja-home-latest-properties) ul.properties li .property-type {
    margin: 0 !important;
    color: var(--suja-text-muted);
    font-size: 13px;
    font-weight: 500;
    text-align: left !important;
}

/* Undo Divi “center last child” / margin hacks on Buy & Rent */
body.suja-buy-home .sales-property-grid ul.properties li.property > *:last-child,
body.suja-rent-home .sales-property-grid ul.properties li.property > *:last-child {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
}

body.suja-buy-home .sales-property-grid ul.properties li.property h3,
body.suja-buy-home .sales-property-grid ul.properties li.property .price,
body.suja-buy-home .sales-property-grid ul.properties li.property .summary,
body.suja-rent-home .sales-property-grid ul.properties li.property h3,
body.suja-rent-home .sales-property-grid ul.properties li.property .price,
body.suja-rent-home .sales-property-grid ul.properties li.property .summary {
    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* =========================================
   PROPERTY SEARCH — flex grid (existing)
========================================= */

body.suja-property-search ul.properties {
    display: flex;
    flex-wrap: wrap;
    gap: 28px 2%;
    clear: both;
    max-width: var(--suja-max);
    margin: 0 auto 10px !important;
    padding: 0 !important;
    list-style: none !important;
}

body.suja-property-search ul.properties li,
body.suja-property-search ul.properties li.property,
body.suja-property-search ul.properties li.ph-cols-3 {
    width: 32% !important;
}


/* =========================================
   BUY / RENT — keep CSS-grid, match spacing
========================================= */

body.suja-buy-home .sales-property-grid ul.properties,
body.suja-rent-home .sales-property-grid ul.properties {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body.suja-buy-home .sales-property-grid ul.properties li,
body.suja-buy-home .sales-property-grid ul.properties li.property,
body.suja-buy-home .sales-property-grid ul.properties li.ph-cols-3,
body.suja-rent-home .sales-property-grid ul.properties li,
body.suja-rent-home .sales-property-grid ul.properties li.property,
body.suja-rent-home .sales-property-grid ul.properties li.ph-cols-3 {
    width: 100% !important;
    height: auto;
}


/* =========================================
   HOMEPAGE — Latest Properties preview
   Scoped to .suja-home-latest-properties only
========================================= */

.suja-home-latest-properties ul.properties {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    clear: both;
}

.suja-home-latest-properties ul.properties li,
.suja-home-latest-properties ul.properties li.property,
.suja-home-latest-properties ul.properties li.ph-cols-3 {
    width: 100% !important;
    height: auto;
}

/* Preview section only — never show pagination here */
.suja-home-latest-properties .propertyhive-pagination,
.suja-home-latest-properties .woocommerce-pagination {
    display: none !important;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 980px) {

    body.suja-property-search ul.properties li,
    body.suja-property-search ul.properties li.property,
    body.suja-property-search ul.properties li.ph-cols-3 {
        width: 49% !important;
    }

    body.suja-buy-home .sales-property-grid ul.properties,
    body.suja-rent-home .sales-property-grid ul.properties,
    .suja-home-latest-properties ul.properties {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 22px;
    }

}

@media (max-width: 767px) {

    body.suja-property-search ul.properties {
        gap: 20px;
    }

    body.suja-property-search ul.properties li,
    body.suja-property-search ul.properties li.property,
    body.suja-property-search ul.properties li.ph-cols-3 {
        width: 100% !important;
    }

    :is(body.suja-property-cards, .suja-home-latest-properties) ul.properties li h3 {
        font-size: 22px;
    }

    :is(body.suja-property-cards, .suja-home-latest-properties) ul.properties li .details {
        padding: 16px 16px 18px !important;
    }

    body.suja-buy-home .sales-property-grid ul.properties,
    body.suja-rent-home .sales-property-grid ul.properties,
    .suja-home-latest-properties ul.properties {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

}

@media (max-width: 600px) {

    body.suja-buy-home .sales-property-grid ul.properties,
    body.suja-rent-home .sales-property-grid ul.properties,
    .suja-home-latest-properties ul.properties {
        grid-template-columns: 1fr !important;
    }

}