/* Informações Adicionais — Nova Marca
   Figma: Site Update Nova Marca — node 7833:4282 (desk) / 7833:5137 (mobo)

   Reconstruído com classes .nm-infos-adicionais__* que não existem em
   css.css. Conteúdo continua vindo do mesmo repeater ACF de sempre —
   "informacoes_basicas" (ícone/título/conteúdo por linha), sem herdar
   .containerInfos/.itemInfo/.imgInfo/.txtInfo do css.css.

   Os ícones continuam sendo os mesmos SVGs enviados por linha no ACF — não
   dá pra forçar a cor deles aqui (não são um asset fixo do tema).

   O Figma mostra 9 itens em 4 colunas desktop distribuídos 3/2/2/2 (não
   4/4/1) — isso é o preenchimento típico de CSS multi-column (column-count),
   não de um grid linha-por-linha. Como o repeater tem número de itens
   variável por fundo, um grid comum (display:grid) deixaria buracos feios
   quando o total não é múltiplo de 4 (ex.: 9 itens = 2 linhas cheias + 1
   item sozinho, com 3 colunas vazias do lado). column-count resolve isso
   pra qualquer quantidade, preenchendo coluna por coluna.

   .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 #infosBasicas (id da seção), que sempre vence
   classe+elemento sem precisar de !important. */

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

#infosBasicas .nm-infos-adicionais__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);
}

#infosBasicas .nm-infos-adicionais__grid {
  column-count: 4;
  column-gap: var(--nm-space-6); /* 30px no Figma, 32px é o degrau mais próximo do grid de 8px */
}

#infosBasicas .nm-infos-adicionais__item {
  display: flex;
  align-items: center;
  gap: var(--nm-space-4); /* 16px */
  min-width: 0;
  margin-bottom: var(--nm-space-5); /* 24px — column-count não tem row-gap, o espaçamento entre itens de uma mesma coluna é margem */
  break-inside: avoid; /* ícone+texto não pode ficar cortado entre o fim de uma coluna e o início da próxima */
}

#infosBasicas .nm-infos-adicionais__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--nm-color-off-white);
}

#infosBasicas .nm-infos-adicionais__icon img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
}

#infosBasicas .nm-infos-adicionais__info {
  display: flex;
  flex-direction: column;
  gap: var(--nm-space-2); /* 8px */
  min-width: 0;
}

#infosBasicas .nm-infos-adicionais__label {
  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-chumbo);
}

#infosBasicas .nm-infos-adicionais__value {
  margin: 0;
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-semibold);
  font-size: var(--nm-font-size-base);
  line-height: var(--nm-line-height-base);
  color: var(--nm-color-chumbo);
  word-break: break-word;
}

@media (max-width: 768px) {
  #infosBasicas .headerItem {
    padding-left: 0;
    padding-right: 0;
  }

  #infosBasicas .nm-infos-adicionais__title {
    padding-left: 0;
    padding-right: 0;
  }

  #infosBasicas .nm-infos-adicionais__grid {
    column-count: 2;
    column-gap: var(--nm-space-5); /* 24px */
    padding: 0;
  }

  #infosBasicas .nm-infos-adicionais__item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--nm-space-2); /* 8px */
    margin-bottom: var(--nm-space-4); /* 16px */
  }

  #infosBasicas .nm-infos-adicionais__icon {
    width: 48px;
    height: 48px;
  }
  #infosBasicas .nm-infos-adicionais__info {
  gap: 0; /* 8px */
  min-width: 0;
}
}