/* LPJH Properties (VRP results) — assets/css/properties.css
   Enqueue AFTER brand-tokens.css, homepage.css and location.css: reuses .hp bands,
   .loc-crumb, buttons and hairlines. Tokens only.

   The filter bar offsets against --lpjh-hd-sticky-h from header.css.
   The final block neutralises the plugin's own abe-* styles — see the comment there.
*/
/* ============================================================
   LPJH — Properties (VRP search results)
   After homepage.css + location.css. Reuses .hp bands, hairlines and the
   homepage residence-card treatment. Prefix: .pr-
   NOTE: production must ALSO keep the plugin's .abe-* hooks. See the handoff.
   ============================================================ */

/* ---------- MASTHEAD ---------- */
.pr-mast{background:var(--tr-charcoal);padding:10rem 0 3rem;border-bottom:1px solid rgba(255,255,255,.14)}
.pr-mast__grid{display:grid;grid-template-columns:1.5fr 1fr;gap:4rem;align-items:end}
.pr-mast__h1{margin:0;font-family:var(--tr-font-display);font-size:3.8rem;font-weight:500;line-height:1;letter-spacing:-.02em;color:var(--tr-cream)}
.pr-mast__line{margin:1.1rem 0 0;font-family:var(--tr-font-display);font-size:1.25rem;font-style:italic;line-height:1.45;color:rgba(250,250,248,.76);max-width:28em;text-wrap:pretty}
.pr-mast__count{font-family:var(--tr-font-body);font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tr-gold-pale);text-align:right}

/* ---------- FILTER BAR ---------- */
.pr-bar{position:sticky;top:var(--lpjh-hd-sticky-h,3.7rem);z-index:39;background:var(--tr-cream);border-bottom:1px solid var(--tr-border)}
.pr-bar__inner{display:flex;align-items:stretch;gap:0;flex-wrap:wrap}
.pr-f{display:flex;flex-direction:column;justify-content:center;gap:.1rem;flex:1 1 0;min-width:8rem;padding:.45rem 1.25rem;border-left:1px solid var(--tr-border);box-sizing:border-box}
.pr-bar__inner>.pr-f:first-child{padding-left:0;border-left:0}
.pr-f__l{font-family:var(--tr-font-body);font-size:.56rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tr-stone-400)}
.pr-f select,.pr-f input{width:100%;padding:0;background:none;border:0;border-radius:0;font-family:var(--tr-font-display);font-size:.95rem;font-weight:500;letter-spacing:-.01em;color:var(--tr-heading);cursor:pointer;line-height:1.3}
.pr-f select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--tr-stone-400) 50%),linear-gradient(135deg,var(--tr-stone-400) 50%,transparent 50%);background-position:calc(100% - 9px) .35rem,calc(100% - 5px) .35rem;background-size:4px 4px,4px 4px;background-repeat:no-repeat;padding-left:.4rem;padding-right:1.25rem}
.pr-f select:focus,.pr-f input:focus{outline:none;color:var(--tr-accent)}
.pr-bar__act{display:flex;align-items:center;flex:0 0 auto;padding-left:1.25rem;border-left:1px solid var(--tr-border)}
.pr-bar__map{display:flex;align-items:center;gap:.6rem;flex:0 0 auto;padding:0 0 0 1.25rem;border-left:1px solid var(--tr-border);font-family:var(--tr-font-body);font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tr-stone-500);cursor:pointer}
.pr-toggle{position:relative;width:2.4rem;height:1.1rem;background:var(--tr-linen);border:1px solid var(--tr-border);flex:0 0 auto;transition:background-color .26s ease,border-color .26s ease}
.pr-toggle::after{content:"";position:absolute;top:1px;left:1px;width:.85rem;height:.85rem;background:var(--tr-stone-400);transition:transform .26s cubic-bezier(.19,1,.22,1),background-color .26s ease}
.pr-bar__map input{position:absolute;opacity:0;width:0;height:0}
.pr-bar__map input:checked+.pr-toggle{background:var(--tr-accent);border-color:var(--tr-accent)}
.pr-bar__map input:checked+.pr-toggle::after{transform:translateX(1.3rem);background:var(--tr-on-accent)}
.pr-bar__map input:focus-visible+.pr-toggle{outline:2px solid var(--tr-focus);outline-offset:2px}

/* ---------- 30-NIGHT NOTE ---------- */
.pr-note{background:var(--tr-linen);border-bottom:1px solid var(--tr-border)}
.pr-note__in{display:flex;align-items:flex-start;gap:1rem;padding:1rem 0}
.pr-note__in i{flex:0 0 auto;margin-top:.15rem;font-size:.85rem;color:var(--tr-accent)}
.pr-note__in p{margin:0;font-family:var(--tr-font-body);font-size:.82rem;line-height:1.65;color:var(--tr-text);max-width:64em;text-wrap:pretty}

