/* Seção "Nossa trajetória" da página Quem Somos
   (Figma desktop: Desk / Quem Somos, node 7449:2138 —
    Figma mobile: Mobo / Quem Somos, node 7449:2272).

   Reconstruída do zero (v2): a única coisa reaproveitada da versão antiga é a
   FONTE DE DADOS (shortcode [timeline_bd], capturado via output buffering em
   page-somos-nm.php). Nenhuma classe legada (.TimeLine, .todoTimeLine,
   .itemTimeline, .voltarAnterior, .avancarProximo, Slick) é usada — carrossel
   próprio com scroll nativo (scrollBy no clique dos botões), sem
   dependência de nenhum CSS/JS de terceiros além do jQuery (já carregado
   no tema).

   Zigue-zague: alternado item a item (ímpar acima da linha, par abaixo).
   Espaçamentos (gap texto→conector 8px, conector 54px, marcador 24px de
   diâmetro) são os mesmos no desktop e no mobile. */

.nm-somos-trajetoria {
  position: relative;
  padding: var(--nm-space-9) 0;
  background: var(--nm-color-off-white);
}

/* Camada decorativa isolada: só ela tem overflow:hidden — o conteúdo real
   (texto dinâmico do banco) nunca é cortado por causa da esfera. */
.nm-somos-trajetoria__esferas-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.nm-somos-trajetoria__esfera {
  position: absolute;
  transform: rotate(180deg);
}

.nm-somos-trajetoria__esfera img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nm-somos-trajetoria__esfera--grande {
  top: -320px;
  right: 220px; /* 1920 - (843+702) no Figma desktop */
  width: 702px;
  height: 702px;
  z-index: 2; /* a grande fica NA FRENTE da pequena, igual ao print do Figma */
}

.nm-somos-trajetoria__esfera--pequena {
  top: -145px;
  right: 100px; /* 1920 - (1288+352) no Figma desktop */
  width: 352px;
  height: 352px;
  z-index: 1;
}

/* position:relative + z-index cria um contexto de empilhamento próprio,
   garantindo que o conteúdo real fica ACIMA da camada decorativa mesmo esta
   vindo antes no DOM (elemento posicionado sempre pinta acima de elemento
   estático — por isso o heading não pode ficar "por baixo" da esfera). */
.nm-somos-trajetoria__conteudo {
  position: relative;
  z-index: 1;
}

.nm-somos-trajetoria__title {
  margin: 0 0 var(--nm-space-7);
  color: var(--nm-color-deep-blue);
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-medium);
  font-size: var(--nm-font-size-2xl);
  line-height: var(--nm-line-height-2xl);
  text-align: left;
}

.nm-somos-trajetoria__carousel {
  position: relative;
}

/* Linha horizontal central: filha direta da <section> (não da containerSite),
   pra ocupar 100% da LARGURA DA TELA, não só a largura do container de
   1170px. Fica estática (não rola junto com o track) — como não tem nenhum
   detalhe visual próprio além de uma cor sólida, um traço fixo é
   visualmente idêntico a um traço que "rolasse" com o conteúdo, sem a
   complexidade de calcular a largura total de um conteúdo dinâmico.
   O `top` é calculado pra bater exatamente com o centro do marcador de cada
   item (padding-top da seção + altura do heading + margin do heading +
   padding-top do TRACK (160px) + 86px, sendo 86px o centro fixo da caixa de
   172px de .nm-somos-trajetoria__item — ver ::after). */
.nm-somos-trajetoria__line {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--nm-space-9) + var(--nm-line-height-2xl) + var(--nm-space-7) + 160px + 86px);
  height: 2px;
  background: #CACACA;
  z-index: 1;
  pointer-events: none;
}

/* O padding-top TEM que estar aqui dentro do próprio .track, não num
   ancestral (ex.: .carousel) — overflow-x:auto força overflow-y a virar
   "auto" também (regra do CSS: se um eixo não é visible e o outro não foi
   definido, o outro também deixa de ser visible), então qualquer conteúdo
   que ultrapasse a BORDA SUPERIOR do próprio .track é cortado. Reservando o
   espaço dentro do track (via padding, que conta pra dentro da área que o
   overflow considera), o texto que cresce pra cima cabe sem ser cortado. */
.nm-somos-trajetoria__track {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 30px;
  padding-top: 160px; /* espaço pro texto dos itens "de cima" (pior caso real: 5 linhas ≈ 144px) */
  padding-bottom: 200px; /* mesma lógica para o texto dos itens "de baixo" crescer pra baixo */
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory; /* garante que o scroll (arrasto ou seta) sempre pare com um item começando encostado na borda esquerda — nunca corta um item pela metade */
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none; /* evita selecionar o texto dos itens ao arrastar com o mouse */
}

.nm-somos-trajetoria__track::-webkit-scrollbar {
  display: none;
}

.nm-somos-trajetoria__track--arrastando {
  cursor: grabbing;
  scroll-snap-type: none; /* solta o snap durante o arrasto pra acompanhar o mouse 1:1; volta a valer no próximo scroll (clique nas setas ou touch) */
}

