/* ============================================================
   Busca: o explorador do /blog do site principal. Campo de terminal
   no hero escuro; embaixo, os assuntos numa lateral escura de cantos
   retos e os resultados direto no fundo da pagina, em duas colunas.
   So a pagina /busca/ carrega este arquivo.
   ============================================================ */

/* ---------- campo no hero ---------- */
.busca-forma {
    width: min(100%, 40rem);
    margin-top: 30px
}

.busca-linha {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px;
    background: var(--dx-painel);
    border: 1px solid rgba(246, 245, 241, .18);
    border-radius: 12px;
    transition: border-color .2s, box-shadow .2s;
}

.busca-linha:hover {
    border-color: rgba(246, 245, 241, .32)
}

/* O contorno fica na linha inteira, nao so no input. */
.busca-linha:focus-within {
    border-color: var(--dx-acento);
    box-shadow: 0 0 0 1px var(--dx-acento);
}

.busca-lupa {
    position: absolute;
    left: 16px;
    color: var(--dx-acento);
    pointer-events: none;
}

.busca-campo {
    flex: 1;
    min-width: 0;
    min-height: var(--alvo-toque);
    padding: 0 8px 0 40px;
    border: 0;
    background: transparent;
    color: var(--dx-texto);
    font-family: var(--fonte-mono);
    /* 16px: abaixo disso o iOS da zoom ao focar o campo. */
    font-size: 16px;
}

.busca-campo::placeholder {
    color: var(--dx-fraco)
}

.hero .busca-campo:focus-visible {
    outline: none
}

/* O "x" nativo do type=search destoa do campo de terminal. */
.busca-campo::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none
}

.busca-botao {
    flex-shrink: 0;
    min-height: var(--alvo-toque);
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: var(--dx-prompt);
    color: var(--dx-painel);
    font-family: var(--fonte-corpo);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s;
}

.busca-botao:hover {
    background: var(--dx-acento)
}

.hero .busca-botao:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px
}

/* ---------- explorador ---------- */
.explorador {
    display: grid;
    grid-template-columns: 17.5rem minmax(0, 1fr);
    gap: clamp(28px, 3.5vw, 48px);
    align-items: start;
    padding-top: clamp(32px, 5vw, 48px);
}

/* Lateral: cresce com os assuntos, sem rolagem propria. */
.explorador-lateral {
    padding: 12px 8px 16px;
    background: var(--dx-bg);
    color: var(--dx-texto);
    font-family: var(--fonte-mono);
}

.explorador-lateral :focus-visible {
    outline: 2px solid var(--dx-acento);
    outline-offset: -2px
}

.explorador-lateral-titulo {
    padding: 6px 10px 8px;
    color: var(--dx-fraco);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.explorador-assuntos {
    display: grid;
    gap: 1px
}

.explorador-assunto {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 2px 10px;
    border-radius: 6px;
    color: rgba(238, 233, 240, .7);
    font-size: 13px;
    transition: color .2s, background-color .2s;
}

.explorador-assunto:hover {
    background: rgba(246, 245, 241, .05);
    color: var(--dx-texto);
}

.explorador-assunto[aria-current="true"] {
    background: rgba(227, 156, 198, .14);
    color: var(--dx-texto);
}

.explorador-icone {
    flex-shrink: 0;
    width: 14px;
    color: var(--dx-fraco);
    text-align: center;
}

.explorador-assunto[aria-current="true"] .explorador-icone {
    color: var(--dx-acento)
}

.explorador-total {
    margin-left: auto;
    padding-left: 8px;
    color: var(--dx-fraco);
    font-size: 12px;
}

/* ---------- painel ---------- */
.explorador-painel {
    display: grid;
    align-content: start;
    min-width: 0
}

/* Caminho do filtro atual, como a barra de endereco de um editor. */
.explorador-caminho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    min-height: 44px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--linha);
    color: var(--tinta-fraca);
    font-family: var(--fonte-mono);
    font-size: 13px;
}

.explorador-caminho b {
    color: var(--tinta);
    font-weight: 500
}

.explorador-pontos {
    display: flex;
    gap: 6px
}

.explorador-pontos i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cfcbc2
}

.explorador-pontos i:first-child {
    background: var(--dx-prompt)
}

/* Cada filtro ativo vira uma pilula; o x remove so aquele filtro. */
.explorador-filtro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: #efe4ea;
    color: var(--ameixa-forte);
    transition: background-color .2s, color .2s;
}

.explorador-filtro:hover {
    background: var(--ameixa);
    color: #fff
}

.explorador-contagem {
    margin-left: auto;
    white-space: nowrap
}

/* Linha de saida de terminal, com o comentario "#" na frente. */
.explorador-estado {
    padding-top: 24px;
    color: var(--tinta-fraca);
    font-family: var(--fonte-mono);
    font-size: 13px;
}

.explorador-estado::before {
    content: "# ";
    color: var(--ameixa)
}

.explorador-fim {
    padding-top: 48px;
    text-align: center
}

.explorador-dica {
    padding-top: 12px;
    color: var(--tinta-media);
    font-size: 16px;
}

.explorador-dica a {
    color: var(--ameixa);
    text-decoration: underline;
    text-underline-offset: 3px
}

/* A grade do site, so que em duas colunas: a lateral ocupa a terceira. */
.explorador-grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(36px, 4vw, 48px) clamp(20px, 3vw, 32px);
    padding-top: clamp(24px, 3vw, 32px);
}

.explorador-grade .cartao-imagem {
    margin-bottom: 20px
}

.explorador-grade .cartao-titulo {
    font-size: 22px
}

/* ---------- telas menores ---------- */
@media (max-width:900px) {
    .explorador {
        grid-template-columns: minmax(0, 1fr)
    }

    /* Depois de buscar, o que interessa e o resultado: ele sobe e os
       assuntos (para refinar) descem para baixo dele. */
    .explorador-com-resultado .explorador-lateral {
        order: 1
    }

    .explorador-lateral {
        padding: 8px
    }

    .explorador-lateral-titulo {
        display: none
    }

    /* Os assuntos viram uma grade que quebra linha: nada rola de lado. */
    .explorador-assuntos {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
        gap: 2px;
    }

    .explorador-assunto {
        min-height: var(--alvo-toque)
    }
}

@media (max-width:640px) {
    .explorador-grade {
        grid-template-columns: minmax(0, 1fr)
    }

    /* Campo e botao empilham: o campo ganha a largura toda. */
    .busca-linha {
        flex-wrap: wrap
    }

    .busca-campo {
        flex-basis: 100%
    }

    /* Em duas linhas, o centro da caixa cai entre o campo e o botao:
       a lupa se prende a primeira linha (5px de respiro + metade de 44-18). */
    .busca-lupa {
        top: 18px
    }

    .busca-botao {
        width: 100%
    }
}