/* BytaBort listing detail — HouseSwapp mosaic tweaks */

.listing-gallery-mosaic--single {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    min-height: min(56vw, 280px);
    max-height: 420px;
}

.listing-gallery-mosaic--single .listing-gallery-cell-main {
    grid-row: 1;
    grid-column: 1;
}

.listing-gallery-mosaic--count-2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    min-height: min(52vw, 280px);
    max-height: 400px;
}

.listing-gallery-mosaic--count-2 .listing-gallery-cell-main {
    grid-row: 1;
    grid-column: 1;
}

.listing-gallery-mosaic--count-2 .listing-gallery-cell-side:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;
}

@media (min-width: 720px) {
    .listing-gallery-mosaic--single {
        min-height: 380px;
        max-height: 480px;
    }

    .listing-gallery-mosaic--count-2 {
        min-height: 400px;
        max-height: 520px;
    }
}

.listing-gallery--empty {
    display: grid;
    place-items: center;
    min-height: 220px;
    margin-bottom: 1rem;
}

.listing-gallery-placeholder {
    text-align: center;
    padding: 2rem 1rem;
}

.listing-gallery-placeholder__emoji {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.5rem;
}

.listing-detail-body .listing-detail-aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 900px) {
    .listing-detail-body .listing-detail-aside {
        position: sticky;
        top: calc(var(--header-height, 4.5rem) + 1rem);
    }
}

.listing-detail-body .listing-booking-card .host-trust-card--sidebar {
    margin-top: 0.75rem;
}

.listing-detail-body .listing-booking-card .host-trust-card--sidebar .host-trust-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.host-trust-card--sidebar .host-trust-avatar .profile-avatar-fallback {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    background: var(--brand-soft);
    color: var(--brand);
}

.listing-detail-body .listing-breadcrumb {
    margin-bottom: 0.75rem;
}

.listing-detail-body .listing-detail-page {
    padding-bottom: calc(3rem + var(--safe-bottom, 0px));
}