/**
 * assets/css/diretorio.css — busca pública do diretório
 * Depende de design-tokens.css (camada --ui-*) e componentes.css carregados
 * antes. Primeira tela a adotar o sistema do perfil depois da promoção de
 * 29/07 — ver PLANO-VISUAL.md item 1.
 *
 * Resultados em LISTA (linhas), não em grade de avatares: um card estreito
 * não sobra espaço pra mostrar cidade + conquistas ao mesmo tempo, que é
 * justamente o que sustenta "reputação real, não só estrelinhas". A linha
 * larga dá lugar pros dois fatos lado a lado (.ui-fatos, vindo de
 * componentes.css) sem apertar.
 */

body.pagina-diretorio {
    margin: 0;
    background: var(--ui-fundo);
    color: var(--ui-tinta);
    -webkit-font-smoothing: antialiased;
}

/* ---- Topo ---- */
.dir-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 24px 24px 0;
}
.dir-topo-wordmark {
    margin: 0;
    height: 22px;
    /* O SVG do logo segue currentColor — herda marrom do body por padrão
       (--cor-texto em design-tokens.css) e vira claro no modo escuro pela
       regra logo abaixo. O amarelo do ".com.br" é fixo no próprio SVG e não
       muda com o tema. */
}
.dir-topo-nav {
    display: flex;
    align-items: center;
    gap: 18px;
}
/* Classe dedicada, e não `.dir-topo-nav a`: esse seletor bateria em
   especificidade com `.ui-botao-primario` do CTA ao lado (elemento+classe
   vence classe sozinha) e pintava o texto do botão da cor errada. */
.dir-topo-entrar {
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--ui-tinta-2);
}
.dir-topo-entrar:hover { color: var(--ui-tinta); }

/* ---- Hero ---- */
.dir-hero {
    max-width: 640px;
    margin: 0 auto;
    padding: 44px 24px 4px;
    text-align: center;
}
.dir-hero h1 {
    font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.3rem);
    margin: 0 0 10px;
    text-wrap: balance;
}
.dir-hero-sub {
    color: var(--ui-tinta-2);
    font-size: 1.02rem;
    line-height: 1.55;
    max-width: 46ch;
    margin: 0 auto;
}

/* ---- Busca única ----
   Substituiu (14/08) o formulário de quatro campos lado a lado. Não tem
   moldura de cartão em volta: a caixa É o cartão. Um cartão contendo uma
   caixa desenhava duas bordas concêntricas e roubava do campo o papel de
   ser a única coisa que importa na tela. Ver app/partials/busca-unica.php. */
.busca {
    max-width: 620px;
    margin: 26px auto 0;
}

/* As três pílulas de tipo. Ficam ACIMA da caixa e não dentro: dentro elas
   competiriam com os chips pelo mesmo espaço horizontal, e chip e pílula têm
   formas parecidas demais para conviverem na mesma linha sem confundir quem
   é filtro aplicado e quem é botão. */
.busca-tipos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.busca-tipo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--fonte-corpo);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--ui-tinta-2);
    background: var(--ui-superficie);
    border: 1px solid var(--ui-linha);
    border-radius: 999px;
    padding: 7px 14px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.busca-tipo svg { width: 13px; height: 13px; flex: 0 0 auto; opacity: .75; }
.busca-tipo:hover { border-color: var(--ui-acento); color: var(--ui-tinta); }
.busca-tipo[aria-pressed="true"] {
    background: var(--ui-acento-fraco);
    border-color: var(--ui-acento);
    color: var(--ui-tinta);
}
.busca-tipo[aria-pressed="true"] svg { opacity: 1; }

/* A caixa. `position: relative` ancora a lista de sugestões, que é absoluta —
   a lista precisa flutuar por cima dos resultados sem empurrar a página. */
