/* ==========================================================================
   Component: Autores (faixa de rostos)
   Vive na home e na vitrine da loja — por isso saiu do hero.css, que só
   carrega na landing.
   ========================================================================== */



.home-hero__proof {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-5);
  min-width: 0;
  max-width: 100%;
}

.home-hero__avatars,
.home-track-card__avatars {
  display: flex;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
  list-style: none;
}

.home-hero__avatars li,
.home-track-card__avatars li {
  position: relative;
}

.home-hero__avatars li + li,
.home-track-card__avatars li + li {
  margin-left: -0.9rem;
}

.home-hero__avatars li::after,
.home-track-card__avatars li::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--space-2));
  z-index: 10;
  width: max-content;
  max-width: 12rem;
  padding: var(--space-2) var(--space-3);
  color: var(--color-dark-fg);
  background: var(--color-neutral-950);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-family: var(--font-ui);
  font-size: var(--text-small);
  font-weight: var(--font-medium);
  line-height: var(--leading-snug);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.25rem);
  transition:
    opacity var(--duration-fast) var(--ease-default),
    transform var(--duration-fast) var(--ease-default);
}

.home-hero__avatars li:hover::after,
.home-hero__avatars li:focus-within::after,
.home-track-card__avatars li:hover::after,
.home-track-card__avatars li:focus-within::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.home-hero__avatars img,
.home-track-card__avatars img,
.home-hero__avatar-more {
  display: block;
  width: 2.8125rem;
  height: 2.8125rem;
  border-radius: var(--radius-full);
}

.home-hero__avatars img,
.home-track-card__avatars img {
  object-fit: cover;
}

.home-hero__avatar-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--color-neutral-950);
  font-family: var(--font-ui);
  font-size: var(--text-p);
  font-weight: var(--font-medium);
}

.home-hero__proof-text {
  flex: 0 1 13rem;
  min-width: 0;
  max-width: 13rem;
  margin: 0;
  color: var(--color-fg-subtle);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: var(--leading-snug);
}

.home-hero__proof-text b {
  color: var(--color-fg);
  font-weight: var(--font-bold);
}
@media (min-width: 1024px) {

  .home-hero__proof {
    justify-self: end;
    justify-content: flex-end;
    width: 100%;
    margin-bottom: var(--space-2);
  }
}
@media (max-width: 1023px) {

  .home-track-card__footer,
  .home-track-card__proof,
  .home-hero__proof {
    flex-wrap: wrap;
  }

  .home-hero__proof {
    justify-content: center;
    justify-self: center;
    text-align: center;
  }
}
@media (max-width: 480px) {
  .home-hero__proof {
    align-items: center;
    gap: var(--space-3);
  }

  .home-hero__avatars img,
  .home-track-card__avatars img,
  .home-hero__avatar-more {
    width: 2.5rem;
    height: 2.5rem;
  }

  .home-hero__proof-text {
    flex-basis: 100%;
    max-width: none;
  }
}

/* Na vitrine a faixa divide a linha com o título do topo: precisa caber no
   próprio conteúdo, sem esticar (espremia o título) nem quebrar (jogava o
   texto pra baixo dos rostos). nowrap porque max-content num container que
   quebra linha não soma os itens — mede o maior deles. */
@media (min-width: 1024px) {
  .shop-hero__inner .home-hero__proof {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    width: auto;
    /* Centrada no bloco de texto inteiro (título + subtítulo), não colada
       no topo: alinhada só ao título, sobrava peso embaixo à esquerda. */
    align-self: center;
  }
}