/* The Shanghai results (Demo Day, 2026-11-01), shared by /hackathon/shanghai and /community: the first, second and
   third prizes as picture cards with a chip in their medal colour, then the Community Choice, the Social Media
   Award and the six honor awards as compact cards. Markup: templates/pages/hackathon-shanghai/results.j2. */

.hr {
  display: grid;
  gap: var(--s-4);
}

.hr-prizes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hr-card,
.hr-special {
  height: 100%;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line) inset;
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow var(--t-fast) var(--ease-out), translate var(--t-fast) var(--ease-out);
}

.hr-card:hover,
.hr-special:hover {
  box-shadow: 0 0 0 1px var(--line-strong) inset, var(--shadow-float);
  translate: 0 -2px;
}

.hr-card:focus-visible,
.hr-special:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.hr-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-card);
}

/* the first prize wears its gold as a ring */
.hr-prize--first .hr-card {
  box-shadow: 0 0 0 2px #d9a93a inset, var(--shadow-float);
}

.hr-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-2);
}

.hr-card__media img,
.hr-special__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hr-card__body {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 6px;
  padding: var(--s-4) var(--s-4) var(--s-5);
}

.hr-card__name {
  font-size: var(--fs-h4);
  font-weight: 650;
  line-height: 1.3;
}

.hr-card__track,
.hr-special__track,
.hr-special__group {
  font-size: var(--fs-micro);
  color: var(--ink-3);
}

/* the team's whole one-liner, as on its card below: a clamped line read as a broken entry */
.hr-card__one {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--ink-2);
}

/* One chip per award: the prizes in their medal colours (dark text on all three), the rest on the soft accent. */
.hr-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-micro);
  font-weight: 650;
  white-space: nowrap;
  background: var(--accent-soft);
  color: var(--ink);
}

.hr-chip--first { background: #d9a93a; color: #07161f; }
.hr-chip--second { background: #a9b8c2; color: #07161f; }
.hr-chip--third { background: #c08353; color: #07161f; }

.hr-pool {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-3);
}

.hr-specials {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
}

.hr-special {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: var(--s-3);
  padding: 10px;
  border-radius: 14px;
}

.hr-special__media {
  display: block;
  width: 72px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 10px;
  background: var(--surface-2);
}

.hr-special__body {
  display: grid;
  justify-items: start;
  gap: 4px;
  min-width: 0;
}

.hr-special__name {
  font-weight: 650;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .hr-specials {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .hr-prizes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .hr-prizes,
  .hr-specials {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hr-card,
  .hr-special {
    transition: none;
  }
}