/* Listing detail pages. Builds on site.css (home page styles) with the same tokens. */

/* full-bleed photo hero */
.lhero{position:relative;min-height:92vh;display:flex;align-items:flex-end;color:var(--cream);background:var(--ink2);overflow:hidden;padding:180px 0 70px}
.lhero .lbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 2.4s var(--ease)}
.ready .lhero .lbg{transform:scale(1)}
.lhero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,21,40,.55) 0%,rgba(10,21,40,.08) 28%,rgba(10,21,40,.4) 55%,rgba(10,21,40,.92) 100%)}
.lhero .wrap{position:relative;z-index:2;width:100%}
.crumbs{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(246,242,234,.8);display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.crumbs a:hover{color:var(--gold2)}
.crumbs i{width:5px;height:5px;border:1px solid var(--gold2);transform:rotate(45deg);display:inline-block}
.lhero h1{font-size:clamp(40px,6vw,92px);margin:24px 0 12px;text-transform:uppercase;letter-spacing:.06em}
.lhero .where{font-size:12px;letter-spacing:.3em;text-transform:uppercase;opacity:.85}
.lhero .row{display:flex;justify-content:space-between;align-items:end;gap:40px;flex-wrap:wrap;margin-top:44px;padding-top:32px;border-top:1px solid rgba(246,242,234,.25)}
.lhero .price{font-family:var(--serif);font-size:clamp(40px,4.4vw,62px);font-weight:300;line-height:1}
.lhero .price small{font-family:var(--sans);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold2);display:block;margin-bottom:12px}
.lhero .specs{display:flex;flex-wrap:wrap}
.lhero .specs div{padding:0 30px;border-left:1px solid rgba(246,242,234,.25)}
.lhero .specs div:first-child{border-left:none;padding-left:0}
.lhero .specs b{display:block;font-family:var(--serif);font-weight:300;font-size:34px;line-height:1}
.lhero .specs span{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;opacity:.75}
.badge{display:inline-block;background:var(--gold);color:#fff;font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;padding:8px 14px;font-weight:600}
.badge.live{background:rgba(15,29,52,.6);border:1px solid rgba(246,242,234,.4);backdrop-filter:blur(6px);color:var(--cream)}

/* gallery mosaic */
.gal{padding:90px 0 0;background:var(--paper)}
.mosaic{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:290px 290px;gap:10px;position:relative}
.mosaic button{position:relative;overflow:hidden;background:var(--navy2);padding:0}
.mosaic button img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--ease)}
.mosaic button:hover img{transform:scale(1.05)}
.mosaic button:first-child{grid-row:span 2}
.mosaic.n1{grid-template-columns:1fr;grid-template-rows:560px}
.mosaic.n2{grid-template-columns:1fr 1fr;grid-template-rows:460px}.mosaic.n2 button:first-child{grid-row:auto}
.mosaic.n3{grid-template-columns:2fr 1fr}.mosaic.n4{grid-template-columns:2fr 1fr 1fr}.mosaic.n4 button:nth-child(4){grid-column:span 2}
.mosaic .allph{position:absolute;right:22px;bottom:22px;background:rgba(251,249,245,.95);color:var(--navy);font-size:10px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;padding:15px 22px;display:flex;align-items:center;gap:10px;transition:all .4s var(--ease);z-index:2}
.mosaic .allph:hover{background:var(--gold);color:#fff}

/* body */
.lbody{padding:110px 0 140px}
.lgrid{display:grid;grid-template-columns:1.25fr .85fr;gap:100px;align-items:start}
.lbody h2{font-size:clamp(36px,4vw,56px);margin-top:24px}
.desc{margin-top:30px}
.desc p{font-size:15.5px;line-height:2;color:var(--body);font-weight:300;margin-bottom:20px}
.facts{margin-top:64px}
.facts h3{font-size:clamp(26px,2.4vw,34px);margin-bottom:18px;text-transform:uppercase;letter-spacing:.06em}
.facts dl{display:grid;grid-template-columns:1fr 1fr;column-gap:44px}
.facts dl div{display:flex;justify-content:space-between;gap:20px;padding:17px 0;border-bottom:1px solid var(--line);font-size:14px}
.facts dt{color:var(--muted);font-size:10px;letter-spacing:.24em;text-transform:uppercase;padding-top:2px}
.facts dd{text-align:right;font-weight:500}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:70px}
.thumbs button{aspect-ratio:4/3;overflow:hidden;background:var(--navy);padding:0}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--ease),opacity .4s}
.thumbs button:hover img{transform:scale(1.07);opacity:.85}
.side{position:sticky;top:110px}
.lform{min-height:0}
.lform h3{font-size:36px;margin-bottom:10px}
.lform .sub{font-size:13.5px;line-height:1.8;opacity:.65;margin-bottom:34px;font-weight:300}
.lform .btn{width:100%;margin-top:10px}
.lform .direct{margin-top:26px;padding-top:22px;border-top:1px solid var(--lineL);display:flex;justify-content:space-between;font-size:13px}
.lform .direct span{opacity:.6;font-size:10px;letter-spacing:.24em;text-transform:uppercase}
.lform .direct a{color:var(--gold2)}
.lform .thanks{display:none;padding:30px 0 10px}
.lform.done .thanks{display:block}.lform.done .fields{display:none}
.agents{margin-top:24px;font-size:12px;color:var(--muted);line-height:1.8}
.agents b{color:var(--ink);font-weight:500}
.disc{font-size:11px;color:var(--muted);line-height:1.8;margin-top:50px;padding-top:24px;border-top:1px solid var(--line)}

