/* ============================================================================
   pd2-listings.css — the two v2 listing pages
     A. Lister listings   (/listerproperties/{user_id})
     B. Similar properties (/similar-properties/{property_id})

   Design source: website html/index/property-listings-v3.html
   PREFIX RULE — every selector starts with `.pl2-`. Tokens come from
   pd2-tokens.css (loaded alongside), so no colour/radius/shadow is hardcoded
   where a token exists.

   SPECIFICITY NOTE — pd2-tokens.css resets buttons and links with
   `.pd2-root button` / `.pd2-root a` (0,1,1). A bare single-class rule (0,1,0)
   loses to those, so anything styling a <button> or <a> here is written as a
   two-class descendant (0,2,0).
   ========================================================================== */

.pl2-page{padding-bottom:64px}

/* ============================================================================
   ANCHOR HOVER GUARD — do not remove.

   The site wraps its pages in .hp-preview, and style1.css carries
       .hp-preview a:hover { color:#d63e08 }
   at specificity (0,2,1). Every component here that is an <a> loses to that:
     - the header CTA turned #d63e08 ON an orange background, i.e. the label
       vanished on hover (this is the bug that was reported);
     - the property cards are anchors, so hovering a card recoloured its title,
       address and facts, all of which inherit;
     - the radius chips, pager links, "View original" and the empty-state CTA
       all had the same problem.

   Each rule below restates the hover colour at (0,3,0) by scoping under
   .pd2-root, which beats (0,2,1) without !important. Any NEW anchor added to
   these pages needs an entry here too.
   ========================================================================== */