.busca-caixa {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    /* Folga de 54px à direita reservada para o botão, que é ABSOLUTO. No fluxo
       ele era o último item flex e, no celular, um chip já bastava para
       empurrá-lo sozinho para uma segunda linha, encostado à esquerda. Fora do
       fluxo, chips e campo quebram à vontade e ele fica onde tem que ficar. */
    padding: 8px 54px 8px 16px;
    background: var(--ui-superficie);
    border: 1px solid var(--ui-linha);
    border-radius: 26px;
    box-shadow: var(--ui-sombra);
    cursor: text;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.busca-caixa:focus-within {
    border-color: var(--ui-acento);
    box-shadow: 0 0 0 3px var(--ui-acento-fraco), var(--ui-sombra);
}
.busca-lupa { display: flex; color: var(--ui-tinta-3); flex: 0 0 auto; }
.busca-lupa svg { width: 18px; height: 18px; }

.busca-chips { display: contents; }
.busca-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ui-tinta);
    background: var(--ui-acento-fraco);
    border-radius: 999px;
    padding: 5px 6px 5px 11px;
    max-width: 100%;
}
.busca-chip svg { width: 12px; height: 12px; color: var(--ui-acento); flex: 0 0 auto; }
.busca-chip-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.busca-chip-x {
    display: flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; flex: 0 0 auto;
    font-size: 1rem; line-height: 1;
    color: var(--ui-tinta-2);
    background: none; border: 0; border-radius: 50%;
    cursor: pointer;
}
.busca-chip-x:hover { background: var(--ui-superficie); color: var(--ui-tinta); }

/* flex: 1 1 120px, e não 1 1 auto: com dois chips longos o campo encolhia até
   sumir e a caixa virava só decoração. Abaixo de 120px ele quebra para a
   linha de baixo, que é o comportamento correto. */
.busca-campo {
    flex: 1 1 120px;
    min-width: 0;
    font-family: var(--fonte-corpo);
    font-size: 1rem;
    color: var(--ui-tinta);
    background: none;
    border: 0;
    padding: 8px 4px;
}
.busca-campo:focus { outline: none; }
.busca-campo::placeholder { color: var(--ui-tinta-3); }