/* prev / next */
.pn{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.pn a{padding:56px 48px;display:flex;flex-direction:column;gap:12px;transition:background .5s var(--ease)}
.pn a+a{border-left:1px solid var(--line);text-align:right;align-items:flex-end}
.pn a:hover{background:var(--cream)}
.pn small{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.pn b{font-family:var(--serif);font-weight:300;font-size:30px;text-transform:uppercase;letter-spacing:.05em}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(10,21,40,.97);z-index:95;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.lb.on{opacity:1;visibility:visible}
.lb img{max-width:88vw;max-height:80vh;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.4);transition:opacity .35s}
.lb .x,.lb .pv,.lb .nx{position:absolute;color:var(--cream);width:56px;height:56px;border:1px solid var(--lineL);display:grid;place-items:center;font-size:18px;transition:all .4s}
.lb .x:hover,.lb .pv:hover,.lb .nx:hover{background:var(--gold);border-color:var(--gold)}
.lb .x{top:26px;right:26px}.lb .pv{left:26px;top:50%;transform:translateY(-50%)}.lb .nx{right:26px;top:50%;transform:translateY(-50%)}
.lb .cnt{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);color:var(--cream);font-size:11px;letter-spacing:.3em;opacity:.7}

@media(max-width:1000px){
  .lhero{min-height:86vh;padding:130px 0 44px}
  .lhero .specs div{padding:0 16px}.lhero .specs b{font-size:26px}
  .gal{padding:24px 0 0}
  .mosaic,.mosaic.n2,.mosaic.n3,.mosaic.n4{grid-template-columns:1fr;grid-template-rows:300px}
  .mosaic button:not(:first-child):not(.allph){display:none}.mosaic button:first-child{grid-row:auto}
  .mosaic.n1{grid-template-rows:300px}
  .lbody{padding:70px 0 100px}
  .lgrid{grid-template-columns:1fr;gap:60px}
  .side{position:static}
  .facts dl{grid-template-columns:1fr}
  .pn a{padding:34px 20px}.pn b{font-size:20px}
  .lb .pv,.lb .nx{top:auto;bottom:18px;transform:none}.lb .cnt{bottom:36px}
}