.pd2-root .pl2-cta .pl2-btn:hover{color:#fff}
.pd2-root .pl2-cta .pl2-btn-ghost:hover{color:var(--pd2-ink)}
.pd2-root .pl2-empty .pl2-btn:hover{color:#fff}
.pd2-root .pl2-grid .pl2-card:hover{color:var(--pd2-ink)}
.pd2-root .pl2-src .pl2-src-view:hover{color:var(--pd2-accent)}
.pd2-root .pl2-radius .pl2-rchip:hover{color:var(--pd2-ink-2)}
.pd2-root .pl2-radius .pl2-rchip.pl2-on:hover{color:var(--pd2-accent-ink)}
.pd2-root .pl2-pager .pl2-pg:hover{color:var(--pd2-ink)}
.pd2-root .pl2-pager .pl2-pg.pl2-on:hover{color:var(--pd2-accent-ink)}

/* ---------------------------------------------------------- lister header -- */
.pl2-lister{
  display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;
  border:1px solid var(--pd2-line);border-radius:var(--pd2-r-xl);padding:24px;
  background:linear-gradient(180deg,var(--pd2-bg-soft),var(--pd2-bg) 70%);margin-top:8px;
}
.pl2-lister-av{width:84px;height:84px;border-radius:50%;object-fit:cover;background:var(--pd2-bg-sunk);flex:none}
.pl2-lister-name{font-family:var(--pd2-font-display);font-size:25px;font-weight:700;letter-spacing:-.015em;line-height:1.2}
.pl2-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.pl2-pill{
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;
  padding:5px 11px;border-radius:999px;background:var(--pd2-bg);
  border:1px solid var(--pd2-line);color:var(--pd2-ink-2);
}
.pl2-pill.pl2-pill-good{background:var(--pd2-green-soft);border-color:var(--pd2-green-line);color:var(--pd2-green)}
.pl2-pill.pl2-pill-type{background:var(--pd2-accent-soft);border-color:var(--pd2-accent-line);color:var(--pd2-accent-ink);font-weight:600}
.pl2-stats{display:flex;gap:28px;margin-top:16px}
.pl2-stat .pl2-stat-n{font-family:var(--pd2-font-display);font-size:20px;font-weight:700}
.pl2-stat .pl2-stat-l{font-size:11.5px;color:var(--pd2-ink-3);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin-top:2px}
.pl2-cta{display:flex;flex-direction:column;gap:9px;min-width:212px}

.pl2-cta .pl2-btn{
  background:var(--pd2-accent);color:#fff;font-weight:600;font-size:15px;line-height:1.55;
  padding:13px 18px;border-radius:var(--pd2-r-md);
  display:flex;align-items:center;justify-content:center;gap:9px;
  box-shadow:0 4px 12px rgba(255,84,3,.28);text-decoration:none;
}
.pl2-cta .pl2-btn:hover{background:var(--pd2-accent-ink)}
.pl2-cta .pl2-btn-ghost{
  border:1.5px solid var(--pd2-line-strong);font-weight:600;font-size:14px;line-height:1.55;
  padding:11px 18px;border-radius:var(--pd2-r-md);
  display:flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;
}
.pl2-cta .pl2-btn-ghost:hover{background:var(--pd2-bg-soft)}
.pl2-note{display:flex;gap:8px;font-size:12px;color:var(--pd2-ink-3);margin-top:2px;line-height:1.45}

.pl2-fee{
  display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:12px 14px;
  border-radius:var(--pd2-r-md);background:var(--pd2-amber-soft);
  border:1px solid var(--pd2-amber-line);color:var(--pd2-amber);font-size:12.5px;line-height:1.5;
}
.pl2-fee i{font-size:16px;margin-top:1px;flex:none}

/* -------------------------------------------------- similar: source context -- */
.pl2-src{
  display:flex;align-items:center;gap:16px;margin-top:8px;padding:14px;
  border:1px solid var(--pd2-line);border-radius:var(--pd2-r-lg);background:var(--pd2-bg-soft);
}
.pl2-src img{width:86px;height:64px;border-radius:10px;object-fit:cover;flex:none}
.pl2-src-k{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--pd2-ink-3)}
.pl2-src-t{font-weight:600;font-size:15px;margin-top:3px}
.pl2-src-s{font-size:13px;color:var(--pd2-ink-2);margin-top:2px}
.pl2-src-s b{color:var(--pd2-ink);font-weight:600}
.pl2-src .pl2-src-view{
  margin-left:auto;font-size:13.5px;font-weight:600;color:var(--pd2-accent);
  white-space:nowrap;display:inline-flex;align-items:center;gap:7px;
}

.pl2-radius{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.pl2-radius .pl2-radius-l{font-size:13px;color:var(--pd2-ink-2);font-weight:500}
.pl2-radius .pl2-rchip{
  border:1.5px solid var(--pd2-line);border-radius:999px;padding:7px 15px;
  font-size:13.5px;font-weight:600;color:var(--pd2-ink-2);background:var(--pd2-bg);text-decoration:none;
}
.pl2-radius .pl2-rchip:hover{border-color:var(--pd2-line-strong)}
.pl2-radius .pl2-rchip.pl2-on{border-color:var(--pd2-accent);background:var(--pd2-accent-soft);color:var(--pd2-accent-ink)}

/* ---------------------------------------------------------- title + toolbar -- */
/* .pd2-root scope is required, not stylistic: pd2-tokens.css resets headings
   with `.pd2-root h1,.pd2-root h2,.pd2-root h3{margin:0}` at (0,1,1), which
   beats a bare `.pl2-title` (0,1,0). Without this the title's top margin was
   silently dropped, so the heading sat flush against the block above it while
   the gap below stayed wide — the lopsided rhythm that read as "too much
   margin above the cards". Same trap as the anchor-hover guard at the top. */
.pd2-root .pl2-title{
  font-size:27px;font-weight:700;letter-spacing:-.02em;line-height:1.25;
  margin:26px 0 0;
}
.pd2-root .pl2-sub{font-size:14px;color:var(--pd2-ink-2);margin:6px 0 0}
.pl2-sub{font-size:14px;color:var(--pd2-ink-2);margin:7px 0 0}

/* Tightened from the prototype's 22/16/18. The prototype's toolbar carried
   filter chips, which gave the row visual weight; here it is just a count and a
   sort control, so the original spacing left an obvious hole between the
   heading block and the first row of cards (measured 213px from title to grid).
   The four stacked rows — title, sub, radius, toolbar — are what accumulate, so
   the saving is taken across the control rows rather than from the gap directly
   above the cards, which still needs to read as a separation. */
.pl2-toolbar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:14px 0 16px;padding-bottom:12px;border-bottom:1px solid var(--pd2-line);
}
.pl2-count{font-size:14px;color:var(--pd2-ink-2)}
.pl2-count b{color:var(--pd2-ink);font-weight:600}
.pl2-spacer{flex:1}
.pl2-sort{
  display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--pd2-line);
  border-radius:var(--pd2-r-sm);padding:8px 13px;font-size:13.5px;font-weight:600;background:var(--pd2-bg);
}
.pl2-sort select{border:0;background:none;font:inherit;font-weight:600;color:var(--pd2-ink);outline:none;cursor:pointer}

