/* ============================================================================
   pd2-similar.css — Property Detail v2, W6 "Similar properties"
   OWNER: W6. Only W6 may edit this file and the two Blade files it styles:
     resources/views/front/property/detailPartials/v2/similar.blade.php
     resources/views/front/property/listingPartials/similarListingLoadV2Grid.blade.php

   CSS PREFIX: every selector in this file starts with .pd2-sim-
   (PROPERTY_DETAIL_V2_PLAN.md section 0, rule 2 — a selector outside the
   prefix is a defect, and it is grep-checkable).

   Ported 1:1 from the approved prototype's ".similar / .sim-*" block —
   website html/index/property-detail-v3.html. Every literal below is the
   prototype's own value; colours/radii/shadows go through the var(--pd2-*)
   tokens W0 copied verbatim from that same prototype.

   Layout decision (deliberate, see plan section 4/W6): desktop is a GRID,
   not a carousel. All six cards visible at once beats hiding half of them
   behind an arrow. It only becomes a swipe carousel below 720px, where
   six stacked cards would add ~2,000px of scroll at the bottom of an
   already long page.
   ========================================================================== */

/* ------------------------------------------------------------- section -- */
.pd2-sim-section{
  background:var(--pd2-bg-soft);
  border-top:1px solid var(--pd2-line);
  padding:44px 0 56px;
}

/* -------------------------------------------------------------- header -- */
.pd2-sim-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;margin-bottom:20px;
}
/* Both of these are deliberately scoped under .pd2-sim-head — a plain
   single-class selector loses here, and the two losses are not cosmetic:

   - .pd2-root h1,h2,h3{margin:0} in pd2-tokens.css is (0,1,1) and outranks a
     bare .pd2-sim-h (0,1,0), so margin-bottom silently resolved to 0px.
   - .pd2-root a{color:inherit} likewise outranks a bare .pd2-sim-all, which
     rendered the "See all N" link in ink instead of the brand accent.

   .pd2-sim-head is my own element, so scoping under it stays inside the W6
   prefix while reaching (0,2,0). No !important, and nothing outside the
   prefix is touched.

   line-height on the heading is restated because the site-wide Bootstrap
   reset sets h1-h6{line-height:1.2} as an element rule, which beats
   .pd2-root's inherited 1.55 and shortened this heading by 7.4px (and the
   whole section with it). The prototype has no such reset. */
.pd2-sim-head .pd2-sim-h{font-size:21px;font-weight:600;line-height:1.55;margin-bottom:4px}
.pd2-sim-head .pd2-sim-sub{font-size:13.5px;color:var(--pd2-ink-3);margin:4px 0 0}
.pd2-sim-head .pd2-sim-all{
  color:var(--pd2-accent);font-weight:600;font-size:14px;white-space:nowrap;
}

/* ---------------------------------------------------------------- grid -- */
.pd2-sim-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}

/* Count carrier injected by the AJAX partial. display:none keeps it out of
   grid/flex flow entirely, so it can never occupy a card slot. */
.pd2-sim-meta{display:none}

/* ---------------------------------------------------------------- card -- */
.pd2-sim-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;
}
.pd2-sim-card:hover{box-shadow:var(--pd2-shadow-md);transform:translateY(-2px)}

.pd2-sim-img{height:172px;position:relative;background:var(--pd2-bg-sunk)}
.pd2-sim-img img{width:100%;height:100%;object-fit:cover}

/* Driven by empty($property->brokerage) only — never by the lister's
   user_type. A broker listing with no brokerage IS a zero-brokerage
   listing (plan section 7). */
.pd2-sim-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;
}

.pd2-sim-body{padding:15px}
.pd2-sim-price-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
/* The prototype's own stack, and NOT var(--pd2-font-display). That token is
   'Domine',Georgia,serif; Domine has no rupee glyph, so the token's Georgia
   step renders the "₹" 4.9px wider than the prototype's plain `serif` step.
   Everything else about the two stacks is identical — this is the one place
   the extra fallback is measurable, so the token is not used here. */
.pd2-sim-price{font-family:'Domine',serif;font-size:20px;font-weight:700}
.pd2-sim-price span{
  font-size:12px;color:var(--pd2-ink-3);font-weight:400;
  font-family:var(--pd2-font-body);
}
.pd2-sim-pid{
  font-family:var(--pd2-font-body);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;
}
.pd2-sim-t{font-size:14px;font-weight:600;margin:6px 0 3px}
.pd2-sim-a{font-size:12.5px;color:var(--pd2-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd2-sim-foot{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:13px;padding-top:12px;border-top:1px solid var(--pd2-line);
  font-size:12.5px;color:var(--pd2-ink-3);
}
/* .pd2-sim-lister carries no styling of its own — it inherits the footer's
   size/colour, exactly as .sim-lister does in the prototype. It is rendered
   server-side only for paid viewers (LISTED_BY_BADGE_WEB_PLAN.md section 2),
   so for an unpaid viewer it is ABSENT from the HTML, not merely hidden. */

/* ============================================================ responsive == */
@media (max-width:1000px){
  .pd2-sim-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:720px){
  /* Swipe carousel with a peeking card — the peek is what signals "swipe".
     Negative side margins cancel .pd2-container's 16px padding so the track
     bleeds to the screen edge; the padding puts it back inside the track, so
     the first card still lines up with the heading. The overflow lives on
     the track, never on the page. */
  .pd2-sim-grid{
    display:flex;grid-template-columns:none;gap:12px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0 -16px;padding:2px 16px 6px;
  }
  .pd2-sim-grid::-webkit-scrollbar{display:none}
  .pd2-sim-card{flex:0 0 78%;scroll-snap-align:start}
  .pd2-sim-card:hover{transform:none}
  .pd2-sim-img{height:158px}
  .pd2-sim-section{padding:30px 0 40px}
  .pd2-sim-head{margin-bottom:14px}
}


/* The Similar section now renders _propertyCardV2 (the shared site-wide card)
   instead of a bespoke .pd2-sim-card. Its compact variant is fixed at 320px for
   carousel use; in the DESKTOP GRID the cell should decide the width. Below
   720px the section is a scroll-snap carousel, which is exactly what the card's
   own fixed width is designed for, so the override stops at that breakpoint. */
@media (min-width:721px){
   .pd2-root .pd2-sim-grid .lcard--compact{
      flex:1 1 auto;width:auto;max-width:none;
      /* min-width:0 is required, not cosmetic: a `1fr` track is
         minmax(auto,1fr), so it refuses to shrink below the card's min-content
         width and the columns come out uneven (measured 406/501/406 before
         this). Zeroing the item's min-width lets the three tracks be equal. */
      min-width:0;
   }
}


/* `1fr` is shorthand for minmax(auto,1fr), so a track refuses to shrink below
   its content's min-content width. With the shared card in place that produced
   visibly unequal columns (measured 406/501/406 at 1280px). minmax(0,1fr)
   removes the floor so the three tracks are genuinely equal.
   Scoped per breakpoint to match this file's own 3-col / 2-col / carousel
   rules — a single unscoped override would beat all three. */
@media (min-width:1001px){
   .pd2-root .pd2-sim-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:721px) and (max-width:1000px){
   .pd2-root .pd2-sim-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}