/* ═══════════════════════════════════════════════════════════════════════════
   KARAMELOO — MARKETPLACE (#screenProcurar) · v2
   ═══════════════════════════════════════════════════════════════════════════
   Dono único do estilo desta tela. Carrega por último no index.html.

   Por que existe: o CSS de #screenProcurar estava espalhado em 573 seletores,
   456 deles em karameloo-redesign.css (21.613 linhas) e quase todos com
   !important. Editar lá é imprevisível. O padrão de dono único já provou
   funcionar em karameloo-workspace.css e karameloo-start-v3.css.

   Regras que o cérebro impõe aqui
   (Web Design Real/30 - Marketplace Criativo Karameloo):
     • card precisa ser COMPARÁVEL: preço, prazo, entregas, portfólio, rating;
     • proibido avatar de iniciais — listado em Anti-IA;
     • categoria boa é nome de demanda real, não "Premium" nem "IA";
     • explorar precisa de chips de filtro ativo, contagem e estado vazio.

   Armadilha desta tela: seletores com !important em shorthand. O `background`
   de .eCardThumb--a engolia a capa do editor. Ver comentário em app.js.
   ═══════════════════════════════════════════════════════════════════════════ */

#screenProcurar{
  --m-ouro:#fcbc1d;
  --m-ouro-ink:#7a5d10;
  --m-tinta:#111827;
  --m-mut:#4b5563;
  --m-soft:#5c6573;
  --m-linha:rgba(17,24,39,.12);
  --m-surf:#ffffff;
  --m-r:4px;
  --m-dur:220ms;
  --m-ease:cubic-bezier(.16,1,.3,1);
}

/* ───────────────────────────────────────────────────────────────────────────
   CARD DE EDITOR
   ─────────────────────────────────────────────────────────────────────────── */

/* Nome truncava em "Letícia Pra…", "Thiago Bar…", "Juliana Alv…" — num
   marketplace onde a pessoa escolhe por quem assina o trabalho, cortar o nome
   é perder justamente o que identifica.

   A especificidade aqui não é exagero. Cinco regras disputam este elemento e a
   que vencia era `#screenProcurar .exploreRowCard.eCard .eCardName`
   (1 ID + 3 classes) com `max-width:128px !important`. Um seletor com 1 ID e
   1 classe perde. Com dois IDs a disputa acaba. */
#screenProcurar #exploreEditorsGrid .eCardNameRow,
#screenProcurar #exploreEditorsGrid .eCard .eCardNameRow{
  display:flex !important; align-items:center; gap:6px;
  flex-wrap:wrap; min-width:0;
}
#screenProcurar #exploreEditorsGrid .eCard .eCardName,
#screenProcurar #exploreEditorsGrid .exploreRowCard.eCard .eCardName{
  overflow:visible !important; text-overflow:clip !important;
  white-space:normal !important;
  max-width:none !important;
  min-width:0; line-height:1.2;
  font-weight:800; letter-spacing:-.015em;
  color:var(--m-tinta) !important;
  /* `white-space:normal` só quebra onde HÁ espaço. Um nome de estúdio escrito
     sem espaço ("EstudioMotionDesignBrasil") é um token único: mede 342px num
     card de 296 e atropela o selo "Verificado" ao lado. `anywhere` mantém a
     decisão de cima (nome inteiro, sem "Letícia Pra…") e só parte o que não
     cabe de jeito nenhum.

     Só `anywhere` não bastava: o nome passou a caber na largura e estourou na
     ALTURA — 4 linhas passando por cima da nota e das avaliações, porque a
     altura do card não cresce. Duas linhas é o teto: cabe qualquer nome real
     ("Maria Fernanda Albuquerque" ocupa uma e meia) e o caso patológico ganha
     reticências em vez de invadir a linha de baixo. */
  overflow-wrap:anywhere !important;
  display:-webkit-box !important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden !important;
}
/* O rótulo de categoria fica SOBRE a capa e é um chip: chip não quebra linha,
   encolhe com reticências. Medido saindo 42px para fora da capa. */
#screenProcurar #exploreEditorsGrid .eCardThumbLabel{
  max-width:calc(100% - 16px);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#screenProcurar #exploreEditorsGrid .eCardHeadInfo{ min-width:0 }

/* As tags eram decepadas: o wrapper ficava com 7px de altura e overflow:hidden
   enquanto cada chip tem 21px, então sobrava só a borda superior — chips que
   pareciam caixas vazias. Aconteceu ao acrescentar a linha de prazo/entregas
   dentro do .eCardBody, que é flex column: o navegador encolheu justamente o
   bloco das tags. Impedir o encolhimento resolve na raiz. */
#screenProcurar #exploreEditorsGrid .eCardTags{
  flex:0 0 auto !important;
  height:auto !important; max-height:none !important;
  overflow:visible !important;
  display:flex !important; flex-wrap:wrap !important; gap:6px !important;
  align-content:flex-start;
}
#screenProcurar #exploreEditorsGrid .eTag{
  flex:0 0 auto !important;
  line-height:1.35 !important;
  color:var(--m-mut) !important;
  /* Chip é uma etiqueta, não um parágrafo: nunca quebra em duas linhas. Uma
     tag comprida encolhe com reticências em vez de sair 56px para fora do
     card (medido). O `max-width` precisa do `flex:0 0 auto` acima para valer:
     sem ele o chip cresceria com o conteúdo. */
  max-width:100% !important;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* o corpo do card pode crescer; a altura vem do conteúdo, não de um teto fixo */
#screenProcurar #exploreEditorsGrid .eCardBody{
  min-height:0 !important; height:auto !important;
}

/* A contagem de avaliações aparecia cortada ao lado da nota. Vira uma linha
   própria, com a palavra inteira. */
