/* ---------------------------------------------------------------------------
   Busca no site — a página /busca
   ---------------------------------------------------------------------------
   Usa os tokens de `site-refinado.css` (--ref-navy-*, --ref-gold*, --ref-line,
   --ref-cream…). Nenhuma cor solta: se a paleta do site mudar, esta tela vai
   junto.

   Escrita no mesmo desenho da Agenda (`agenda-site.css`) de propósito — pílula
   com borda `--ref-line`, dourado no hover, azul-marinho no estado ativo. São
   as duas telas de "procurar coisas" do site; se cada uma inventasse a sua
   linguagem, o visitante teria de aprender duas.

   TUDO ANINHADO SOB `.bsc`, e carregado depois das folhas gerais. O resultado
   é desenhado dentro da página de canal — no encaixe `pagina_listagem` do
   template, ou no `.texto` do `viewCanal.php` quando a página não tem template
   —, e ali chovem regras de varredura de um site inteiro: `.texto img`
   arredondando toda imagem, `li, ol { list-style:none }`, tamanhos de fonte por
   mídia. Prefixar tudo é mais barato do que descobrir, meses depois, qual das
   três folhas de 80 KB estava mandando.

   A regra `.termo-de-busca` mais abaixo é o exemplo vivo disso — vale a leitura
   antes de mexer em qualquer coisa aqui.
--------------------------------------------------------------------------- */

.bsc {
    --bsc-gap: 14px;
    --bsc-raio: 12px;
    --bsc-alt-campo: 46px;

    /* Um degrau abaixo do corpo do site, pelo mesmo motivo da Agenda: isto é
       uma LISTA para varrer com o olho, não um texto para ler. Menor, cabem
       mais resultados na primeira tela e a comparação entre eles fica rápida. */
    --bsc-fs-titulo: 16px;
    --bsc-fs-trecho: 13px;
    --bsc-fs-apoio: 12px;
    --bsc-fs-micro: 10px;

    /* A cor de cada natureza de resultado. É o que responde, antes da leitura,
       à pergunta "isto é uma notícia ou uma página?". */
    --bsc-cor-artigo: var(--ref-blue);
    --bsc-cor-pagina: var(--ref-navy-700);
    --bsc-cor-agenda: #a8842f;          /* o --ref-gold escurecido: sobre branco,
                                           o dourado puro não passa em contraste */
    --bsc-cor-categoria: var(--ref-muted);

    max-width: 860px;
    margin: 0 auto;
    color: var(--ref-ink);
    font-family: var(--ref-font-body);
    text-align: left;
}

/* ── O campo ───────────────────────────────────────────────────────────────
   Uma pílula só, com a lupa dentro e o botão encostado na borda. O campo do
   topo do site é pequeno e serve para disparar a busca; ESTE é onde ela se
   refaz, então tem tamanho de campo principal. */
.bsc .bsc-forma {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--bsc-alt-campo);
    padding: 0 6px 0 16px;
    margin: 0 0 18px;
    border: 1px solid var(--ref-line);
    border-radius: 999px;
    background: var(--ref-white);
    box-shadow: var(--ref-shadow-sm);
    transition: border-color .25s ease, box-shadow .25s ease;
}

/* `focus-within` e não `:focus` no campo: o anel precisa envolver a pílula
   inteira, e quem recebe o foco é o <input> lá dentro. */
.bsc .bsc-forma:focus-within {
    border-color: var(--ref-gold);
    box-shadow: 0 0 0 3px var(--ref-gold-soft);
}

.bsc .bsc-forma__lupa {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--ref-muted);
}

.bsc .bsc-forma__campo {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 300;
    color: var(--ref-ink);
}

.bsc .bsc-forma__campo:focus { outline: 0; }

/* O X que o Chrome e o Safari põem em `type=search`: some porque a pílula já
   tem um lugar previsível para agir (o botão), e o X aparecia colado nele. */
.bsc .bsc-forma__campo::-webkit-search-cancel-button { -webkit-appearance: none; }

.bsc .bsc-forma__ok {
    flex: 0 0 auto;
    height: calc(var(--bsc-alt-campo) - 12px);
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--ref-navy-800);
    color: var(--ref-white);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .25s ease;
}

.bsc .bsc-forma__ok:hover { background: var(--ref-navy-600); }

/* ── A linha de resumo ─────────────────────────────────────────────────── */
.bsc .bsc-resumo {
    margin: 0 0 12px;
    font-size: 13.5px;
    font-weight: 300;
    color: var(--ref-muted);
}

.bsc .bsc-resumo b { color: var(--ref-navy-800); font-weight: 600; }

