:root {
    --za-navy:#071d53;
    --za-red:#f21e26;
    --za-soft:#f5f7fb;
    --za-text:#263752;
}
.za-apartments { width:100%; font-family:inherit; color:var(--za-text); }
.za-section-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:22px; }
.za-section-head h2 { margin:0; color:var(--za-navy); font-size:32px; line-height:1.1; }
.za-section-head h2:after { content:""; display:block; width:34px; height:3px; background:var(--za-red); margin-top:10px; }

.za-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
}
.za-card {
    background:#fff;
    border:1px solid #e5e9f0;
    border-radius:9px;
    overflow:hidden;
    box-shadow:0 5px 20px rgba(7,29,83,.07);
    display:flex;
    flex-direction:column;
    min-width:0;
}
.za-card-image { position:relative; aspect-ratio: 4 / 2.55; overflow:hidden; background:#edf1f7; }
.za-card-image img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.za-card:hover .za-card-image img { transform:scale(1.025); }
.za-placeholder {
    width:100%; height:100%; display:grid; place-items:center;
    background:linear-gradient(145deg,#f1f4f8,#dfe6ef); color:var(--za-navy);
}
.za-placeholder span { font-size:44px; font-weight:800; opacity:.35; }
.za-badge {
    position:absolute; top:12px; left:12px; background:var(--za-red); color:#fff;
    padding:7px 10px; font-size:12px; font-weight:700; border-radius:4px; text-transform:uppercase; letter-spacing:.04em;
}
.za-card.is-preparing .za-card-image img { filter:grayscale(.8); opacity:.7; }
.za-card-body { padding:18px; display:flex; flex-direction:column; flex:1; }
.za-card-body h3 { color:var(--za-navy); font-size:20px; line-height:1.2; margin:0 0 9px; font-weight:800 !important; }
.za-meta { display:flex; flex-wrap:wrap; gap:8px 14px; color:#617087; font-size:13px; margin-bottom:11px; }
.za-meta span { display:inline-flex; align-items:center; gap:5px; }
.za-meta .za-meta-square {
    width:8px;
    height:8px;
    min-width:8px;
    display:inline-block;
    background:var(--za-red);
    border-radius:0;
}
.za-card-body p { margin:0 0 18px; line-height:1.55; font-size:14px; flex:1; }
.za-open, .za-reserve {
    border:0; background:var(--za-red); color:#fff !important; text-decoration:none;
    padding:12px 15px; border-radius:4px; font-weight:700; cursor:pointer; width:100%;
    display:flex; align-items:center; justify-content:space-between; font-size:14px;
}
.za-open:hover, .za-reserve:hover { background:#d7171e; }
.za-coming { background:#eef1f5; color:#7a8594; padding:12px 15px; border-radius:4px; font-weight:700; font-size:14px; text-align:center; }

/* modal */
.za-modal {
    position:fixed; inset:0; z-index:2147482000; display:none; align-items:center; justify-content:center;
}
.za-modal.is-open { display:flex; }
.za-modal-backdrop { position:absolute; inset:0; background:rgba(3,12,34,.88); }
.za-modal-panel {
    position:relative; width:min(1120px,94vw); max-height:92vh; overflow:auto;
    background:#fff; border-radius:10px; z-index:2; box-shadow:0 20px 70px rgba(0,0,0,.45);
}
.za-modal-close {
    position:sticky; top:12px; float:right; margin:12px 12px -58px 0; z-index:10;
    width:42px; height:42px; border:0; border-radius:50%; background:rgba(7,29,83,.92); color:#fff;
    font-size:30px; line-height:1; cursor:pointer;
}
.za-modal-content { clear:both; }
.za-detail { padding:34px; }
.za-detail-top { display:flex; justify-content:space-between; gap:20px; align-items:flex-end; margin-bottom:24px; }
.za-kicker { color:var(--za-red); font-weight:800; font-size:15px; }
.za-detail h2 { margin:2px 0 0; color:var(--za-navy); font-size:36px; }
.za-detail-meta { display:flex; flex-wrap:wrap; gap:8px; }
.za-detail-meta span { background:#eef2f8; color:var(--za-navy); padding:9px 12px; border-radius:999px; font-weight:700; font-size:16px; line-height:1.45; }
.za-detail-meta .za-detail-price { background:var(--za-red); color:#fff; }
.za-detail-meta .za-detail-price strong { font-weight:800; margin-right:4px; }

.za-detail-gallery { margin-bottom:28px; }
.za-main-photo {
    border-radius:8px;
    overflow:hidden;
    background:#eef1f5;
    min-height:420px;
    max-height:72vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px;
}
.za-main-photo img {
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:calc(72vh - 20px);
    object-fit:contain;
}
.za-thumbs { display:flex; gap:8px; margin-top:9px; overflow-x:auto; padding-bottom:3px; }
.za-thumb { border:2px solid transparent; padding:0; background:none; border-radius:5px; overflow:hidden; cursor:pointer; flex:0 0 84px; height:60px; }
.za-thumb.is-active { border-color:var(--za-red); }
.za-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

.za-detail-content { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr); gap:34px; }
.za-copy { font-size:16px; line-height:1.7; }
.za-copy p:first-child { margin-top:0; }
.za-facts { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
.za-facts div { background:var(--za-soft); padding:13px; border-radius:6px; }
.za-facts strong, .za-facts span { display:block; }
.za-facts strong { color:var(--za-navy); font-size:12px; text-transform:uppercase; margin-bottom:3px; }
.za-price-note { margin-top:18px; padding:14px 16px; background:#fff7f7; border-left:4px solid var(--za-red); }
.za-floorplan h3 { margin-top:0; color:var(--za-navy); }
.za-floorplan-open { padding:0; border:0; background:transparent; cursor:zoom-in; }
.za-floorplan img { width:100%; height:auto; border:1px solid #e2e6ec; border-radius:6px; }
.za-detail-actions { margin-top:30px; display:flex; justify-content:flex-end; }
.za-detail-actions .za-reserve { width:auto; min-width:220px; }

.za-image-lightbox {
    position:fixed; inset:0; z-index:2147483000; display:none; background:rgba(3,12,34,.95);
    align-items:center; justify-content:center; padding:24px;
}
.za-image-lightbox.is-open { display:flex; }
.za-image-lightbox img { max-width:94vw; max-height:90vh; object-fit:contain; }
.za-image-close {
    position:absolute; top:15px; right:18px; width:44px; height:44px; border:0; border-radius:50%;
    background:rgba(255,255,255,.12); color:#fff; font-size:32px; cursor:pointer;
}
body.za-no-scroll { overflow:hidden !important; }

@media (max-width: 1100px) {
    .za-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 767px) {
    .za-grid { grid-template-columns:1fr; }
    .za-section-head h2 { font-size:27px; }
    .za-detail { padding:24px 18px; }
    .za-detail-top { display:block; }
    .za-detail h2 { font-size:30px; }
    .za-detail-meta { margin-top:12px; }
    .za-detail-content { grid-template-columns:1fr; }
    .za-facts { grid-template-columns:1fr; }
    .za-main-photo { min-height:300px; max-height:68vh; }
    .za-main-photo img { max-height:calc(68vh - 20px); }
}


.za-card.is-clickable {
    cursor:pointer;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.za-card.is-clickable:hover,
.za-card.is-clickable:focus-visible {
    transform:translateY(-2px);
    box-shadow:0 10px 28px rgba(7,29,83,.13);
    border-color:rgba(242,30,38,.35);
    outline:none;
}
.za-card.is-clickable:focus-visible {
    box-shadow:0 0 0 3px rgba(242,30,38,.18), 0 10px 28px rgba(7,29,83,.13);
}