/* Reusable ranking podium presentation. */
.ranking-podium__list {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(.5rem, .9vw, .8rem);
  align-items: end;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}
.ranking-podium__item {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-self: end;
}
.ranking-podium__item--slot-fourth { grid-column: 1; grid-row: 1; }
.ranking-podium__item--slot-runner-up { grid-column: 2; grid-row: 1; }
.ranking-podium__item--slot-champion { grid-column: 3; grid-row: 1; }
.ranking-podium__item--slot-third { grid-column: 4; grid-row: 1; }
.ranking-podium__item--slot-fifth { grid-column: 5; grid-row: 1; }
.ranking-podium__card {
  display: flex;
  position: relative;
  overflow: hidden;
  min-width: 0;
  flex-direction: column;
  gap: .65rem;
  padding: clamp(.55rem, .75vw, .75rem);
  border: 1px solid rgb(141 185 222 / .5);
  border-radius: .85rem;
  background: linear-gradient(145deg, rgb(18 52 83 / .88), rgb(8 25 47 / .94));
  color: #fff;
  box-shadow: inset 0 1px rgb(255 255 255 / .16), 0 .85rem 1.65rem rgb(0 0 0 / .3);
  backdrop-filter: blur(9px);
  text-align: center;
}
.ranking-podium__card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(118deg, transparent 30%, rgb(255 255 255 / .13) 43%, transparent 54%);
  pointer-events: none;
}
.ranking-podium__item--gold .ranking-podium__card {
  gap: .8rem;
  padding: clamp(.72rem, 1vw, .95rem);
  border: 2px solid #e7c875;
  background: linear-gradient(155deg, rgb(103 72 24 / .9), rgb(14 32 55 / .95) 68%);
  box-shadow: inset 0 1px rgb(255 244 192 / .5), 0 1.2rem 2.3rem rgb(0 0 0 / .34), 0 0 1.55rem rgb(225 177 72 / .24);
}
.ranking-podium__item--silver .ranking-podium__card {
  border-color: #c0cedd;
  background: linear-gradient(155deg, rgb(83 102 123 / .88), rgb(11 30 52 / .95) 70%);
}
.ranking-podium__item--bronze .ranking-podium__card {
  border-color: #bd8056;
  background: linear-gradient(155deg, rgb(104 62 39 / .88), rgb(12 29 50 / .95) 70%);
}
.ranking-podium__item--steel .ranking-podium__card { border-color: #6594b8; }
.ranking-podium__header,
.ranking-podium__body { position: relative; z-index: 1; min-width: 0; }
.ranking-podium__header { display: grid; gap: .3rem; justify-items: center; }
.ranking-podium__rank {
  display: flex;
  gap: .32rem;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: #cae1f4;
  font-size: clamp(.82rem, 1.05vw, 1rem);
  font-weight: 900;
  letter-spacing: .06em;
}
.ranking-podium__item--rank-1 .ranking-podium__rank {
  color: #ffe097;
  font-size: clamp(1.25rem, 1.8vw, 1.7rem);
  text-shadow: 0 0 .9rem rgb(255 210 109 / .35);
}
.ranking-podium__item--rank-1 .ranking-podium__rank::before,
.ranking-podium__item--rank-1 .ranking-podium__rank::after {
  width: .58em;
  height: .9em;
  border: 2px solid currentcolor;
  border-top: 0;
  content: "";
  opacity: .82;
}
.ranking-podium__item--rank-1 .ranking-podium__rank::before { border-right: 0; border-radius: 0 0 0 100%; transform: rotate(-16deg); }
.ranking-podium__item--rank-1 .ranking-podium__rank::after { border-left: 0; border-radius: 0 0 100%; transform: rotate(16deg); }
.ranking-podium__badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.3rem;
  padding-inline: .45rem;
  border: 1px solid rgb(180 218 246 / .38);
  border-radius: 99rem;
  background: rgb(5 25 47 / .58);
  color: #d7eaf9;
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .12em;
}
.ranking-podium__media {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  aspect-ratio: 3 / 4;
  border: 1px solid rgb(255 255 255 / .2);
  border-radius: .55rem;
  background: #102c4e;
}
.ranking-podium__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ranking-podium__media > a { display: block; width: 100%; height: 100%; border-radius: inherit; }
.ranking-podium__media > a:focus-visible { outline: 3px solid #f7d37b; outline-offset: -3px; }
.ranking-podium__media[data-media-mode="remote"] img { object-fit: contain; }
.ranking-podium__media[data-media-mode="placeholder"] img {
  position: absolute;
  top: -10%;
  left: -9%;
  width: 118%;
  max-width: none;
  height: auto;
  object-position: center bottom;
}
.ranking-podium__body { display: grid; gap: .32rem; justify-items: center; padding: .12rem .1rem .25rem; }
.ranking-podium__item h3 {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  font-size: clamp(.82rem, 1.12vw, 1.02rem);
  line-height: 1.3;
  overflow-wrap: anywhere;
  word-break: normal;
}
.ranking-podium__item--rank-1 h3 { font-size: clamp(1.05rem, 1.55vw, 1.32rem); }
.ranking-podium__item h3 a { color: inherit; text-decoration: none; }
.ranking-podium__item h3 a:hover { text-decoration: underline; text-underline-offset: .18em; }
.ranking-podium__item h3 a:focus-visible { outline: 2px solid #f7d37b; outline-offset: .18rem; }
.ranking-podium__secondary { margin: 0; color: #d6e1ec; font-size: clamp(.7rem, .82vw, .78rem); line-height: 1.35; }
.ranking-podium__value {
  position: relative;
  z-index: 1;
  max-width: 100%;
  margin: 0;
  color: #f7d37b;
  font-size: clamp(.86rem, 1.28vw, 1.22rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.015em;
  white-space: nowrap;
}
.ranking-podium__item--rank-1 .ranking-podium__value { font-size: clamp(1.42rem, 2.15vw, 1.95rem); }
.ranking-podium__updated { position: relative; z-index: 1; margin: 0; color: #b9cadb; font-size: clamp(.62rem, .76vw, .72rem); line-height: 1.35; }
.ranking-podium__updated span { margin-right: .25em; }
.ranking-podium__stand {
  display: block;
  width: calc(100% - 1.15rem);
  height: .5rem;
  margin: -.05rem auto 0;
  border: 1px solid rgb(127 169 202 / .65);
  border-top: 0;
  border-radius: 0 0 .55rem .55rem;
  background: linear-gradient(180deg, #517fa2, #173b59);
  box-shadow: 0 .6rem 1rem rgb(0 0 0 / .34);
}
.ranking-podium__item--gold .ranking-podium__stand {
  width: calc(100% - 1.35rem);
  height: .75rem;
  border-color: #cfa84a;
  background: linear-gradient(180deg, #f1cf70, #8b601a);
  box-shadow: 0 .7rem 1.3rem rgb(0 0 0 / .4), 0 0 1rem rgb(226 177 73 / .24);
}
.ranking-podium__item--silver .ranking-podium__stand { border-color: #aebdcc; background: linear-gradient(180deg, #d8e0e8, #687889); }
.ranking-podium__item--bronze .ranking-podium__stand { border-color: #a96f4b; background: linear-gradient(180deg, #d49a70, #754329); }

@media (max-width: 900px) {
  .ranking-podium__list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.15rem .8rem; align-items: end; }
  .ranking-podium__item { justify-self: center; }
  .ranking-podium__item--slot-champion { grid-column: 1 / -1; grid-row: 1; width: min(100%, 19rem); }
  .ranking-podium__item--slot-runner-up { grid-column: 1 / 4; grid-row: 2; width: min(92%, 17rem); }
  .ranking-podium__item--slot-third { grid-column: 4 / 7; grid-row: 2; width: min(92%, 17rem); }
  .ranking-podium__item--slot-fourth { grid-column: 1 / 4; grid-row: 3; width: min(84%, 15.5rem); }
  .ranking-podium__item--slot-fifth { grid-column: 4 / 7; grid-row: 3; width: min(84%, 15.5rem); }
  .ranking-podium--count-2 .ranking-podium__item--slot-runner-up,
  .ranking-podium--count-4 .ranking-podium__item--slot-fourth { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .ranking-podium__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem .6rem; align-items: stretch; }
  .ranking-podium__item { width: 100%; align-self: stretch; justify-self: stretch; }
  .ranking-podium__item--slot-champion { grid-column: 1 / -1; grid-row: 1; width: min(100%, 22rem); justify-self: center; }
  .ranking-podium__item--slot-runner-up { grid-column: 1; grid-row: 2; }
  .ranking-podium__item--slot-third { grid-column: 2; grid-row: 2; }
  .ranking-podium__item--slot-fourth { grid-column: 1; grid-row: 3; }
  .ranking-podium__item--slot-fifth { grid-column: 2; grid-row: 3; }
  .ranking-podium--count-2 .ranking-podium__item--slot-runner-up,
  .ranking-podium--count-4 .ranking-podium__item--slot-fourth { grid-column: 1 / -1; width: calc((100% - .6rem) / 2); justify-self: center; }
  .ranking-podium__card { flex: 1 1 auto; gap: .42rem; padding: .5rem; }
  .ranking-podium__item--rank-1 .ranking-podium__card { padding: .78rem; }
  .ranking-podium__header { gap: .2rem; }
  .ranking-podium__rank { font-size: .8rem; }
  .ranking-podium__badge { min-height: 1.1rem; font-size: .58rem; }
  .ranking-podium__body { gap: .25rem; padding-inline: 0; }
  .ranking-podium__item h3 { font-size: .88rem; line-height: 1.25; }
  .ranking-podium__item--rank-1 h3 { font-size: 1.2rem; }
  .ranking-podium__value { font-size: clamp(.84rem, 3.8vw, 1rem); white-space: normal; overflow-wrap: anywhere; }
  .ranking-podium__item--rank-1 .ranking-podium__value { font-size: 1.72rem; }
  .ranking-podium__updated { font-size: .7rem; overflow-wrap: anywhere; }
}

@media (max-width: 359px) {
  .ranking-podium__card { padding: .55rem; }
  .ranking-podium__item--rank-1 .ranking-podium__card { padding: .68rem; }
  .ranking-podium__value { font-size: .84rem; }
  .ranking-podium__item--rank-1 .ranking-podium__value { font-size: 1.5rem; }
}