/* Team hierarchy.
   Mobile: keep the single-column UX and give the department lead only a subtle
   visual priority. Tablet/desktop: place the lead above the two-column grid. */
@media (max-width: 767px) {
  #team-list > :first-child {
    margin-bottom: 0.4rem;
    border-color: color-mix(in oklch, var(--primary) 32%, var(--border));
    box-shadow:
      0 0 0 1px color-mix(in oklch, var(--primary) 7%, transparent),
      0 7px 22px -20px color-mix(in oklch, var(--primary) 55%, transparent);
  }

  #team-list > :first-child > button,
  #team-list > :first-child > div:first-child {
    background: color-mix(in oklch, var(--primary) 3.5%, var(--card));
  }
}

@media (min-width: 768px) {
  #team-list > :first-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 0.375rem);
    margin-bottom: 0.25rem;
  }
}