/* css styles */

.headshot {
  width: 100%;
  max-width: 220px;
  border-radius: 8px;
}

.timeline {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

.timeline-item {
  display: grid;
  grid-template-columns: 10rem 2.75rem 1fr;
  align-items: start;
  gap: 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}

.timeline-logo {
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  padding: 3px;
}

.timeline-date {
  font-variant-numeric: tabular-nums;
  color: var(--bs-secondary-color, #6c757d);
  white-space: nowrap;
}

.timeline-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.timeline-role {
  font-weight: 500;
}

.timeline-more {
  font-size: 0.85rem;
}

.timeline-subroles {
  list-style: none;
  margin: 0.15rem 0 0;
  padding: 0 0 0 0.9rem;
  border-left: 2px solid rgba(128, 128, 128, 0.25);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.timeline-subroles li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1rem 0.6rem;
}

.subrole-title {
  font-weight: 500;
}

.subrole-date {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--bs-secondary-color, #6c757d);
}

@media (max-width: 575px) {
  .timeline-item {
    grid-template-columns: 2.75rem 1fr;
    grid-template-areas:
      "logo date"
      "logo body";
    gap: 0.15rem 0.7rem;
  }

  .timeline-logo {
    grid-area: logo;
    align-self: center;
  }

  .timeline-date {
    grid-area: date;
  }

  .timeline-body {
    grid-area: body;
  }
}

/* Grade tables grouped by year (experience/bachelor-aut.qmd). Rows are
   tinted by position: 8 courses in 2016, 6 in 2017, 8 in 2018, 4 in 2019,
   then the average row. Update the ranges if courses are added or removed. */
.grade-years .table > tbody > tr > td {
  background-color: var(--year-bg, transparent);
}

.grade-years tbody tr:nth-child(-n+8) { --year-bg: rgba(13, 110, 253, 0.08); }
.grade-years tbody tr:nth-child(n+9):nth-child(-n+14) { --year-bg: rgba(25, 135, 84, 0.10); }
.grade-years tbody tr:nth-child(n+15):nth-child(-n+22) { --year-bg: rgba(255, 193, 7, 0.14); }
.grade-years tbody tr:nth-child(n+23):nth-child(-n+26) { --year-bg: rgba(111, 66, 193, 0.09); }

.grade-years tbody tr:nth-child(1) > td,
.grade-years tbody tr:nth-child(9) > td,
.grade-years tbody tr:nth-child(15) > td,
.grade-years tbody tr:nth-child(23) > td {
  border-top: 2px solid rgba(128, 128, 128, 0.35);
}

.grade-years tbody tr:nth-child(27) > td {
  border-top: 2px solid rgba(128, 128, 128, 0.6);
}