/* ==========================================================================
   FUTEBOL — páginas Jogos e Classificação
   Só entra nessas duas páginas (functions.php). O topo é o das listagens
   (.listagem__topo, filtros escuros); o branco embaixo carrega a lista de
   jogos ou a tabela. Mesmas três cores: o amarelo marca o Corinthians e o
   que é bom para ele, o preto marca o que não é.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Escudo — imagem da API-Futebol, ou a sigla num círculo quando não há
   imagem. No fundo preto ele entra num disco branco: o escudo do Corinthians
   tem partes pretas que sumiriam ali. O disco é o alvi do alvinegro, não uma
   cor nova.
   -------------------------------------------------------------------------- */

.escudo {
  flex: none;
  object-fit: contain;
}

/* Folga em px, por tamanho: padding em % mede a largura do contêiner, não a
   do escudo. */
.escudo--disco {
  padding: 12px;
  border-radius: 50%;
  background: var(--branco);
}
.tabela .escudo--disco { padding: 3px; }

.escudo--sigla {
  display: inline-grid;
  place-items: center;
  width: var(--escudo);
  height: var(--escudo);
  border: 1px solid var(--linha);
  border-radius: 50%;
  font-family: var(--font-text);
  font-size: calc(var(--escudo) * 0.3);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
  color: var(--texto-corpo);
}

.futebol__atualizado { white-space: nowrap; }

/* Aviso do administrador quando falta a chave ou a API recusa o pedido. */
.futebol__aviso {
  max-width: 66ch;
  margin-bottom: var(--e-32);
  padding: var(--e-16) var(--e-24);
  border-left: 4px solid var(--amarelo);
  background: rgba(15, 15, 15, 0.04);
  font-size: var(--card);
  line-height: var(--lh-card);
}


/* --------------------------------------------------------------------------
   Próximo jogo — o destaque do topo da agenda
   O confronto é a headline da página: Pride em D2, mandante à esquerda do
   ×, visitante à direita, cada nome colado ao seu escudo. O Corinthians
   leva o acento amarelo, o mesmo da segunda linha das headlines.
   -------------------------------------------------------------------------- */

.proximo-jogo {
  margin-top: var(--e-48);
  padding: var(--e-48);
  border: 1px solid var(--linha);
  border-radius: var(--raio-card);
}

.proximo-jogo__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-8) var(--e-16);
}

.proximo-jogo__falta { color: var(--amarelo); }

.proximo-jogo__confronto {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--e-32);
  margin-block: var(--e-48);
  font-family: var(--font-display);
  font-size: var(--d2);
  font-weight: 400;
  line-height: var(--lh-d2);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}

.proximo-jogo__time {
  display: flex;
  align-items: center;
  gap: var(--e-24);
  min-width: 0;
}
/* O mandante lê da direita para a esquerda: nome, escudo, ×. */
.proximo-jogo__time:first-child {
  flex-direction: row-reverse;
  text-align: right;
}

.proximo-jogo__nome { overflow-wrap: anywhere; }
.proximo-jogo__time--nosso .proximo-jogo__nome { color: var(--amarelo); }

.proximo-jogo__x {
  color: var(--sobre-preto-45);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.proximo-jogo__pe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-8) var(--e-32);
  padding-top: var(--e-24);
  border-top: 1px solid var(--linha);
}

.proximo-jogo__quando {
  font-size: var(--apoio);
  font-weight: 600;
  line-height: 1.4;
}
.proximo-jogo__hora {
  margin-left: var(--e-8);
  color: var(--amarelo);
}

.proximo-jogo__agenda { margin-left: auto; }

@media (max-width: 767px) {
  .proximo-jogo {
    padding: var(--e-24);
    margin-top: var(--e-32);
  }

  /* No celular o confronto empilha: mandante, ×, visitante, tudo na
     esquerda — a leitura de cima para baixo substitui a da esquerda para a
     direita. */
  .proximo-jogo__confronto {
    grid-template-columns: 1fr;
    gap: var(--e-16);
    margin-block: var(--e-32);
    font-size: 2.25rem;
  }
  .proximo-jogo__time { gap: var(--e-16); }
  .proximo-jogo__time:first-child {
    flex-direction: row;
    text-align: left;
  }
  .proximo-jogo__time .escudo { width: 48px; height: 48px; }
  .proximo-jogo__time .escudo--disco { padding: 8px; }
  .proximo-jogo__x { padding-left: 64px; font-size: 1.5rem; }

  .proximo-jogo__agenda { margin-left: 0; }
}


/* --------------------------------------------------------------------------
   Agenda — lista por mês, uma linha por jogo
   Desktop: data · campeonato e local · confronto · resultado. O confronto
   é um placar: mandante encostado no centro pela direita, visitante pela
   esquerda, hora ou placar no meio.
   -------------------------------------------------------------------------- */

.jogos__mes + .jogos__mes { margin-top: var(--e-64); }

.jogos__mes-titulo {
  padding-bottom: var(--e-16);
  border-bottom: 2px solid var(--preto);
  font-family: var(--font-display);
  font-size: var(--h3);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}

