/* Dream Home — detail pages (property, project, land, plan): gallery, lightbox, facts, price card, plan viewer. */

.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--space-7); align-items: start; }
.detail-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); min-width: 0; }
.detail-aside { position: sticky; top: calc(var(--header-h) + var(--space-4)); display: grid; gap: var(--space-4); }
@media (max-width: 1023px) { .detail-layout { grid-template-columns: minmax(0, 1fr); } .detail-aside { position: static; } }
.detail-block > h2 { font-size: 24px; line-height: 36px; margin-bottom: var(--space-4); }
.detail-block > .block-lead { margin-top: calc(var(--space-3) * -1); margin-bottom: var(--space-4); color: var(--ink-muted); }
.detail-desc { font-size: 17px; line-height: 30px; color: var(--ink); }
.detail-desc p + p { margin-top: var(--space-3); }

/* Page-hero meta badges on dark band */
.page-hero .dh-badge { box-shadow: none; }
.hero-meta-item { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--on-deep-muted); font-size: 15px; }
.hero-meta-item .dh-icon { color: var(--sand); }

/* ---- Gallery ---- */
.gallery { display: grid; gap: var(--space-3); }
.gallery-main { position: relative; margin: 0; aspect-ratio: 16 / 10; background: var(--surface-sunken); box-shadow: var(--shadow-sm); }
.gallery-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gallery-open img { width: 100%; height: 100%; object-fit: cover; }
.gallery--poster .gallery-main { aspect-ratio: auto; max-height: 720px; }
.gallery--poster .gallery-open img { object-fit: contain; max-height: 720px; height: auto; margin-inline: auto; }
.gallery-count, .gallery-zoom { position: absolute; z-index: 2; inset-block-end: var(--space-3); display: inline-flex; align-items: center; gap: var(--space-1); padding: 4px var(--space-3); border-radius: var(--radius-full); background: var(--scrim); color: #fff; font-size: 13px; font-weight: 600; pointer-events: none; }
.gallery-count { inset-inline-end: var(--space-3); }
.gallery-zoom { inset-inline-end: auto; inset-inline-start: var(--space-3); width: 36px; height: 36px; padding: 0; justify-content: center; }
.gallery-main .media-note { inset-block-end: auto; inset-block-start: var(--space-3); inset-inline-start: auto; inset-inline-end: var(--space-3); }
.gallery-thumbs { display: flex; gap: var(--space-3); overflow-x: auto; }
.gallery-thumb { flex: none; width: 96px; aspect-ratio: 4 / 3; padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-sunken); cursor: pointer; opacity: .7; transition: opacity .15s ease, border-color .15s ease; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb.is-active, .gallery-thumb:hover { opacity: 1; border-color: var(--brand); }
.no-media { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); aspect-ratio: 16 / 9; padding: var(--space-6); text-align: center; color: var(--ink-muted); background: var(--surface-sunken); border: 1.5px dashed var(--line-strong); }
.no-media img { width: 72px; opacity: .45; }

