/* Páginas das notícias (geradas por motor/futdata/noticias.py): por cima do site.css, com a cor da competição
 * (--cor) na capa e o placar em blocos no lugar da foto. */
.pular { position: absolute; left: -9999px; }
.pular:focus { left: 16px; top: 8px; z-index: 30; padding: 8px 12px; background: var(--limao); color: var(--marinho); }

.materia-capa { position: relative; overflow: hidden; padding: 56px 0 64px;
  background: var(--capa, none) center / cover no-repeat, var(--cor); }
/* a capa: a arte da competição (docs/MIDIA.md), escolhida do banco pela rotina (--capa na página nova); nas páginas
 * de antes, a primeira do banco pela cor. A arte já traz a bandeira, então a do SVG sai. */
[style*="var(--verde)"] { --capa-cor: url(../img/capas/verde-1.jpg); }
[style*="var(--royal)"] { --capa-cor: url(../img/capas/royal-1.jpg); }
[style*="var(--roxo)"] { --capa-cor: url(../img/capas/roxo-1.jpg); }
[style*="var(--coral)"] { --capa-cor: url(../img/capas/coral-1.jpg); }
.materia:not([style*="--capa:"]) .materia-capa { --capa: var(--capa-cor); }
.materia-xadrez { display: none; }
/* nas cores dos clubes (--casa e --fora, de motor/futdata/cores_clubes.py): a arte tingida com o mandante de um lado e
   o visitante do outro, e o filete limão no meio; time fora da tabela fica com a cor da competição */
.materia[style*="--casa:"] .materia-capa, .lista-item[style*="--casa:"] .lista-arte {
  --times: linear-gradient(105deg, var(--casa) 0 50%, var(--fora) 50% 100%);
  --filete: linear-gradient(105deg, transparent calc(50% - 4px), var(--limao) calc(50% - 4px) calc(50% + 4px), transparent calc(50% + 4px));
  background: var(--filete), var(--times), var(--times), var(--capa, var(--capa-cor, none)) center / cover no-repeat, var(--cor);
  background-blend-mode: normal, color, soft-light, normal, normal; }
.materia-capa-in { position: relative; z-index: 1; display: grid; justify-items: start; gap: 40px; }
.materia-chapeu { display: flex; flex-wrap: wrap; margin: 0; }
.materia-chapeu span { padding: 7px 10px; font: 900 12px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; }
.materia-chapeu span:first-child { background: var(--limao); color: var(--marinho); }
.materia-chapeu span + span { background: var(--marinho); }
.materia-capa .placar .pl-gol { background: var(--marinho); color: var(--limao); }

.materia-texto { max-width: 760px; padding-top: 40px; padding-bottom: 64px; }
.materia-texto h1 { margin: 0 0 14px; font: 700 clamp(32px, 4.6vw, 52px)/1 var(--f-grito); text-transform: uppercase; }
.linha-fina { margin: 0 0 12px; font: 500 20px/1.4 var(--f-texto); color: var(--nevoa); }
.materia-data { margin: 0 0 28px; font: 900 12px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--nevoa); }
.materia-corpo p { margin: 0 0 18px; font: 400 18px/1.65 var(--f-texto); }

.ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2px; margin: 32px 0; }
.ficha div { padding: 14px 16px; background: var(--grafite-2); }
.ficha dt { margin-bottom: 6px; font: 900 11px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--limao); }
.ficha dd { margin: 0; font: 500 15px/1.4 var(--f-texto); }


.rodape-curto { padding: 28px 0; }

/* A lista (noticias/index.html) */
.lista { padding-top: 56px; padding-bottom: 72px; }
.lista-nota { max-width: 560px; margin: 14px 0 32px; color: var(--nevoa); }
.lista-noticias { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.lista-item { display: grid; grid-template-columns: 300px 1fr; background: var(--grafite-2); color: var(--branco); text-decoration: none; }
.lista-arte { display: grid; place-items: center; min-height: 140px; padding: 28px 12px 16px;
  background: var(--capa, var(--capa-cor, none)) center / cover no-repeat, var(--cor); }
.lista-txt { display: grid; align-content: center; gap: 8px; padding: 18px 22px; }
.lista-txt small { font: 900 11px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--limao); }
.lista-txt b { font: 900 20px/1.15 var(--f-display); text-transform: uppercase; }
.lista-txt span { color: var(--nevoa); font-size: 15px; }
.lista-item:hover .lista-txt b { color: var(--limao); }
.lista-vazia { padding: 24px; background: var(--grafite-2); color: var(--nevoa); }

@media (max-width: 720px) {
  .materia-capa { padding: 40px 0 44px; }
  .materia-corpo p { font-size: 17px; }
  .lista-item { grid-template-columns: 1fr; }
}