/* ============================================================
   Rede Prime // os quadros

   Corre POR CIMA do estilo.css e nao o repete.

   O gesto e o PODIO, e a ideia veio do painel de staff: la, o que
   interessa num quadro nao e o numero do primeiro, e a DISTANCIA
   entre o primeiro e o resto. Aqui os degraus tem a altura a
   serio -- se o primeiro tem o triplo do segundo, o degrau dele e
   o triplo. Um quadro saudavel parece um podio; um quadro
   estragado ve-se de relance, sem saber ler um numero.
   ============================================================ */

/* ---------------------------------------------------- abertura */

/* mais curto do que o hero da pagina inicial: o quadro a serio esta
   logo a seguir. A largura da coluna fica a mesma (760px, do
   .hero__interior) para a abertura ler-se como o mesmo gesto em
   toda a rede */
.abertura { padding: clamp(64px, 10vw, 128px) 24px clamp(48px, 7vw, 88px); }

/* ------------------------------------------------- procura-te */

/* a copia da abertura deixou de trazer margem por baixo -- sem isto a
   etiqueta "Procura-te" ficava colada ao paragrafo */
.busca { max-width: 520px; margin-top: 30px; }

.busca__rotulo {
  display: block;
  margin-bottom: 8px;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 700;
  font-size: 1rem;
}

.busca__linha { display: flex; gap: 10px; }

.busca__campo {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 18px;
  border: 3px solid rgba(234, 169, 61, .22);
  border-radius: var(--raio-s);
  background: rgba(0, 0, 0, .3);
  color: var(--branco);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .98rem;
  font-weight: 700;
  transition: border-color .2s var(--suave), background .2s var(--suave);
}
.busca__campo::placeholder { color: var(--nevoa-baixa); font-weight: 400; }
.busca__campo:focus { outline: none; border-color: var(--coroa); background: rgba(234, 169, 61, .12); }

.busca__botao { flex: none; }

.busca__resposta { margin: 10px 2px 0; font-size: .92rem; color: var(--nevoa-baixa); }
.busca__resposta:empty { margin: 0; }
.busca__resposta--achou { color: var(--menta); }
.busca__resposta--nada  { color: var(--coroa-claro); }

/* --------------------------------------------- a fita do exemplo */

.fita-exemplo {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 22px;
  padding: 14px 18px;
  border: 3px solid rgba(234, 169, 61, .38);
  border-radius: var(--raio-s);
  background: linear-gradient(100deg, rgba(234, 169, 61, .16), rgba(234, 169, 61, .04) 70%);
  font-size: .95rem;
  color: var(--nevoa);
}
.fita-exemplo b { color: var(--coroa-claro); }
.fita-exemplo__selo {
  flex: none;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(234, 169, 61, .2);
  color: var(--coroa);
}
.fita-exemplo__selo svg { width: 19px; height: 19px; }

/* ------------------------------------------------------ as abas */

.abas {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: clamp(24px, 3vw, 34px);
}

.aba {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  background: rgba(255, 255, 255, .02);
  color: var(--nevoa);
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 700;
  font-size: .98rem;
  cursor: pointer;
  transition: transform .16s var(--mola), border-color .2s var(--suave),
              background .2s var(--suave), color .2s var(--suave);
}
.aba:hover { color: var(--branco); border-color: rgba(255, 255, 255, .22); }
.aba svg { width: 17px; height: 17px; }

.aba[aria-selected="true"] {
  background: var(--tom);
  border-color: var(--tom);
  color: var(--traco);
}

/* a abertura ja deixa ar por baixo da busca; sem isto somavam-se os dois
   espacos e ficava um buraco entre a busca e a fita */
.quadro { padding-top: clamp(18px, 2.4vw, 32px); }

.quadro__cabeca { margin-bottom: clamp(22px, 3vw, 32px); }
.quadro__nota { margin: 12px 0 0; max-width: 62ch; color: var(--nevoa); }
.quadro__pe { margin: 20px 2px 0; font-size: .86rem; color: var(--nevoa-baixa); }

/* ═════════════════════════ O PODIO ═════════════════════════ */

