/* Prime Loft — Properties All cards, carousel, grid, pagination. Source: properties-all-embed.html (bundle). */
#results{
  --plv-accent:#1F3A5F;
  --plv-gold:#ab7d56;
  --plv-ink:#303030;
  --plv-muted:#838383;
  --plv-faint:#acacac;
  --plv-line:#eeeeee;
  --plv-line-2:#e0e0e0;
  --plv-ease:cubic-bezier(.23,1,.32,1);
  --plv-ease-out:cubic-bezier(0,0,.2,1);
}

/* GRID — on the DynamoList, not the wrapper: published Collection Lists
   insert .w-dyn-items between the two. Legacy combo classes untouched. */
#results .w-dyn-items{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  gap:28px 24px !important;
}
#results .w-dyn-item{min-width:0;}
@media (max-width:991px){
  #results .w-dyn-items{grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:24px 20px !important;}
}
@media (max-width:767px){
  #results .w-dyn-items{grid-template-columns:1fr !important; gap:24px !important;}
}

/* CARD
   These values are lifted from the live /map card, which is the design of
   record for this component. The listing must read as the same product, so
   nothing here is re-invented: badge plate, type scale, accent price and the
   dot pager all match what /map ships.
   .plv-card* are global classes — every rule below is scoped to #results and
   none of them changes a base value.
   =========================================================================== */
#results .plv-card{
  display:flex; flex-direction:column; height:100%;
  text-decoration:none; color:inherit;
  background:#fff; border:1px solid transparent; border-radius:16px;
  transition:transform 200ms cubic-bezier(.2,.6,.2,1),
             box-shadow 200ms cubic-bezier(.2,.6,.2,1),
             border-color 200ms cubic-bezier(.2,.6,.2,1);
}
#results .plv-card *{text-decoration:none;}

#results .plv-card__photo{
  position:relative; aspect-ratio:4/3;
  border-radius:11px; overflow:hidden;
  background:var(--plv-line);
  touch-action:pan-y;
}
#results .plv-card__track{display:flex; height:100%; width:100%; will-change:transform;}
#results .plv-card__photo-img{
  flex:0 0 100%; width:100%; height:100%;
  object-fit:cover; display:block;
  user-select:none; -webkit-user-drag:none;
  transition:transform 400ms var(--plv-ease);
}
/* Arrow steps use the design-system transition, the same 420ms as /map. A drag
   release does NOT: it hands the pointer velocity to a spring in JS, and a CSS
   transition cannot carry velocity across that seam. */
#results .plv-card__track.is-stepping{transition:transform 420ms var(--plv-ease-out);}
#results .plv-card__photo.is-dragging{cursor:grabbing;}
#results .plv-card__photo.is-dragging .plv-card__track{transition:none;}

#results .plv-card__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border:0; border-radius:999px;
  background:rgba(255,255,255,.95); color:var(--plv-ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.03);
  opacity:0; cursor:pointer; z-index:3;
  transition:opacity 200ms var(--plv-ease-out), transform 120ms var(--plv-ease-out);
}
#results .plv-card__nav:active{transform:translateY(-50%) scale(.94);}
#results .plv-card__nav--prev{left:12px; right:auto;}
#results .plv-card__nav--next{right:12px; left:auto;}
#results .plv-card__nav svg{width:15px; height:15px; display:block;}

/* Dot pager, as on /map. It replaces the "1 / 6" counter: at a glance you read
   how many photos there are and where you are, without parsing a fraction. */
#results .plv-card__dots{
  position:absolute; top:12px; left:0; right:0; z-index:3;
  display:flex; justify-content:center; gap:6px;
  background:none; padding:0; pointer-events:none;
}
#results .plv-card__dots i{
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.6);
  transition:background 200ms var(--plv-ease), transform 200ms var(--plv-ease);
}
#results .plv-card__dots i.is-on{background:#fff; transform:scale(1.25);}

#results .plv-card__body{padding:14px 4px 2px; display:flex; flex-direction:column; flex:1 1 auto;}
#results .plv-card__title{
  font-size:16px; line-height:1.3; font-weight:600;
  color:var(--plv-ink); margin:0 0 3px; letter-spacing:normal;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* /map hides the rule between title and location. */
#results .plv-card__divider{display:none;}
#results .plv-card__loc{
  display:flex; align-items:center; gap:6px;
  font-size:14.5px; font-weight:500; color:var(--plv-muted); margin:0 0 9px;
  min-width:0; white-space:nowrap;
}
#results .plv-card__loc img{width:14px; height:14px; flex:0 0 14px; opacity:.75;}
#results .plv-card__loc span{overflow:hidden; text-overflow:ellipsis;}
#results .plv-card__loc span:nth-of-type(2){flex:0 0 auto; color:var(--plv-faint);}

#results .plv-card__price-row{display:flex; align-items:baseline; gap:8px; margin-top:auto; flex-wrap:wrap;}
#results .plv-card__price{
  font-size:16px; line-height:1.2; font-weight:700;
  color:var(--plv-accent); letter-spacing:-.24px; font-variant-numeric:tabular-nums;
}
#results .plv-card__price > span:first-child{margin-right:1px;}
#results .plv-card__per{font-size:14px; font-weight:500; color:var(--plv-faint);}

/* The badge is ONE white plate holding the deal tag and the meta, exactly as
   on /map. Getting this wrong is what painted an empty white bar across every
   photo: the plate belongs to the container, and the container must hug its
   content (right:auto), not stretch. */
