/* A quiet, readable catalogue using the same typography as the homepage. */
.course-hero { padding-block: 44px 46px; }
.course-hero h1 { font-size: clamp(32px,3.6vw,44px); }
.course-hero h1>span { color: var(--blue); }
.course-hero-description { margin-top: 26px; color: var(--muted); font-size: var(--text-body); }
.course-route .route-inner { display: flex; gap: 30px; flex-wrap: wrap; padding-block: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); align-items: center; }
.route-inner>p { color: var(--muted); font-size: var(--text-label); margin-right: auto; }
.route-inner>a { min-height: 44px; display: flex; align-items: center; gap: 22px; font-size: var(--text-label); }
.route-inner>a span { color: var(--blue); }
.route-inner strong { font-weight: 600; }
.course-catalog { padding-block: 30px 65px; }
.course-card { padding-block: 40px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,2.25fr); gap: 32px; align-items: start; }
.course-cover { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.course-content { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); column-gap: 35px; }
.course-labels { display: flex; flex-wrap: wrap; gap: 14px; font-size: var(--text-small); color: var(--muted); grid-column: 1; margin-bottom: 17px; }
.course-labels>span:first-child { color: var(--blue); }
.course-content>h3 { font-size: 25px; grid-column: 1; }
.official-course-title { margin-top: 16px; grid-column: 1; font-size: var(--text-body); color: var(--muted); }
.course-summary { grid-column: 1; font-size: var(--text-body); color: var(--muted); margin-top: 16px; }
.course-detail-grid { grid-column: 2; grid-row: 1/5; display: grid; grid-template-columns: 1fr; gap: 24px; }
.course-detail-grid h4 { font-size: var(--text-label); margin-bottom: 9px; font-weight: 600; }
.course-detail-grid p,.course-detail-grid li { font-size: var(--text-body); color: var(--muted); }
.course-detail-grid ul { padding-left: 18px; margin: 0; }
.prerequisite { grid-column: 2; font-size: var(--text-body); color: var(--muted); margin-top: 24px; }
.prerequisite span { font-weight: 600; color: var(--ink); display: block; margin-bottom: 6px; }
.course-button { grid-column: 1; grid-row: 5/7; align-self: start; justify-self: start; color: #fff; background: var(--blue); margin-top: 26px; font-size: var(--text-label); }
.course-button:hover { background: #1d4563; color: #fff; }
.price-note { color: var(--muted); font-size: var(--text-label); margin-top: 27px; max-width: 850px; }
.price-note>span { display: none; }
.price-note small { display: block; font-size: var(--text-small); margin-top: 9px; }
.learning-path { background: var(--soft); }
.path-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 65px; align-items: start; }
.path-heading h2 { font-size: 29px; }
.path-heading>p { color: var(--muted); font-size: var(--text-body); }
.path-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 50px; padding: 0; margin: 40px 0 0; list-style: none; }
.path-steps h3 { font-size: 21px; }
.path-steps p { color: var(--muted); font-size: var(--text-body); margin-top: 15px; }
.path-steps a { min-height: 44px; display: inline-flex; align-items: center; gap: 24px; color: var(--blue); font-size: var(--text-label); margin-top: 18px; }
.roadmap-resource { padding-block: 65px; }
.roadmap-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 65px; align-items: center; }
.roadmap-resource h2 { font-size: 30px; }
.roadmap-description { color: var(--muted); font-size: var(--text-body); margin-top: 18px; }
.resource-type { font-size: var(--text-small); color: var(--muted); margin-bottom: 15px; }
.resource-note { font-size: var(--text-note); color: var(--muted); margin-top: 13px; }
.learning-support { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 50px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 44px; }
.learning-support h2 { font-size: 24px; }
.learning-support p { font-size: var(--text-body); color: var(--muted); margin-top: 16px; }
.learning-support .button { font-size: var(--text-label); }
.course-faq { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 80px; }
.course-faq h2 { font-size: 31px; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; gap: 25px; align-items: start; justify-content: space-between; list-style: none; cursor: pointer; font-size: var(--text-body); font-weight: 600; padding-block: 23px; }
.faq-list details>p { padding: 0 25px 26px 0; color: var(--muted); font-size: var(--text-body); }
.course-instructor { background: var(--soft); padding-block: 55px; }
.instructor-inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 65px; }
.course-instructor h2 { font-size: 29px; }
.instructor-bio { color: var(--muted); font-size: var(--text-body); margin-top: 14px; }
.course-instructor .text-link { margin-top: 12px; }
@media (max-width: 960px) {
  .course-card { grid-template-columns: 180px minmax(0,1fr); gap: 28px; }
  .course-content { display: block; }
  .course-detail-grid { margin-top: 24px; }
  .course-content { column-gap: 45px; }
  .route-inner { gap: 22px!important; }
  .route-inner>p { width: 100%; }
  .course-content>h3 { font-size: 27px; }
  .learning-support { grid-template-columns: 1fr; gap: 25px; }
  .learning-support .button { justify-self: start; }
  .path-heading,.roadmap-grid,.instructor-inner,.course-faq { gap: 40px; }
  .path-steps { gap: 30px; }
}
@media (max-width: 760px) {
  .course-hero { padding-block: 45px 43px; }
  .course-hero h1 { font-size: 34px; }
  .course-hero-description { font-size: var(--text-body); }
  .course-route .route-inner { gap: 18px!important; padding-block: 22px; }
  .route-inner>p { font-size: var(--text-small); }
  .route-inner>a { gap: 13px; font-size: var(--text-small); }
  .course-catalog { padding-block: 4px 45px; }
  .course-card { display: block; padding-block: 32px; }
  .course-cover { width: min(100%,320px); margin-bottom: 22px; }
  .course-content { display: block; }
  .course-content>h3 { font-size: clamp(25px,6.5vw,29px); }
  .course-labels { font-size: var(--text-small); gap: 15px; }
  .course-summary { font-size: var(--text-body); }
  .official-course-title { font-size: var(--text-body); }
  .course-detail-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 26px; }
  .course-detail-grid p,.course-detail-grid li { font-size: var(--text-label); }
  .course-detail-grid h4 { font-size: var(--text-label); }
  .prerequisite { margin-top: 22px; font-size: var(--text-body); }
  .course-button { display: flex; margin-top: 23px; }
  .path-heading,.roadmap-grid,.instructor-inner,.course-faq { grid-template-columns: 1fr; gap: 28px; }
  .path-heading h2,.roadmap-resource h2,.course-faq h2,.course-instructor h2 { font-size: 27px; }
  .path-steps { grid-template-columns: 1fr; gap: 30px; margin-top: 32px; }
  .path-steps p { margin-top: 9px; }
  .path-steps a { margin-top: 12px; }
  .roadmap-resource { padding-block: 50px; }
  .learning-support { padding-block: 36px; }
  .learning-support h2 { font-size: 23px; }
  .learning-support p { font-size: var(--text-body); }
  .faq-list summary { font-size: var(--text-label); }
  .faq-list details>p { font-size: var(--text-label); }
  .course-instructor { padding-block: 45px; }
}
@media (max-width: 380px) {
  .course-hero h1 { font-size: 30px; }
  .course-route .route-inner { display: grid; }
  .route-inner>a { justify-content: space-between; }
  .course-detail-grid { grid-template-columns: 1fr; gap: 19px; }
}
@media print {
  .course-route { display: none; }
  .course-card { break-inside: avoid; }
  .course-content { display: block; }
}