.busca-enviar {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    color: var(--ui-superficie);
    background: var(--ui-tinta);
    border: 0; border-radius: 50%;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.busca-enviar svg { width: 17px; height: 17px; }
.busca-enviar:hover { opacity: .85; }

/* ---- Lista de sugestões ---- */
.busca-sugestoes {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 20;
    margin: 0;
    padding: 6px;
    list-style: none;
    /* O hero é centralizado e a lista herdava isso — os nomes ficavam boiando
       no meio da linha, longe do ícone que os etiqueta. */
    text-align: left;
    background: var(--ui-superficie);
    border: 1px solid var(--ui-linha);
    border-radius: 18px;
    box-shadow: var(--ui-sombra);
}
.busca-sugestao {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
}
.busca-sugestao-icone { display: flex; color: var(--ui-tinta-3); flex: 0 0 auto; }
.busca-sugestao-icone svg { width: 14px; height: 14px; }
.busca-sugestao-rotulo {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.94rem;
    color: var(--ui-tinta);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* A contagem é o que garante que a sugestão não é um beco sem saída — o
   endpoint só devolve o que tem resultado. Fica discreta porque é prova,
   não informação que se lê linha a linha. */
.busca-sugestao-extra {
    flex: 0 0 auto;
    font-size: 0.78rem;
    color: var(--ui-tinta-3);
}
.busca-sugestao-marcada { background: var(--ui-superficie-2); }

/* ---- Formulário de <noscript> ---- */
.busca-simples {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}
.busca-simples select,
.busca-simples input[type="text"] {
    flex: 1 1 160px;
    font-family: var(--fonte-corpo);
    font-size: 0.92rem;
    padding: 12px 14px;
    border: 1px solid var(--ui-linha);
    border-radius: 12px;
    background: var(--ui-superficie-2);
    color: var(--ui-tinta);
}

/* ---- Resultados ---- */
.dir-resultados {
    max-width: 880px;
    margin: 0 auto;
    padding: 40px 24px 72px;
}
.dir-contagem {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ui-tinta-2);
    background: var(--ui-acento-fraco);
    border-radius: 999px;
    padding: 6px 14px;
    margin: 0 0 20px;
}

.dir-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.dir-linha {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    text-decoration: none;
    color: inherit;
    background: var(--ui-superficie);
    border: 1px solid var(--ui-linha);
    border-radius: 18px;
    box-shadow: var(--ui-sombra);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.dir-linha:hover {
    transform: translateY(-2px);
    border-color: var(--ui-acento);
    box-shadow: 0 10px 26px -14px rgba(36, 23, 21, 0.28);
}
.dir-linha:focus-visible {
    outline: 2px solid var(--ui-acento);
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .dir-linha { transition: none; }
    .dir-linha:hover { transform: none; }
}

.dir-linha .ui-avatar,
.dir-linha .ui-avatar-placeholder {
    --ui-avatar-tamanho: 60px;
    font-size: 22px;
}

.dir-linha-corpo {
    flex: 1;
    min-width: 0;
}
.dir-linha-nome {
    margin: 0 0 6px;
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--ui-tinta);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* .ui-fatos é a grade de 2 colunas de componentes.css — aqui só aperta o
   respiro, que na página do perfil é generoso de propósito (seção isolada)
   e aqui precisa caber numa linha compacta. */
.dir-linha-fatos {
    gap: 6px 20px;
    margin: 0;
}
.dir-linha-fatos li { font-size: 0.85rem; }

.dir-linha-cta {
    flex-shrink: 0;
    white-space: nowrap;
    pointer-events: none; /* a linha inteira já é o link — o "botão" aqui é só indicação visual */
}

.dir-selo-premium {
    position: absolute;
    top: -8px;
    right: 20px;
    background: linear-gradient(135deg, var(--cor-premium-dourado), var(--cor-premium-dourado-80));
    color: var(--cor-premium-azul-escuro);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(198, 167, 107, 0.4);
}

.dir-vazio {
    text-align: center;
    padding: 72px 20px;
    color: var(--ui-tinta-2);
}
.dir-vazio a { color: var(--ui-acento); font-weight: 600; }

.dir-paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
    font-size: 0.9rem;
    color: var(--ui-tinta-2);
}
.dir-paginacao a {
    color: var(--ui-tinta);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--ui-linha);
    border-radius: 999px;
    padding: 8px 18px;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.dir-paginacao a:hover {
    background: var(--ui-tinta);
    color: var(--ui-superficie);
    border-color: var(--ui-tinta);
}

.dir-rodape {
    text-align: center;
    padding: 32px 24px;
    border-top: 1px solid var(--ui-linha-suave);
    color: var(--ui-tinta-2);
    font-size: 0.9rem;
}
.dir-rodape a {
    color: var(--ui-acento);
    font-weight: 600;
    text-decoration: none;
}

/* Sem isso o logo herdaria --cor-texto (marrom fixo, sem variante escura) por
   cima do fundo escuro do modo automático e ficaria quase ilegível. Esta é a
   única tela que segue --ui-*, que inverte com o tema do sistema — as outras
   que usam logotipo() (painel, admin, login) não têm modo escuro. */
@media (prefers-color-scheme: dark) {
    .dir-topo-wordmark { color: var(--ui-tinta); }
}

@media (max-width: 600px) {
    .dir-topo { padding: 18px 18px 0; }
    .dir-hero { padding: 32px 18px 4px; }
    .busca { padding-inline: 4px; }
    /* No celular as três pílulas não cabem numa linha com folga; rolar na
       horizontal é melhor que quebrar em duas linhas, que empurraria a caixa
       para baixo da dobra. */
    .busca-tipos {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .busca-tipos::-webkit-scrollbar { display: none; }
    .busca-tipo { flex: 0 0 auto; }
    .busca-simples select,
    .busca-simples input[type="text"] { flex: 1 1 100%; }
    .dir-resultados { padding: 32px 16px 56px; }

    /* Linha vira cartão empilhado: avatar+nome numa fileira, fatos embaixo,
       CTA por último — a mesma ordem de leitura de um resultado de busca. */
    .dir-linha { flex-wrap: wrap; padding: 16px 18px; }
    .dir-linha-corpo { flex-basis: 100%; order: 2; }
    .dir-linha-cta { order: 3; flex-basis: 100%; text-align: center; margin-top: 4px; }
}