/* Teams: banner, achievements (full list + pinned chips), team list and member list —
   split out of style.css. Used on team pages. */

.team-banner { width: 100%; max-width: 1000px; aspect-ratio: 1000 / 250; border-radius: var(--radius-large); overflow: hidden; margin-bottom: 0.75rem; }
.team-banner-img { display: block; width: 100%; height: 100%; object-fit: cover; }

.team-achievements { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.team-achievement { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-small); background: var(--clr-bg); border: 1px solid var(--clr-border); opacity: 0.5; filter: grayscale(1); }
.team-achievement--unlocked { opacity: 1; filter: none; border-color: var(--clr-link); }
.team-achievement-icon { font-size: 1.4rem; line-height: 1; }
.team-achievement-text { display: flex; flex-direction: column; }
.team-achievement-title { font-size: 0.92rem; }
.team-achievement-desc { font-size: 0.82rem; color: var(--clr-text-muted); }

/* Pinned achievements: a single row of small chips right below the team name/banner —
   icon + title only, full description is a native title-attribute tooltip on hover. */
.team-pinned-achievements { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.team-pinned-achievement { display: inline-flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.4rem 0.6rem; border-radius: var(--radius-small); background: var(--clr-surface); border: 1px solid var(--clr-link); font-size: 0.78rem; font-weight: 600; text-align: center; cursor: default; }
.team-pinned-achievement-icon { font-size: 1.3rem; line-height: 1; }
.teams-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; padding: 0; }
.teams-list a { display: inline-block; padding: 0.25rem 0.75rem; border: 1px solid var(--clr-border); border-radius: var(--radius-small); background: var(--clr-surface-alt); font-size: 0.875rem; font-weight: 500; color: var(--clr-text); text-decoration: none; transition: border-color 0.12s, background 0.12s; }
.teams-list a:hover { border-color: var(--clr-link); color: var(--clr-link); background: color-mix(in srgb, var(--clr-link) 6%, var(--clr-surface)); }

.teams-member-list { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.75rem; padding: 0; }
.teams-member-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.75rem; background: var(--clr-surface-alt); border: 1px solid var(--clr-border); border-radius: var(--radius-small); font-size: 0.9rem; }
.teams-member-item span,
.teams-member-item a { font-weight: 500; }
.team-master-badge { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; background: color-mix(in srgb, var(--clr-link) 12%, transparent); color: var(--clr-link); border-radius: var(--radius-small); padding: 0.1rem 0.45rem; }
.teams-member-item form { margin-left: auto; }
.teams-member-item form + form { margin-left: 0; }
.team-donation-link { margin-bottom: 0.5rem; font-size: 0.9rem; }