/* HP Listing Card -- shared premium card styles for every search surface.
 * Tokens are declared ON the card root (.hp-lc-card) so they cannot leak into
 * site chrome. Boxless, photo-forward, width-flexible: the card fills its grid
 * cell, so it works at /buy's 3-col grid AND the narrower map+grid 2-col/1-col
 * pane. Inert unless a .hp-lc-card node exists, so loading it on a page changes
 * nothing until a surface renders cards. Mirrors the /buy results card design
 * (the merged reference) 1:1 -- optional slots simply don't render when absent. */

.hp-lc-card {
	--hp-gold: #EEB211; --hp-gold-text: #C69100; --hp-dark: #212221; --hp-cream: #F5EFE3;
	--hp-gray: #B2B3B2; --hp-taupe: #9B9586; --hp-border: #E8E4D8; --hp-body: #5A5A5A;
	--hp-ink: #3C3C3C; --hp-divider: #F0EDE3; --hp-photo: #F0F0F0; --hp-pos: #2A7A2A; --hp-attn: #C92020;
	position: relative; display: block; text-decoration: none !important; color: inherit;
	font-family: Poppins, sans-serif;
}

/* ---- photo (3:2, rounded) ---- */
.hp-lc-photo { position: relative; width: 100%; padding-bottom: 66%; background: var(--hp-photo); overflow: hidden; border-radius: 10px; }
.hp-lc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.hp-lc-card:hover .hp-lc-img { transform: scale(1.03); }
.hp-lc-noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--hp-photo); color: var(--hp-gray); font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }

/* ---- status pills (top-left overlay) ---- */
.hp-lc-pills { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; max-width: calc(100% - 24px); }
.hp-lc-pill { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 6px 12px; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.15); background: #fff; color: var(--hp-dark); }
.hp-lc-pill-positive { color: var(--hp-pos); }
.hp-lc-pill-attention { color: var(--hp-attn); }
.hp-lc-pill-info { color: var(--hp-dark); }
.hp-lc-pill-muted { background: rgba(255,255,255,.92); color: var(--hp-body); }

/* ---- match-score badge (top-right overlay; dark glass + gold) ---- */
.hp-lc-score { position: absolute; top: 12px; right: 12px; background: rgba(33,34,33,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--hp-gold); font-size: 12px; font-weight: 700; letter-spacing: .3px; padding: 6px 12px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }

/* ---- body ---- */
.hp-lc-body { padding: 16px 2px 0; }
.hp-lc-eyebrow { font-size: 11px; color: var(--hp-gold-text); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin: 0 0 6px; }
.hp-lc-addr { font-size: 18px; font-weight: 700; color: var(--hp-dark); margin: 0 0 4px; line-height: 1.3; }
.hp-lc-city { font-size: 13px; color: var(--hp-body); margin: 0 0 10px; }
.hp-lc-specs { font-size: 15px; color: var(--hp-ink); font-weight: 500; margin: 0; }
.hp-lc-price { color: var(--hp-gold); font-weight: 700; }
.hp-lc-price-suffix { font-size: 12px; font-weight: 600; color: var(--hp-gray); margin-left: 2px; }
.hp-lc-dot { color: var(--hp-gray); margin: 0 8px; }

/* ---- "Satisfies your criteria" why line ---- */
.hp-lc-why { display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px; color: var(--hp-body); line-height: 1.5; margin: 12px 0 0; }
.hp-lc-why-check { color: var(--hp-gold-text); font-weight: 700; flex: 0 0 auto; line-height: 1.5; }
.hp-lc-why-lead { color: var(--hp-dark); font-weight: 600; }

/* ---- CTA ---- */
.hp-lc-cta { display: inline-block; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hp-divider); width: 100%; box-sizing: border-box; font-size: 13px; font-weight: 600; color: var(--hp-gold-text); letter-spacing: .5px; }

/* ---- active (map<->list sync): a quiet gold focus ring, no box fill ---- */
.hp-lc-card.is-active { outline: 2px solid var(--hp-gold); outline-offset: 4px; border-radius: 12px; }