/* The original RULES artwork includes an opaque black margin. Crop that
   margin and follow the physical silhouette while preserving the lot content. */
.auctionGrid{
  padding-block:60px 54px;
}
.auctionGrid .ruleCard,
.auctionGrid .ruleCard.isNeighbor,
.auctionGrid .ruleCard.isOuter,
.auctionGrid .ruleCard.isFar,
.auctionGrid .ruleCard.isActive{
  background:none;
  box-shadow:none;
  clip-path:none;
  scale:1;
  opacity:1;
  filter:none;
  transform:translate3d(0,var(--card-lift,0),0) scale(.94);
  overflow:visible;
  contain:layout style;
}
.auctionGrid .ruleCard .ruleArtifact{
  width:calc(100% + 64px);
  max-width:none;
  margin-inline:-32px;
}
.auctionGrid .ruleCard:before,
.auctionGrid .ruleCard.isActive:before{
  opacity:.96;
  background:
    linear-gradient(180deg,rgba(1,7,10,.02) 0 17%,rgba(1,7,10,.32) 35%,rgba(1,7,10,.68) 76%,rgba(1,7,10,.46)) center/100% 100% no-repeat,
    url("../images/rules/physical-rule-card-electronic-v2.webp") 52.1% 42.9%/138.75% 115.23% no-repeat;
  clip-path:polygon(7.3% .1%,96.1% 4.7%,99.2% 7.2%,98.9% 94.3%,95% 97.4%,9.6% 99.9%,.5% 97%,.3% 83.8%,1.2% 82%,1.5% 2.8%);
  filter:saturate(.92) contrast(1.04);
}

/* Every lot has the same resting size; only the hovered card grows. */
@media(hover:hover) and (pointer:fine){
  .auctionGrid .ruleCard:hover,
  .auctionGrid .ruleCard.isNeighbor:hover,
  .auctionGrid .ruleCard.isOuter:hover,
  .auctionGrid .ruleCard.isFar:hover,
  .auctionGrid .ruleCard.isActive:hover{
    z-index:8;
    scale:1;
    opacity:1;
    filter:brightness(1.12) saturate(1.04);
    transform:translate3d(0,calc(var(--card-lift,0) - 7px),0) scale(1.04);
    box-shadow:none;
  }
}

@media(max-width:760px){
  .auctionGrid{padding-block:42px 40px}
}
@media(hover:hover) and (pointer:fine) and (max-width:760px){
  .auctionGrid .ruleCard:hover,
  .auctionGrid .ruleCard.isNeighbor:hover,
  .auctionGrid .ruleCard.isOuter:hover,
  .auctionGrid .ruleCard.isFar:hover,
  .auctionGrid .ruleCard.isActive:hover{
    transform:translate3d(0,calc(var(--card-lift,0) - 4px),0) scale(1.02);
  }
}

/* Reduced motion keeps the resting scale and position during hover while
   still providing the same subtle brightness feedback. */
@media(prefers-reduced-motion:reduce){
  .auctionGrid .ruleCard,
  .auctionGrid .ruleCard.isNeighbor,
  .auctionGrid .ruleCard.isOuter,
  .auctionGrid .ruleCard.isFar,
  .auctionGrid .ruleCard.isActive{transition:none}
  .auctionGrid .ruleCard:hover,
  .auctionGrid .ruleCard.isOuter:hover,
  .auctionGrid .ruleCard.isFar:hover,
  .auctionGrid .ruleCard.isNeighbor:hover,
  .auctionGrid .ruleCard.isActive:hover{
    transform:translate3d(0,var(--card-lift,0),0) scale(.94);
  }
}
@media(hover:none){
  .auctionGrid .ruleCard:hover,
  .auctionGrid .ruleCard.isOuter:hover,
  .auctionGrid .ruleCard.isFar:hover,
  .auctionGrid .ruleCard.isNeighbor:hover,
  .auctionGrid .ruleCard.isActive:hover{
    transform:translate3d(0,var(--card-lift,0),0) scale(.94);
  }
}

/* The existing pointer drag state owns transforms until the gesture ends. */
.auctionViewport.isDragging .ruleCard,
.auctionViewport.isDragging .ruleCard:hover,
.auctionViewport.isDragging .ruleCard.isActive,
.auctionViewport.isDragging .ruleCard.isActive:hover,
.auctionViewport.isDragging .ruleCard.isNeighbor,
.auctionViewport.isDragging .ruleCard.isNeighbor:hover,
.auctionViewport.isDragging .ruleCard.isOuter,
.auctionViewport.isDragging .ruleCard.isOuter:hover,
.auctionViewport.isDragging .ruleCard.isFar,
.auctionViewport.isDragging .ruleCard.isFar:hover{
  scale:1;
  opacity:.86;
  filter:none;
  transform:translate3d(0,var(--card-lift,0),0) scale(.94);
  box-shadow:none;
  transition:none;
}