.hof{
  font-family: inherit;
  color: var(--tsa-body);
}

.hof-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.hof-card{
  background: linear-gradient(180deg, var(--tsa-card), color-mix(in srgb, var(--tsa-ink) 4%, var(--tsa-card)));
  padding: 18px;
  transition: transform .15s ease, border-color .15s ease;
}

.hof-card::after{
  content:"";
  position:absolute;
  right:-60px;
  top:-60px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, color-mix(in srgb, var(--tsa-accent) 16%, transparent) 0%, transparent 65%);
  pointer-events:none;
}

/* Stretched link: the name's link covers the whole card, so the card stays
   one click target without wrapping block content in an <a>. The trophy
   tokens sit above it to keep their season tooltips. */
.hof-name a.tsa-team-link::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}

.hof-token{
  position:relative;
  z-index:2;
}

@media (hover:hover){
  .hof-card:hover{
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--tsa-accent) 40%, transparent);
  }

  /* The whole card is clickable (stretched link), so hovering anywhere highlights the name */
  .hof-card:hover .tsa-team-link{
    color: var(--tsa-team-ink, var(--tsa-accent));
  }
}

.hof-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

.hof-club{
  display:flex;
  align-items:center;
  gap: 14px;
  min-width: 0;
}

.hof-logo{
  width: 48px;
  height: 48px;
  border-radius: var(--tsa-radius-sm);
  background: color-mix(in srgb, var(--tsa-ink) 4%, transparent);
  border: 1px solid var(--tsa-border);
  display:grid;
  place-items:center;
  flex:0 0 auto;
}

.hof-logo img{
  width: auto;
  height: auto;
  max-width: 42px;
  max-height: 42px;
  object-fit: contain;
  display:block;
}

.hof-name{
  font-family: var(--tsa-font-sans);
  font-size: 18px;
  font-weight: 700;
  color: var(--tsa-ink);
  margin:0;
  min-width:0;
}

/* Truncation lives on the link, not the heading, so the focus ring is not clipped */
.hof-name .tsa-team-link{
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 520px){
  .hof-name{
    font-size: clamp(15px, 4.3vw, 17px);
  }

  .hof-name .tsa-team-link{
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

.hof-badge{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tsa-ink) 8%, transparent);
  border: 1px solid var(--tsa-border);
  color: var(--tsa-ink);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.hof-badge .hof-trophy{
  width: 18px;
  height: 18px;
  display:grid;
  place-items:center;
  border-radius: 7px;
  background: color-mix(in srgb, var(--tsa-accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--tsa-accent) 25%, transparent);
  color: var(--tsa-team-ink, var(--tsa-accent));
  line-height: 1;
}

.hof-trophies{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:flex-start;
}

.hof-token{
  width: 46px;
  display:flex;
  flex-direction:column;
  align-items:center;
  opacity:.98;
}

@media (hover:hover){
  .hof-card:hover .hof-token{
    opacity:1;
  }
}

.hof-svg{
  width: 34px;
  height: 34px;
  display:block;
  color: var(--tsa-team-ink, var(--tsa-accent));
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.12));
}

.hof-token-label{
  margin-top: -8px;
  padding: 5px 9px;
  border-radius: 999px;
  font-family: var(--tsa-font-mono);
  font-size: 11.5px;
  line-height: 1;
  background: color-mix(in srgb, var(--tsa-ink) 4%, transparent);
  border: 1px solid var(--tsa-border);
  color: var(--tsa-muted);
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

@media (hover:hover){
  .hof-card:hover .hof-token-label{
    border-color: color-mix(in srgb, var(--tsa-accent) 25%, transparent);
  }
}