/* Banner Novidade — Nova Marca
   Figma: Site Update Nova Marca — curto: node 7833:3920 (desk) / 7833:4813 (mobo)
                                    longo: node 7833:3907 (desk) / 7833:4799 (mobo)

   Reconstruído com classes .nm-banner-novidade__* que não existem em
   css.css. Conteúdo continua vindo dos mesmos campos ACF de sempre
   (imagem/texto_tag/titulo_banner/descricao_banner/texto_botao/link_botao,
   já em vars.php) — "curto" e "longo" são o MESMO layout, só a presença do
   parágrafo de descrição muda (curto nunca teve $descricao, igual já era).
   Sem imagem enviada, cai no placeholder (ícone + fundo cinza) do Figma.

   O botão vira só o ícone (a seta), sem o texto de $texto_botao visível —
   olha o Figma, os dois tamanhos usam só o ícone. $texto_botao continua
   preenchendo o aria-label/title do link, não é descartado.

   .bannerNovidade/.binitial ficam no HTML (usados só como seletor de
   presença em backups antigos, sem estilo ou JS vivo — conferido antes de
   trocar). O 3º modelo, "bannerimagem" (imagem cheia, sem texto), não está
   no Figma desta leva — continua com o CSS antigo, intocado. */

.bannerNovidade.nm-banner-novidade {
  margin-top: var(--nm-space-7); /* 40px — mesmo respiro das outras seções */
}

/* .bNovidade (legado, mantido no HTML) carrega padding-top:32px/padding-bottom:50px
   e justify-content:end do css.css — como isso não conflita em especificidade
   com nada que eu declarava aqui (eu simplesmente não tinha "padding" nessa
   regra), vazava sem eu perceber e a imagem ficava menor que 100% da altura
   do card. Reset explícito. */
.nm-banner-novidade .nm-banner-novidade__inner {
  display: flex;
  justify-content: flex-start;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  background: var(--nm-color-deep-blue);
  border-radius: var(--nm-radius-md); /* 16px */
  overflow: hidden;
}

/* Altura é uma característica do tamanho, não do quanto de texto tem — no
   Figma "curto" (152px) e "longo" (264px) diferem mesmo quando o conteúdo
   real (ex.: sem $descricao preenchida ainda) seria curto o bastante pra
   caber nos dois. min-height (não height) porque um texto muito comprido
   ainda pode precisar crescer além disso. */
.nm-banner-novidade .nm-banner-novidade__inner--curto {
  min-height: 152px;
}

.nm-banner-novidade .nm-banner-novidade__inner--longo {
  min-height: 264px;
}

.nm-banner-novidade .nm-banner-novidade__image {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #c4c4c4;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Fade da imagem para o fundo deep-blue — a imagem ocupa 100% e o gradiente
   faz a transição suave para a área de texto. */
.nm-banner-novidade .nm-banner-novidade__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(87.86deg, rgba(29, 37, 55, 0) 34.46%, #062143 56.16%);
  pointer-events: none;
}

.nm-banner-novidade .nm-banner-novidade__placeholder {
  display: flex;
  width: 48px;
  height: 48px;
}

.nm-banner-novidade .nm-banner-novidade__placeholder img {
  display: block;
  width: 100%;
  height: 100%;
}

.nm-banner-novidade .nm-banner-novidade__body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--nm-space-6); /* 32px — botão fica sempre colado ao final da linha, próximo do texto */
  padding: var(--nm-space-6) var(--nm-space-5) var(--nm-space-6) 30px; /* 30px = gap imagem→texto do Figma */
  margin-left: auto;
  max-width: 60%;
  min-width: 0;
}

.nm-banner-novidade .nm-banner-novidade__content {
  display: flex;
  flex-direction: column;
  gap: var(--nm-space-2); /* 8px */
  flex: 1 1 auto;
  min-width: 0;
}

.nm-banner-novidade .nm-banner-novidade__tag {
  margin: 0;
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-medium);
  font-size: var(--nm-font-size-base); /* 16px */
  line-height: var(--nm-line-height-base);
  color: var(--nm-color-blue);
}

.nm-banner-novidade .nm-banner-novidade__title {
  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-off-white);
}

.nm-banner-novidade .nm-banner-novidade__desc {
  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-off-white);
}

.nm-banner-novidade .nm-banner-novidade__cta {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 40px;
  padding: 0;
  border: 2px solid var(--nm-color-blue);
  border-radius: var(--nm-radius-pill);
  transition: background-color 0.15s ease;
}

.nm-banner-novidade .nm-banner-novidade__cta:hover {
  background: var(--nm-color-blue);
}

.nm-banner-novidade .nm-banner-novidade__cta img {
  display: block;
  width: 32px;
  height: 32px;
  transition: filter 0.15s ease;
}

/* 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). */
.nm-banner-novidade .nm-banner-novidade__cta:hover img {
  filter: brightness(0) invert(1);
}

@media (max-width: 768px) {
  .nm-banner-novidade .nm-banner-novidade__inner {
    flex-direction: column;
  }

  .nm-banner-novidade .nm-banner-novidade__image {
    position: relative;
    inset: auto;
    width: 100%;
    height: 181px;
  }

  .nm-banner-novidade .nm-banner-novidade__image::after {
    background: linear-gradient(180deg, rgba(29, 37, 55, 0) 40%, #062143 90%);
  }

  .nm-banner-novidade .nm-banner-novidade__body {
    max-width: 100%;
    margin-left: 0;
    padding: var(--nm-space-5) var(--nm-space-4); /* 24px 16px, igual ao Figma mobile */
    gap: var(--nm-space-4); /* 16px */
  }
}