.accordion {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 680px;
  margin: 0 auto;
  padding: 1rem 0;
}

.accordion * {
  z-index: 10;
}

/* Each course is one item — a wide rounded rectangle */
.accordion-item {
  background: var(--color-background-primary);
  border: 0.5px solid var(--color-border-secondary);
  border-radius: 12px;
  overflow: hidden; /* keeps content inside the rounded corners when open */
}

/* The clickable header row — course tag + name + chevron */
.accordion-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 1rem 1.25rem;
  cursor: pointer;
  user-select: none; /* prevents text highlighting on rapid clicks */
}

.accordion-header:hover {
  background: var(--color-background-secondary);
}

/* The course code pill on the left */
.accordion-tag {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  background: #0F1923;
  color: #fff;
  padding: 3px 10px;
  border-radius: 4px;
  flex-shrink: 0; /* never gets squished */
  letter-spacing: 0.04em;
}

/* Course name — grows to fill available space */
.accordion-name {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-primary);
  flex: 1;
}

/* The chevron arrow on the right */
.accordion-chevron {
  font-size: 18px;
  color: var(--color-text-tertiary);
  transition: transform 0.3s ease; /* smooth rotation when opening */
  flex-shrink: 0;
}

/* When the item has the "open" class, rotate the chevron */
.accordion-item.open .accordion-chevron {
  transform: rotate(180deg);
}

/* The expandable content area — hidden by default */
.accordion-body {
  /* Height starts at 0 so it's invisible */
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease; /* smooth expand/collapse */
}

/* When open, allow it to grow to show content */
.accordion-item.open .accordion-body {
  max-height: 400px; /* any value bigger than the content will ever be */
}

/* Inner padding for the content — separated from the body
   so the padding doesn't show when collapsed */
.accordion-content {
  padding: 0 1.25rem 1.25rem;
  border-top: 0.5px solid var(--color-border-tertiary);
}

.accordion-desc {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0.85rem 0 1rem;
}

/* Topic pills */
.topic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 1rem;
}

.topic {
  font-size: 12px;
  background: var(--color-background-secondary);
  border: 0.5px solid var(--color-border-secondary);
  color: var(--color-text-secondary);
  padding: 3px 10px;
  border-radius: 20px;
}

/* Small session info row at the bottom */
.accordion-meta {
  display: flex;
  gap: 1.25rem;
  font-size: 12.5px;
  color: var(--color-text-tertiary);
}