#results .plv-card__badge{
  position:absolute; left:14px; right:auto; bottom:18px;
  display:flex; align-items:center; gap:4px;
  background:#fff; border-radius:999px; padding:5px;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  pointer-events:none; z-index:2;
}
/* One size for the whole plate, and that size is 14 (client, 2026-08-14: the
   sqm / beds / baths read too small at 13). Both halves carry the same weight
   too — the tag only ever LOOKED bigger because it is white 600 on a filled
   pill against ink on white. */
#results .plv-card__badge-tag{
  display:inline-flex; align-items:center; flex:0 0 auto;
  padding:5px 13px 5px 11px; border-radius:999px;
  font-size:14px; font-weight:600; color:#fff; box-shadow:none;
}
#results .plv-card__badge-tag--sale{background:var(--plv-accent);}
#results .plv-card__badge-tag--rent{background:var(--plv-gold);}
#results .plv-card__badge-meta{
  display:inline-flex; align-items:center; gap:9px; flex:0 0 auto;
  background:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  padding:0 12px 0 8px; border-radius:0;
  font-size:14px; font-weight:600; color:var(--plv-ink);
  font-variant-numeric:tabular-nums;
}
/* "170 m²" is ONE piece of text, so no flex gap may sit between the number
   and the unit — the markup already carries an   there. The gap belongs
   to the icon alone. */
#results .plv-card__badge-meta-m{display:inline-flex; align-items:center; gap:0;}
/* 2026-10-20 — the meta icons are drawn inline in the ink colour of the
   numbers. They used to be BRIX's <img> files at opacity .65, i.e. grey icons
   beside black figures. Same geometry, same 15px box, same 5px to the number:
   this plate is the standard card (CLAUDE.md, "Карточка объекта — эталон"). */
#results .plv-card__badge-meta-m img{width:15px; height:15px; opacity:1; flex:0 0 15px; margin-right:5px;}
#results .plv-card__badge-meta-m .plv-ic{display:block; width:15px; height:15px; flex:0 0 15px; margin-right:5px; color:currentColor;}
#results .plv-card__badge-sep{width:1px; height:14px; background:var(--plv-line);}

/* Hover zoom on the visible frame only — .is-cur is set in JS. Scaling the
   whole track would slide the neighbouring photo into view at the edges,
   which is why /map narrows it to the current image too. No hover border:
   /map colours the card only when it is the selected one. */
@media (hover:hover) and (pointer:fine){
  #results .plv-card__photo{cursor:grab;}
  #results .plv-card:hover .plv-card__photo-img.is-cur{transform:scale(1.05);}
  #results .plv-card:hover .plv-card__nav{opacity:1;}
}
@media (hover:none){#results .plv-card__nav{opacity:1;}}

/* ENTER — cards are hidden until initCard() has measured them (the guard
   lives in the page head). This reveal doubles as the feedback that a
   filter or a page change produced new results. Transition, not keyframes,
   so rapid filter clicks retarget instead of restarting. */
#results .plv-card[data-plv-ready]{
  opacity:1;
  transition:opacity 260ms var(--plv-ease), transform 260ms var(--plv-ease);
  transition-delay:calc(var(--plv-i, 0) * 40ms);
}
.plv-js #results .plv-card:not([data-plv-ready]){transform:translateY(8px);}

/* PAGINATION — Webflow's native Previous/Next stays in the DOM because
   Finsweet holds references to it; it is hidden from sight and from the
   a11y tree, and .plv-pgn is the visible control. */
.plv-pgn-hidden-native{
  position:absolute !important; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  overflow:hidden; white-space:nowrap; pointer-events:none;
}
.plv-pgn-wrap{display:flex; justify-content:center; padding:32px 0 0;}
.plv-pgn{display:inline-flex; align-items:center; gap:4px; padding:4px;}
.plv-pgn__b{
  min-width:40px; height:40px; padding:0 8px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; border:1px solid transparent; background:transparent;
  font-family:inherit; font-size:14px; font-weight:500;
  font-variant-numeric:tabular-nums; color:#414141; cursor:pointer;
  transition:background-color 200ms var(--plv-ease,cubic-bezier(.23,1,.32,1)), color 200ms ease,
             border-color 200ms ease, transform 140ms ease;
}
.plv-pgn__b:active:not(:disabled){transform:scale(.97);}
.plv-pgn__b--nav{border-color:#eeeeee; color:#212121;}
.plv-pgn__b--nav svg{width:15px; height:15px; display:block;}
.plv-pgn__b--on{background:#1F3A5F; color:#fff; border-color:#1F3A5F;}
.plv-pgn__b:disabled{opacity:.35; cursor:default;}
.plv-pgn__el{display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:40px; color:#acacac; font-size:14px;}
@media (hover:hover) and (pointer:fine){
  .plv-pgn__b:hover:not(:disabled):not(.plv-pgn__b--on){background:#F4F7FB; border-color:#eeeeee;}
  .plv-pgn__b--nav:hover:not(:disabled){border-color:#acacac;}
}
@media (max-width:479px){
  .plv-pgn__b{min-width:36px; height:36px; padding:0 6px; font-size:13px;}
  .plv-pgn__el{min-width:20px; height:36px;}
}

/* REDUCED MOTION — gentler, not absent: opacity still carries the
   "new results" message, everything positional goes. */
@media (prefers-reduced-motion:reduce){
  #results .plv-card__track,
  #results .plv-card__track.is-stepping{transition:none !important;}
  #results .plv-card__photo{transition:none;}
  #results .plv-card__photo-img,
  #results .plv-card:hover .plv-card__photo-img.is-cur{transition:none !important; transform:none !important;}
  .plv-js #results .plv-card:not([data-plv-ready]){transform:none;}
  #results .plv-card[data-plv-ready]{transition:opacity 160ms linear; transition-delay:0ms; transform:none;}
  .plv-pgn__b, .plv-pgn__b:active:not(:disabled){transition:none; transform:none;}
}