/* ==================================================================
   314 VBC — TEAMS PAGE EXTRAS
   Linked from teams.html only. Loads after assets/site.css.

   Adds the coaching-staff facepile to the "Pick a team" cards (.tix).

   SIZING NOTE — do not scale these up.
   The headshots on file are only ~168x125px originals. They are
   square-cropped to 168x168 in assets/photos/avatars/. A 40px avatar
   is still crisp at 4x DPR and a 48px one at 3.5x, so the faces read
   sharp. Anything larger than ~56px starts to show the upscale.
   If full-resolution headshots ever arrive, this is the only number
   that needs to change.
   ================================================================== */

:root{ --tav-size:40px; }

/* --- the staff block sits under the chips, inside the card link --- */
.tix .tstaff{
  margin-top:1.05rem;
  padding-top:.85rem;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:.5rem;
  transition:border-color .3s var(--ease);
}
.tix a:hover .tstaff{ border-top-color:rgba(255,255,255,.2); }

.tix .tsc{
  display:flex;
  align-items:center;
  gap:.62rem;
  min-width:0;
}

/* --- avatar ------------------------------------------------------- */
.tix .tav{
  position:relative;
  flex:0 0 auto;
  width:var(--tav-size);
  height:var(--tav-size);
  border-radius:50%;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:var(--navy-crest);
  box-shadow:0 0 0 1px var(--line);
  transition:box-shadow .3s var(--ease);
}
.tix .tav img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:2;
}
/* initials sit behind the photo — they show if the file 404s */
.tix .tav i{
  font-style:normal;
  font-family:var(--font-display);
  font-size:.82rem;
  letter-spacing:.03em;
  color:#fff;
  z-index:1;
}
.tix a:hover .tav{ box-shadow:0 0 0 1px rgba(255,255,255,.24); }

/* no headshot on file yet — initials monogram.
   (The club crest is used at full size on coaches.html, but at 40px
   the shield reads as a smudge, so a monogram is used here instead.) */
.tix .tav--mono{ background:var(--bone-2); }
.tix .tav--mono i{ color:var(--navy-crest); }
.tix a:hover .tav--mono{ background:rgba(255,255,255,.14); }
.tix a:hover .tav--mono i{ color:#fff; }

/* position not filled for 2026–27 */
.tix .tav--tbd{
  background:transparent;
  box-shadow:inset 0 0 0 2px var(--line);
}
.tix .tav--tbd i{ color:var(--muted); font-size:.95rem; }
.tix a:hover .tav--tbd{ box-shadow:inset 0 0 0 2px rgba(255,255,255,.3); }
.tix a:hover .tav--tbd i{ color:rgba(255,255,255,.75); }

/* --- name + role -------------------------------------------------- */
.tix .tst-t{
  display:flex;
  flex-direction:column;
  min-width:0;
  line-height:1.2;
}
.tix .tst-t b{
  font-size:.85rem;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transition:color .3s var(--ease);
}
.tix .tst-t em{
  font-style:normal;
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:.18rem;
  transition:color .3s var(--ease);
}
.tix .tst-t--tbd b{ color:var(--muted); font-weight:500; }

.tix a:hover .tst-t b{ color:#fff; }
.tix a:hover .tst-t em{ color:var(--red-hot); }
.tix a:hover .tst-t--tbd b{ color:rgba(255,255,255,.66); }

/* --- small screens: cards go full width, so give a touch more air -- */
@media (max-width:560px){
  :root{ --tav-size:44px; }
  .tix .tstaff{ gap:.6rem; }
}

@media (prefers-reduced-motion:reduce){
  .tix .tstaff,
  .tix .tav,
  .tix .tst-t b,
  .tix .tst-t em{ transition:none; }
}