/* Perfessa: estate.css */

.estate-public {
    width:100%;
    max-width:1000px;
    margin:0 auto;
    color:var(--ink,#efe9dc);
    overflow-wrap:anywhere;
}

.estate-back {
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:44px;
    margin-bottom:22px;
    color:var(--ink-muted,#8f8877);
    font-size:12px;
    text-decoration:none;
}

.estate-back:hover {
    color:var(--gold-text,#d9b65a);
}

.estate-heading {
    margin-bottom:28px;
}

.estate-heading h1 {
    margin:0;
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(32px,5vw,48px);
    font-weight:400;
    line-height:1.15;
    color:var(--gold-bright,#e8c766);
}

.estate-price-row {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 14px;
    margin-top:12px;
}

.estate-price {
    color:var(--gold-text,#d9b65a);
    font-size:clamp(22px,3vw,28px);
    font-variant-numeric:tabular-nums;
}

.estate-status {
    padding:4px 10px;
    border:1px solid var(--gold-dim);
    border-radius:7px;
    color:var(--ink,#efe9dc);
    font-size:12px;
    line-height:1.5;
}

.estate-facts {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
    gap:22px 28px;
    margin:0 0 32px;
}

.estate-facts:empty {
    display:none;
}

.estate-fact dt {
    margin-bottom:7px;
    color:var(--ink-muted,#8f8877);
    font-size:11px;
    line-height:1.5;
}

.estate-fact dd {
    margin:0;
    font-size:15px;
    line-height:1.5;
}

.estate-description {
    margin:0 0 36px;
    max-width:57ch;
}

.estate-public h2 {
    margin:0 0 14px;
    font-size:15px;
    font-weight:500;
    line-height:1.5;
}

.estate-description p {
    margin:0;
    font-size:14px;
    line-height:1.85;
    white-space:pre-wrap;
}

.estate-gallery {
    position:relative;
    margin-bottom:36px;
}

.estate-gallery-grid {
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    grid-template-rows:repeat(2,minmax(0,1fr));
    gap:8px;
    aspect-ratio:2/1;
    overflow:hidden;
    border-radius:8px;
}

.estate-gallery-few {
    display:flex;
}

.estate-gallery-item {
    position:relative;
    display:block;
    flex:1 1 0;
    min-width:0;
    min-height:0;
    overflow:hidden;
    background:#15130f;
}

.estate-gallery-item:first-child {
    grid-row:1 / 3;
}

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

.estate-gallery-rest {
    display:none;
    margin:0 12px 8px 0;
    color:var(--gold-text,#d9b65a);
    font-size:13px;
}

.estate-gallery-all {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(10,9,8,.62);
    color:var(--ink,#efe9dc);
    font-size:14px;
    font-weight:500;
}

.estate-gallery-counter {
    display:none;
    position:absolute;
    right:10px;
    bottom:10px;
    padding:3px 10px;
    border-radius:7px;
    background:rgba(10,9,8,.72);
    color:var(--ink,#efe9dc);
    font-size:12px;
    font-variant-numeric:tabular-nums;
    pointer-events:none;
}

.estate-public .estate-gallery-item:focus-visible {
    outline-offset:-3px;
}

.estate-sr {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
}

.estate-message {
    padding:16px 20px;
    color:var(--ink-muted,#8f8877);
    font-size:14px;
    line-height:1.7;
    white-space:normal;
}

.estate-all-link,
.estate-cta {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:10px 22px;
    border-radius:7px;
    background:linear-gradient(180deg,var(--gold-bright,#e8c766),var(--gold,#c9a227));
    color:#171309;
    font-size:14px;
    font-weight:500;
    text-decoration:none;
}

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

@media(max-width:600px) {
    .estate-back {
        margin-bottom:16px;
    }
    
    .estate-heading {
        margin-bottom:24px;
    }
    
    .estate-facts {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:20px 16px;
        margin-bottom:28px;
    }
    
    .estate-description {
        margin-bottom:28px;
    }
    
}

@media(max-width:340px) {
    .estate-facts {
        grid-template-columns:1fr;
    }
}

.estate-location {
    margin:0 0 36px;
}

.estate-map-facade {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    aspect-ratio:16/9;
    overflow:hidden;
    border:1px solid rgba(201,162,39,.18);
    border-radius:8px;
    background-color:#15130f;
    background-image:
        linear-gradient(rgba(201,162,39,.06) 1px,transparent 1px),
        linear-gradient(90deg,rgba(201,162,39,.06) 1px,transparent 1px);
    background-size:48px 48px;
}

.estate-map-button {
    display:inline-flex;
    align-items:center;
    min-height:44px;
    padding:10px 20px;
    border:1px solid var(--gold-dim);
    border-radius:7px;
    background:#0a0908;
    color:var(--gold-text,#d9b65a);
    font-size:13px;
    text-decoration:none;
    transition:background .2s,border-color .2s;
}

.estate-map-button:hover {
    border-color:var(--gold-bright,#e8c766);
    background:#1a170f;
}

.estate-map {
    display:block;
    width:100%;
    height:100%;
    border:0;
    background:#e8e5df;
}

.estate-map-link {
    display:inline-flex;
    align-items:center;
    min-height:44px;
    margin-top:4px;
    color:var(--gold-text,#d9b65a);
    font-size:12px;
    text-decoration:none;
}

.estate-map-link:hover {
    text-decoration:underline;
}

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

@media(max-width:600px) {
    .estate-location {
        margin-bottom:28px;
    }
    
    .estate-map-facade {
        border-radius:5px;
    }
}

.estate-title-row {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}

.estate-title-row h1 {
    min-width:0;
}

.estate-edit-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    box-sizing:border-box;
    min-width:44px;
    min-height:44px;
    padding:10px 16px;
    border:1px solid var(--gold-dim,#66552d);
    border-radius:7px;
    background:transparent;
    color:var(--gold-text,#d9b65a);
    text-decoration:none;
    transition:background .2s,border-color .2s;
}

.estate-edit-button:hover {
    border-color:var(--gold-bright,#e8c766);
    background:rgba(201,162,39,.08);
}

.estate-edit-icon {
    display:block;
    width:18px;
    height:18px;
}

@media (max-width:760px) {
    .estate-description p,
    .estate-fact dd {
        font-size:16px;
        line-height:1.65;
    }

    .estate-fact dt {
        font-size:12px;
    }
}

.estate-actions {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:14px;
}

.estate-call {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:44px;
    min-height:44px;
    padding:10px 16px;
    border:1px solid var(--gold-dim);
    border-radius:7px;
    color:var(--gold-text,#d9b65a);
    font-size:14px;
    text-decoration:none;
}

.estate-call .perfessa-icon {
    width:20px;
    height:20px;
}

.estate-body {
    display:grid;
    grid-template-columns:minmax(0,1fr) 260px;
    gap:40px;
    align-items:start;
}

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

.estate-sticky {
    position:sticky;
    top:24px;
    padding:20px;
    border:1px solid rgba(201,162,39,.18);
    border-radius:8px;
    background:#0d0c0a;
}

.estate-sticky-price {
    color:var(--gold-text,#d9b65a);
    font-size:24px;
    font-variant-numeric:tabular-nums;
    text-align:center;
}

.estate-sticky .estate-cta,
.estate-sticky .estate-call {
    width:100%;
    text-align:center;
}

.estate-final {
    margin-top:40px;
    padding-top:28px;
    border-top:1px solid rgba(201,162,39,.18);
}

.estate-similar {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-bottom:28px;
}

.estate-similar-card {
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
    color:inherit;
    text-decoration:none;
}

.estate-similar-card img {
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:4/3;
    margin-bottom:8px;
    object-fit:cover;
    border-radius:8px;
    background:#15130f;
}

.estate-similar-type {
    color:var(--ink-muted,#8f8877);
    font-size:12px;
}

.estate-similar-title {
    font-family:'Cormorant Garamond',serif;
    font-size:21px;
    line-height:1.2;
}

.estate-similar-card:hover .estate-similar-title {
    color:var(--gold-text,#d9b65a);
}

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

.estate-final-back {
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:44px;
    color:var(--ink-muted,#8f8877);
    font-size:13px;
    text-decoration:none;
}

.estate-final-back:hover {
    color:var(--gold-text,#d9b65a);
}

.estate-heading .estate-address {
    margin-top:6px;
    color:var(--ink-muted,#8f8877);
    font-size:15px;
    line-height:1.5;
}

/* Compact shell for tablets and short landscape windows. Up to 760px the header
   and footer come from site.css, the same as on every other page. */
@media (min-width:761px) and (max-width:1024px), (min-width:761px) and (orientation:landscape) and (max-height:520px) {
    .app-shell {
        display:block;
    }

    .main-content {
        padding:20px calc(18px + env(safe-area-inset-right,0px)) calc(92px + env(safe-area-inset-bottom,0px)) calc(18px + env(safe-area-inset-left,0px));
    }

    .sidebar {
        position:relative;
        flex-direction:row;
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        height:auto;
        min-height:0;
        padding:calc(8px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) 8px calc(60px + env(safe-area-inset-left,0px));
        overflow:visible;
        border-right:0;
        border-bottom:1px solid var(--gold-dim);
    }

    .main-nav,
    .sidebar-rule,
    .sidebar .login-link,
    .sidebar .account-dropdown {
        display:none;
    }

    .brand {
        margin:0;
    }

    .brand img {
        width:42px;
        height:42px;
    }

    .brand span {
        margin-left:8px;
        font-size:23px;
    }

    .sidebar-service {
        display:contents;
    }

    .sidebar-service > .lang-toggle,
    .sidebar .sidebar-service .lang-toggle {
        position:absolute;
        top:calc(14px + env(safe-area-inset-top,0px));
        right:calc(16px + env(safe-area-inset-right,0px));
        bottom:auto;
        margin:0;
        z-index:1;
    }

    .sidebar-service .lang-toggle button {
        width:38px;
    }

    .estate-back {
        position:absolute;
        top:env(safe-area-inset-top,0px);
        left:env(safe-area-inset-left,0px);
        justify-content:center;
        width:58px;
        min-height:58px;
        margin:0;
        color:var(--gold-text,#d9b65a);
        font-size:20px;
    }

    .estate-back .i18n-ru,
    .estate-back .i18n-en {
        position:absolute;
        width:1px;
        height:1px;
        overflow:hidden;
        clip-path:inset(50%);
        white-space:nowrap;
    }

    .sidebar .contacts {
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:50;
        display:grid;
        grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
        gap:8px;
        margin:0;
        padding:6px calc(16px + env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) calc(16px + env(safe-area-inset-left,0px));
        border-top:1px solid var(--gold-dim);
        background:#090908;
    }

    .sidebar .contacts a {
        display:flex;
        align-items:center;
        justify-content:center;
        min-width:0;
        min-height:46px;
        padding:0 8px;
        gap:6px;
        border:0;
        border-radius:var(--radius-m);
        background:linear-gradient(110deg,#171510,#100f0c);
        font-size:13px;
        white-space:nowrap;
    }

    .sidebar .contacts a:first-child {
        background:linear-gradient(180deg,var(--gold-bright,#e8c766),var(--gold,#c9a227));
        color:#171309;
        font-weight:500;
    }

    .sidebar .contacts a:first-child .perfessa-icon {
        filter:brightness(0);
    }

    .sidebar .contacts small {
        display:none;
    }

    .sidebar .contacts .nav-ico,
    .sidebar .contacts .perfessa-icon {
        width:22px;
        height:22px;
    }
}

/* Phone content layout, also used up to tablet width and in short landscape windows. */
@media (max-width:1024px), (orientation:landscape) and (max-height:520px) {
    .estate-gallery-grid {
        display:flex;
        gap:0;
        aspect-ratio:auto;
        margin-right:calc(-18px - env(safe-area-inset-right,0px));
        margin-left:calc(-18px - env(safe-area-inset-left,0px));
        overflow-x:auto;
        overscroll-behavior-x:contain;
        border-radius:0;
        scroll-snap-type:x mandatory;
        scrollbar-width:none;
    }

    .estate-gallery-grid::-webkit-scrollbar {
        display:none;
    }

    .estate-gallery-item {
        flex:0 0 100%;
        aspect-ratio:4/3;
        scroll-snap-align:start;
    }

    .estate-gallery-counter {
        display:block;
    }

    .estate-body {
        display:block;
    }

    .estate-sticky {
        display:none;
    }

    .estate-actions {
        flex-wrap:nowrap;
    }

    .estate-actions .estate-cta {
        flex:1 1 auto;
        padding-right:14px;
        padding-left:14px;
    }

    .estate-call {
        padding:0;
    }

    .estate-call-label {
        position:absolute;
        width:1px;
        height:1px;
        overflow:hidden;
        clip-path:inset(50%);
        white-space:nowrap;
    }
}

@media (orientation:landscape) and (max-height:520px) {
    .main-content {
        padding-top:12px;
    }

    .estate-heading {
        display:grid;
        grid-template-columns:minmax(0,1fr) auto;
        align-items:center;
        gap:0 16px;
        margin-bottom:12px;
    }

    .estate-title-row,
    .estate-address {
        grid-column:1 / -1;
    }

    .estate-heading h1 {
        font-size:28px;
    }

    .estate-heading .estate-address {
        margin-top:0;
        font-size:13px;
    }

    .estate-price-row {
        margin-top:4px;
    }

    .estate-actions {
        margin-top:4px;
    }

    .estate-gallery-item {
        flex:0 0 auto;
        height:62vh;
        height:62svh;
    }
}

@media (min-width:761px) and (max-height:400px) {
    .sidebar .contacts {
        position:static;
        flex:0 1 340px;
        margin:0 96px 0 auto;
        padding:0;
        border:0;
        background:none;
    }

    .main-content {
        padding-bottom:calc(45px + env(safe-area-inset-bottom,0px));
    }
}
