/* avatar-group — @tokens: --avatar-group-overlap

   An overlapping avatar stack — composes `.hzo-avatar` children into a
   condensed "who's here" cluster (testimonial rows, team credits, "+N more").
   Each disc gets a ring in the page colour so it reads as separate, and a
   negative left margin so it tucks under its left neighbour. Later children
   paint ABOVE earlier ones (source order + z-index) so each ring cleanly
   overlaps the one before it.

   Token-only: the overlap distance has no semantic token, so it is a component
   token with a literal fallback (the icon-button.css dial pattern). Ring width
   + shape read the semantic border/radius scale; the pill matches the base
   avatar footprint (48px, same dimension literal avatar.css uses). */
.hzo-avatar-group {
    display: inline-flex;
    align-items: center;
}

/* Direct children (the `.hzo-avatar` discs + the `+N` pill) overlap + ring. */
.hzo-avatar-group > * {
    border: var(--border-2) solid var(--bg-page);
    border-radius: var(--radius-full);
    margin-left: calc(-1 * var(--avatar-group-overlap, 12px));
}
.hzo-avatar-group > *:first-child { margin-left: 0; }

/* Later children win the stacking so each ring sits on its left neighbour. */
.hzo-avatar-group > *:nth-child(1) { z-index: 1; }
.hzo-avatar-group > *:nth-child(2) { z-index: 2; }
.hzo-avatar-group > *:nth-child(3) { z-index: 3; }
.hzo-avatar-group > *:nth-child(4) { z-index: 4; }
.hzo-avatar-group > *:nth-child(5) { z-index: 5; }

/* Overflow pill — the "+N" summary. Same footprint as a base avatar; muted ink
   on the alt surface so it reads as a count, not a person. Sits last, on top. */
.hzo-avatar-group__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: var(--bg-alt);
    color: var(--text-muted);
    font-size: var(--fs-50);
    font-weight: var(--fw-600, 600);
    line-height: var(--lh-none);
    user-select: none;
    z-index: 6;
}