/* Load after app.css. Scope the new layout to the rankings podium. */
.rank-podium.rank-podium-hero-layout {
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
}
.rank-podium-hero-layout .rank-podium-card {
  grid-column: auto;
  grid-row: auto;
  min-height: 410px;
  padding: 24px;
  align-self: stretch;
}
.rank-podium-hero-layout .rank-podium-1 {
  padding: 30px;
  border-color: color-mix(in srgb, var(--green) 48%, var(--line));
  background: linear-gradient(145deg, color-mix(in srgb, var(--green) 12%, var(--surface)), var(--surface) 80%);
}
.rank-podium-hero-layout .rank-place {
  flex-wrap: wrap;
  justify-content: center;
}
.rank-podium-hero-layout .rank-place span { display: inline; }
.rank-podium-hero-layout .rank-medal {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  margin: 22px 0 16px;
}
.rank-podium-hero-layout .rank-medal span { font-size: 38px; line-height: 64px; }
.rank-podium-hero-layout .rank-podium-1 .rank-medal { width: 94px; height: 94px; margin: 16px 0 20px; }
.rank-podium-hero-layout .rank-podium-1 .rank-medal span { font-size: 56px; line-height: 94px; }
.rank-podium-identity { width: 100%; min-width: 0; }
.rank-podium-hero-layout .rank-podium-card h2 { font-size: clamp(18px, 1.7vw, 24px); }
.rank-podium-hero-layout .rank-podium-1 h2 { font-size: clamp(26px, 2.4vw, 36px); }
.rank-podium-result { width: 100%; min-width: 0; margin-top: auto; }
.rank-podium-hero-layout .rank-performance { margin-top: 26px; }
.rank-podium-hero-layout .rank-performance strong { font-size: clamp(26px, 2.6vw, 38px); white-space: normal; overflow-wrap: anywhere; }
.rank-podium-hero-layout .rank-podium-1 .rank-performance strong { font-size: clamp(40px, 4vw, 58px); }
.rank-podium-hero-layout .rank-partial,
.rank-podium-hero-layout .rank-partial-spacer { min-height: 22px; margin-top: 6px; }
.rank-podium-hero-layout .rank-social { min-height: 52px; max-width: none; flex-wrap: wrap; justify-content: space-between; }
.rank-podium-hero-layout .rank-pride { min-height: 1.5em; line-height: 1.5; margin-top: 12px; }
.rank-podium-hero-layout .rank-podium-card:only-child { grid-column: 1 / -1; }

@media (max-width: 1100px) {
  .rank-podium.rank-podium-hero-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .rank-podium-hero-layout .rank-podium-card { min-height: 340px; padding: 22px; }
  .rank-podium-hero-layout .rank-podium-1 { grid-column: 1 / -1; min-height: 380px; }
}
@media (max-width: 640px) {
  .rank-podium.rank-podium-hero-layout { grid-template-columns: minmax(0, 1fr); }
  .rank-podium-hero-layout .rank-podium-card { grid-column: 1; min-height: 0; padding: 22px; }
  .rank-podium-hero-layout .rank-podium-1 { padding: 28px 22px; }
  .rank-podium-hero-layout .rank-podium-card h2 { font-size: 22px; }
  .rank-podium-hero-layout .rank-podium-1 h2 { font-size: 28px; }
  .rank-podium-hero-layout .rank-performance strong { font-size: 32px; }
  .rank-podium-hero-layout .rank-podium-1 .rank-performance strong { font-size: 46px; }
  .rank-podium-hero-layout .rank-pride:empty { min-height: 0; margin: 0; }
}