/* Property detail: final, page-scoped responsive rules. */
.property-detail-page {
    overflow-x: hidden;
}

.property-detail-page .property-detail__main,
.property-detail-page .property-gallery,
.property-detail-page .property-title-row,
.property-detail-page .detail-accordion {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 900px) {
    .property-detail-page .property-detail {
        padding-top: 12px;
        padding-bottom: calc(104px + env(safe-area-inset-bottom));
    }

    .property-detail-page .property-detail > .container {
        width: min(100% - 24px, 760px);
        margin-inline: auto;
    }

    /* Let the cover determine its own mobile height. This keeps portrait
       listing photos complete without forcing them into a square letterbox. */
    .property-detail-page .property-gallery__main {
        display: block;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        overflow: hidden;
        background: #ebe9e4;
        line-height: 0;
    }

    .property-detail-page .property-gallery__main img {
        display: block;
        width: 100% !important;
        height: auto !important;
        margin-inline: auto;
        object-fit: contain !important;
    }

    /* The download action is positioned against the whole gallery in the
       legacy stylesheet. Once thumbnails wrap below the cover, `bottom`
       places it on top of the video action; anchor it to the cover's top edge. */
    .property-detail-page .property-gallery__download {
        top: 10px !important;
        right: 10px !important;
        bottom: auto !important;
    }

    .property-detail-page .property-gallery__thumbs {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    /* A single video/image should be an obvious full-width action instead of
       looking like an orphaned square at the edge of the gallery. */
    .property-detail-page .property-gallery__thumbs:has(> :only-child) {
        grid-template-columns: 1fr !important;
    }

    .property-detail-page .property-gallery__thumbs:has(> :only-child) > button {
        min-height: 58px !important;
        height: 58px !important;
        aspect-ratio: auto !important;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 10px 16px;
    }

    .property-detail-page .property-gallery__thumbs:has(> :only-child) > button i {
        position: static;
        flex: 0 0 auto;
        margin: 0;
    }

    .property-detail-page .property-gallery__thumbs:has(> :only-child) > button small {
        margin: 0;
        font-size: 12px;
    }

    .property-detail-page .property-title-row {
        margin-top: 20px !important;
    }

    .property-detail-page .property-title-actions {
        gap: 10px;
    }

    .property-detail-page .property-title-actions h1 {
        overflow-wrap: anywhere;
    }

    .property-detail-page .property-meta span {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .property-detail-page .detail-accordion--word details > div {
        overflow-wrap: anywhere;
    }

    .property-detail-page .mobile-property-contactbar {
        width: 100%;
        grid-template-columns: minmax(0, 1fr) 66px minmax(0, .95fr);
        min-height: 78px;
    }
}

@media (max-width: 620px) {
    .property-detail-page .property-detail > .container {
        width: calc(100% - 20px);
    }

    .property-detail-page .property-title-row {
        gap: 10px !important;
    }

    .property-detail-page .detail-price {
        padding: 13px 15px !important;
    }

    .property-detail-page .detail-accordion--word .feature-tags--word {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .property-detail-page .detail-accordion--word .feature-tags--word > span {
        min-height: 62px !important;
        padding: 9px 7px;
        font-size: 11px;
        line-height: 1.7;
    }

    .property-detail-page .mobile-property-contactbar__property > span {
        display: grid;
        gap: 1px;
    }
}

@media (max-width: 430px) {
    /* Override the legacy one-column feature list that made the page many
       screens longer on ordinary phones. */
    .property-detail-page .detail-accordion--word .feature-tags--word {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .property-detail-page .property-gallery__thumbs {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .property-detail-page .property-gallery__thumbs:has(> :only-child) {
        grid-template-columns: 1fr !important;
    }

    .property-detail-page .mobile-property-contactbar {
        grid-template-columns: minmax(0, 1fr) 60px minmax(82px, .9fr);
        min-height: 74px;
        padding-inline: 7px;
    }

    .property-detail-page .mobile-property-contactbar__advisor-copy strong,
    .property-detail-page .mobile-property-contactbar__property strong {
        font-size: 10px;
    }
}

@media (max-width: 350px) {
    .property-detail-page .property-detail > .container {
        width: calc(100% - 16px);
    }

    .property-detail-page .mobile-property-contactbar__avatar {
        display: none;
    }

    .property-detail-page .mobile-property-contactbar {
        grid-template-columns: minmax(0, 1fr) 56px minmax(78px, .9fr);
    }
}