/* ---- Lightbox ---- */
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(9, 13, 38, .94); color: #fff; overflow: hidden; }
.lightbox::backdrop { background: rgba(9, 13, 38, .6); }
body.lb-open { overflow: hidden; }
.lb-stage { position: absolute; inset: 0 0 72px; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; cursor: zoom-in; }
.lightbox.is-zoomed .lb-stage { cursor: grab; }
.lb-stage.is-dragging { cursor: grabbing; }
.lb-img { max-width: 92vw; max-height: calc(100vh - 120px); object-fit: contain; transform-origin: center; transition: transform .2s ease; user-select: none; -webkit-user-drag: none; }
.lb-stage.is-dragging .lb-img { transition: none; }
.lb-watermark { position: absolute; inset-block-end: var(--space-5); inset-inline-start: var(--space-5); display: flex; align-items: center; gap: var(--space-2); opacity: .75; font-weight: 600; font-size: 14px; pointer-events: none; }
.lb-watermark img { width: 28px; }
.lb-bar { position: absolute; inset-inline: 0; bottom: 0; height: 72px; display: flex; align-items: center; justify-content: center; gap: var(--space-2); background: rgba(9, 13, 38, .9); }
.lb-bar .icon-btn { color: #fff; }
.lb-count { min-width: 64px; text-align: center; font-weight: 600; }
.lb-sep { width: 1px; height: 24px; background: rgba(255, 255, 255, .25); margin-inline: var(--space-2); }
.lb-prev { transform: scaleX(-1); }
[dir="ltr"] .lb-prev { transform: none; }
[dir="ltr"] .lb-bar [data-lb="prev"] .dh-icon-dir { transform: none; }
[dir="ltr"] .lb-bar [data-lb="next"] .dh-icon-dir { transform: scaleX(-1); }

/* ---- Price / contact card ---- */
.price-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); border-start-start-radius: var(--radius-roof); box-shadow: var(--shadow-md); overflow: hidden; }
.price-card-head { padding: var(--space-5) var(--space-5) var(--space-4); }
.price-note { font-size: 13px; line-height: 20px; color: var(--ink-muted); font-weight: 500; }
.price-value { display: block; font-family: var(--font-display); font-size: 30px; line-height: 42px; font-weight: 700; color: var(--ink); }
.price-flags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.price-card-body { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5) var(--space-5); border-top: 1px solid var(--line); }
.price-card-body h3 { font-size: 17px; line-height: 26px; }
.price-card-body p { font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.price-card-foot { display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-5); background: var(--surface-sunken); font-size: 13px; color: var(--ink-muted); }
.price-unconfirmed { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 13px; line-height: 20px; color: var(--reserved); margin-top: var(--space-2); }
.price-unconfirmed .dh-icon { flex: none; margin-top: 1px; }
.aside-links { display: grid; gap: var(--space-2); }

/* ---- Units table ---- */
.units-table td:first-child { font-weight: 600; }

/* ---- Warranty grid ---- */
.warranty-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); }
.warranty { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); font-weight: 500; line-height: 24px; }
.warranty .svc-icon { width: 44px; height: 44px; }
.warranty--sand .svc-icon { background: var(--sand-soft); color: var(--sand-ink); }

/* ---- Plan viewer ---- */
.plan-viewer { position: relative; overflow: hidden; background: var(--surface-sunken); border: 1px solid var(--line); }
.plan-viewer svg { display: block; width: 100%; height: auto; }
.plan-viewer .pv-watermark { position: absolute; inset-block-end: var(--space-4); inset-inline-end: var(--space-4); display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--surface-raised); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.plan-viewer .pv-watermark img { width: 22px; }
.plan-pending { margin-top: var(--space-3); }

/* ---- Map ---- */
.map-frame { position: relative; aspect-ratio: 16 / 9; background: var(--surface-sunken); border: 1px solid var(--line); }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Not found ---- */
.not-found { text-align: center; padding-block: var(--space-9); }
.not-found h1 { font-size: clamp(28px, 4vw, 40px); }
.not-found p { margin-top: var(--space-3); color: var(--ink-muted); }
.not-found .cluster { justify-content: center; margin-top: var(--space-6); }
.nf-code { font-family: var(--font-display); font-size: clamp(80px, 14vw, 160px); line-height: 1; font-weight: 700; color: var(--brand-soft); -webkit-text-stroke: 2px var(--brand); }

/* ---- Content pages (about, legal) ---- */
.lic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.lic-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); border-start-start-radius: var(--radius-roof); box-shadow: var(--shadow-sm); }
.lic-card .svc-icon { background: var(--available-soft); color: var(--available); }
.lic-card .lic-label { color: var(--ink-muted); font-size: 14px; }
.lic-card .lic-value { font-family: var(--font-display); font-size: 26px; line-height: 36px; font-weight: 700; }
@media (max-width: 767px) { .lic-grid { grid-template-columns: 1fr; } }
.area-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.area-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-full); font-weight: 600; }
.area-chip .dh-icon { color: var(--brand); }
.legal-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.legal-toc { position: sticky; top: calc(var(--header-h) + var(--space-4)); display: grid; gap: var(--space-1); font-size: 14px; }
.legal-toc a { display: block; padding: var(--space-2) var(--space-3); border-inline-start: 2px solid var(--line); color: var(--ink-muted); text-decoration: none; }
.legal-toc a:hover { color: var(--brand); border-color: var(--brand); }
@media (max-width: 899px) { .legal-layout { grid-template-columns: 1fr; } .legal-toc { position: static; } }
.cta-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-6); background: var(--brand-soft); border-radius: var(--radius-md); border-start-start-radius: var(--radius-roof); }
.cta-strip h2 { font-size: 24px; line-height: 36px; }
.cta-strip p { color: var(--ink-muted); }