.podio {
  /* O `--palco` e a altura do degrau mais alto, e e contra ELE que as fracoes
     se multiplicam. Ja esteve em percentagem, e nao dava nada: uma altura em %
     precisa de um pai com altura definida, e aqui nao ha nenhum -- o podio
     cresce com o conteudo. O resultado eram tres riscos em vez de tres degraus. */
  --palco: clamp(150px, 20vw, 215px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: clamp(8px, 1.6vw, 18px);
  margin-bottom: 26px;
}

.lugar {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
}

.lugar__cabeca {
  text-align: center;
  padding: 0 4px 12px;
  min-width: 0;
}

.lugar__coroa {
  display: block;
  width: 42px;
  margin: 0 auto 6px;
  color: var(--coroa);
  animation: coroa-cai .7s var(--mola) both;
  animation-delay: var(--atraso-coroa, 1.1s);
}
.lugar__coroa svg { width: 100%; height: auto; filter: drop-shadow(0 4px 12px rgba(234, 169, 61, .7)); }

@keyframes coroa-cai {
  0%   { opacity: 0; transform: translateY(-46px) scale(.5) rotate(-14deg); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

.lugar__nome {
  display: block;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: clamp(.92rem, 1.9vw, 1.15rem);
  line-height: 1.2;
  color: var(--branco);
  overflow-wrap: anywhere;
}

.lugar__valor {
  display: block;
  margin-top: 2px;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: clamp(1.1rem, 2.6vw, 1.6rem);
  line-height: 1.1;
  color: var(--tom);
  font-variant-numeric: tabular-nums;
}

.lugar__gap {
  display: block;
  margin-top: 3px;
  font-size: .76rem;
  color: var(--nevoa-baixa);
}

/* o degrau. A altura vem do valor a serio, e nao de uma escada bonita */
.lugar__bloco {
  position: relative;
  height: calc(var(--fracao, 1) * var(--palco));
  border-radius: 14px 14px 0 0;
  border: 3px solid;
  border-bottom: none;
  overflow: hidden;
  animation: degrau-cresce .75s var(--mola) both;
  animation-delay: var(--atraso, 0ms);
}
@keyframes degrau-cresce {
  from { height: 0; }
  to   { height: calc(var(--fracao, 1) * var(--palco)); }
}

.lugar--1 .lugar__bloco { background: linear-gradient(180deg, #FFDE7A 0%, #F0A800 100%); border-color: #FFF0BE; }
.lugar--2 .lugar__bloco { background: linear-gradient(180deg, #E4ECFF 0%, #93A6CE 100%); border-color: #F2F6FF; }
.lugar--3 .lugar__bloco { background: linear-gradient(180deg, #F0A868 0%, #B96322 100%); border-color: #FFD0A8; }

.lugar__num {
  position: absolute;
  top: 10px; left: 0; right: 0;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1;
  text-align: center;
  color: rgba(5, 3, 8, .62);
}

/* a pessoa que se procurou, se estiver no podio */
.lugar--tu .lugar__cabeca { position: relative; }
.lugar__tu {
  display: inline-block;
  margin-bottom: 5px;
  padding: 3px 11px;
  border-radius: 999px;
  background: var(--menta);
  color: var(--traco);
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  animation: estoiro .45s var(--mola);
}

/* ═════════════════════════ DO 4 AO 10 ═════════════════════════ */

.lista {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fila {
  display: grid;
  grid-template-columns: 46px minmax(0, 1.1fr) minmax(0, 1.6fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 2px solid rgba(255, 255, 255, .07);
  border-radius: var(--raio-s);
  background: rgba(0, 0, 0, .2);
  animation: fila-entra .45s var(--suave) both;
  animation-delay: var(--atraso, 0ms);
  transition: border-color .2s var(--suave), background .2s var(--suave);
}
.fila:hover { border-color: rgba(234, 169, 61, .3); background: rgba(0, 0, 0, .3); }

@keyframes fila-entra {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}

.fila__lugar {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  text-align: center;
  color: var(--nevoa-baixa);
  font-variant-numeric: tabular-nums;
}

.fila__nome {
  font-weight: 600;
  color: var(--branco);
  overflow-wrap: anywhere;
}

/* A barra e a distancia ate ao primeiro. E o que um quadro tem para dizer e uma
   lista de numeros nao diz: a queda. */
.fila__barra {
  height: 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}
.fila__barra i {
  display: block;
  height: 100%;
  width: var(--largura);
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tom) 55%, transparent), var(--tom));
  animation: barra-enche .8s var(--suave) both;
  animation-delay: var(--atraso, 0ms);
}
@keyframes barra-enche { from { width: 0; } to { width: var(--largura); } }

.fila__valor {
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: 1.06rem;
  color: var(--branco);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.fila--tu {
  border-color: var(--menta);
  background: rgba(52, 229, 160, .12);
}
.fila--tu .fila__lugar { color: var(--menta); }

/* ------------------------------------------- quando nao ha ninguem */

.vazio {
  padding: clamp(28px, 5vw, 46px);
  border: 3px dashed rgba(234, 169, 61, .3);
  border-radius: var(--raio);
  background: rgba(0, 0, 0, .18);
  text-align: center;
}
.vazio h3 {
  margin: 0 0 8px;
  font-family: "Big Shoulders Display", sans-serif;
  font-weight: 800;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  color: var(--branco);
}
.vazio p { margin: 0 auto 20px; max-width: 44ch; color: var(--nevoa); }

/* ═════════════════════════ ecra pequeno ═════════════════════════ */

@media (max-width: 760px) {
  /* A barra da distancia e a primeira coisa a sair: com 300px de largura ela
     fica com dois dedos e deixa de dizer o que quer que seja, e o nome e o
     numero e que tem de caber. */
  .fila { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; }
  .fila__barra { display: none; }
}

@media (max-width: 620px) {
  .abertura, .quadro { padding-left: 16px; padding-right: 16px; }
  .busca__linha { flex-direction: column; }
  .busca__botao { width: 100%; }
  .podio { gap: 6px; }
  .lugar__cabeca { padding-left: 1px; padding-right: 1px; }
  .fita-exemplo { flex-direction: column; text-align: center; gap: 10px; }
}

/* ═════════════════════════ menos movimento ═════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .lugar__bloco { animation: none; height: calc(var(--fracao, 1) * var(--palco)); }
  .lugar__coroa { animation: none; opacity: 1; transform: none; }
  .fila { animation: none; opacity: 1; transform: none; }
  .fila__barra i { animation: none; width: var(--largura); }
}