/* Banner das finais, na Tabela de Jogos da home.
 * ---------------------------------------------------------------------------
 * Este arquivo NÃO faz parte do site copiado. Ele é nosso, e desenha o bloco
 * que `finais.js` monta. Apagar as duas linhas que carregam os dois arquivos no
 * index.html devolve a lista de sempre, sem deixar rastro.
 *
 * O desenho segue as artes de divulgação da Liga: formato retrato, data em
 * faixa no alto, selo da fase, os dois escudos grandes com o VS entre eles, e o
 * horário e o ginásio embaixo. A cor de cada banner vem da competição, gravada
 * no banco, e não daqui: masculino no azul da Liga, feminino no magenta.
 */

/* Aviso da Liga, em faixa retangular no alto da Tabela de Jogos.
 * A cor sai do tom gravado no cadastro: azul informa, amarelo chama atenção,
 * vermelho é urgência. A faixa lateral grossa é o que diferencia um recado
 * oficial do resto da página sem precisar gritar. */
.lfa-avisos {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.lfa-aviso {
  --tom: #1E6FBF;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 1rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--tom) 35%, transparent);
  border-left: 4px solid var(--tom);
  border-radius: 0.5rem;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--tom) 14%, transparent) 0%,
    rgba(255, 255, 255, 0.02) 42%);
}

.lfa-aviso[data-tom="atencao"] { --tom: #F5C518; }
.lfa-aviso[data-tom="urgente"] { --tom: #E0483B; }

.lfa-aviso-selo {
  grid-row: 1 / 3;
  align-self: start;
  margin-top: 0.15rem;
  width: 1.65rem;
  height: 1.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tom) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--tom) 55%, transparent);
  color: var(--tom);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
}

.lfa-aviso-titulo {
  margin: 0 0 0.3rem;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-wrap: balance;
}

.lfa-aviso-texto {
  margin: 0;
  /* Linha confortável de ler sem deixar metade da faixa vazia. Em 62ch o texto
   * ocupava pouco mais da metade da largura e o bloco parecia inacabado. */
  max-width: 92ch;
  color: rgba(232, 237, 245, 0.72);
  font-size: 0.82rem;
  line-height: 1.6;
}

.lfa-aviso-link {
  display: inline-block;
  margin-top: 0.6rem;
  color: var(--tom);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

.lfa-aviso-link:hover, .lfa-aviso-link:focus-visible { text-decoration: underline; }

@media (max-width: 480px) {
  .lfa-aviso { padding: 0.95rem 1rem; gap: 0 0.75rem; }
  .lfa-aviso-selo { width: 1.4rem; height: 1.4rem; font-size: 0.8rem; }
}

.lfa-finais {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  margin-bottom: 2.5rem;
}

.lfa-final {
  --cor: #1E6FBF;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cor) 45%, transparent);
  border-radius: 0.75rem;
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--cor) 30%, transparent) 0%, transparent 62%),
    linear-gradient(180deg, rgba(10, 16, 24, 0.2) 0%, rgba(6, 10, 16, 0.85) 100%),
    #080d14;
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.lfa-final:hover,
.lfa-final:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--cor) 85%, transparent);
  box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--cor) 90%, transparent);
}

.lfa-final:focus-visible { outline: 2px solid var(--cor); outline-offset: 3px; }

/* Faixa da data, no alto, como nas artes. */
.lfa-final-data {
  padding: 0.55rem 1rem;
  background: var(--cor);
  color: #fff;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}

.lfa-final-corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 1.5rem 1.35rem;
  text-align: center;
}

.lfa-final-competicao {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232, 237, 245, 0.55);
}

/* A marca da competição, quando cadastrada, ocupa o lugar do nome em texto. */
.lfa-final-marca {
  width: 100%;
  max-width: 20rem;
  max-height: 5.5rem;
  object-fit: contain;
}

.lfa-final-fase {
  display: inline-block;
  padding: 0.2rem 0.9rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cor) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--cor) 60%, transparent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* O duelo ocupa a sobra do banner e fica centrado nela. Sem isto, o espaço
 * livre se acumula num vazio entre os escudos e o horário. */
.lfa-final-duelo {
  display: grid;
  flex: 1;
  align-content: center;
  align-items: center;
  gap: 0.5rem;
  grid-template-columns: 1fr auto 1fr;
  width: 100%;
  margin: 0.3rem 0;
}

.lfa-final-time { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; }

.lfa-final-escudo {
  width: 5.25rem;
  height: 5.25rem;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
}

/* Clube sem escudo cadastrado: as três primeiras letras, no lugar da imagem,
 * para o banner não ficar com um buraco. */
.lfa-final-sigla {
  display: flex;
  width: 5.25rem;
  height: 5.25rem;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--cor) 45%, transparent);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.lfa-final-nome {
  max-width: 9.5rem;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
}

.lfa-final-vs {
  color: color-mix(in srgb, var(--cor) 75%, #ffffff);
  font-size: 1.05rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.05em;
}

.lfa-final-quando {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.lfa-final-hora {
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.lfa-final-local {
  color: rgba(232, 237, 245, 0.55);
  font-size: 0.7rem;
}

.lfa-final-chamada {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.85rem;
  color: var(--cor);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Final encerrada: placar no lugar do VS, vencedor em destaque e a faixa do
 * campeao em dourado (25/09/2026). */
.lfa-final-placar {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  color: rgba(255, 255, 255, 0.55);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.lfa-final-placar .lfa-final-x { font-size: 1rem; font-style: italic; color: rgba(255, 255, 255, 0.45); }
.lfa-final-placar .lfa-final-gols-venceu { color: #F5C518; }
.lfa-final-time:not(.lfa-final-venceu) .lfa-final-escudo { opacity: 0.72; }
.lfa-final-encerrada .lfa-final-duelo .lfa-final-time:not(.lfa-final-venceu) { opacity: 0.8; }
.lfa-final-venceu .lfa-final-nome { color: #F5C518; }
.lfa-final-campeao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: 100%;
  margin-top: 0.8rem;
  padding: 0.85rem 0.75rem;
  border-radius: 0.6rem;
  background: linear-gradient(180deg, rgba(245, 197, 24, 0.16), rgba(245, 197, 24, 0.05));
  border: 1px solid rgba(245, 197, 24, 0.45);
  text-align: center;
}
.lfa-final-campeao-rotulo { color: #F5C518; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; }
.lfa-final-campeao-nome { color: #fff; font-size: 1.15rem; font-weight: 800; letter-spacing: 0.02em; text-wrap: balance; }
.lfa-final-parabens { color: rgba(232, 237, 245, 0.75); font-size: 0.75rem; line-height: 1.35; text-wrap: balance; }

/* Enquanto houver final em cartaz, a lista de linhas some: ela mostraria as
 * mesmas duas partidas logo abaixo dos banners. */
.lfa-tem-final .lfa-lista-de-jogos { display: none; }

@media (max-width: 480px) {
  .lfa-final-escudo, .lfa-final-sigla { width: 4.25rem; height: 4.25rem; }
  .lfa-final-corpo { padding: 1.15rem 1rem 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lfa-final { transition: none; }
  .lfa-final:hover, .lfa-final:focus-visible { transform: none; }
}