/* ------------------------------------------------------------------- cards -- */
.pl2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pl2-grid .pl2-card{
  background:var(--pd2-bg);border:1px solid var(--pd2-line);border-radius:var(--pd2-r-lg);
  overflow:hidden;box-shadow:var(--pd2-shadow-sm);transition:all .18s;
  color:var(--pd2-ink);text-decoration:none;display:block;
}
.pl2-grid .pl2-card:hover{box-shadow:var(--pd2-shadow-md);transform:translateY(-2px)}
.pl2-card-img{height:186px;position:relative;background:var(--pd2-bg-sunk)}
.pl2-card-img img{width:100%;height:100%;object-fit:cover}
.pl2-card-tag{
  position:absolute;top:11px;left:11px;background:rgba(255,255,255,.94);
  font-size:11px;font-weight:600;padding:4px 9px;border-radius:6px;
}
.pl2-card-img .pl2-card-fav{
  position:absolute;top:9px;right:9px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.94);display:grid;place-items:center;
  font-size:15px;line-height:1.55;padding:0;color:var(--pd2-ink-2);
}
.pl2-card-img .pl2-card-fav:hover{color:var(--pd2-accent)}
.pl2-card-img .pl2-card-fav.pl2-fav-on{color:var(--pd2-accent)}

.pl2-card-body{padding:15px}
.pl2-price-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
/* 'Domine',serif not the display token: Domine has no ₹ glyph, and the token's
   Georgia fallback renders the amount wider than the design. */
.pl2-price{font-family:'Domine',serif;font-size:20px;font-weight:700}
.pl2-price span{font-size:12px;color:var(--pd2-ink-3);font-weight:400;font-family:var(--pd2-font-body)}
.pl2-pid{
  font-size:11px;font-weight:600;color:var(--pd2-ink-3);background:var(--pd2-bg-soft);
  border:1px solid var(--pd2-line);padding:3px 8px;border-radius:6px;white-space:nowrap;
}
.pl2-card-t{font-size:14px;font-weight:600;margin:7px 0 3px}
.pl2-card-a{font-size:12.5px;color:var(--pd2-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl2-card-facts{display:flex;gap:14px;margin-top:11px;font-size:12.5px;color:var(--pd2-ink-2);flex-wrap:wrap}
.pl2-card-facts span{display:inline-flex;align-items:center;gap:5px}
.pl2-card-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--pd2-line);
  font-size:12.5px;color:var(--pd2-ink-3);
}
.pl2-card-dist{
  color:var(--pd2-accent-ink);font-weight:600;background:var(--pd2-accent-soft);
  border:1px solid var(--pd2-accent-line);padding:2px 8px;border-radius:6px;font-size:11.5px;
}

