/* Features (Sessão Numero dos Fundos) — Nova Marca
   Figma: Site Update Nova Marca, "Features"
   Desk: node 7833:4713 (1920px) / Mobo: node 7833:5536 (393px)

   Reestiliza .numerosFundo/.CarrNums/.itemNumero (fundos-template-parts/numeros-fundo.php)
   sem trocar nome de classe. O carrossel Slick de fallback (scripts-fundos-comum.js)
   NUNCA ativa aqui — o Figma não tem setas/dots, então o scroll horizontal é
   feito só por overflow-x + drag nativo do touch/trackpad, em qualquer
   largura de tela (se os itens couberem, não tem o que rolar). Escopado em
   #numerosFundo.nm-fundos-features pra não afetar outras seções que reusem
   essas mesmas classes fora da single fundos. */

#numerosFundo.nm-fundos-features {
  padding: var(--nm-space-5) 0; /* 24px topo/base — a linha de baixo faz o papel do "Divider" do Figma */
  border-bottom: 1px solid var(--nm-color-border);
  background: var(--nm-color-white);
}

#numerosFundo.nm-fundos-features .row {
  display: block;
}

/* Vinham do fallback do Slick (mascaravam os clones do carrossel) — sem
   Slick aqui, são só ruído, então ficam ocultos. */
#numerosFundo.nm-fundos-features .escondeOverflow1,
#numerosFundo.nm-fundos-features .escondeOverflow2 {
  display: none;
}

#numerosFundo.nm-fundos-features .CarrNums {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--nm-space-6); /* 32px */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#numerosFundo.nm-fundos-features .CarrNums::-webkit-scrollbar {
  display: none;
}

#numerosFundo.nm-fundos-features .CarrNums.is-overflowing {
  cursor: grab;
}

#numerosFundo.nm-fundos-features .CarrNums.is-dragging {
  cursor: grabbing;
  user-select: none;
}

#numerosFundo.nm-fundos-features .itemNumero {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--nm-space-1); /* 4px */
}

#numerosFundo.nm-fundos-features .itemNumero > p:first-child {
  margin: 0;
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-regular);
  font-size: var(--nm-font-size-base);
  line-height: var(--nm-line-height-base);
  color: var(--nm-color-deep-blue);
  white-space: nowrap;
}

#numerosFundo.nm-fundos-features .itemNumero > p:last-child {
  margin: 0;
  font-family: var(--nm-font-family);
  font-size: var(--nm-font-size-base);
  line-height: var(--nm-line-height-base);
  color: var(--nm-color-chumbo);
  white-space: nowrap;
}

/* O HTML usa <strong> pro valor por herança de outros templates — no Figma o
   valor não é bold, só muda de cor em relação ao título. */
#numerosFundo.nm-fundos-features .itemNumero > p:last-child strong {
  font-weight: var(--nm-font-weight-regular);
  color: #505050;
}

/* Item "Risco do Fundo": no desktop o rótulo é texto simples (sem pill), só
   no mobile o Figma mostra a versão com borda/pill (ver media query abaixo). */
#numerosFundo.nm-fundos-features .itemRisco .PontuacaoRisco {
  gap: var(--nm-space-1); /* 4px no desktop */
}

#numerosFundo.nm-fundos-features .itemRisco .tags-card-fundos {
  gap: 0;
}

#numerosFundo.nm-fundos-features .itemRisco .tags-card-fundos .tag {
  padding: 4px 8px;
  border: 1px solid #6F83B4;
  border-radius: 50px;
  background: none;
  color: #6F83B4;
  font-family: 'Albert Sans', sans-serif;
  font-size: var(--nm-font-size-sm);
  font-weight: 400;
  line-height: var(--nm-line-height-sm);
}

#numerosFundo.nm-fundos-features .itemRisco .tooltip {
  display: flex;
  width: 24px;
  height: 24px;
  margin-left: 0 !important; /* substitui o gap fixo legado — o espaçamento já vem do gap do .PontuacaoRisco */
  background: url('../images/icon-info-blue.svg') center / 24px no-repeat;
}

#numerosFundo.nm-fundos-features .itemRisco .tooltip svg {
  display: none; /* troca o ícone antigo (16px, cinza) pelo ícone exato do Figma */
}

@media (max-width: 768px) {
  /* .containerSite não tem gutter próprio (depende de colunas Bootstrap que
     não existem aqui) — sem isso o primeiro item ficaria colado na borda da
     tela. Mesmo padrão já usado em outras seções do tema (.ImoveisRenda). */
  #numerosFundo.nm-fundos-features .containerSite {
    width: calc(100% - 32px);
  }

  /* No mobile o rótulo de risco volta a ser pill com borda, igual ao node Figma */
  #numerosFundo.nm-fundos-features .itemRisco .PontuacaoRisco {
    gap: var(--nm-space-2); /* 8px no mobile */
  }

  #numerosFundo.nm-fundos-features .itemRisco .tags-card-fundos .tag {
    padding: 4px 6px;
    border: 1px solid #6f83b4;
    border-radius: var(--nm-radius-pill);
  }

  #numerosFundo.nm-fundos-features .itemRisco .tooltip {
    background-image: url('../images/icon-info-grey.svg');
  }
}

.NovosFundos #numerosFundo .itemNumero {
  margin-right: 0;
  padding: 0;
}

.tags-card-fundos .tag {
  font-size: 14px !important;
}