/* Perfessa: realestate-catalog.css */

.estate-catalog {
    margin-top: 36px;
}

.estate-catalog-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:34px 24px;
}

.estate-card {
    min-width:0;
}

.estate-card-photo {
    aspect-ratio:4/3;
    background:var(--bg-soft,#121009);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    color:var(--ink-muted,#8f8877);
    font-size:13px;
}

.estate-card-photo img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.estate-card h2 {
    margin:14px 0 7px;
    color:var(--ink,#efe9dc);
    font-size:16px;
    font-weight:500;
    overflow-wrap:anywhere;
}

.estate-card-price {
    margin:0;
    color:var(--gold-text,#d9b65a);
    font-size:15px;
}

.estate-catalog-footer {
    text-align:center;
    margin:38px 0 12px;
}

.estate-load-more {
    padding:14px 30px;
    border:1px solid var(--gold-dim);
    background:transparent;
    color:var(--gold-bright);
    font:inherit;
    font-size:13px;
    cursor:pointer;
}

.estate-load-more:hover {
    border-color:var(--gold);
}

.estate-load-more:focus-visible {
    outline:2px solid var(--gold-bright);
    outline-offset:4px;
}

.estate-load-more:disabled {
    opacity:.5;
    cursor:wait;
}

.estate-catalog-status {
    color:var(--ink-muted);
    font-size:13px;
    min-height:20px;
    margin-top:16px;
}

.estate-catalog-sentinel {
    height:1px;
}

@media(max-width:1200px) {
    .estate-catalog-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:520px) {
    .estate-catalog-grid {
        grid-template-columns:1fr;
        gap:28px;
    }
    
    .estate-catalog {
        margin-top:26px;
    }
}

.estate-card-type {
    margin: 14px 0 0;
    color: var(--ink-muted, #8f8877);
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .06em;
}

.estate-card-type + h2 {
    margin-top: 5px;
}

.estate-card-link {
    display:block;
    color:inherit;
    text-decoration:none;
    cursor:pointer;
}

.estate-card-link:visited {
    color:inherit;
}

.estate-card-link:focus-visible {
    outline:2px solid var(--gold-bright,#e8c766);
    outline-offset:5px;
}

.detail-page > .detail-lead {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    text-align: justify;
    text-align-last: left;
}

/* Heading actions: the map remains visible to all roles and on mobile. */
.realestate-heading-actions {display:flex;align-items:center;gap:10px;flex:0 0 auto;}
.estate-map-button svg {
    width: 21px;
    height: 21px;
    flex-shrink: 0;
}
@media(max-width:520px) {
    .realestate-heading-row {gap:12px;flex-wrap:wrap;}
    .realestate-heading-actions {margin-left:auto;}
}

/* Sold listings: badge on the photo, muted photo and price. */
.estate-card-photo {
    position: relative;
}

.estate-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    padding: 6px 13px;
    color: var(--gold-bright, #e8c766);
    background: rgba(12, 9, 5, .78);
    border: 1px solid rgba(232, 199, 102, .55);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .14em;
    text-transform: uppercase;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    pointer-events: none;
}

.estate-card.is-sold .estate-card-photo img {
    filter: grayscale(.5) brightness(.8);
}

.estate-card.is-sold .estate-card-price {
    color: var(--ink-muted, #8f8877);
}

/* Compact catalog header on phones: minimum 40px controls, 6px gaps.
   The input stays at 16px so iOS does not zoom on focus. */
@media (max-width: 760px) {
    .main-content {
        padding-top: 16px;
    }

    .detail-page {
        margin-top: 0;
    }

    .realestate-heading-row {
        margin-bottom: 10px;
    }

    .estate-catalog {
        margin-top: 0;
    }

    .estate-search {
        margin-bottom: 12px;
    }

    .estate-search-field input {
        min-height: 38px;
        font-size: 16px;
    }

    .estate-search-submit {
        min-height: 40px;
    }

    .estate-filters {
        gap: 6px;
        margin-bottom: 16px;
    }

    .estate-filter-tag,
    .estate-filter-clear {
        gap: 6px;
        min-height: 40px;
        padding: 6px 8px;
        font-size: 14px;
    }
}

/* Narrow phones: the title shrinks so it shares one row with the map button. */
@media (max-width: 389px) {
    .realestate-heading-row {
        flex-wrap: nowrap;
    }

    .detail-page .realestate-heading-row h1 {
        font-size: clamp(28px, calc((100vw - 147px) / 6.2), 38px);
        white-space: nowrap;
    }
}