/*
 * Páginas públicas: /results e /articles.
 *
 * Esta marcação aparece duas vezes na vida de uma visita. Primeiro no HTML que a API
 * entrega, ainda sem JavaScript — é o que o rastreador lê e o que o visitante vê de
 * imediato. Depois, quando o WebAssembly sobe, o componente ConteudoPublico reinsere o
 * MESMO HTML dentro do MainLayout, para que a página ganhe a barra lateral, o cabeçalho
 * com estado de login e o seletor de idioma.
 *
 * Por isso o arquivo vive aqui, no wwwroot do Web, e não no layout da API: uma folha só
 * atende as duas aparições, e a troca acontece sem o conteúdo dar um salto na tela.
 *
 * As regras são todas escopadas em .la-pagina — dentro do MainLayout elas convivem com
 * app.css e shared.css, e um seletor solto de h1 ou table vazaria para o resto do site.
 */

.la-pagina {
    --la-cor: #0d6efd;

    max-width: 52rem;
    color: #212529;
}

/* Antes do boot não existe o MainLayout, então o conteúdo precisa do próprio respiro.
   Depois do boot ele já está dentro de <article class="content px-4">, que traz o dele —
   daí o recuo horizontal ficar zerado nesse caso, logo abaixo. */
#conteudo-servidor {
    padding: 2rem 1rem 4rem;
    margin: 0 auto;
    max-width: 54rem;
}

.la-conteudo-publico .la-pagina {
    margin-inline: 0;
}

.la-pagina h1 {
    font-size: 2rem;
    font-weight: 700;
    text-wrap: balance;
    margin-bottom: .75rem;
}

.la-pagina h2 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-top: 2.5rem;
}

.la-pagina h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 1.75rem;
}

.la-pagina p {
    line-height: 1.7;
}

.la-pagina .lead {
    font-size: 1.15rem;
    color: #6c757d;
}

/* Dezenas sorteadas: o elemento que o leitor procura primeiro. */
.la-pagina .la-dezenas {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 0;
    margin: 0 0 1rem;
    list-style: none;
}

.la-pagina .la-dezena {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--la-cor);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.la-pagina .la-dezena-extra {
    background: #6c757d;
}

.la-pagina .la-tabela {
    font-variant-numeric: tabular-nums;
}

.la-pagina .la-tabela th {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c757d;
    font-weight: 600;
}

.la-pagina .la-analise li {
    line-height: 1.7;
    margin-bottom: .5rem;
}

.la-pagina .la-nav-concursos {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
}

.la-pagina .la-aviso {
    font-size: .875rem;
    color: #6c757d;
    border-left: 3px solid #dee2e6;
    padding: .25rem 0 .25rem .85rem;
}

/* --- Artigos --- */

.la-pagina .la-artigos {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 2.5rem;
}

.la-pagina .la-artigo-item h2 {
    margin-top: 0;
}

.la-pagina .la-artigo-item h2 a {
    text-decoration: none;
}

.la-pagina .la-artigo-meta {
    font-size: .875rem;
    color: #6c757d;
    font-variant-numeric: tabular-nums;
}

/* Aviso de que o texto ainda não foi traduzido para o idioma da página. Discreto de
   propósito: é uma ressalva sobre o item, não um alerta. */
.la-pagina .la-artigo-idioma {
    display: inline-block;
    margin-left: .5rem;
    padding: .05rem .4rem;
    border: 1px solid #dee2e6;
    border-radius: .75rem;
    font-size: .8125rem;
    line-height: 1.4;
    white-space: nowrap;
}

.la-pagina .la-artigo-corpo {
    max-width: 40rem;
}

.la-pagina .la-artigo-corpo h2 {
    font-size: 1.35rem;
}

.la-pagina .la-artigo-corpo li {
    line-height: 1.7;
    margin-bottom: .35rem;
}

.la-pagina .la-artigo-corpo blockquote {
    margin: 1.5rem 0;
    padding: .25rem 0 .25rem 1rem;
    border-left: 3px solid var(--la-cor);
    color: #495057;
}

/* Tabela vinda do Markdown não tem o invólucro .table-responsive que as views de
   resultado escrevem à mão, então precisa rolar sozinha. */
.la-pagina .la-artigo-corpo table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.la-pagina .la-artigo-corpo th,
.la-pagina .la-artigo-corpo td {
    border: 1px solid #dee2e6;
    padding: .5rem .75rem;
}

.la-pagina .la-artigo-corpo th {
    background: #f8f9fa;
    text-align: left;
}