/* Seção "Time" (equipe) da página Quem Somos
   (Figma desktop: Desk / Quem Somos, node 7449:2181 —
    Figma mobile: Mobo / Quem Somos, node 7449:2316).
   Grade responsiva: os MESMOS cards (18 iniciais + lotes ocultos de 18 em 18)
   só reorganizam de 6 para 2 colunas — o mobile do Figma mostra 12 porque o
   frame ali é só um recorte de altura fixa, não um limite de conteúdo. */

.nm-somos-time {
  padding: var(--nm-space-9) 0;
}

.nm-somos-time__header {
  max-width: 770px;
  margin: 0 auto var(--nm-space-7);
  text-align: center;
}

.nm-somos-time__title {
  margin: 0 0 var(--nm-space-5);
  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-3xl);
  line-height: var(--nm-line-height-3xl);
  text-align: center; /* sobrescreve o `p{text-align:left}` global do legado (css.css) */
}

.nm-somos-time__text {
  margin: 0;
  color: var(--nm-color-chumbo);
  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: center; /* idem: `p{text-align:left}` global não é herança, é match direto */
}

.nm-somos-time__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 30px; /* valor exato do Figma — não arredondar para --nm-space-6 (32px) */
  row-gap: var(--nm-space-5);
}

.nm-somos-time__card--hidden {
  display: none;
}

/* Temporário: mostra todo mundo direto, sem paginação por lote — some com o
   botão "Mostrar mais" e força os cards ocultos a aparecer. A lógica de
   lote em page-somos.php e o JS do botão continuam intactos, só
   sobrescritos aqui; reverter depois é só tirar este bloco. */
.nm-somos-time__card--hidden {
  display: block;
}

.nm-somos-time__more {
  display: none;
}

.nm-somos-time__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nm-space-2);
  padding: var(--nm-space-2) 0 var(--nm-space-5);
  border-radius: var(--nm-radius-md);
  background: var(--nm-gradient-card-light);
  text-decoration: none;
  cursor: pointer;
}

.nm-somos-time__photo {
  position: relative;
  width: 90.6%; /* 154px em um card de 170px no Figma */
  max-width: 154px;
  aspect-ratio: 154 / 116;
  border-radius: var(--nm-radius-sm);
  overflow: hidden;
  background: var(--nm-gradient-card-foto);
}

.nm-somos-time__photo img {
  /* Imagem padrão 4:3 (600x450px): object-fit:cover preenche o container
     (aspect-ratio 154/116, ~4:3) fazendo crop proporcional em vez de
     esticar — sem isso, qualquer foto com proporção diferente da imagem
     de referência original do Figma ficava distorcida. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.nm-somos-time__info {
  width: 90.6%;
  max-width: 154px;
  text-align: center;
}

.nm-somos-time__name {
  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-bold);
  font-size: 12px; /* sem token na escala (menor é --nm-font-size-sm, 14px) */
  line-height: 12px;
  text-transform: uppercase;
  text-align: center; /* sobrescreve o `p{text-align:left}` global do legado */
}

.nm-somos-time__role {
  max-width: 120px;
  margin: 0 auto;
  color: var(--nm-color-deep-blue);
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-regular);
  font-size: 12px; /* sem token na escala (menor é --nm-font-size-sm, 14px) */
  line-height: 12px;
  text-align: center; /* idem */
}

.nm-somos-time__more {
  display: none;
  justify-content: center;
  margin-top: var(--nm-space-7);
}

.nm-somos-time__more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 270px;
  max-width: 100%;
  height: 48px;
  padding: var(--nm-space-3) var(--nm-space-5);
  border-radius: var(--nm-radius-pill);
  border: 2px solid var(--nm-color-blue);
  background: transparent;
  color: var(--nm-color-blue);
  font-family: var(--nm-font-family);
  font-weight: var(--nm-font-weight-medium);
  font-size: var(--nm-font-size-base);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.nm-somos-time__more-btn:hover {
  background: var(--nm-color-blue);
  color: var(--nm-color-white);
}

/* Popup do colaborador: reaproveita a estrutura/classes legadas
   (.white-popup, .fotoRedes, .descricao) tal como já funcionavam — só a
   fonte muda para a Nova Marca. Layout definitivo do popup fica para depois. */
.nm-somos-time-popup,
.nm-somos-time-popup * {
  font-family: var(--nm-font-family);
}

@media (max-width: 768px) {
  /* .containerSite (global) não tem gutter lateral em mobile — mesma
     correção já aplicada em .nm-somos-video/.nm-somos-numeros .containerSite. */
  .nm-somos-time .containerSite {
    padding: 0 var(--nm-space-4);
  }

  /* Card mantém 170px fixo (não estica/encolhe) até o breakpoint de 393px do
     Figma mobile — evita o card ficar mais largo/estreito que o design. */
  .nm-somos-time__grid {
    grid-template-columns: repeat(2, 170px);
    justify-content: center;
    column-gap: var(--nm-space-4);
    row-gap: var(--nm-space-5);
  }

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