#screenProcurar .eCardStats{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  color:var(--m-mut) !important;
}
#screenProcurar .eCardStatSub{ color:var(--m-soft) !important; white-space:nowrap }

/* Prazo e entregas — o guia do vault pede os dois no card para ele ser
   comparável. Vêm do seed (prazo_dias, done_count). */
#screenProcurar .eCardMeta{
  display:flex; flex-wrap:wrap; gap:6px 14px;
  margin:10px 0 0; padding-top:10px;
  border-top:1px solid var(--m-linha);
  font-size:.78rem; color:var(--m-mut) !important;
}
#screenProcurar .eCardMeta b{
  color:var(--m-tinta) !important; font-weight:800;
}

/* ───────────────────────────────────────────────────────────────────────────
   BARRA DE RESULTADOS E FILTROS ATIVOS
   ─────────────────────────────────────────────────────────────────────────── */

/* Chips do que está filtrado agora, cada um removível. O vault lista isso como
   item obrigatório de "Explorar marketplace" e a tela não tinha. */
#screenProcurar .mFiltrosAtivos{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:12px 0 0;
}
#screenProcurar .mFiltroChip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px 6px 12px;
  border:1px solid var(--m-linha); border-radius:100px;
  background:var(--m-surf);
  font-size:.8rem; font-weight:700; color:var(--m-tinta) !important;
}
#screenProcurar .mFiltroChip button{
  all:unset; cursor:pointer; line-height:1;
  width:16px; height:16px; display:grid; place-items:center;
  border-radius:50%; color:var(--m-soft);
  transition:background var(--m-dur) var(--m-ease), color var(--m-dur) var(--m-ease);
}
#screenProcurar .mFiltroChip button:hover{ background:#f0ece3; color:var(--m-tinta) }
#screenProcurar .mFiltroChip button:focus-visible{
  outline:2px solid var(--m-ouro-ink); outline-offset:2px;
}
#screenProcurar .mLimparTudo{
  all:unset; cursor:pointer;
  font-size:.8rem; font-weight:800; color:var(--m-ouro-ink);
  text-decoration:underline; text-underline-offset:3px;
}

/* ───────────────────────────────────────────────────────────────────────────
   ESTADOS — vazio, carregando, erro
   ─────────────────────────────────────────────────────────────────────────── */

/* "Estado vazio é onboarding comprimido" (matriz de componentes do pacote SaaS):
   precisa de título, explicação e caminho de saída — não só "nada encontrado". */
#screenProcurar .mEstado{
  grid-column:1/-1;
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  padding:clamp(28px,4vw,44px);
  background:var(--m-surf);
  border:1px solid var(--m-linha); border-radius:var(--m-r);
}
#screenProcurar .mEstado h3{
  margin:0; font-size:1.15rem; font-weight:800;
  letter-spacing:-.02em; color:var(--m-tinta) !important;
}
#screenProcurar .mEstado p{
  margin:0; max-width:58ch; line-height:1.6;
  color:var(--m-mut) !important; font-size:.94rem;
}
#screenProcurar .mEstadoAcoes{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px }
#screenProcurar .mSugestao{
  all:unset; cursor:pointer;
  padding:8px 14px; border:1px solid var(--m-linha); border-radius:100px;
  background:#faf7f1; font-size:.84rem; font-weight:700;
  color:var(--m-tinta);
  transition:background var(--m-dur) var(--m-ease), border-color var(--m-dur) var(--m-ease);
}
#screenProcurar .mSugestao:hover{ background:#f0ece3; border-color:rgba(17,24,39,.22) }
#screenProcurar .mSugestao:focus-visible{ outline:2px solid var(--m-ouro-ink); outline-offset:2px }

/* Skeleton no formato do conteúdo real — o guia de motion é explícito:
   "skeleton para conteúdo, não para tudo", e no formato do que vai chegar. */
#screenProcurar .mSkeleton{
  border:1px solid var(--m-linha); border-radius:var(--m-r);
  background:var(--m-surf); overflow:hidden;
}
#screenProcurar .mSkelCapa{ height:164px; background:#eee9df }
#screenProcurar .mSkelCorpo{ padding:16px; display:flex; flex-direction:column; gap:10px }
#screenProcurar .mSkelLinha{ height:12px; border-radius:3px; background:#eee9df }
#screenProcurar .mSkelLinha--curta{ width:45% }
#screenProcurar .mSkelLinha--media{ width:70% }

@keyframes mBrilho{
  0%   { background-position:-420px 0 }
  100% { background-position:420px 0 }
}
#screenProcurar .mSkelCapa,
#screenProcurar .mSkelLinha{
  background-image:linear-gradient(90deg,#eee9df 0%,#f7f3ec 50%,#eee9df 100%);
  background-size:420px 100%; background-repeat:no-repeat;
  animation:mBrilho 1400ms ease-in-out infinite;
}

/* ───────────────────────────────────────────────────────────────────────────
   ENTRADA DOS CARDS — cascata discreta
   Tokens do cérebro: 180–320ms, cascata 40–80ms, curva cubic-bezier(.16,1,.3,1)
   ─────────────────────────────────────────────────────────────────────────── */
#screenProcurar .eCard{
  transition:transform var(--m-dur) var(--m-ease),
             box-shadow var(--m-dur) var(--m-ease);
}
#screenProcurar .eCard:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(17,24,39,.10);
}

@media (prefers-reduced-motion:reduce){
  #screenProcurar .mSkelCapa,
  #screenProcurar .mSkelLinha{ animation:none }
  #screenProcurar .eCard{ transition:none }
  #screenProcurar .eCard:hover{ transform:none }
}