.jogos__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.jogo {
  display: grid;
  grid-template-columns: 64px minmax(160px, 240px) 1fr 96px;
  grid-template-areas: "data sobre confronto ponta";
  align-items: center;
  gap: var(--e-32);
  padding-block: var(--e-24);
  border-bottom: 1px solid var(--linha);
}

.jogo__data {
  grid-area: data;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.jogo__dia {
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
}
.jogo__semana {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-meta);
}

.jogo__sobre {
  grid-area: sobre;
  min-width: 0;
}
/* O mesmo rótulo da editoria no card de notícia: amarelo escurecido até
   ler como texto miúdo sobre o branco. */
.jogo__campeonato {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #806000;
}
.jogo__local {
  margin-top: 4px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--texto-corpo);
}

.jogo__confronto {
  grid-area: confronto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--e-16);
}

.jogo__time {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-size: var(--corpo);
  font-weight: 500;
  color: var(--texto-corpo);
}
.jogo__time--mandante {
  flex-direction: row-reverse;
  text-align: right;
}
.jogo__time--nosso {
  font-weight: 700;
  color: var(--preto);
}
.jogo__nome { overflow-wrap: anywhere; }

.jogo__centro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 96px;
}

.jogo__hora {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--linha);
  font-size: var(--card);
  font-weight: 700;
  white-space: nowrap;
}

.jogo__placar {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.jogo__penaltis,
.jogo__ao-vivo {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.jogo__penaltis { color: var(--texto-meta); }
.jogo__ao-vivo {
  padding: 2px 8px;
  background: var(--amarelo);
  color: var(--preto);
}

.jogo__ponta {
  grid-area: ponta;
  justify-self: end;
}

/* V, E, D — um quadro de 32 na ponta da linha. Vitória no amarelo, derrota
   no preto, empate só no filete. */
.jogo__resultado {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--preto);
  border-radius: var(--raio-mini);
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1;
}
.jogo--v .jogo__resultado { background: var(--amarelo); border-color: var(--amarelo); }
.jogo--d .jogo__resultado { background: var(--preto); color: var(--branco); }

/* "Agenda" — o "ver todas" das seções da home: caixa alta miúda sobre o
   traço amarelo. */
.jogo__agenda {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: 8px;
  border-bottom: 2px solid var(--amarelo);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color var(--dur-rapida) var(--ease-padrao);
}
.jogo__agenda:hover { border-bottom-color: var(--preto); }
.jogo__agenda svg { width: 16px; height: 16px; }

@media (max-width: 1023px) {
  .jogo {
    grid-template-columns: 56px 1fr auto;
    grid-template-areas:
      "data sobre ponta"
      "data confronto confronto";
    gap: var(--e-16) var(--e-24);
    align-items: start;
  }
  .jogo__ponta { align-self: center; }
}

@media (max-width: 767px) {
  /* No celular o confronto vira placar de aplicativo: um time por linha,
     hora ou placar na coluna da direita. */
  .jogo__confronto {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "mandante centro"
      "visitante centro";
    gap: 10px var(--e-16);
  }
  .jogo__time--mandante {
    grid-area: mandante;
    flex-direction: row;
    text-align: left;
  }
  .jogo__time--visitante { grid-area: visitante; }
  .jogo__centro {
    grid-area: centro;
    min-width: 0;
    align-items: flex-end;
  }
  .jogo__time .escudo { width: 24px; height: 24px; }
  .jogo__dia { font-size: 2rem; }
  .jogo__agenda span { display: none; }
  .jogo__agenda { padding: 8px 4px; }
  .jogo__agenda svg { width: 20px; height: 20px; }
}


/* Balanço da temporada — abre a lista de resultados. Os números em Pride,
   preto: amarelo em display sobre branco não paga o contraste. Quem leva a
   cor é o quadro miúdo do rótulo, o mesmo da ponta de cada jogo. */

.jogos__balanco {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-24) var(--e-48);
  margin-bottom: var(--e-64);
}

.balanco {
  display: flex;
  gap: var(--e-48);
  margin: 0;
}

.balanco__item {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--e-8);
}

.balanco__item dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}

.balanco__item dt {
  display: flex;
  align-items: center;
  gap: var(--e-8);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-corpo);
}
.balanco__item dt::before {
  content: '';
  width: 10px;
  height: 10px;
  border: 1px solid var(--preto);
}
.balanco__item--v dt::before { background: var(--amarelo); border-color: var(--amarelo); }
.balanco__item--d dt::before { background: var(--preto); }

@media (max-width: 767px) {
  .balanco { gap: var(--e-32); }
  .jogos__balanco { margin-bottom: var(--e-48); }
}


/* --------------------------------------------------------------------------
   Classificação
   -------------------------------------------------------------------------- */

/* A campanha do Corinthians no bloco de dado da landing: número em Pride
   amarelo, rótulo embaixo. Quatro na linha; duas no celular. */
.dados--campanha {
  grid-template-columns: repeat(4, 1fr);
  max-width: 880px;
  margin: var(--e-48) 0 0;
}
.dados--campanha .dado {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
}
.dados--campanha dd { margin: 0; }

