/* ============================================================
   GLOSSÁRIO (/glossario, /glossario/indice/{letra}, /glossario/{slug}).

   Índice: trilho de letras fixo à esquerda e a lista da letra em duas
   colunas à direita. No celular o trilho vira uma fita horizontal presa
   no topo e a lista fica em uma coluna.

   Carregado via @section Styles nas views Glossario e GlossarioPalavra.
   Cores e fontes vêm das variáveis do :root, que mudam por loja.
   ============================================================ */

.glossario {
    padding-bottom: 6rem;
}

/* ---------- Topo ------------------------------------------------------ */

.glossario-topo {
    margin: 0.4rem 0 1.6rem;
}

.glossario-titulo {
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 1rem;
    color: var(--black-medium);
}

.glossario-intro {
    font-size: 1.6rem;
    line-height: 1.6;
    color: var(--gray-medium);
    margin: 0;
}

/* ---------- Barra de letras + conteúdo ----------------------------------
   A barra fica presa no topo enquanto a lista rola. No celular ela rola
   para o lado em vez de quebrar em três linhas. */

.glossario-corpo {
    display: grid;
    gap: 2.4rem;
}

.glossario-trilho {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 1.2rem 0;
    background: var(--superficie);
    border-bottom: 1px solid var(--gray-platinum);
}

.glossario-trilho-letra {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.6rem;
    height: 3.6rem;
    padding: 0 1rem;
    border-radius: 999px;
    border: 1px solid var(--gray-platinum);
    background: var(--superficie);
    color: var(--black-medium);
    font-size: 1.4rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}

    .glossario-trilho-letra:hover {
        border-color: var(--padrao-new);
        color: var(--padrao-new);
        text-decoration: none;
    }

    .glossario-trilho-letra.ativa {
        background: var(--padrao-new);
        border-color: var(--padrao-new);
        color: var(--cor-padrao-texto);
    }

/* ---------- Busca ------------------------------------------------------- */

.glossario-busca {
    position: relative;
    max-width: 42rem;
    margin: 0 0 2.4rem;
}

    .glossario-busca .fa-search {
        position: absolute;
        left: 1.4rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--gray-silver);
        font-size: 1.4rem;
    }

.glossario-busca-campo {
    width: 100%;
    height: 4.4rem;
    border: 1px solid var(--gray-light-silver);
    border-radius: 10px;
    padding: 0 1.4rem 0 4rem;
    font-size: 1.5rem;
    color: var(--black-medium);
    background: var(--superficie);
}

    .glossario-busca-campo:focus {
        outline: none;
        border-color: var(--padrao-new);
        box-shadow: 0 0 0 3px var(--background-button);
    }

.glossario-vazio {
    font-size: 1.5rem;
    color: var(--gray-medium);
    margin: 2rem 0;
}

/* ---------- Grupo por letra e lista ------------------------------------- */

.glossario-grupo {
    /* O site dá 40px de padding a todo section; aqui o espaço entre letras é só o margin. */
    padding: 0;
    margin: 0 0 4rem;
    /* Ancora abaixo da barra presa ao clicar numa letra do índice completo. */
    scroll-margin-top: 7.2rem;
}

.glossario-grupo-cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.glossario-grupo-letra {
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1;
    margin: 0;
}

    .glossario-grupo-letra a {
        color: var(--padrao-new);
        text-decoration: none;
    }

        .glossario-grupo-letra a:hover {
            text-decoration: underline;
        }

.glossario-grupo-contagem {
    font-size: 1.2rem;
    color: var(--gray-medium);
}

.glossario-lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3.2rem;
}

.glossario-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1rem;
    border-radius: 8px;
    /* Metade do cinza da borda padrão, misturado com o fundo: linha de apoio, não divisória. */
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--gray-platinum) 50%, var(--superficie));
    color: var(--black-medium);
    font-size: 1.5rem;
    font-weight: 500;
    text-decoration: none;
    transition: color .15s, background .15s;
}

    .glossario-item .fa-chevron-right {
        font-size: 1.2rem;
        color: var(--gray-silver);
        transition: color .15s, transform .15s;
    }

    .glossario-item:hover {
        background: var(--gray-light-background);
        color: var(--padrao-new);
        text-decoration: none;
    }

        .glossario-item:hover .fa-chevron-right {
            color: var(--padrao-new);
            transform: translateX(2px);
        }

.glossario-proxima-letra {
    display: inline-block;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--padrao-new);
}

/* ---------- Verbete ----------------------------------------------------- */

.glossario-verbete {
    margin: 0.4rem 0 2rem;
}

.glossario-verbete-rotulo {
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--padrao-new);
    margin: 0 0 0.6rem;
}

.glossario-verbete-termo {
    font-size: 3.6rem;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 1.4rem;
    color: var(--black-medium);
}

.glossario-verbete-texto {
    font-size: 1.7rem;
    line-height: 1.7;
    color: var(--black-dark);
    margin: 0;
}

/* Anterior e próximo: links de texto numa faixa entre duas linhas. */
.glossario-vizinhos {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.4rem 0;
    border-top: 1px solid var(--gray-platinum);
    border-bottom: 1px solid var(--gray-platinum);
    margin-bottom: 2rem;
}

.glossario-vizinho {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    color: var(--padrao-new);
    text-decoration: none;
}

    .glossario-vizinho:hover {
        text-decoration: underline;
        color: var(--padrao-new-hover);
    }

.glossario-vizinho-proximo {
    margin-left: auto;
    text-align: right;
}

.glossario-vizinho-rotulo {
    font-size: 1.2rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gray-medium);
}

.glossario-vizinho-termo {
    font-size: 1.5rem;
    font-weight: 600;
}

    .glossario-vizinho-termo .fas {
        font-size: 1.2rem;
    }

.glossario-relacionados {
    padding: 0;
}

.glossario-relacionados-titulo {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 1rem;
    color: var(--black-medium);
}

.glossario-pilulas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.glossario-pilula {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.5rem;
    border-radius: 999px;
    background: var(--gray-light-background);
    color: var(--black-medium);
    font-size: 1.4rem;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, color .15s;
}

    .glossario-pilula:hover {
        background: var(--padrao-new);
        color: var(--cor-padrao-texto);
        text-decoration: none;
    }

.glossario-pilula-todos {
    background: transparent;
    border: 1px solid var(--gray-platinum);
    color: var(--padrao-new);
    font-weight: 600;
}

    .glossario-pilula-todos .fas {
        font-size: 1.2rem;
    }

/* ---------- Responsivo -------------------------------------------------- */

@media (max-width: 575px) {
    .glossario-titulo {
        font-size: 2.6rem;
    }

    .glossario-trilho {
        flex-wrap: nowrap;
        gap: 0.4rem;
        padding: 1rem 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

        .glossario-trilho::-webkit-scrollbar {
            display: none;
        }

    .glossario-trilho-letra {
        flex: 0 0 auto;
    }

    .glossario-lista {
        grid-template-columns: 1fr;
    }

    .glossario-verbete-termo {
        font-size: 2.8rem;
    }

    .glossario-verbete-texto {
        font-size: 1.6rem;
    }
}