/* YKI uses Booking's responsive frame and heading without a scaled stage. */
html body.course-page main#main-content.responsive-course {
  --course-frame: min(1600px, calc(100% - clamp(48px, 12vw, 320px)));
  --course-gap: clamp(28px, 3.3vw, 64px);
  --course-title: clamp(40px, 4.34vw, 84px);
  --course-type-scale: 1;
  --course-space: clamp(48px, 5vw, 80px);
  width: var(--course-frame); max-width: none; height: auto;
  min-height: calc(100svh - var(--header-height));
  display: grid; grid-template-rows: max-content max-content;
  row-gap: 40px; margin-inline: auto;
  padding: calc(var(--header-height) + 32px) 0 64px;
  overflow: visible;

  & .workspace-heading { margin: 0; }
  & .workspace-heading h1 {
    font-size: var(--course-title); line-height: 1.02;
    font-weight: 400; letter-spacing: -.045em; text-wrap: balance;
  }
  & .workspace-heading p { font: 300 16px/1.55 var(--sans); margin-top: 18px; }
  & #course-view { width: 100%; min-width: 0; padding-top: 12px; }
  & #course-view :is(p, li, dd) { font: 300 16px/1.55 var(--sans); }
  & #course-view dt { font: 500 16px/1.35 var(--sans); }
  & #course-view h2 { font-size: clamp(29px, 3.2vw, 48px); line-height: 1.12; }
  & #course-view .course-skill-grid h3 { font-size: clamp(23px, 1.8vw, 28px); }
  & #course-view .course-review-date { font-size: 16px; font-weight: 500; }
  & :is(.course-intro, .course-section-header, .course-update, .course-enrol) {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--course-gap);
  }
  & :is(.course-story, .course-summary, .course-section-header > *, .course-enrol > *) { min-width: 0; }
  & .course-skill-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  & .course-section { margin-top: var(--course-space); padding-top: 40px; }
  & .course-section-header { margin-bottom: 32px; }
  & .course-update { padding: 32px; }
  & #course-view .course-price strong { font: 500 17.6px/1.3 var(--sans); letter-spacing: -.02em; }
  & #course-view .course-price span { font: 300 16px/1.55 var(--sans); }
  & #course-view .course-primary { font: 300 16px/1.35 var(--sans); }
}

/* Booking centres its first menu in the remaining desktop viewport. Mirror
   that extra breathing room while keeping the rest of this reading page in flow.
   The reference includes the four equal offer rows and their pricing note. */
@media (min-width: 1201px) {
  html body.course-page main#main-content.responsive-course {
    --course-menu-reference-height: 487.46px;
    row-gap: max(40px, calc((100svh - 2 * var(--header-height) - var(--course-title) * 1.02 - 42.8px - var(--course-menu-reference-height) - 162px) / 2 + 40px));
  }
}
@media (min-width: 1201px) and (max-width: 1700px) {
  html body.course-page main#main-content.responsive-course {
    --course-menu-reference-height: 564.92px;
  }
}

@media (max-width: 1000px) {
  html body.course-page main#main-content.responsive-course {
    --course-frame: calc(100% - 64px);
    --course-title: clamp(40px, 5.5vw, 55px);
    --course-gap: 32px;
    & :is(.course-intro, .course-section-header, .course-update, .course-enrol) {
      grid-template-columns: minmax(0, 1fr);
    }
    & .course-skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}

@media (max-width: 767px), (max-width: 1000px) and (max-height: 600px) and (pointer: coarse) {
  html body.course-page main#main-content.responsive-course {
    --course-frame: calc(100% - 2 * var(--phone-gutter, 24px));
    --course-title: clamp(32px, 9vw, 38px);
    --course-gap: 24px;
    --course-space: 48px;
    min-height: calc(100svh - 90px); row-gap: 28px;
    padding-top: calc(var(--header-height) + 28px); padding-bottom: 48px;
    & #course-view h2 { font-size: 29px; }
    & .course-skill-grid { gap: 26px 20px; }
    & .course-section { padding-top: 32px; }
    & .course-update { padding: 24px; }
    & #course-view .course-enrol-action { padding: 24px; }
  }
  /* Match phone About, FAQ and Policies reading text. */
  html:not(.tablet-portrait) body.course-page main#main-content.responsive-course #course-view :is(p, li, dd, .course-review-date, .course-price span) {
    font-size: 12.5px;
  }
}