/* ---------- SPLIT ---------- */
.pr-split{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:start}
/* The list owns the left gutter itself so the cards start at the page margin —
   .hp__rail's centring would otherwise leave dead space between the margin and
   the first card. */
.pr-list{padding:2.5rem 2.5rem 2.5rem max(2rem,calc((100vw - 1360px) / 2 + 2rem))}
.pr-map{position:sticky;top:calc(var(--lpjh-hd-sticky-h,3.7rem) + 4.4rem);height:calc(100vh - var(--lpjh-hd-sticky-h,3.7rem) - 4.4rem);border-left:1px solid var(--tr-border);background:var(--tr-linen)}
[data-map="off"] .pr-split{grid-template-columns:1fr}
[data-map="off"] .pr-map{display:none}
[data-map="off"] .pr-list{padding-left:max(2rem,calc((100vw - 1360px) / 2 + 2rem));padding-right:max(2rem,calc((100vw - 1360px) / 2 + 2rem))}
/* Map off gives the row its full width, so the image can take more of it. */
[data-map="off"] .pr-card{grid-template-columns:1.4fr 1fr;gap:2.5rem}
.pr-map__canvas{width:100%;height:100%}
[data-basemap="osm"] .pr-map__canvas .leaflet-tile-pane{filter:grayscale(1) contrast(.9) brightness(1.06)}
.pr-map__canvas .leaflet-container{font-family:var(--tr-font-body);background:var(--tr-linen)}
.pr-map__canvas .leaflet-control-attribution{font-size:9px;background:rgba(250,250,248,.86);color:var(--tr-stone-500)}
.pr-map__canvas .leaflet-control-attribution a{color:var(--tr-stone-500)}
.pr-map__canvas .leaflet-bar{border:1px solid var(--tr-border);border-radius:0;box-shadow:none}
.pr-map__canvas .leaflet-bar a{border-radius:0;color:var(--tr-heading);border-bottom-color:var(--tr-border)}
.pr-map__canvas .leaflet-bar a:hover{background:var(--tr-linen);color:var(--tr-accent)}

/* ---------- CARDS ----------
   ONE PER ROW: a wide landscape image beside the details. Two-up in a half-width
   column made the images too small to read as luxury photography, which is the
   only thing that sells a residence. */
.pr-grid{display:grid;grid-template-columns:1fr;gap:2.5rem}
.pr-card{display:grid;grid-template-columns:1.15fr 1fr;gap:2rem;align-items:center;text-decoration:none;transition:opacity .26s ease}
.pr-card__media{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--tr-linen);margin-bottom:0}
.pr-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.19,1,.22,1)}
.pr-card:hover .pr-card__media img{transform:scale(1.04)}
.pr-card__tag{position:absolute;left:0;bottom:0;padding:.45rem .8rem;background:var(--tr-charcoal);font-family:var(--tr-font-body);font-size:.56rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tr-gold-pale)}
.pr-card__body{display:block;min-width:0}
.pr-card__place{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 .4rem;font-family:var(--tr-font-body);font-size:.58rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tr-accent)}
.pr-card__rating{color:var(--tr-stone-400);white-space:nowrap}
.pr-card__rating i{font-size:.6rem;color:var(--tr-accent);margin-right:.25rem}
.pr-card__name{margin:0 0 .7rem;font-family:var(--tr-font-display);font-size:1.75rem;font-weight:500;line-height:1.12;letter-spacing:-.015em;color:var(--tr-heading);transition:color .26s ease;text-wrap:pretty}
.pr-card:hover .pr-card__name{color:var(--tr-accent)}
.pr-card__meta{display:flex;flex-wrap:wrap;gap:.9rem;margin:0 0 .7rem;font-family:var(--tr-font-body);font-size:.76rem;color:var(--tr-text-muted)}
.pr-card__meta i{margin-right:.35rem;color:var(--tr-stone-400)}
.pr-card__foot{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-top:.7rem;border-top:1px solid var(--tr-border)}
.pr-card__rate{margin:0;font-family:var(--tr-font-body);font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--tr-heading)}
.pr-card__rate span{font-weight:500;color:var(--tr-text-muted)}
.pr-card__rate em{font-style:italic;font-family:var(--tr-font-display);font-size:1rem;font-weight:500;color:var(--tr-text-muted)}
.pr-card__go{flex:0 0 auto;font-family:var(--tr-font-body);font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--tr-accent)}
.pr-card.is-dim{opacity:.35}

