/*
 * 67_liga.css — PACOTE liga-celebracao (2309) · §2.8 (docs/GUSTAVO-2309.md)
 * ═══════════════════════════════════════════════════════════════════════════
 * Só o PÓDIO da segunda-feira (`ranking/_podio`). As abas (`.abas`) e a
 * lista do placar (`.placar*`) já são componentes de outras folhas
 * (10_componentes.css, 65_gamificacao.css) — a Liga usa a MESMA marcação de
 * `.placar` para a lista da semana corrente, e só precisa de folha própria
 * para o que é novo: o pódio.
 *
 * Fica no 67 (depois de 66_celebracao) porque as duas folhas deste pacote
 * compartilham a mesma família visual — o "brilho de conquista" da tela de
 * resultado e o pódio da Liga são a mesma linguagem, só em componentes
 * diferentes.
 *
 * Anima só `transform` e `opacity` (MARCA.md §2), e a entrada em si é o
 * `revelar` que já existe (`app/javascript/controllers/revelar_controller.js`,
 * aplicado pela view via `revelar`/`revelar_item` — nenhum nome de controller
 * Stimulus é escrito aqui nem no ERB, por isso não tem `data-controller`
 * nesta folha: quem gera é o helper).
 */

.podio { margin-bottom: var(--esp-5) }
.podio__titulo { margin: 0; font-size: var(--texto-lg) }
.podio__ajuda { margin: 0 0 var(--esp-4); font-size: var(--texto-sm); color: var(--texto-tenue) }

.podio__lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: var(--esp-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.podio__lugar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-1);
  padding: var(--esp-4) var(--esp-2) var(--esp-3);
  border-radius: var(--raio-3);
  background: var(--fundo-elevado);
  border: 1px solid var(--borda);
  text-align: center;
}

/* O DEGRAU DE VERDADE: 2º-1º-3º na tela, 1º-2º-3º no DOM (é a ordem que o
   `topo` já entrega e que um leitor de tela lê — ver `ranking/_podio`).
   `order` é layout puro, não anima, e por isso não entra na conta do §2. */
.podio__lugar--1 { order: 2; padding-top: var(--esp-6); border-color: var(--cor-pontos) }
.podio__lugar--2 { order: 1 }
.podio__lugar--3 { order: 3 }

.podio__lugar--1 .podio__medalha { color: #e8b93a }
.podio__lugar--2 .podio__medalha { color: #b8c0cc }
.podio__lugar--3 .podio__medalha { color: #c98a4b }

.podio__posicao { line-height: 0 }
.podio__pessoa { font-size: var(--texto-sm); font-weight: var(--peso-medio) }
.podio__eu { display: block; font-size: var(--texto-xs); color: var(--cor-marca); font-weight: var(--peso-forte) }
.podio__pontos { font-size: var(--texto-xs); color: var(--texto-tenue); font-variant-numeric: tabular-nums }

@media (max-width: 30rem) {
  /* Em 360px três colunas apertam o texto do 1º lugar (que já é mais alto).
     Abaixo desse ponto o degrau vira LISTA — ainda na ordem 1-2-3 do DOM,
     que aqui já é a ordem visual desejada (sem `order` nenhum a mais). */
  .podio__lista { grid-template-columns: 1fr; }
  .podio__lugar--1, .podio__lugar--2, .podio__lugar--3 { order: initial; padding-top: var(--esp-3) }
}