/**
 * PÓDIO do campeonato encerrado (`Evento/Views/_podio.php`) — os três primeiros em cards, acima
 * da tabela de classificação da página pública do evento.
 *
 * Cores: a plataforma não guarda cor de equipe, então quem colore o card é a MEDALHA (ouro,
 * prata, bronze). É o código universal do pódio: dá para saber quem ganhou sem ler o número.
 * As três rampas são fundos PROFUNDOS com um acento claro — ouro claro atrás de texto branco
 * não teria contraste, e o acento é o que devolve o brilho do metal ao número e aos pontos.
 * Ver DESIGN.md § Pódio do campeonato.
 */

.rs-podio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;                 /* o 1º é mais alto: os cards encostam pela BASE */
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.rs-podio-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 176px;
  padding: 1rem 1.1rem;
  border-radius: var(--rs-radius);
  color: #fff;
  background:
    /* trama de meio-tom saindo da direita, sob a foto — a textura do modelo */
    radial-gradient(circle at center, rgba(255, 255, 255, .16) 1px, transparent 1.2px) 0 0 / 7px 7px,
    linear-gradient(105deg, var(--metal-esc) 0%, var(--metal-esc) 38%, var(--metal) 100%);
  background-blend-mode: soft-light, normal;
  box-shadow: var(--rs-shadow);
  isolation: isolate;               /* segura o z-index dos filhos dentro do card */
}

/* Ouro · prata · bronze. `--metal` é o tom vivo (borda direita e acentos) e `--metal-esc` o
   fundo profundo onde o texto branco fica legível. */
.rs-podio-p1 { --metal: #c9971f; --metal-esc: #4a3506; --metal-luz: #ffd76e; }
.rs-podio-p2 { --metal: #79808e; --metal-esc: #2b2f36; --metal-luz: #dfe3ea; }
.rs-podio-p3 { --metal: #9c5c2b; --metal-esc: #3a2211; --metal-luz: #f0a86a; }

/* O 1º lugar: no meio e mais alto. `order` só vale no layout de 3 colunas — o DOM está em
   ordem de leitura (1,2,3), que é o que sobra no celular e no leitor de tela. */
.rs-podio-p1 { order: 2; min-height: 208px; }
.rs-podio-p2 { order: 1; }
.rs-podio-p3 { order: 3; }

/* ---- foto ---- */
.rs-podio-foto {
  position: absolute;
  inset: 0 0 0 38%;
  z-index: -1;
  display: block;
  /* Esvanece para a esquerda: a foto vira parte do fundo em vez de um retângulo colado. */
  /* Só o ALFA da máscara é lido — `currentColor` (opaco) evita fingir que isto é uma cor. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, currentColor 45%);
          mask-image: linear-gradient(to right, transparent 0%, currentColor 45%);
}
.rs-podio-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
/* Foto de PERFIL no lugar da capa: retrato quadrado e pequeno, então ela ocupa menos LARGURA
   que uma capa — mas a ALTURA é sempre a do card inteiro. Deixar sobrar uma faixa do gradiente
   em cima denunciava o retângulo da imagem, que é justamente o que a máscara existe para
   esconder. Quem controla o tamanho aparente é a altura do card (ver min-height). */
.rs-podio-foto.is-avatar {
  inset: 0 0 0 auto;
  width: 58%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, currentColor 55%);
          mask-image: linear-gradient(to right, transparent 0%, currentColor 55%);
}
.rs-podio-foto.is-avatar img { object-position: center 20%; }

/* ---- posição ---- */
.rs-podio-pos {
  position: absolute;
  top: .75rem;
  left: 1.1rem;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--metal-luz);
  letter-spacing: -.02em;
}
.rs-podio-pos sup {
  font-size: .42em;
  font-weight: 700;
  text-transform: uppercase;
  margin-left: .1em;
  top: -.8em;
}
.rs-podio-p1 .rs-podio-pos { font-size: 2.4rem; }

/* ---- piloto ---- */
.rs-podio-quem { margin-top: auto; padding-top: 2.5rem; }
.rs-podio-nome { font-size: 1.05rem; line-height: 1.2; text-wrap: balance; }
.rs-podio-nome a { color: inherit; text-decoration: none; }
.rs-podio-nome a:hover strong { color: var(--metal-luz); }
.rs-podio-nome .leve { font-weight: 400; opacity: .85; }
.rs-podio-nome strong { font-weight: 800; transition: color var(--rs-transition); }
.rs-podio-sub {
  font-size: .78rem;
  opacity: .8;
  margin-top: .15rem;
}
.rs-podio-bandeira {
  display: inline-block;
  margin-top: .5rem;
  width: 1.4rem;
  height: 1.05rem;
}

/* ---- pontos ---- */
.rs-podio-pts {
  margin-top: 1.1rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.rs-podio-pts strong { font-size: 1.6rem; font-weight: 800; }
.rs-podio-pts span {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .75;
  margin-left: .15rem;
}
.rs-podio-p1 .rs-podio-pts strong { font-size: 1.9rem; color: var(--metal-luz); }

/* ---- telas estreitas ---- */
/* Uma coluna: aí o `order` sai de cena e vale a ordem do DOM (1º, 2º, 3º) — empilhado, "mais
   alto" não quer dizer nada, e o campeão tem de vir primeiro. */
@media (max-width: 720px) {
  .rs-podio { grid-template-columns: 1fr; gap: .75rem; }
  .rs-podio-card,
  .rs-podio-p1 { order: 0; min-height: 148px; }
  .rs-podio-quem { padding-top: 2.25rem; }
  .rs-podio-pts { margin-top: .8rem; }
  .rs-podio-foto { inset: 0 0 0 45%; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-podio-nome strong { transition: none; }
}