/* Salesroom: the lot card as a catalogue entry. The lot hangs in a
   gilt frame on its cream mount, lit by the picture lamp (brighter when
   the card is pointed at); its number is printed in small capitals, the
   current bid set in the book face over the catalogue's double rule. A
   closed lot carries the red hammer stamp. Builds on the plugin's own
   card styles. */
@import url("../../../components/auction_card.css");

.ed-card-auction, html.dark .ed-card-auction {
  position: relative;
  background: var(--paper-grain), var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius, 4px);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.ed-card-auction:hover, .ed-card-auction:focus-within { transform: translateY(-3px); box-shadow: 0 -16px 28px -20px rgba(255, 210, 130, .95), var(--shadow-md); }
.ed-card-auction::before, html.dark .ed-card-auction::before { display: none; }
.ed-card-auction .ed-folio {
  z-index: 3;
  padding: .12rem .5rem .1rem;
  font-family: var(--font-label); font-weight: 800; letter-spacing: .06em; font-size: 13px !important;
  color: #74242a; background: #fbf6ea;
  box-shadow: 0 0 0 1px rgba(28, 23, 18, .3), 0 3px 6px -3px rgba(28, 23, 18, .4);
}
/* The picture: a carved gilt frame drawn inside the image area, the lot
   on its mount within it, the lamp's light from above */
.ed-card-auction .aspect-\[4\/3\] {
  margin: 12px 12px 0;
  border: 0 !important;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(255, 240, 200, .85), transparent 70%),
    radial-gradient(80% 60% at 50% 30%, #fffaf0, #efe5cf 70%, #e2d5b6) !important;
  box-shadow: inset 0 0 0 1px #4a3412, inset 0 0 0 4px #c9a24e, inset 0 0 0 5px #f3dd9c, inset 0 0 0 8px #b48a3c, inset 0 0 0 9px #6e4f1c, inset 0 4px 14px 9px rgba(28, 23, 18, .2);
  transition: box-shadow .25s ease;
}
html.dark .ed-card-auction .aspect-\[4\/3\] { background: radial-gradient(60% 55% at 50% 0%, rgba(255, 236, 190, .95), transparent 70%), radial-gradient(80% 60% at 50% 30%, #fff4d8, #e9d8b0 60%, #bfa676) !important; }
.ed-card-auction:hover .aspect-\[4\/3\], .ed-card-auction:focus-within .aspect-\[4\/3\] { box-shadow: inset 0 0 0 1px #4a3412, inset 0 0 0 4px #e2c27a, inset 0 0 0 5px #fbe7b0, inset 0 0 0 8px #c9a24e, inset 0 0 0 9px #6e4f1c, inset 0 4px 20px 9px rgba(255, 220, 150, .35); }
.ed-card-auction .aspect-\[4\/3\] img { filter: drop-shadow(0 10px 8px rgba(28, 23, 18, .26)); padding: 6%; }
/* The live mark and the clock painted on the mount keep dark ink in
   both modes, since the mount stays lit */
.ed-card-auction .aspect-\[4\/3\] .ed-status,
.ed-card-auction .aspect-\[4\/3\] .ed-status > span[style] { color: #3b3329 !important; font-weight: 700; }
.ed-card-auction .aspect-\[4\/3\] .ed-status.absolute { margin: 4px 6px; }
/* A closed lot: the hammer stamp in red ink across the mount's corner */
.ed-card-auction.auction-ended-winner .aspect-\[4\/3\]::after {
  content: ''; position: absolute; inset-inline-end: 16px; bottom: 16px; width: 64px; height: 64px; z-index: 2; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='%23b0272c'><circle cx='32' cy='32' r='29' stroke-width='3'/><circle cx='32' cy='32' r='24' stroke-width='1.4'/></g><g transform='rotate(-30 32 32)' fill='%23b0272c'><rect x='18' y='22' width='16' height='12' rx='2.4'/><rect x='34' y='26' width='16' height='4' rx='2'/><rect x='16' y='40' width='32' height='4' rx='1.6'/></g></svg>") center / contain no-repeat;
  opacity: .8; transform: rotate(-12deg);
}

/* The price row: the catalogue's estimate line. Label in small caps, the
   figure in the book face, a double rule above it */
.ed-card-auction .flex.items-end.justify-between.border-t {
  position: relative;
  border-top: 0 !important;
  padding-top: .85rem;
  background: var(--rule-double) left top / 100% 5px no-repeat;
}
.ed-card-auction .flex.items-end.justify-between.border-t .ed-eyebrow { font-size: 13px; color: var(--ink-soft); }
.ed-card-auction .auction-current-bid,
.ed-card-auction .font-display.text-2xl { font-family: var(--font-display); font-weight: 700 !important; letter-spacing: -.015em; font-size: clamp(1.4rem, 5vw, 1.7rem); color: var(--theme-600) !important; overflow-wrap: normal; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.ed-card-auction h3.font-display { font-weight: 600; }

.ed-card-auction .info-btn { border: 1px solid var(--ink) !important; color: var(--ink) !important; border-radius: 50% !important; background: transparent; }
.ed-card-auction .info-btn:hover, .ed-card-auction .info-btn:focus-visible { box-shadow: 0 0 0 2px var(--paper-2), 0 0 0 4px var(--gilt-mid); color: var(--theme-600) !important; }
/* The skin's ink for filled icon tiles also catches this round button, which has no fill; the icon follows the button. :is(#_) only lifts specificity past the tile rule. */
html body #px-spa-content .ed-card-auction .info-btn:is(.info-btn, #_) > svg { color: inherit !important; transform: none !important; filter: none !important; }
@media (prefers-reduced-motion: reduce) { .ed-card-auction, .ed-card-auction:hover { transition: none; transform: none; } }

/* The info button fills with ink on hover; its icon takes the paper colour
   with it instead of keeping the ink it has at rest. */
.ed-card-auction .info-btn:hover,
.ed-card-auction .info-btn:hover :is(svg, i) { color: var(--paper) !important; }