@media (max-width: 767px) {
  .dados--campanha { grid-template-columns: repeat(2, 1fr); margin-top: var(--e-32); }
}


/* A tabela. Números tabulares, centrados; o time à esquerda. A faixa da
   zona é um traço de 4px na casa da posição. */

.tabela__rolagem {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tabela {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--card);
  font-variant-numeric: tabular-nums;
}

.tabela abbr {
  text-decoration: none;
  cursor: help;
}

.tabela thead th {
  padding: 0 var(--e-8) 12px;
  border-bottom: 2px solid var(--preto);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--texto-meta);
  white-space: nowrap;
}

.tabela td,
.tabela tbody th {
  padding: 12px var(--e-8);
  border-bottom: 1px solid var(--linha);
  text-align: center;
  color: var(--texto-corpo);
  white-space: nowrap;
  transition: background-color var(--dur-rapida) var(--ease-padrao);
}

.tabela tbody tr:hover > * { background: rgba(15, 15, 15, 0.04); }

.tabela .tabela__pos {
  position: relative;
  width: 56px;
  font-weight: 700;
  color: var(--preto);
}

[data-zona="acesso"]     { --zona: var(--amarelo); }
[data-zona="secundaria"] { --zona: var(--sobre-branco-40); }
[data-zona="queda"]      { --zona: var(--preto); }

.tabela__linha[data-zona] .tabela__pos::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  background: var(--zona);
}

.tabela .tabela__time {
  text-align: left;
  font-weight: 600;
  color: var(--preto);
}
.tabela tbody .tabela__time .escudo {
  display: inline-block;
  margin-right: 12px;
  vertical-align: middle;
}
.tabela__nome { vertical-align: middle; }
.tabela__sigla { display: none; }

.tabela .tabela__pontos {
  font-weight: 700;
  color: var(--preto);
}
.tabela thead .tabela__pontos { color: var(--preto); }

/* A linha do Corinthians inverte: preto chapado, texto branco, pontos em
   amarelo. A faixa de rebaixamento, preta, vira branca para não sumir. */
.tabela .tabela__linha--nosso > * {
  background: var(--preto);
  color: var(--sobre-preto-72);
  border-bottom-color: var(--preto);
}
.tabela .tabela__linha--nosso:hover > * { background: var(--preto); }
.tabela .tabela__linha--nosso .tabela__pos,
.tabela .tabela__linha--nosso .tabela__time { color: var(--branco); }
.tabela .tabela__linha--nosso .tabela__pontos { color: var(--amarelo); }
.tabela .tabela__linha--nosso > :first-child { border-radius: var(--raio-mini) 0 0 var(--raio-mini); }
.tabela .tabela__linha--nosso > :last-child  { border-radius: 0 var(--raio-mini) var(--raio-mini) 0; }
.tabela__linha--nosso[data-zona="queda"] { --zona: var(--branco); }

/* Últimos jogos — os quadros V/E/D da agenda, em miniatura. */
.tabela .tabela__ultimos { padding-left: var(--e-16); }

.ultimos {
  display: inline-flex;
  gap: 3px;
  vertical-align: middle;
}
.ultimos__jogo {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--preto);
  border-radius: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: var(--preto);
}
.ultimos__jogo--v { background: var(--amarelo); border-color: var(--amarelo); }
.ultimos__jogo--d { background: var(--preto); color: var(--branco); }

/* Na linha preta do Corinthians o empate e a derrota precisam do filete
   branco para não sumir. */
.tabela__linha--nosso .ultimos__jogo--e { border-color: var(--branco); color: var(--branco); }
.tabela__linha--nosso .ultimos__jogo--d { border-color: var(--sobre-preto-45); }

.tabela__pe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-16) var(--e-48);
  margin-top: var(--e-32);
}

.tabela__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-8) var(--e-24);
}
.tabela__legenda li {
  display: flex;
  align-items: center;
  gap: var(--e-8);
  font-size: 0.8125rem;
  font-weight: 600;
}
.tabela__legenda li::before {
  content: '';
  width: 4px;
  height: 16px;
  background: var(--zona);
}

@media (max-width: 767px) {
  .tabela__extra { display: none; }

  /* A tabela rola de lado; posição e time ficam presos à esquerda. */
  .tabela__rolagem {
    margin-inline: calc(var(--margem) * -1);
    padding-inline: var(--margem);
  }
  .tabela .tabela__pos,
  .tabela .tabela__time {
    position: sticky;
    z-index: 1;
    background: var(--branco);
  }
  /* As colunas presas precisam de fundo próprio; na linha do Corinthians,
     o preto dela. */
  .tabela .tabela__linha--nosso > .tabela__pos,
  .tabela .tabela__linha--nosso > .tabela__time { background: var(--preto); }
  .tabela .tabela__pos { left: 0; width: 40px; min-width: 40px; }
  .tabela .tabela__time { left: 40px; }
  .tabela td, .tabela tbody th { padding-inline: 6px; }
  .tabela tbody .tabela__time .escudo { margin-right: var(--e-8); }
}

@media (max-width: 479px) {
  .tabela__nome { display: none; }
  .tabela__sigla { display: inline; vertical-align: middle; }
}