/* ==========================================================================
   The Homes — full properties index (grid + side map), fed live by /listings.php.
   No hero. Matches the site's light-section formatting. Pairs with sr-homes.js
   and vendored Leaflet (assets/vendor/leaflet/). Prefix: hp-
   ========================================================================== */

html{ overflow-x:clip; }
/* gold mobile hamburger (theme default is near-invisible on the dark header) */
.mobile-toggle-open-container .menu-toggle-open,
.mobile-toggle-open-container .menu-toggle-open:focus{ color:#D4BC8A !important; }

.hp{ font-family:'Jost',sans-serif; -webkit-font-smoothing:antialiased; }
.hp *{ box-sizing:border-box; }

.hp-band{ width:100vw; margin-left:calc(50% - 50vw); background:#F5F0E8; padding:52px 25px 72px; }
.hp-inner{ max-width:1300px; margin:0 auto; }

/* header */
.hp-overline{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.hp-overline .r{ width:24px; height:1px; background:#8B6428; }
.hp-overline span{ color:#8B6428; font-size:12px; letter-spacing:2.5px; text-transform:uppercase; font-weight:500; }
.hp-title{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:46px; line-height:1.08; color:#2F2D29; margin:0 0 10px; }
.hp-title em{ font-style:italic; color:#8B6428; }
.hp-sub{ font-size:15px; line-height:1.7; color:#5A4E3C; max-width:640px; margin:0; }

/* toolbar: count + sort + map toggle */
.hp-toolbar{
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
  border-top:1px solid rgba(139,100,40,0.18); border-bottom:1px solid rgba(139,100,40,0.18);
  padding:13px 0; margin:26px 0 24px;
}
.hp-count{ font-size:13px; letter-spacing:1px; text-transform:uppercase; color:#2F2D29; }
.hp-count b{ font-weight:600; }
.hp-tools{ display:flex; align-items:center; gap:20px; }
.hp-tools label{ font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:#8A8070; display:inline-flex; align-items:center; gap:8px; }
.hp-select{ font-family:'Jost',sans-serif; font-size:13px; color:#2F2D29; background:transparent; border:1px solid rgba(139,100,40,0.3); padding:7px 10px; cursor:pointer; }
.hp-maptoggle{ font-family:'Jost',sans-serif; font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:#8B6428; background:none; border:none; cursor:pointer; padding:0; }
.hp-maptoggle:hover{ color:#2F2D29; }

/* split layout: grid | map */
.hp-layout{ display:grid; grid-template-columns:3fr 2fr; gap:30px; align-items:start; }
.hp-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.hp-mapwrap{ position:sticky; top:96px; }
.hp-map{ height:calc(100vh - 140px); min-height:520px; width:100%; background:#e9e2d4; }

/* map hidden -> full-width 3-up grid */
.hp-layout.hp-nomap{ grid-template-columns:1fr; }
.hp-layout.hp-nomap .hp-mapwrap{ display:none; }
.hp-layout.hp-nomap .hp-grid{ grid-template-columns:repeat(3,1fr); }

@media (max-width:1024px){
  .hp-layout{ grid-template-columns:1fr; }
  .hp-mapwrap{ position:static; }
  .hp-map{ height:400px; min-height:0; margin-top:26px; }
  .hp-layout.hp-nomap .hp-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px){
  .hp-grid,
  .hp-layout.hp-nomap .hp-grid{ grid-template-columns:1fr; }
  .hp-title{ font-size:34px; }
}

/* card */
.hp-card a{
  display:flex; flex-direction:column; height:100%; text-decoration:none;
  background:#FFFDF8; border:1px solid rgba(139,100,40,0.18);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.hp-card a:hover,
.hp-card.is-active a{ transform:translateY(-4px); box-shadow:0 16px 38px rgba(47,45,41,0.14); }

.hp-photo{ position:relative; aspect-ratio:3 / 2; background:#e9e2d4 center/cover no-repeat; overflow:hidden; }
.hp-photo:after{ content:''; position:absolute; inset:0; background:linear-gradient(rgba(31,29,24,0.04), rgba(31,29,24,0.24)); }
.hp-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s ease; }
.hp-card a:hover .hp-photo img{ transform:scale(1.05); }
.hp-pricepill{
  position:absolute; left:12px; bottom:12px; z-index:2;
  background:rgba(47,45,41,0.92); color:#F5F0E8; font-size:12.5px; letter-spacing:0.3px;
  padding:5px 10px;
}
.hp-pricepill b{ color:#F5F0E8; font-weight:600; }

.hp-body{ padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; }
.hp-namerow{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.hp-name{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:21px; line-height:1.15; color:#2F2D29; margin:0; }
.hp-rating{ flex:0 0 auto; font-size:12px; color:#8B6428; white-space:nowrap; }
.hp-loc{ font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:#8B6428; margin:5px 0 14px; }
.hp-specs{ display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:#5A4E3C; border-top:1px solid rgba(139,100,40,0.15); padding-top:13px; }
.hp-specs b{ color:#2F2D29; font-weight:600; }
.hp-cta{ margin-top:auto; padding-top:14px; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:#8B6428; display:inline-flex; align-items:center; gap:7px; }
.hp-card a:hover .hp-cta{ color:#2F2D29; }
.hp-cta i{ font-style:normal; transition:transform 0.25s ease; }
.hp-card a:hover .hp-cta i{ transform:translateX(4px); }

/* map price pins (Leaflet divIcon). Outer wrapper takes Leaflet's positioning
   transform; the inner .hp-pin is offset with its own transform so the two
   don't conflict. */
.hp-pinwrap{ width:0; height:0; }
.hp-pin{
  position:absolute; left:0; top:0; transform:translate(-50%,-100%); cursor:pointer;
  background:#2F2D29; color:#D4BC8A; border:1px solid #D4BC8A;
  font-family:'Jost',sans-serif; font-size:12px; font-weight:600; letter-spacing:0.2px;
  padding:3px 8px; white-space:nowrap; box-shadow:0 3px 10px rgba(0,0,0,0.28);
}
.hp-pin.is-active{ background:#D4BC8A; color:#2F2D29; }
.leaflet-popup-content-wrapper{ border-radius:0; }
.leaflet-popup-content{ margin:12px 14px; font-family:'Jost',sans-serif; }
.hp-pop-name{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:17px; color:#2F2D29; margin:0 0 3px; }
.hp-pop-price{ font-size:12px; color:#5A4E3C; margin:0 0 8px; }
.hp-pop-link{ font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:#8B6428; text-decoration:none; }

/* empty / loading */
.hp-empty{ font-size:15px; color:#7A6E5A; line-height:1.7; max-width:560px; margin:20px 0 0; }
.hp-empty a{ color:#8B6428; text-decoration:underline; text-underline-offset:2px; }