/* Pilot roster cards: a photo with the name over it and the car number in the
   corner, then the record underneath. Shared by a team's page (team_detail.html)
   and the pilot results on /buscar/ (search.html), so it lives in its own file
   rather than in team.css, which carries the rest of the team page's styles. */

/* ---------- Roster ---------- */
.roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.roster-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.roster-card:hover { border-color: var(--accent-line); transform: translateY(-2px); }
.roster-photo {
  position: relative;
  aspect-ratio: 4 / 3.4;
  background: linear-gradient(150deg, #2a3542, #171c22);
  overflow: hidden;
}
.roster-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.roster-photo-fallback {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 42px; font-weight: 800; color: var(--text-tertiary);
}
.roster-photo-scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.roster-photo-name {
  position: absolute; left: 10px; top: 10px; display: flex; flex-direction: column; line-height: 1.15;
  color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.roster-first { font-size: 11.5px; font-weight: 500; opacity: 0.85; }
.roster-last { font-size: 14.5px; font-weight: 800; display: flex; align-items: center; gap: 4px; }
.roster-last .check { width: 12px; height: 12px; color: var(--accent); flex-shrink: 0; }
.roster-number {
  position: absolute; right: 10px; bottom: 6px;
  font-size: 28px; font-weight: 900; color: #fff; font-family: var(--font-mono);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
.roster-flag { position: absolute; left: 10px; bottom: 9px; font-size: 17px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); }
.roster-info { padding: 10px 12px 13px; min-width: 0; }
.roster-stats { font-size: 11.5px; color: var(--text-tertiary); display: block; }
.roster-category { font-size: 11px; color: var(--text-tertiary); display: block; margin-top: 2px; text-transform: capitalize; }
.roster-contribution { display: block; margin-top: 8px; }
.rc-bar-track { display: block; height: 4px; border-radius: 100px; background: var(--line); overflow: hidden; }
.rc-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 100px; }
.rc-pct { font-size: 10.5px; color: var(--text-tertiary); margin-top: 4px; display: inline-block; }