/* /properties and /properties/<slug>: the listing and property pages, written
   by the holdings dashboard (netlify/functions/lib/holdings-core.mjs). Layered
   on site.css and property.css. Photos always sit in a fixed frame, so a card
   or a hero never jumps however the original was shot. */

/* ---------- The parcel survey behind both heroes ---------- */
.prop-hero,.props-hero{background-image:url(/assets/properties-motif.svg); background-size:cover; background-position:center;}

/* ---------- Property page hero ---------- */
.prop-hero-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr); gap:clamp(36px, 5vw, 80px); align-items:center;}
.prop-hero h1{max-width:18ch;}
.prop-place{font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--platinum); margin:-6px 0 24px; line-height:1.7;}
.prop-facts{display:flex; flex-wrap:wrap; margin:6px 0 30px; border-top:1px solid var(--rule-dark); border-bottom:1px solid var(--rule-dark); max-width:600px;}
.prop-facts > div{flex:1 1 110px; padding:16px 18px 16px 0; display:flex; flex-direction:column-reverse; gap:6px;}
.prop-facts > div + div{padding-left:18px; border-left:1px solid var(--rule-dark);}
.prop-facts dd{margin:0; font-family:var(--display); font-weight:800; font-size:clamp(24px, 2.6vw, 32px); letter-spacing:-0.03em; line-height:1; color:var(--white);}
.prop-facts dt{font-family:var(--display); font-size:10px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--steel);}
.prop-hero-photo{aspect-ratio:4/3; border:1px solid var(--rule-dark); overflow:hidden; background:var(--panel);}
.prop-hero-photo img{width:100%; height:100%; object-fit:cover; display:block;}
@media (max-width:900px){
  .prop-hero-grid{grid-template-columns:1fr;}
  .prop-hero-photo{order:-1;}
}

/* ---------- No photo: the firm's mark on a panel ---------- */
.prop-nophoto{position:relative; display:flex; align-items:center; justify-content:center; background:var(--panel);}
.prop-nophoto img{width:42%; height:auto; opacity:0.16; object-fit:contain;}
.prop-nophoto span{position:absolute; left:20px; bottom:16px; font-family:var(--display); font-size:10px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--steel);}

/* ---------- Gallery ---------- */
.prop-gallery{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(12px, 1.6vw, 20px);}
.prop-shot{margin:0;}
.prop-shot.wide{grid-column:span 2; grid-row:span 2;}
.prop-shot-link{display:block; position:relative; overflow:hidden; aspect-ratio:3/2; background:var(--rule-light);}
/* The wide cover fills two rows; its photo never sets the row height. */
.prop-shot.wide{display:flex; flex-direction:column;}
.prop-shot.wide .prop-shot-link{aspect-ratio:auto; flex:1 1 auto; min-height:260px;}
.prop-shot-link img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease);}
.prop-shot-link:hover img{transform:scale(1.03);}
.prop-shot-link:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}
.prop-shot figcaption{font-size:13px; line-height:1.5; color:var(--ink-label); padding-top:10px; min-height:24px;}
.prop-shot figcaption b{font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink); margin-right:10px;}
@media (max-width:760px){
  .prop-gallery{grid-template-columns:repeat(2, minmax(0,1fr));}
  .prop-shot.wide{grid-column:1 / -1; grid-row:auto;}
  .prop-shot.wide .prop-shot-link{aspect-ratio:3/2; flex:none; min-height:0;}
}

/* Sold properties follow the current ones without a second full gap. */
.s-white + .s-white.prop-more{padding-top:0;}

/* ---------- About and use ---------- */
.prop-about h2{margin-bottom:26px;}
.prop-description p,.prop-description li{color:var(--ink-body);}
.prop-description h3{margin:30px 0 12px;}
.prop-description ul,.prop-description ol{margin:0 0 20px; padding-left:20px;}
.prop-description li{margin-bottom:8px;}
.prop-description .pullquote{margin:32px 0;}
.prop-highlights{list-style:none; padding:0 !important; border-top:1px solid var(--rule-light);}
.prop-highlights li{padding:12px 0 12px 26px; border-bottom:1px solid var(--rule-light); position:relative; margin:0 !important;}
.prop-highlights li::before{content:""; position:absolute; left:0; top:22px; width:12px; height:1px; background:var(--ink);}
.s-white .specs{border-top-color:var(--rule-light);}
.s-white .specs > div{border-bottom-color:var(--rule-light);}
.s-white .specs dd{color:var(--ink-body);}
.prop-use{font-family:var(--display); font-weight:300; font-size:clamp(20px, 2.1vw, 26px); line-height:1.5; letter-spacing:-0.01em; color:var(--white); margin:0 0 22px; max-width:34ch;}

/* ---------- The /properties listing: cards keep their width however many there are ---------- */
.prop-grid, .s-white .prop-grid{background:none; gap:clamp(20px, 2.6vw, 34px);}
.prop-grid > .prop-card{flex:0 1 360px; border:1px solid var(--rule-light); padding:0;}
.prop-card{display:flex; flex-direction:column; text-decoration:none; color:inherit;}
.prop-card > :not(.prop-card-photo){margin-left:clamp(24px, 2.6vw, 34px); margin-right:clamp(24px, 2.6vw, 34px);}
.prop-card > .cell-num{margin-top:26px; margin-bottom:14px;}
.prop-card-photo{aspect-ratio:3/2; overflow:hidden; background:var(--panel);}
.prop-card-photo img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease);}
.prop-card-photo.prop-nophoto img{width:36%; height:auto; object-fit:contain;}
.prop-card:hover .prop-card-photo img{transform:scale(1.03);}
.prop-card:hover h3{color:var(--slate);}
.prop-card h3{margin-bottom:8px;}
.prop-grid .prop-card p.prop-card-place{font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-label); margin-bottom:14px; line-height:1.6;}
.prop-card-foot{margin-top:auto; padding:22px 0 clamp(24px, 2.6vw, 30px); display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-label);}
.prop-card:focus-visible{outline:2px solid var(--ink); outline-offset:-2px;}
@media (prefers-reduced-motion:reduce){
  .prop-card-photo img,.prop-shot-link img{transition:none;}
  .prop-card:hover .prop-card-photo img,.prop-shot-link:hover img{transform:none;}
}

/* ---------- Lightbox (properties.js) ---------- */
.prop-lightbox{padding:0; border:0; background:transparent; max-width:min(1400px, 94vw); max-height:92vh; overflow:visible;}
.prop-lightbox::backdrop{background:rgba(10,10,10,0.92);}
.prop-lightbox img{display:block; max-width:min(1400px, 94vw); max-height:80vh; width:auto; height:auto; margin:0 auto;}
.prop-lightbox p{color:var(--platinum); font-size:13px; text-align:center; margin:14px 0 0; min-height:20px;}
.prop-lb-bar{display:flex; justify-content:center; gap:10px; margin-top:12px;}
.prop-lb-bar button{font-family:var(--display); font-size:10.5px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--white); background:none; border:1px solid var(--rule-dark); padding:10px 16px; cursor:pointer;}
.prop-lb-bar button:hover,.prop-lb-bar button:focus-visible{border-color:var(--platinum);}

/* ---------- Inquiries (property pages and /properties) ---------- */
.prop-inquire .form{max-width:none; margin:0; width:100%;}
.prop-inquire h2{margin-bottom:22px;}
.prop-inquire .split{align-items:start;}