.property-detail-hero {

    width:
        min(
            1180px,
            calc(100% - 32px)
        );

    margin:
        40px auto;

    display: grid;

    grid-template-columns:
        1.35fr .65fr;

    gap:
        24px;
}

.property-gallery {

    overflow: hidden;

    padding:
        14px;
}

.gallery-main {

    position:
        relative;

    height:
        560px;

    border-radius:
        22px;

    overflow:
        hidden;
}

.gallery-main img {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    opacity:
        0;

    transform:
        scale(1.04);

    transition:
        opacity .35s ease,
        transform .45s ease;
}

.gallery-main img.active {

    opacity:
        1;

    transform:
        scale(1);
}

.gallery-thumbs {

    display:
        grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap:
        10px;

    margin-top:
        12px;
}

.gallery-thumbs button {

    border:
        2px solid transparent;

    padding:
        0;

    height:
        82px;

    border-radius:
        16px;

    overflow:
        hidden;

    background:
        transparent;

    cursor:
        pointer;
}

.gallery-thumbs button.active {

    border-color:
        var(--accent);
}

.gallery-thumbs img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}

.property-summary {

    padding:
        30px;

    position:
        sticky;

    top:
        110px;

    align-self:
        start;
}

.summary-badge {

    display:
        inline-flex;

    padding:
        8px 12px;

    border-radius:
        999px;

    background:
        rgba(122,184,255,.18);

    color:
        var(--primary);

    font-weight:
        800;
}

.property-summary h1 {

    font-size:
        clamp(2rem, 4vw, 3.4rem);

    line-height:
        1;

    margin:
        18px 0 10px;
}

.summary-location {

    color:
        var(--muted);
}

.summary-price {

    font-size:
        2rem;

    font-weight:
        900;

    margin:
        26px 0;
}

.summary-meta {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        12px;

    margin-bottom:
        26px;
}

.summary-meta div {

    padding:
        16px;

    border-radius:
        18px;

    background:
        rgba(122,184,255,.12);
}

.summary-meta strong,
.summary-meta span {

    display:
        block;
}

.summary-meta span {

    color:
        var(--muted);

    font-size:
        .85rem;
}

.btn.secondary {

    margin-top:
        12px;

    background:
        rgba(122,184,255,.14);

    color:
        var(--text);
}

.property-detail-grid {

    display:
        grid;

    grid-template-columns:
        1.2fr .8fr;

    gap:
        24px;
}

.data-list {

    display:
        grid;

    gap:
        14px;
}

.data-list div {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        14px 0;

    border-bottom:
        1px solid var(--border);
}

.data-list dt {

    color:
        var(--muted);
}

.data-list dd {

    margin:
        0;

    font-weight:
        800;

    text-align:
        right;
}

.floorplan {

    width:
        100%;

    border-radius:
        22px;
}

@media (max-width: 900px) {

    .property-detail-hero,
    .property-detail-grid {

        grid-template-columns:
            1fr;
    }

    .property-summary {

        position:
            static;
    }

    .gallery-main {

        height:
            420px;
    }
}

@media (max-width: 620px) {

    .gallery-main {

        height:
            320px;
    }

    .gallery-thumbs {

        grid-template-columns:
            repeat(3, 1fr);
    }

    .summary-meta {

        grid-template-columns:
            1fr;
    }
}