/* Map pin */
.pr-pin{display:grid;place-items:center;min-width:1.6rem;height:1.6rem;padding:0 .3rem;background:var(--tr-charcoal);color:var(--tr-cream);font-family:var(--tr-font-body);font-size:.6rem;font-weight:600;border:1px solid var(--tr-charcoal);transition:background-color .2s ease,border-color .2s ease}
.pr-pin.is-active{background:var(--tr-accent);border-color:var(--tr-accent);color:var(--tr-on-accent)}

/* ---------- EMPTY ---------- */
.pr-empty{max-width:44em;padding:3.5rem 0}
.pr-empty__h{margin:0 0 1.1rem;font-family:var(--tr-font-display);font-size:2.2rem;font-weight:500;line-height:1.1;letter-spacing:-.015em;color:var(--tr-heading)}
.pr-empty__p{margin:0 0 2rem;font-family:var(--tr-font-body);font-size:.98rem;line-height:1.8;color:var(--tr-text-muted);text-wrap:pretty}
.pr-empty__acts{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1100px){
  .pr-mast{padding:8.5rem 0 2.5rem}
  .pr-mast__grid{grid-template-columns:1fr;gap:1.5rem;align-items:start}
  .pr-mast__count{text-align:left}
  .pr-mast__h1{font-size:2.8rem}
  /* Deliberate stacked bar: filters two-up, then the actions on their own row.
     Left to wrap on its own the toggle stranded itself under the button. */
  .pr-f{flex:1 1 50%;min-width:0}
  .pr-bar__act{flex:1 1 auto;padding:.85rem 0 0;border-left:0;border-top:1px solid var(--tr-border)}
  .pr-bar__map{flex:0 0 auto;padding:.85rem 0 0 1.25rem;border-left:0;border-top:1px solid var(--tr-border)}
  .pr-split{grid-template-columns:1fr}
  .pr-list{padding:2rem}
  .pr-map{position:relative;top:auto;height:420px;border-left:0;border-top:1px solid var(--tr-border);order:-1}
  .pr-grid{gap:2.25rem}
}
@media (max-width:899px){
  .pr-mast{padding:7.5rem 0 2rem}
  .pr-mast__h1{font-size:2.2rem}
  .pr-mast__line{font-size:1.05rem}
  /* The full filter form is too tall to sit sticky on a phone — let it scroll away. */
  .pr-bar{position:static;top:auto}
  .pr-list{padding:1.5rem}
  .pr-bar__inner{gap:0}
  .pr-f{flex:1 1 50%;min-width:0;padding:.75rem 1rem}
  .pr-f:nth-child(odd){padding-left:0;border-left:0}
  .pr-f:nth-child(n+3){border-top:1px solid var(--tr-border)}
  /* Search + Map share one row: map hugs the left, Search pushed to the right. */
  .pr-bar__map{flex:0 0 auto;order:1;padding:.85rem 0 0;border-left:0;border-top:1px solid var(--tr-border)}
  .pr-bar__act{flex:0 0 auto;order:2;margin-left:auto;padding:.85rem 0 0;border-left:0;border-top:1px solid var(--tr-border)}
  .pr-map{height:300px}
  .pr-card,[data-map="off"] .pr-card{grid-template-columns:1fr;gap:1.1rem}
  .pr-card__name{font-size:1.5rem}
  .pr-grid{gap:2rem}
  .pr-empty__h{font-size:1.7rem}
}

/* ---------- PLUGIN CSS OVERRIDES ----------
   VRPConnector's abe stylesheet styles .abe-item, .abe-image, .abe-rate and
   .unit-list. Those classes are KEPT on our markup so the plugin's JS still works,
   which means its CSS also still applies. Reset only what conflicts.

   If the dev team dequeues the plugin's results stylesheet entirely, this block can
   go — see SCOPE-FOR-DEV.md §1. */
.pr .abe-item{width:auto;max-width:none;margin:0;padding:0;border:0;background:none;box-shadow:none;float:none;display:grid}
.pr .abe-image{width:auto;height:auto;margin:0;padding:0}
.pr .abe-rate{margin:0;padding-top:.7rem;font-size:inherit}
.pr .unit-list{flex:none;max-width:none;display:grid}
.pr .abe-row{display:block;margin:0}
.pr .abe-column{padding:0;max-width:none;flex:none}