/* Caixa de cada item TEM ALTURA FIXA (172px) — igual pra "cima" e "baixo" —
   só pra dar ao marcador (::after) uma referência de posição que NUNCA muda
   com o tamanho do texto. O texto (.item-conteudo) é posicionado por fora
   dessa caixa via position:absolute + bottom/top fixos (ver variantes
   abaixo), crescendo livremente sem empurrar o marcador. */
.nm-somos-trajetoria__item {
  position: relative;
  flex-shrink: 0;
  width: 270px;
  height: 172px;
  scroll-snap-align: start;
}

.nm-somos-trajetoria__ano {
  margin: 0 0 var(--nm-space-2);
  color: var(--nm-color-deep-blue);
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-medium);
  font-size: var(--nm-font-size-md);
  line-height: var(--nm-line-height-md);
}

.nm-somos-trajetoria__desc {
  margin: 0;
  color: var(--nm-color-deep-blue);
  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);
  text-align: left;

  
}

/* Marcador (bolinha): SEMPRE no meio da caixa de 172px (top:74px a 98px,
   centro=86px) — igual pros dois tipos, é essa consistência que faz a
   bolinha ficar em cima da linha independente do tamanho do texto. */
.nm-somos-trajetoria__item::after {
  content: "";
  position: absolute;
  left: 16px;
  width: 24px;
  height: 24px;
  top: 74px;
  border-radius: 50%;
  background-color: var(--nm-color-white);
  background-image: url(../images/icon-dot-trajetoria.svg);
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
}

/* Item "de cima": conector sai do TOPO do marcador (y:74) subindo 54px
   (até y:20); o texto fica ancorado por baixo (bottom, não top), com a
   borda inferior 8px acima do conector (y:12) — cresce livremente pra cima. */
.nm-somos-trajetoria__item--cima::before {
  content: "";
  position: absolute;
  left: 27px;
  width: 2px;
  top: 20px;
  height: 54px;
  background: #CACACA;
}

.nm-somos-trajetoria__item--cima .nm-somos-trajetoria__item-conteudo {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 160px; /* 172 - 12 */
}

/* Item "de baixo": espelhado — conector sai da BASE do marcador (y:98)
   descendo 54px (até y:152); texto ancorado por cima (top), 8px depois do
   conector (y:160) — cresce livremente pra baixo. */
.nm-somos-trajetoria__item--baixo::before {
  content: "";
  position: absolute;
  left: 27px;
  width: 2px;
  top: 98px;
  height: 54px;
  background: #CACACA;
}

.nm-somos-trajetoria__item--baixo .nm-somos-trajetoria__item-conteudo {
  position: absolute;
  left: 0;
  width: 100%;
  top: 160px;
}

.nm-somos-trajetoria__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--nm-space-4);
  margin-top: var(--nm-space-7);
}

.nm-somos-trajetoria__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 40px;
  border-radius: var(--nm-radius-pill);
  border: 1px solid var(--nm-color-border);
  background: var(--nm-color-white);
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.nm-somos-trajetoria__arrow:hover:not(.nm-somos-trajetoria__arrow--disabled) {
  background: var(--nm-color-deep-blue);
  border-color: var(--nm-color-deep-blue);
}

.nm-somos-trajetoria__arrow:hover:not(.nm-somos-trajetoria__arrow--disabled) .nm-somos-trajetoria__arrow-icon {
  filter: brightness(0) invert(1);
}

.nm-somos-trajetoria__arrow--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.nm-somos-trajetoria__arrow-icon {
  width: 32px;
  height: 32px;
}

.nm-somos-trajetoria__arrow--prev .nm-somos-trajetoria__arrow-icon {
  transform: scaleX(-1);
}

@media (max-width: 768px) {

  .nm-somos-trajetoria .containerSite {
    width: 100%;
  }
  /* Sem esferas no mobile (pedido explícito) — mais simples que reposicionar. */
  .nm-somos-trajetoria__esferas-wrap {
    display: none;
  }

  /* Container 100%: gutter só do lado ESQUERDO. Sem padding-right, o carrossel
     fica full-bleed até a borda direita da tela — assim o próximo card
     aparece cortado bem na borda (efeito "peek"), sinalizando que dá pra
     arrastar/avançar, em vez de sobrar uma faixa vazia antes da borda. */
  .nm-somos-trajetoria .containerSite {
    padding-left: var(--nm-space-4);
    padding-right: 0;
  }

  .nm-somos-trajetoria__line,
  .nm-somos-trajetoria__item--cima::before,
  .nm-somos-trajetoria__item--baixo::before {
    background: #D9D9D9; /* cor exata do node mobile (levemente mais clara que o desktop) */
  }

  .nm-somos-trajetoria__title {
    font-size: var(--nm-font-size-xl);
    line-height: var(--nm-line-height-lg);
  }

  /* Recalcula o `top` da linha com a altura de heading do mobile (line-height-lg
     em vez de line-height-2xl) — mesma fórmula, só troca o token do heading. */
  .nm-somos-trajetoria__line {
    top: calc(var(--nm-space-9) + var(--nm-line-height-lg) + var(--nm-space-7) + 160px + 86px);
  }
}