/* One visual treatment for public listing cards, regardless of category. */
:root {
    --hb-listing-price-size: 0.74rem;
    --hb-listing-price-color: #6b7280;
    --hb-listing-card-width: 250px;
    --hb-listing-photo-height: 165px;
}

.hb-property-listings {
    padding-inline: 0;
}

.hb-property-listings .property-card {
    width: var(--hb-listing-card-width);
    min-width: 0;
    max-width: var(--hb-listing-card-width);
    flex: 0 0 var(--hb-listing-card-width);
}

.hb-property-listings.search-results-grid,
.hb-property-listings.saved-grid {
    grid-template-columns: repeat(auto-fill, var(--hb-listing-card-width));
    gap: 24px 0.85rem;
}

.hb-property-listings .property-image {
    width: 100%;
    height: var(--hb-listing-photo-height);
    min-height: 0;
    border-radius: var(--hb-property-photo-radius, 8px);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.hb-property-listings .property-price .price,
.hb-property-listings .price-period,
.modal-price .price,
.modal-price .price-period {
    font-family: inherit;
    font-size: var(--hb-listing-price-size);
    color: var(--hb-listing-price-color);
    font-weight: 700;
    line-height: 1.25;
}

.hb-property-listings .price-period,
.modal-price .price-period {
    font-weight: 400;
    opacity: 1;
}

/* Keep the detail page's own price typography, retaining the shared color. */
.price-display #displayPrice,
.price-display #pricePeriodLabel,
.mobile-book-bar #mobileBookPrice,
.mobile-book-bar #mobileBookPeriod,
.room-type-card .room-price {
    color: var(--hb-listing-price-color);
}

.price-display #pricePeriodLabel,
.mobile-book-bar #mobileBookPeriod {
    opacity: 1;
}

/* The detail rate uses the same text treatment instead of a colored badge. */
.property-header .price-display {
    background: transparent;
    padding: 0;
    border-radius: 0;
}

/* Use the landing page's content width so fluid mobile photos match exactly. */
.results-section.hb-listing-results {
    max-width: 1440px;
    padding-inline: 32px;
}

/* Expanded town/category browsing: two rows advance together horizontally. */
.hb-property-listings .town-row-scroll--stacked {
    display: grid;
    grid-template-rows: repeat(2, max-content);
    grid-auto-flow: column;
    grid-auto-columns: var(--hb-listing-card-width);
    gap: 24px 12px;
    align-items: start;
    padding-inline: 0;
}

.hb-property-listings .town-row-scroll--stacked .property-card {
    width: 100%;
    min-width: 0;
    max-width: none;
}

@media (max-width: 767px), (orientation: landscape) and (max-width: 1024px) {
    .hb-property-listings .town-row-scroll--stacked {
        grid-auto-columns: calc((100% - 12px) / 2);
    }

    .hb-property-listings .town-row-scroll.town-row-scroll--stacked .property-card {
        width: 100%;
        min-width: 0;
        max-width: none;
    }
}

@media (min-width: 1200px) {
    :root {
        --hb-listing-card-width: 260px;
        --hb-listing-photo-height: 170px;
    }
}

@media (max-width: 768px) {
    .results-section.hb-listing-results { padding-inline: 16px; }
}

@media (max-width: 480px) {
    .results-section.hb-listing-results { padding-inline: 12px; }
}

@media (max-width: 767px) {
    :root { --hb-listing-price-size: 0.68rem; }
}

@media (max-width: 767px), (orientation: landscape) and (max-width: 1024px) {
    .hb-property-listings .town-row-scroll {
        gap: 12px;
        padding-inline: 0;
    }

    .hb-property-listings .town-row-scroll .property-card {
        flex: 0 0 calc((100% - 12px) / 2);
        width: calc((100% - 12px) / 2);
        max-width: none;
    }

    .hb-property-listings.search-results-grid,
    .hb-property-listings.saved-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 12px;
    }

    .hb-property-listings.search-results-grid .property-card,
    .hb-property-listings.saved-grid .property-card {
        width: 100%;
        max-width: none;
    }

    .hb-property-listings .property-image {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .properties-loading-cards { gap: 12px; }
    .property-loading-card { flex-basis: calc((100% - 12px) / 2); }
    .property-loading-image { height: auto; aspect-ratio: 4 / 3; }
}

        /* Compact category cards with smaller photos in both dimensions. */
        .hb-category-gallery .category-card {
            flex: 0 0 200px;
            width: 200px;
            min-width: 0;
            max-width: 200px;
            background: transparent;
            border-radius: 0;
            box-shadow: none;
        }

        .hb-category-gallery .category-card:hover {
            box-shadow: none;
        }

        .hb-category-gallery .category-image {
            width: 100%;
            height: 110px;
            min-height: 0;
            border-radius: var(--hb-property-photo-radius, 8px);
            overflow: hidden;
        }

        .hb-category-gallery .category-content {
            padding: 8px 2px 4px;
            background: transparent;
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
        }

        .hb-category-gallery .category-content h3 {
            white-space: normal;
        }

        @media (max-width: 767px) {
            .hb-category-gallery .category-card {
                flex-basis: 136px;
                width: 136px;
                max-width: 136px;
            }

            .hb-category-gallery .category-image { height: 90px; }
        }


/* Keep two-column mobile cards uniform; ratings remain on the detail page. */
@media (max-width: 768px) {
    /* Both category galleries use one inset and the same heading/row spacing. */
    .search-section.hb-results-search {
        padding-inline: 0 !important;
    }

    .hb-results-search .search-container {
        padding-inline: 16px;
    }

    .explore-categories > .section-title,
    .hb-results-search .categories > .section-title {
        margin: 4px 0 12px;
        padding-inline: 8px;
    }

    .explore-categories > .section-title h2,
    .hb-results-search .categories > .section-title h2 {
        margin: 0;
    }

    .explore-categories .categories-grid,
    .hb-results-search .categories-grid {
        margin: 0 0 20px;
        padding: 0.15rem 0 0.65rem;
        gap: 16px !important;
    }

    .hb-results-search .categories {
        padding-inline: 0 !important;
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    .hb-results-search .search-container {
        padding-inline: 12px;
    }
}

@media (max-width: 767px) {
    .hb-property-listings .property-features,
    .hb-property-listings .property-details {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
        min-width: 0;
        margin-bottom: 6px;
    }

    .hb-property-listings .property-features .feature,
    .hb-property-listings .property-details .property-detail {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        min-width: 0;
        margin: 0;
        font-size: 0.68rem;
        line-height: 1.3;
        white-space: nowrap;
    }

    .hb-property-listings .property-detail--beds { flex: 0 1 auto; }
    .hb-property-listings .property-detail--guests { flex: 0 0 auto; }
    .hb-property-listings .property-detail-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hb-property-listings .property-features .feature-rating,
    .hb-property-listings .property-details .property-detail--rating,
    .hb-property-listings .property-details .property-detail--access {
        display: none;
    }
}