/* ---------- STICKY ENABLER ----------
   The sticky filter bar (.pr-bar) and sticky map (.pr-map) need a scroll container
   they can stick within. Cassio's .page-wrapper / .page-wrapper__content are
   overflow:hidden — non-scrolling scroll containers that kill position:sticky.
   overflow:clip clips identically but is NOT a scroll container, so sticky resolves
   against the viewport. ABE/VRP pages already run native scroll ($IsItABEPage
   excludes them from the smooth-scrollbar in header.php), so no native-scroll change
   is needed here — only the overflow. Scoped to body.lpjh-vrp (added in
   lpjh-properties-enqueue.php). Same fix as Join / JH Insights / Contact. */
body.lpjh-vrp .page-wrapper,
body.lpjh-vrp .page-wrapper__content{overflow:clip}

/* The plugin renders its own [vrpResultsSearchForm] jumbo search bar above the
   results (outside this template). The sticky .pr-bar replaces it, so hide the
   duplicate on this route. Its datepicker classes live on .pr-bar too, so the
   date pickers still bind. */
body.lpjh-vrp .abe-jumbo{display:none}

/* ---------- DE-BOX THE PLUGIN WRAPPER ----------
   ABEConnector wraps the route in .abe-inner-container with ~120px horizontal
   padding. The redesign is full-bleed by design — .pr-mast/.pr-bar centre their
   own content with .hp__rail, and .pr-list aligns cards to a 1200px column using
   100vw math that only works when .pr spans the whole viewport. Zero the wrapper's
   padding/limits on this route so the charcoal masthead and split go edge-to-edge. */
body.lpjh-vrp .abe-inner-container{padding:0;max-width:none}
body.lpjh-vrp .vrp_main,
body.lpjh-vrp .section.bg-white{padding:0;margin:0;max-width:none;background:none}

/* ---------- KILL THE STUCK LOADER ----------
   #loadingicons ("Fetching the portfolio") was hidden by the plugin's
   resultsListMap(), which we dequeue. Results are server-rendered, so the loader
   is never needed here — force it off so it can't get stuck visible. */
body.lpjh-vrp #loadingicons,
body.lpjh-vrp .results-loader{display:none !important}

/* Cassio renders its own page masthead (.section-masthead — hero image + "Search
   Results" + breadcrumb) above the plugin content. The redesign's charcoal
   .pr-mast ("The Portfolio") replaces it, so hide the duplicate on this route. */
body.lpjh-vrp .section-masthead{display:none}

/* ---------- WIN THE LAYOUT CONTAINERS OVER THE PLUGIN abe STYLESHEET ----------
   The handoff reset neutralised .abe-item/.abe-image/.abe-rate, but the plugin's
   css.css ALSO styles the LAYOUT containers this template reuses — .abe-row (on
   .pr-split), #map-container (on .pr-map) and #abe-result-container (on .pr-grid) —
   with float/width/display that overrode the CSS grid and dropped the map to a
   full-width row below the cards. These win them back. */
.pr .pr-split{display:grid !important}
.pr #map-container.pr-map{float:none !important;width:auto !important;max-width:none !important;min-width:0}
.pr #abe-result-container{display:grid !important;float:none !important;width:auto !important;max-width:none !important}

/* ---------- REVEAL THE LIST + MAP (the blank-white bug) ----------
   The plugin's abe stylesheet starts .unit-list (#abe-result-container) and the map
   (#map-container) at opacity:0 and fades them in inside resultsListMap()/the loader
   JS — which we dequeue. On a server-rendered page nothing runs to reveal them, so
   they stayed invisible and the whole split read as blank white. Force them visible. */
body.lpjh-vrp #abe-result-container,
body.lpjh-vrp .unit-list,
body.lpjh-vrp #map-container.pr-map{opacity:1 !important}

/* ---------- SLEEKER STICKY BAR + NOTE TWEAKS (client request) ----------
   Slimmer filter cells (padding cut above) + a shorter Search button so the whole
   .pr-bar reads as a thin sleek strip when pinned. And force the note paragraph's
   margin to 0 — Cassio's global `p` margin-bottom was overriding .pr-note__in p. */
.pr-bar__act .hp__btn{height:2.4rem;padding:0 1.5rem}
.pr-bar__map{align-self:center}
body.lpjh-vrp .pr-note__in p{margin:0 !important}
.pr-note--below{border-top:1px solid var(--tr-border);border-bottom:0}
/* The plugin's .abe-flex-form (our .pr-bar__inner also carries the class for its
   datepicker JS) adds form padding/min-height that inflated the sticky bar by ~40px.
   Reset it so the bar is only as tall as its fields — the sleek strip we want. */
.pr .pr-bar__inner.abe-flex-form{padding:0 !important;margin:0 !important;min-height:0 !important}