/*
 * A lista única das listagens e da busca (aprovada em 26/09).
 *
 * Quem reivindicou a ficha aparece acima de quem não reivindicou; quem
 * assina (PRO) acima de quem só reivindicou. Evolução do cartão de
 * site.css, não redesenho: mesmas fontes, mesmas variáveis.
 *
 * Mobile primeiro (390 px); o desktop só ganha folga.
 */

/* ------------------------------------------------ a frase que explica */

/* 🚨 A LISTA DIZ O QUE FAZ (decisão de 24/09). Discreta, mas legível: é a
   linha que impede a ordem de ser uma mentira por omissão. */
.lista-ordem {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 20px 0 -10px;
  font-size: 12.5px; line-height: 1.45; color: var(--ink-soft);
}
.lista-ordem svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--green); }

/* ------------------------------------------------------------ o cartão */

/* O cartão é um <article>; o link do nome estica um ::after sobre ele, que
   continua clicável de ponta a ponta. */
.lista-empresas .resultado { position: relative; }
.lista-empresas .resultado:focus-within { border-color: var(--red); }

/* O nome é um link, mas não pode PARECER link azul sublinhado: o cartão
   inteiro é o alvo, e o hover dele (borda vermelha) já diz isso. */
.resultado a.resultado-link,
.resultado a.resultado-link:visited {
  color: var(--ink); text-decoration: none;
}
.resultado a.resultado-link:hover { color: var(--ink); text-decoration: none; }
.lista-empresas .resultado-link::after {
  content: ""; position: absolute; inset: 0; border-radius: 14px;
}
.lista-empresas .resultado-link:focus-visible { outline: none; }
.lista-empresas .resultado-link:focus-visible::after {
  outline: 2px solid var(--red); outline-offset: 2px;
}

.resultado-corpo { display: flex; align-items: flex-start; gap: 12px; }
.resultado-texto { flex: 1; min-width: 0; }
.lista-empresas .nome { overflow-wrap: anywhere; }

/* ------------------------------------------------------------ o avatar */

.resultado-avatar {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; background: var(--surface);
  border: 1px solid var(--line);
}
.resultado-avatar-inicial {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red); border-color: var(--red); color: #fff;
  font-family: 'Archivo', sans-serif; font-style: italic; font-weight: 800;
  font-size: 15px; letter-spacing: .02em;
}

/* --------------------------------------------------- selo "Verificada" */

.selo-verificada {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 5px; padding: 2px 9px 2px 6px;
  background: var(--green-bg); color: var(--green);
  border-radius: 100px;
  font-size: 11.5px; font-weight: 600; line-height: 1.5;
}
.selo-verificada svg { width: 13px; height: 13px; }

/* Nível 1 — reivindicada: moldura com um fio de verde, sem sombra. A
   diferença é o selo e a foto; a moldura só confirma. */
.lista-empresas .resultado-cabeca { border-color: #cfe5d8; }

/* ------------------------------------------------------------- PRO */

/* Nível 2 — assina: o selo PRO no canto, no MESMO vermelho da marca que a
   ficha usa em `.selo-pro-canto` (perfil.css) — um selo só no site inteiro,
   para quem vê na lista reconhecer na ficha. A moldura acompanha o selo.
   O "Verificada" verde continua no cartão: PRO é uma verificada que assina.
   O desenho do selo vem de site.css (`.selo-pro-canto`); aqui só a camada:
   acima do ::after do nome, e sem roubar o clique do cartão. */
.lista-empresas .resultado-pro {
  padding-top: 26px;
  border-color: var(--red);
  box-shadow: 0 1px 0 rgba(222, 26, 43, .10), 0 4px 18px rgba(222, 26, 43, .10);
}
.lista-empresas .resultado-pro:hover { border-color: var(--red); box-shadow: 0 2px 6px rgba(222, 26, 43, .16), 0 8px 26px rgba(222, 26, 43, .16); }

.lista-empresas .selo-pro-canto { z-index: 1; pointer-events: none; }

/* ------------------------------------------------------------ desktop */

@media (min-width: 700px) {
  .resultado-corpo { gap: 14px; }
  .lista-ordem { font-size: 13px; }
}

/* O bairro vira link quando tem pagina (piloto de bairros). O nome da
   empresa estica um ::after sobre o cartao inteiro; o link do bairro fica
   POR CIMA dele, senao o clique cai na ficha. */
.lista-empresas .meta a.meta-bairro {
  position: relative; z-index: 1;
  color: inherit; text-decoration: underline; text-decoration-color: var(--line);
  text-underline-offset: 2px;
}
.lista-empresas .meta a.meta-bairro:hover { color: var(--red); text-decoration-color: currentColor; }