/* Shared name / telephone / room tracks for all years. Staff email uses
   a second line, leaving no empty email column in student rosters. */
.member-roster main article { padding-inline: clamp(1rem, 2.5vw, 2rem); }
.member-roster .member-table,
.member-roster .member-table > tbody {
  display: block;
  width: 100%;
  margin: 0;
}
.member-roster .member-table tr {
  display: grid;
  grid-template-columns: 9rem 11.5rem minmax(0, 1fr);
  column-gap: 1rem;
  align-items: center;
  width: 100%;
  padding-block: 0.2rem;
}
.member-roster table.member-table td {
  display: block;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0.15rem 0;
  padding-left: 0 !important;
  line-height: 1.5;
  white-space: nowrap !important;
  word-break: normal;
  overflow-wrap: normal;
}
.member-roster .member-table td.name { grid-column: 1; grid-row: 1; }
.member-roster .member-table:not(.student-contact) td:nth-child(2) {
  grid-column: 2 / -1;
  grid-row: 2;
}
.member-roster .member-table:not(.student-contact) td:nth-child(3),
.member-roster .student-contact td:nth-child(2) { grid-column: 2; grid-row: 1; }
.member-roster .member-table td.indent { grid-column: 3; grid-row: 1; }
.member-roster main h3 {
  margin: 1.5rem 0 0.5rem;
  padding-inline: 0;
}
@media screen and (max-width: 900px) {
  .member-roster .member-table tr {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.15rem;
    padding-block: 0.5rem;
  }
  .member-roster table.member-table td {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  .member-roster .member-table:not(.student-contact) td:nth-child(2),
  .member-roster table.member-table td.indent {
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
}