/* Detail pages reuse the site's existing typography, panels and blue palette. */
.breadcrumbs { padding-block: 24px 0; font-size: 12px; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.breadcrumbs li + li::before { content: '/'; margin-right: 8px; }
.course-detail { padding-block: 32px 60px; }
.course-detail h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.2; overflow-wrap: anywhere; }
.course-details { display: grid; grid-template-columns: minmax(120px, 1fr) 3fr; gap: 0 24px; }
.course-details dt, .course-details dd { margin: 0; padding-block: 12px; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.course-details dt { font-weight: 600; }
.course-details dd a { overflow-wrap: anywhere; }
.course-title a { color: inherit; text-decoration: none; }
.course-title a:hover { text-decoration: underline; }
.directory-topics { margin-block: 20px; }
.topic-directory { padding-bottom: 50px; }
@media (max-width: 759px) {
  .course-details { grid-template-columns: 1fr; }
  .course-details dt { border: 0; padding-bottom: 0; }
  .course-details dd { padding-top: 4px; }
}