/* Match cards — the [side | VS | side] unit, glass style. */
.card-list { display: flex; flex-direction: column; gap: 0.8rem; }

/* Event pages lay the card out two-up, main event first. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
@media (max-width: 820px) {
  .card-grid { grid-template-columns: 1fr; }
}

.match {
  background: var(--card-glass);
  border: 2px solid var(--card-edge);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
}
/* Face sizing responds to the CARD's own width, not the viewport — the same
   component sits in the two-up event grid, the picks page, and the wrestler
   profile's history column (which is narrower than the viewport implies).
   The spotlight sidebar keeps its own compact sizing and stays out of this. */
.card-list .match { container-type: inline-size; }

.match-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
  flex-wrap: wrap;
}

.match-no {
  font-family: var(--display);
  font-weight: 800;
  font-style: normal;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.45);
}

.match-label {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.78rem;
  color: var(--muted);
}

.belt {
  font-family: var(--display);
  font-weight: 800;
  font-style: normal;
  font-size: 0.78rem;
  text-transform: uppercase;
  color: var(--gold);
}

/* Faceoff: the sides' renders squaring up across the VS, promo-poster style. */
.faceoff {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 0.6rem;
  margin: 0.2rem 0 0.3rem;
}
.faceoff .vs { justify-self: center; align-self: center; font-size: 1.05rem; }
.face-side { display: flex; align-items: flex-end; min-width: 0; }
.faceoff .face-side:first-child { justify-content: flex-end; }

/* Uniform 3:4 crop from the top — renders vary in length (some cut at the
   knees), cover+top keeps every head at the same height. The only full,
   uncropped render is the profile-page hero (.w-render). Every face links to
   the wrestler and pops out of the frame on hover, reference-app style. */
.face-link {
  display: inline-block;
  line-height: 0;
  position: relative;
}
.face-link:hover { z-index: 3; }

.face {
  width: 100px;
  height: 133px;
  object-fit: cover;
  object-position: top center;
  filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.6));
  transform-origin: 50% 100%;
  transition: transform 0.18s ease, filter 0.18s ease;
}
.face-link:hover .face {
  transform: scale(1.18);
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.7));
}
/* tag partners fan out with a deeper overlap — buys bigger faces */
.face-side .face-link + .face-link { margin-left: -24px; }

/* bigger teams get smaller crops so the side stays inside the card */
.face-side:has(.face-link:nth-child(3)) .face { width: 96px; height: 128px; }
.face-side:has(.face-link:nth-child(4)) .face { width: 84px; height: 112px; }
.face-side:has(.face-link:nth-child(5)) .face { width: 72px; height: 96px; }
.face-side:has(.face-link:nth-child(3)) .face-link + .face-link { margin-left: -30px; }

/* Narrow cards: big tag teams must never push past the card's edge.
   Teams of 3+ go back-row style instead of shrinking to thumbnails —
   every second wrestler tucks BEHIND the one in front and rides slightly
   higher, so the heads poke out of the pile. */
@container (max-width: 500px) {
  .face { width: 84px; height: 112px; }
  .face-none { width: 84px; height: 112px; }
  .face-side:has(.face-link:nth-child(3)) .face { width: 80px; height: 107px; }
  .face-side:has(.face-link:nth-child(4)) .face { width: 72px; height: 96px; }
  .face-side .face-link + .face-link { margin-left: -18px; }
  .face-side:has(.face-link:nth-child(3)) .face-link { z-index: 1; }
  .face-side:has(.face-link:nth-child(3)) .face-link:nth-child(even) {
    z-index: 0;
    transform: translateY(-33px);
  }
  .face-side:has(.face-link:nth-child(3)) .face-link:hover { z-index: 3; }
  .face-side:has(.face-link:nth-child(3)) .face-link + .face-link { margin-left: -56px; }
  .face-side:has(.face-link:nth-child(4)) .face-link + .face-link { margin-left: -54px; }
  /* raised back row needs headroom under the match label */
  .faceoff:has(.face-link:nth-child(3)) { padding-top: 1.7rem; }
}

.face-none {
  height: 133px;
  width: 100px;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0.3rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.62rem;
  line-height: 1.2;
  text-align: center;
  color: var(--muted);
  background: repeating-linear-gradient(
    45deg, #0a0a0d, #0a0a0d 12px, #050508 12px, #050508 24px);
  border: 2px solid var(--card-edge);
}

/* finished: the losing side's renders grey out; draws stay lit */
.match.finished:not(.draw) .face-side:not(.won) .face {
  opacity: 0.45;
  filter: grayscale(0.8);
}

/* The sides line: [side] VS [side] centered like the reference's n-match. */
.sides {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.02rem;
}
.sides .side:first-child { text-align: right; }
.side { line-height: 1.4; }
.side a { font-weight: 600; }
.side .amp { color: var(--faint); padding: 0 0.3em; font-weight: 400; }

.vs {
  font-family: var(--display);
  font-weight: 800;
  font-style: normal;
  font-size: 0.9rem;
  color: var(--muted);
  text-transform: uppercase;
}

/* Multi-side (3-way+) matches fall back to a wrapped row. */
.sides.multi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.sides.multi .side:first-child { text-align: inherit; }

/* Spoiler shield: past cards render plain by default; this toggles them. */
.results-toggle {
  margin: 0 0 0.7rem;
  text-align: right;
  font-size: 0.78rem;
  font-weight: 600;
}
.results-toggle .results-reveal { color: var(--gold); }
.results-toggle a:hover { color: var(--text); }

/* Finished: winner glows, loser fades out like the reference cards. */
.match.finished { border-color: rgba(255, 215, 0, 0.25); }
.match.finished .side { color: var(--muted); }
.match.finished .side a { color: var(--muted); font-weight: 500; }
.match.finished .side.won a { color: var(--win); font-weight: 700; }
.match.finished .side:not(.won) { opacity: 0.6; }
.match.finished .side a:hover { color: var(--gold); }

.finish {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--muted);
}
.finish .win-tag { color: var(--win); font-weight: 600; }
.finish .draw-tag { color: var(--silver); font-weight: 600; }

/* Context line above a match card in cross-event lists. */
.match-context {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: -0.35rem;
}
.match-context a { color: var(--muted); }
.match-context a:hover { color: var(--gold); }

/* Event page header */
.event-head { margin-bottom: 0; }
.event-head h1 { margin-bottom: 0.35rem; }
.event-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: baseline;
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0;
}