/* ----------------------------------------------------------- load more -- */
.pl2-more{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:32px}
.pd2-root .pl2-more .pl2-more-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1.5px solid var(--pd2-line-strong);border-radius:var(--pd2-r-md);
  padding:13px 30px;font-weight:600;font-size:14.5px;line-height:1.55;
  color:var(--pd2-ink);background:var(--pd2-bg);min-width:230px;
}
.pd2-root .pl2-more .pl2-more-btn:hover{background:var(--pd2-bg-soft);color:var(--pd2-ink)}
.pl2-more-spin{
  width:15px;height:15px;border-radius:50%;flex:none;
  border:2px solid var(--pd2-line-strong);border-top-color:var(--pd2-accent);
  animation:pl2-spin .7s linear infinite;
}
@keyframes pl2-spin{to{transform:rotate(360deg)}}
.pl2-more-note{font-size:13px;color:var(--pd2-ink-3)}
.pl2-more-note b{color:var(--pd2-ink-2);font-weight:600}

.pl2-empty{
  border:2px dashed var(--pd2-line-strong);border-radius:var(--pd2-r-xl);
  padding:56px 28px;text-align:center;background:var(--pd2-bg-soft);
}
.pl2-empty i{font-size:40px;color:var(--pd2-line-strong)}
.pl2-empty h3{font-size:19px;font-weight:600;margin:14px 0 6px}
.pl2-empty p{font-size:14px;color:var(--pd2-ink-2);margin:0 auto 20px;max-width:44ch;line-height:1.6}
.pl2-empty .pl2-btn{
  display:inline-flex;align-items:center;gap:9px;background:var(--pd2-accent);color:#fff;
  font-weight:600;font-size:15px;line-height:1.55;padding:13px 22px;border-radius:var(--pd2-r-md);
  text-decoration:none;box-shadow:0 4px 12px rgba(255,84,3,.28);
}
.pl2-empty .pl2-btn:hover{background:var(--pd2-accent-ink)}

/* -------------------------------------------------------------- responsive -- */
@media (max-width:1000px){
  .pl2-grid{grid-template-columns:repeat(2,1fr)}
  .pl2-lister{grid-template-columns:auto 1fr;gap:18px}
  .pl2-cta{grid-column:1 / -1;flex-direction:row;min-width:0}
  .pl2-cta .pl2-btn,.pl2-cta .pl2-btn-ghost{flex:1}
}
@media (max-width:720px){
  .pl2-grid{grid-template-columns:1fr}
  .pl2-title{font-size:21px}
  .pl2-lister{grid-template-columns:1fr;text-align:center;padding:20px 16px}
  .pl2-lister-av{margin:0 auto}
  .pl2-badges,.pl2-stats{justify-content:center}
  .pl2-stats{gap:20px}
  .pl2-cta{flex-direction:column}
  .pl2-src{flex-wrap:wrap}
  .pl2-src .pl2-src-view{
    margin-left:0;width:100%;justify-content:center;
    padding-top:10px;border-top:1px solid var(--pd2-line);
  }
  .pl2-toolbar{gap:9px}
  .pl2-spacer{display:none}
  .pl2-sort{width:100%;justify-content:space-between}
}


/* ============================================================================
   Shared card in a grid.

   _propertyCardV2's compact variant (the homepage card) is built for a
   horizontal carousel: `flex:0 0 320px; width:320px`. In a responsive grid that
   leaves cells half-empty at wide widths and overflows at narrow ones, so the
   width is released here and the grid cell decides. Everything else about the
   card — proportions, type, chips, save/contact — is untouched.
   Scoped under .pd2-root .pl2-grid to beat the card's own (0,1,0) rule.
   ========================================================================== */
.pd2-root .pl2-grid .lcard--compact{
  flex:1 1 auto;width:auto;max-width:none;
  /* see the note in pd2-similar.css: `1fr` is minmax(auto,1fr) and will not
     shrink past the card's min-content width, producing uneven columns. */
  min-width:0;
}


/* Same minmax(0,1fr) fix as pd2-similar.css — see the note there. */
@media (min-width:1001px){
   .pd2-root .pl2-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:721px) and (max-width:1000px){
   .pd2-root .pl2-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}