/* O termo procurado.
   ── Duas armadilhas herdadas, as duas reais ────────────────────────────────
   1. O `site.js` copia o TEXTO deste elemento para a trilha do topo da página
      (`.roadmap-logo span`). Por isso ele não pode ser `display:none`: o que
      estiver aqui dentro é o que aparece lá em cima.
   2. O `site.css` já tem uma regra `.termo-de-busca` — da busca antiga, onde
      este elemento era uma FAIXA PRETA de largura total, absoluta, 65px abaixo
      do topo. Aqui ele é uma palavra no meio de uma frase. Trocar só o
      `display` não bastava: a faixa continuava sendo pintada, agora atrás dos
      atalhos de filtro, e engolia a linha inteira. Cada propriedade daquela
      regra precisa ser desfeita explicitamente — é o preço de reusar um nome
      de classe que o JavaScript exige. */
.bsc .termo-de-busca {
    display: inline;
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: auto;
    padding: 0;
    background: none;
    text-align: inherit;
    font-size: inherit;
    font-weight: 600;
    color: var(--ref-navy-900);
}

.bsc .termo-de-busca::before { content: '\201C'; }
.bsc .termo-de-busca::after  { content: '\201D'; }

.bsc .bsc-vazio {
    margin: 18px 0 0;
    padding: 22px;
    border: 1px dashed var(--ref-line);
    border-radius: var(--bsc-raio);
    background: var(--ref-cream);
    font-size: 13.5px;
    font-weight: 300;
    color: var(--ref-muted);
}

/* ── Atalhos por natureza ──────────────────────────────────────────────────
   Em telas estreitas viram uma faixa que rola na horizontal, em vez de
   quebrarem em três linhas de pílulas: são cinco, no máximo, e empilhadas
   empurrariam o primeiro resultado para fora da tela. */
.bsc .bsc-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 18px;
}

.bsc .bsc-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 15px;
    border: 1px solid var(--ref-line);
    border-radius: 999px;
    background: var(--ref-white);
    font-size: 12.5px;
    font-weight: 300;
    color: var(--ref-navy-700);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.bsc .bsc-chip b {
    font-size: 11px;
    font-weight: 600;
    color: var(--ref-muted);
}

.bsc .bsc-chip:hover {
    border-color: var(--ref-gold);
    background: var(--ref-gold-soft);
    color: var(--ref-navy-900);
}

.bsc .bsc-chip--ativo,
.bsc .bsc-chip--ativo:hover {
    border-color: var(--ref-navy-800);
    background: var(--ref-navy-800);
    color: var(--ref-white);
}

.bsc .bsc-chip--ativo b { color: var(--ref-gold-strong); }

/* ── A lista ───────────────────────────────────────────────────────────── */
.bsc .bsc-lista {
    display: flex;
    flex-direction: column;
    gap: var(--bsc-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bsc .bsc-item { margin: 0; }

.bsc .bsc-item__link {
    display: flex;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid var(--ref-line);
    border-left: 3px solid var(--ref-line);
    border-radius: var(--bsc-raio);
    background: var(--ref-white);
    text-decoration: none;
    color: inherit;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.bsc .bsc-item__link:hover {
    border-color: var(--ref-line);
    box-shadow: var(--ref-shadow-md);
    transform: translateY(-1px);
}

/* A borda esquerda repete a cor do selo: a natureza do resultado fica legível
   na varredura vertical, sem ter de ler cinco rótulos. */
.bsc .bsc-item--artigo    .bsc-item__link { border-left-color: var(--bsc-cor-artigo); }
.bsc .bsc-item--pagina    .bsc-item__link { border-left-color: var(--bsc-cor-pagina); }
.bsc .bsc-item--agenda    .bsc-item__link { border-left-color: var(--bsc-cor-agenda); }
.bsc .bsc-item--categoria .bsc-item__link { border-left-color: var(--bsc-cor-categoria); }

@media (prefers-reduced-motion: reduce) {
    .bsc .bsc-item__link,
    .bsc .bsc-chip,
    .bsc .bsc-forma { transition: none; }
    .bsc .bsc-item__link:hover { transform: none; }
}

.bsc .bsc-item__figura {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--ref-soft);
}

/* `border-radius: 0` explícito: `.texto img` arredonda TODA imagem do site em
   2px, e aqui quem arredonda é a moldura, em 10. Sem zerar, a foto sai com dois
   raios diferentes, um dentro do outro. Dois seletores encadeados bastam para
   ganhar da regra de um só — nada de !important. */
.bsc .bsc-item__figura img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

.bsc .bsc-item__corpo {
    flex: 1 1 auto;
    min-width: 0;      /* sem o piso zero, um título longo estoura o cartão */
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* ── Apoio: selo, trilha, data ─────────────────────────────────────────── */
.bsc .bsc-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: var(--bsc-fs-apoio);
    font-weight: 300;
    color: var(--ref-muted);
}

.bsc .bsc-selo {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: var(--bsc-fs-micro);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ref-white);
}

.bsc .bsc-selo--artigo    { background: var(--bsc-cor-artigo); }
.bsc .bsc-selo--pagina    { background: var(--bsc-cor-pagina); }
.bsc .bsc-selo--agenda    { background: var(--bsc-cor-agenda); }
.bsc .bsc-selo--categoria { background: var(--bsc-cor-categoria); }

/* Os pontos separadores saem de `::before`, e não do HTML, para não virarem
   texto quando alguém copiar o resultado ou quando um leitor de tela ler a
   linha. O primeiro item da fila não recebe ponto. */
.bsc .bsc-item__trilha,
.bsc .bsc-item__data,
.bsc .bsc-item__extra { position: relative; }

.bsc .bsc-item__meta > * + *::before {
    content: '·';
    margin-right: 8px;
    color: var(--ref-line);
}

.bsc .bsc-item__trilha { color: var(--ref-navy-700); }
.bsc .bsc-item__extra  { color: var(--ref-muted); }

/* ── Título e trecho ───────────────────────────────────────────────────── */
.bsc .bsc-item__titulo {
    display: block;
    font-size: var(--bsc-fs-titulo);
    font-weight: 600;
    line-height: 1.3;
    color: var(--ref-navy-900);
}

.bsc .bsc-item__link:hover .bsc-item__titulo { color: var(--ref-blue); }

.bsc .bsc-item__trecho {
    display: block;
    font-size: var(--bsc-fs-trecho);
    font-weight: 300;
    line-height: 1.55;
    color: var(--ref-muted);
}

/* O realce do termo. Mesma dupla de cores do `::selection` do site — dourado
   claro no fundo, azul-marinho no texto —, para o destaque parecer a seleção
   do próprio navegador e não uma tarja fluorescente. */
.bsc .bsc-item__trecho mark {
    padding: 0 2px;
    border-radius: 3px;
    background: var(--ref-gold-soft);
    color: var(--ref-navy-900);
    font-weight: 500;
}

/* ── Paginação ─────────────────────────────────────────────────────────── */
.bsc .bsc-pag {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 26px 0 0;
}

.bsc .bsc-pag__cards {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bsc .bsc-pag__card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--ref-line);
    border-radius: 9px;
    background: var(--ref-white);
    font-size: 13px;
    font-weight: 400;
    color: var(--ref-navy-700);
    text-decoration: none;
    transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}

