/* Cases de Investimento — Nova Marca
   Figma: Site Update Nova Marca — node 7833:4109 (desk) / 7833:4964 (mobo)

   Reconstruído com classes .nm-cases__* que não existem em css.css.
   Conteúdo continua vindo do mesmo repeater ACF de sempre — "cases" (pt) /
   "cases_de_investimento_en" (en), each row com imagem_case/nome_empresa/
   area_de_atuacao/texto_case/tag/redes_sociais (fundos-template-parts/cases.php)
   — só o card visível (logo, tag, nome, área, botão) ganhou classes/HTML novos.
   O popup de detalhes (.popUp/.todoPopUp/.btnClose/.logos/.textos/.sobre) não
   está no Figma desta seção — continua com as classes antigas e o JS de
   sempre, só troquei o botão-gatilho de "SAIBA MAIS" pra abrepopup) para
   .nm-cases__cta (JS atualizado no próprio cases.php).

   .itemAcordeonFundo/.headerItem continuam no <section>/título só pelo menu
   fixo lateral (mesmo motivo do fundos-palavra-gestor.css) — os seletores
   abaixo são prefixados com #cases (id da seção), que sempre vence
   classe+elemento sem precisar de !important. */

#cases.nm-cases {
  background: var(--nm-color-off-white);
  padding: 96px 0;
}

#cases .headerItem {
  border-bottom: none !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: default !important;
  position: static !important;
}

/* .todoItemCaseInvestimento continua no wrapper de cada case só porque o
   JS/CSS do popup (.popUp/.todoPopUp em css_old16-2.css) depende dela pra
   abrir/fechar (.todoItemCaseInvestimento.popUpAtivo .popUp). Mas essa mesma
   classe também tem um card antigo embutido (width/height fixos, border,
   box-shadow, padding, margin dos nth-of-type) que vaza pro nosso grid —
   zera tudo isso aqui, sem tocar nas regras do popup em si. */
#cases .todoItemCaseInvestimento {
  width: auto !important;
  height: auto !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  position: static !important;
}

#cases .nm-cases__title {
  margin: 0 0 var(--nm-space-5); /* 24px até a grade */
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-medium);
  font-size: var(--nm-font-size-lg); /* 24px */
  line-height: var(--nm-line-height-lg); /* 32px */
  color: var(--nm-color-deep-blue);
}

#cases .nm-cases__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch; /* linhas com altura igual — ver .nm-cases__card abaixo */
  gap: var(--nm-space-6); /* 30px no Figma, 32px é o degrau mais próximo do grid de 8px */
}

/* .nm-cases__item (grid item) já estica pra altura da linha (align-items:
   stretch é o padrão do grid) — mas o card em si só herda isso com
   height:100%. Com justify-content:space-between o botão desce pro rodapé
   do card em vez de ficar "em escada" quando o nome/área de um vizinho
   quebra em 2 linhas e o outro não. */
#cases .nm-cases__card {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--nm-space-4); /* 16px */
  width: 100%;
  height: 100%;
  background: var(--nm-color-white);
  border: 1px solid var(--nm-color-border);
  border-radius: var(--nm-radius-md); /* 16px */
  padding: var(--nm-space-5) 20px; /* 24px vertical, 20px horizontal — sem token pra 20 */
}

#cases .nm-cases__content {
  display: flex;
  flex-direction: column;
  gap: var(--nm-space-4); /* 16px */
  width: 100%;
}

/* placeholder "LOGO" do Figma já vem com moldura própria — a logo real de
   cada case é uma imagem qualquer, então a borda/raio precisam vir daqui
   (mesmo caso do fundos-onde-investir.css). */
#cases .nm-cases__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 56px;
  border: 1px solid var(--nm-color-border); /* #CACACA */
  border-radius: var(--nm-radius-sm); /* 8px */
}

#cases .nm-cases__logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

#cases .nm-cases__infos {
  display: flex;
  flex-direction: column;
  gap: var(--nm-space-2); /* 8px */
  width: 100%;
}

/* $cor_da_tag (ACF) continua setando a cor de fundo via style="" inline —
   aqui só padronizamos formato/tipografia do rótulo. */
#cases .nm-cases__tag {
  display: inline-flex;
  align-items: center;
  padding: var(--nm-space-1) 6px; /* 4px 6px — sem token pra 6px */
  border: 1px solid var(--nm-color-chumbo);
  border-radius: var(--nm-radius-pill);
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-regular);
  font-size: 14px;
  line-height: 16px;
  color: var(--nm-color-chumbo);
  width: fit-content;
}

#cases .nm-cases__name {
  margin: 0;
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-medium);
  font-size: var(--nm-font-size-md); /* 20px */
  line-height: var(--nm-line-height-md); /* 28px */
  color: var(--nm-color-deep-blue);
}

#cases .nm-cases__area {
  margin: 0;
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-regular);
  font-size: var(--nm-font-size-base); /* 16px */
  line-height: var(--nm-line-height-base); /* 24px */
  color: var(--nm-color-chumbo);
}

#cases .nm-cases__cta {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: var(--nm-space-1) var(--nm-space-3); /* 4px 12px */
  background: transparent;
  border: 2px solid var(--nm-color-blue);
  border-radius: var(--nm-radius-pill);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.15s ease;
}

#cases .nm-cases__cta:hover {
  background: var(--nm-color-blue);
}

#cases .nm-cases__cta img {
  display: block;
  width: 24px;
  height: 24px;
}

/* asset original só existe na variante azul — no hover o botão vira azul
   sólido, então o ícone precisa virar branco (mesmo glyph, sem 2º asset). */
#cases .nm-cases__cta:hover img {
  filter: brightness(0) invert(1);
}

@media (max-width: 768px) {
  #cases.nm-cases {
    padding: 64px 0; /* sem token pra 64px na escala de espaçamento */
  }

  #cases .headerItem {
    padding-left: var(--nm-space-4);
    padding-right: var(--nm-space-4);
  }

  #cases .nm-cases__title {
    padding-left: var(--nm-space-4);
    padding-right: var(--nm-space-4);
  }

  #cases .nm-cases__grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--nm-space-2); /* 9px no Figma, 8px é o mais próximo */
    row-gap: var(--nm-space-5); /* 24px */
   
  }

  #cases .nm-cases__card {
    padding: var(--nm-space-5) var(--nm-space-4); /* 24px 16px */
  }
}