/* The Monster Community Auction button for the club website's hero.
   Self-contained: every rule and colour is under .auction-hero, so it sits
   beside the club site's own .button without either touching the other.
   The title's face, "Auction Hero", is Bangers cut down to the title's
   letters, in auction-hero-font.css.

   The button is a sign the monster leans on, tilted as the auction site's
   poster is: a pale card in a white frame, the title lettered as the
   auction's own, with block depth. The bottom 21% of the monster's cut-out
   overlaps the card's top edge so his paw rests on it; the card's top
   padding clears that, so the title never runs under him. */
.auction-hero {
  --ah-navy: #062D5F;
  --ah-orange: #E0520A;    /* 3.4:1 on --ah-paper: large text only */
  --ah-sky: #6CC8F2;
  --ah-paper: #E4F2F9;
  --ah-orange-dark: #C04506;   /* white on it: 5.1:1 */
  --ah-w: clamp(7rem, 38%, 9.5rem);   /* the monster's width */
  display: flex; flex-direction: column;
  max-width: 24rem; margin: 2.5rem 0 0;
  color: var(--ah-navy); text-decoration: none;
  transform: rotate(-1.5deg);
  transition: transform .25s ease-out;
}
.auction-hero:hover, .auction-hero:focus-visible { color: var(--ah-navy); transform: rotate(-1.5deg) translateY(-.4rem); }
.auction-hero-monster {
  display: block; width: var(--ah-w); height: auto;
  margin: 0 1rem calc(-.21 * var(--ah-w)) auto;
  position: relative; z-index: 1;
}

.auction-hero-card {
  display: block; container-type: inline-size;
  padding: calc(.21 * var(--ah-w) + .5rem) 1.4rem 1.4rem;
  background: var(--ah-paper);
  border: .35rem solid #fff; border-radius: .25rem;
  box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .3);
  transition: box-shadow .25s ease-out;
}
.auction-hero:hover .auction-hero-card,
.auction-hero:focus-visible .auction-hero-card { box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .35); }

/* Each line of the title is sized to the card: the cqi sizes are the share
   of the card's width the line fills / (the line's width in Bangers at 1em). */
.auction-hero-title {
  display: block;
  font-family: "Auction Hero", Impact, "Arial Narrow", sans-serif; font-weight: 400;
  line-height: .95; letter-spacing: .02em;
  text-shadow: .025em .025em 0 var(--ah-sky), .05em .05em 0 var(--ah-sky);
}
.auction-hero-title > span { display: block; white-space: nowrap; }
.auction-hero-title .monster {
  font-size: 24cqi; color: var(--ah-orange);
  text-shadow: .025em .025em 0 var(--ah-navy), .05em .05em 0 var(--ah-navy), .075em .075em 0 var(--ah-navy);
}
.auction-hero-title .rest { font-size: 13.4cqi; }

.auction-hero-when {
  display: block; margin-top: .8rem;
  font-size: 1.125rem; font-weight: 700; line-height: 1.35;
}
.auction-hero-when > span { display: block; }
.auction-hero-more {
  display: inline-block; margin-top: 1rem; padding: .45rem 1.1rem;
  border-radius: 999px; background: var(--ah-navy); color: #fff;
  font-size: 1.0625rem; font-weight: 700;
  transition: background-color .25s ease-out;
}
.auction-hero:hover .auction-hero-more,
.auction-hero:focus-visible .auction-hero-more { background: var(--ah-orange-dark); }

.auction-hero:focus-visible { outline: none; }
.auction-hero:focus-visible .auction-hero-card { outline: 3px solid #fff; outline-offset: .4rem; }
@media (prefers-reduced-motion: reduce) {
  .auction-hero, .auction-hero-card, .auction-hero-more { transition: none; }
}