.bsc .bsc-pag__card:hover {
    border-color: var(--ref-gold);
    background: var(--ref-gold-soft);
    color: var(--ref-navy-900);
}

.bsc .bsc-pag__card--atual,
.bsc .bsc-pag__card--atual:hover {
    border-color: var(--ref-navy-800);
    background: var(--ref-navy-800);
    color: var(--ref-white);
    font-weight: 600;
}

/* Redondas, como as setas de mês da Agenda. */
.bsc .bsc-pag__seta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--ref-line);
    border-radius: 50%;
    background: var(--ref-white);
    color: var(--ref-navy-700);
    font-size: 19px;
    line-height: 1;
    text-decoration: none;
    transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}

.bsc .bsc-pag__seta:hover {
    border-color: var(--ref-gold);
    background: var(--ref-gold-soft);
    color: var(--ref-navy-900);
}

/* A seta desligada FICA na tela, apagada, em vez de sumir: some, ela levaria a
   fila de números um passo para o lado a cada página virada, e o número que
   estava sob o cursor deixaria de estar. */
.bsc .bsc-pag__seta--off {
    opacity: .3;
    cursor: default;
}

.bsc .bsc-pag__conta {
    margin: 10px 0 0;
    text-align: center;
    font-size: var(--bsc-fs-apoio);
    font-weight: 300;
    color: var(--ref-muted);
}

.bsc .bsc-pag__conta b { color: var(--ref-navy-800); font-weight: 600; }

/* ── Telas estreitas ───────────────────────────────────────────────────── */
@media (max-width: 680px) {
    .bsc {
        --bsc-fs-titulo: 15px;
        --bsc-alt-campo: 42px;
    }

    .bsc .bsc-forma__ok {
        padding: 0 14px;
        font-size: 12px;
    }

    .bsc .bsc-item__link { padding: 14px; gap: 12px; }

    .bsc .bsc-item__figura { width: 62px; height: 62px; }

    /* Os atalhos passam a rolar de lado. Cinco pílulas empilhadas ocupariam
       três linhas e empurrariam o primeiro resultado para fora da tela. */
    .bsc .bsc-filtros {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .bsc .bsc-filtros::-webkit-scrollbar { display: none; }

    .bsc .bsc-pag { gap: 6px; }
    .bsc .bsc-pag__cards { gap: 4px; }

    .bsc .bsc-pag__card {
        min-width: 32px;
        height: 32px;
        padding: 0 7px;
        font-size: 12px;
    }

    .bsc .bsc-pag__seta { width: 32px; height: 32px; font-size: 17px; }
}

/* Abaixo de 420px a miniatura sai: com 62px de foto sobram menos de 200px para
   o título, e um título de notícia quebra em cinco linhas. */
@media (max-width: 420px) {
    .bsc .bsc-item__figura { display: none; }
}