/* Courses in the Edukors Graph standard: the listing, and the framed player.
   The look follows the course listing it replaces, so the move is not felt as
   a redesign. Everything inside the frame is styled by the player itself. */

.courses-root {
  width: 100%;
  height: 100%;
}

.courses {
  width: 100%;
  height: 100%;
  color: var(--theme-text-primary);
}

/* --- the listing ------------------------------------------------------- */

.courses-section {
  margin-bottom: var(--theme-space-6);
}

.courses-section-title {
  margin: 0 0 var(--theme-space-4);
  padding-bottom: var(--theme-space-3);
  border-bottom: 2px solid var(--theme-color-primary);
  font-size: var(--theme-font-lg);
  font-weight: 700;
  color: var(--theme-text-primary);
}

.courses-section-description {
  margin: calc(-1 * var(--theme-space-2)) 0 var(--theme-space-4);
  font-size: var(--theme-font-sm);
  line-height: 1.5;
  color: var(--theme-text-secondary);
}

.courses-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--theme-space-4);
}

.courses-course-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--theme-space-2);
  padding: var(--theme-space-5);
  border: 1px solid var(--theme-border-subtle);
  border-radius: var(--theme-radius-lg);
  background: var(--theme-surface-raised);
  color: var(--theme-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.courses-course-card:hover {
  transform: translateY(-2px);
  border-color: var(--theme-color-primary);
  box-shadow: var(--theme-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.12));
}

.courses-course-icon {
  display: inline-flex;
  color: var(--theme-color-primary);
}

.courses-course-title {
  font-size: var(--theme-font-md);
  font-weight: var(--theme-font-weight-semibold);
  line-height: 1.35;
}

.courses-course-description {
  font-size: var(--theme-font-sm);
  line-height: 1.5;
  color: var(--theme-text-secondary);
}

.courses-course-badge {
  padding: var(--theme-space-1) var(--theme-space-2);
  border-radius: var(--theme-radius-full);
  background: var(--theme-bg-tertiary);
  color: var(--theme-text-secondary);
  font-size: var(--theme-font-xs);
  font-weight: var(--theme-font-weight-semibold);
}

.courses-empty {
  margin: 0;
  color: var(--theme-text-secondary);
  font-size: var(--theme-font-sm);
}

/* --- the visitor ------------------------------------------------------- */

.courses-guest {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--theme-space-4);
  height: 100%;
  min-height: 320px;
  text-align: center;
}

.courses-guest-icon {
  display: inline-flex;
  color: var(--theme-text-tertiary);
}

.courses-guest-message {
  max-width: 34rem;
  margin: 0;
  color: var(--theme-text-secondary);
  font-size: var(--theme-font-md);
  line-height: 1.6;
}

.courses-guest-action {
  display: inline-flex;
  align-items: center;
  gap: var(--theme-space-2);
  padding: var(--theme-space-3) var(--theme-space-5);
  border: 0;
  border-radius: var(--theme-radius-md);
  background: var(--theme-color-primary);
  color: var(--theme-text-inverse);
  font: inherit;
  font-weight: var(--theme-font-weight-semibold);
  cursor: pointer;
}

.courses-guest-action:hover {
  filter: brightness(1.08);
}

/* --- the player -------------------------------------------------------- */

.courses--player {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--theme-space-4);
}

.courses-player-header {
  display: flex;
  align-items: center;
  gap: var(--theme-space-3);
}

.courses-back {
  display: inline-flex;
  align-items: center;
  gap: var(--theme-space-2);
  padding: var(--theme-space-2) var(--theme-space-3);
  border: 1px solid var(--theme-border-subtle);
  border-radius: var(--theme-radius-md);
  background: var(--theme-surface-raised);
  color: var(--theme-text-primary);
  font: inherit;
  font-size: var(--theme-font-sm);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.courses-back:hover {
  border-color: var(--theme-color-primary);
  color: var(--theme-color-primary);
}

.courses-player-heading {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: var(--theme-font-lg);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The player draws its own page, background included, so the frame only has to
   give it the room and stay out of the way. The rounded border is the app's,
   not the player's: it keeps a full-bleed page from looking pasted on. */
.courses-player-frame {
  width: 100%;
  height: 100%;
  min-height: 480px;
  border: 1px solid var(--theme-border-subtle);
  border-radius: var(--theme-radius-lg);
  background: var(--theme-bg-secondary);
}