/* Home-page-specific styling. Kept small and scoped; nothing here
   affects other pages. Designed with WCAG AA contrast in mind. */

/* Meetings (Lectures / Sections) list. No bullet, generous spacing. */
.meetings-list {
  list-style: none;
  padding-left: 0;
  margin: 8px 0 16px;
}
.meetings-list li {
  padding: 4px 0;
}

/* Staff cards: responsive grid of name + (optional) netid. Each
   card is a visually-distinct chip but does not require color to
   convey meaning. */
.staff-grid {
  list-style: none;
  padding-left: 0;
  margin: 8px 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.staff-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  background: #f6f8fa;
  border: 1px solid #d0d7de;
  border-radius: 6px;
}
.staff-name {
  font-weight: 600;
  color: #1f2328;
  line-height: 1.3;
}
.staff-contact {
  font-size: 0.85em;
  color: #57606a;            /* 4.6:1 against #f6f8fa : passes AA */
  line-height: 1.3;
}
.staff-contact code {
  background: transparent;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

/* Contact callout: light, semantic <aside> with an accent border.
   Border-left adds visual weight; the heading above still carries
   meaning without relying on color. */
.contact-callout {
  margin: 8px 0 24px;
  padding: 12px 16px;
  background: #f6f8fa;
  border-left: 3px solid #0969da;   /* >=3:1 against background : passes non-text AA */
  border-radius: 0 6px 6px 0;
}
.contact-callout p {
  margin: 0 0 6px;
}
.contact-callout p:last-child {
  margin-bottom: 0;
}
.contact-callout code {
  background: transparent;
  padding: 0;
  white-space: nowrap;
}