/*
  Motion Fit — seções "Nosso Time" e "Pulseiras" (unidade.php).

  Time: carrossel horizontal arrastável (7 funções). Pulseiras: grid de 3.
*/

.team-section {
  background: #f7f7f7;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.team-list {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  /* proximity + snap no início: o club-carousel.js rola até o offsetLeft do
     card (borda esquerda). Com "center"/"mandatory" o snap disputa com o
     destino do JS e o carrossel não sai do lugar. */
  scroll-snap-type: x proximity;
  padding-bottom: 6px;
  margin: 0 -4px;
  padding-inline: 4px;
  scrollbar-width: none;
}

.team-list::-webkit-scrollbar {
  display: none;
}

.team-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: min(280px, 78vw);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

/*
  A foto de origem é o card de divulgação inteiro (título + parágrafo + foto
  do uniforme + legenda), não uma foto isolada da peça. Este wrapper recorta
  só a faixa do uniforme: aspect-ratio (definido inline por card, calculado
  a partir da altura real dessa faixa) fixa a altura visível, overflow:hidden
  esconde o resto, e a margin-top negativa (também inline, em % da largura —
  por isso funciona em qualquer tamanho de tela) empurra a imagem para cima
  até a faixa começar exatamente onde termina o parágrafo.
*/
.team-card-photo {
  position: relative;
  overflow: hidden;
  background: #eef1e9;
}

.team-card-photo img {
  display: block;
  width: 100%;
  height: auto;
}

.team-card-body {
  padding: 18px 20px 22px;
  display: grid;
  gap: 8px;
}

.team-card-role {
  margin: 0;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.02em;
}

.team-card-body p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 600;
}

.team-card-body p strong {
  color: #131312;
  font-weight: 850;
}

@media (max-width: 720px) {
  .team-card {
    width: min(240px, 74vw);
  }
}

/* ---------- Pulseiras de acesso (unidade.php) ---------- */
/*
  Cada arquivo já é o card inteiro (selo, título, descrição, benefícios e
  botão desenhados na arte), então aqui não há recorte nem texto por cima:
  a imagem entra completa e o card é só a moldura clicável.
*/
.wristband-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 900px) {
  .wristband-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.wristband-card {
  display: block;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}

.wristband-card:hover,
.wristband-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(19, 19, 18, .16);
}

.wristband-card img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 520px) {
  .wristband-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wristband-card {
    transition: none;
  }

  .wristband-card:hover {
    transform: none;
  }
}