/* Modal de detalhes do Case de Investimento — Nova Marca
   Figma: node 8092:6941 (desk) / 8092:6956 (mobo)

   Só um "tapa" visual: reaproveita o popup que já existe hoje
   (.popUp/.todoPopUp/.btnClose, aberto/fechado via addClass("popUpAtivo")
   no <script> de fundos-template-parts/cases.php — não é Magnific Popup
   como o modal da Equipe, mas segue a mesma ideia de "não mexe na
   estrutura/JS, só reestiliza"). Escopado em #cases porque
   .todoItemCaseInvestimento.popUpAtivo... (css.css) usa essas mesmas
   classes soltas em outras páginas fora da single fundos
   (single-fundos-kinea-ventures.php, page-lp-xp-expert.php etc). */

#cases .todoItemCaseInvestimento.popUpAtivo .popUp {
  background: rgba(0, 0, 0, 0.24);
}

#cases .todoItemCaseInvestimento.popUpAtivo .todoPopUp {
  align-items: flex-start;
  gap: 64px;
  width: 970px;
  height: auto;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 64px;
  border-radius: var(--nm-radius-md);
  box-sizing: border-box;
}

/* ---------- Coluna da esquerda (logo + ícones) ---------- */

#cases .todoItemCaseInvestimento.popUpAtivo .todoPopUp .logos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--nm-space-5); /* 24px */
  width: 270px;
  flex-shrink: 0;
  margin-right: 0; /* substitui o margin-right legado — espaçamento agora é o gap do .todoPopUp */
}

#cases .todoItemCaseInvestimento.popUpAtivo .todoPopUp .logoPrincipal {
  width: 270px;
  height: 151px;
  padding: var(--nm-space-4);
  border: 1px solid var(--nm-color-border);
  border-radius: var(--nm-radius-md);
  box-sizing: border-box;
}

#cases .todoItemCaseInvestimento.popUpAtivo .todoPopUp .logoPrincipal img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

#cases .todoItemCaseInvestimento.popUpAtivo .todoPopUp .links {
  margin-top: 0;
  gap: var(--nm-space-4); /* 16px */
}

#cases .todoItemCaseInvestimento.popUpAtivo .todoPopUp .links div {
  margin-right: 0;
  width: 40px;
  height: 40px;
  aspect-ratio: 1 / 1;
}

#cases .todoItemCaseInvestimento.popUpAtivo .todoPopUp .links div img {
  display: block;
  width: 40px;
  height: 40px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* ---------- Coluna da direita (infos + descrição) ---------- */

#cases .todoItemCaseInvestimento.popUpAtivo .todoPopUp .textos {
  width: 470px;
  flex-shrink: 0;
}

/* Figma não mostra a cor customizada por fundo (cor_da_tag) — pill neutra
   sempre, mesmo padrão já usado noutras seções (ex: Opções de Investimento)
   quando o campo antigo carregava cor de marca antiga. !important pisa no
   style="background:..." inline que o shortcode ainda gera. */
#cases .todoItemCaseInvestimento.popUpAtivo .todoPopUp .tag {
  display: inline-flex;
  width: fit-content;
  margin-bottom: var(--nm-space-2); /* 8px */
  padding: 4px 6px;
  background: transparent !important;
  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: var(--nm-font-size-sm); /* 14px */
  line-height: var(--nm-line-height-sm); /* 16px */
  color: var(--nm-color-chumbo);
}

#cases .todoItemCaseInvestimento.popUpAtivo .todoPopUp .itemComp.Comp {
  margin-bottom: var(--nm-space-2); /* 8px */
}

#cases .todoItemCaseInvestimento.popUpAtivo .todoPopUp .itemComp.Comp p {
  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 .todoItemCaseInvestimento.popUpAtivo .todoPopUp .itemComp.Setor {
  margin-bottom: var(--nm-space-5); /* 24px até a descrição */
}

#cases .todoItemCaseInvestimento.popUpAtivo .todoPopUp .itemComp.Setor p {
  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);
}

/* "Sobre a Companhia"/"About the company" não existe no Figma — some sem
   tocar no PHP (mantém a estrutura, só esconde). */
#cases .todoItemCaseInvestimento.popUpAtivo .todoPopUp .sobre h4 {
  display: none;
}

#cases .todoItemCaseInvestimento.popUpAtivo .todoPopUp .sobre p {
  max-width: none;
  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);
}

@media (max-width: 768px) {
  #cases .todoItemCaseInvestimento.popUpAtivo .todoPopUp {
    padding: var(--nm-space-6) var(--nm-space-4); /* 32px 16px */
  }

  #cases .todoItemCaseInvestimento.popUpAtivo .todoPopUp .logos {
    width: 100%;
    margin-bottom: var(--nm-space-5); /* 24px — vira a "divider" abaixo */
    padding-bottom: var(--nm-space-5);
    border-bottom: 1px solid var(--nm-color-border);
  }

  #cases .todoItemCaseInvestimento.popUpAtivo .todoPopUp .logoPrincipal {
    width: 100%;
    max-width: 270px;
  }

  #cases .todoItemCaseInvestimento.popUpAtivo .todoPopUp .textos {
    width: 100%;
  }
}