/* Course landing pages (header/course-page.php). Requires sc-tokens.css and sc-components.css. */

.sc-course-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sc-space-10); }

/* ---------- Hero ---------- */
.sc-course-hero {
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  color: var(--sc-navy-200);
  background:
    radial-gradient(40rem 20rem at 100% 0%, rgba(247, 116, 98, 0.16), transparent 60%),
    radial-gradient(40rem 24rem at 0% 100%, rgba(36, 84, 137, 0.4), transparent 60%),
    var(--sc-navy-900);
}
.sc-course-hero__main { grid-column: 1; }
.sc-course-hero .sc-h1 { color: var(--sc-white); font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }
.sc-course-hero .sc-lead { color: var(--sc-navy-200); }
.sc-course-hero .sc-breadcrumb, .sc-course-hero .sc-breadcrumb a { color: var(--sc-navy-200); }
.sc-course-hero .sc-breadcrumb li + li::before { color: var(--sc-navy-400); }
.sc-course-hero .sc-badge--dark { background: rgba(255, 255, 255, 0.12); }
.sc-course-hero__facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-space-2) var(--sc-space-6); font-size: var(--sc-text-sm); }
.sc-course-hero__facts .fa { margin-right: 4px; color: var(--sc-navy-300); }
.sc-course-hero .sc-rating { color: var(--sc-white); }
.sc-course-hero .sc-rating strong { color: var(--sc-star); }
.sc-course-hero .sc-rating__count { color: var(--sc-navy-200); }
.sc-course-hero__by { display: flex; align-items: center; gap: var(--sc-space-3); font-size: var(--sc-text-sm); }
.sc-course-hero__by a { color: var(--sc-coral-300); font-weight: var(--sc-weight-semibold); text-decoration: none; }
.sc-course-hero__by a:hover { text-decoration: underline; }

/* ---------- Body: enrol card floats up beside the hero ---------- */
.sc-course-body { padding-bottom: var(--sc-space-section); }
.sc-enrol { grid-column: 2; grid-row: 1 / span 2; margin-top: -320px; }
.sc-enrol__card {
  position: sticky;
  top: calc(var(--sc-header-height) + 52px);
  overflow: hidden;
  background: var(--sc-white);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-xl);
  box-shadow: var(--sc-shadow-lg);
}
.sc-enrol__media { position: relative; display: block; width: 100%; padding: 0; aspect-ratio: 16 / 9; background: var(--sc-navy-800); border: 0; cursor: pointer; }
.sc-enrol__media:disabled { cursor: default; }
.sc-enrol__media img { width: 100%; height: 100%; object-fit: cover; }
.sc-enrol__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(10, 31, 56, 0.65)); }
.sc-enrol__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding-left: 4px;
  font-size: 22px;
  color: var(--sc-navy-900);
  background: var(--sc-white);
  border-radius: 50%;
  box-shadow: var(--sc-shadow-lg);
  transform: translate(-50%, -50%);
  transition: transform var(--sc-duration) var(--sc-ease);
}
.sc-enrol__media:hover .sc-enrol__play { transform: translate(-50%, -50%) scale(1.08); }
.sc-enrol__preview { position: absolute; bottom: var(--sc-space-3); left: 0; right: 0; z-index: 1; font-weight: var(--sc-weight-semibold); color: var(--sc-white); text-align: center; }
.sc-enrol__body { display: flex; flex-direction: column; gap: var(--sc-space-3); padding: var(--sc-space-6); }
.sc-enrol__price { display: flex; align-items: center; gap: var(--sc-space-3); }
.sc-enrol__price strong { font-family: var(--sc-font-heading); font-size: var(--sc-text-3xl); color: var(--sc-heading); }
.sc-enrol__price s { color: var(--sc-text-subtle); }
.addtowishlistbtn.is-saved { color: var(--sc-coral-700); border-color: var(--sc-coral-200); background: var(--sc-coral-50); }
.sc-enrol__features { padding-top: var(--sc-space-3); border-top: 1px solid var(--sc-border); }
.sc-enrol__features p { margin: 0 0 var(--sc-space-2); font-family: var(--sc-font-heading); font-weight: var(--sc-weight-semibold); color: var(--sc-heading); }
.sc-enrol__features ul { display: flex; flex-direction: column; gap: var(--sc-space-2); margin: 0; padding: 0; list-style: none; font-size: var(--sc-text-sm); color: var(--sc-text-muted); }
.sc-enrol__features .fa { width: 18px; color: var(--sc-success); }
.sc-enrol__cert { display: flex; align-items: center; gap: var(--sc-space-3); padding: var(--sc-space-3); font-size: var(--sc-text-xs); color: var(--sc-text-muted); background: var(--sc-gray-50); border-radius: var(--sc-radius-md); }
.sc-enrol__cert img { flex: none; width: 72px; border-radius: var(--sc-radius-sm); }
.sc-enrol__cert strong { display: block; font-size: var(--sc-text-sm); color: var(--sc-heading); }

/* ---------- Main column ---------- */
.sc-course-main { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: var(--sc-space-10); padding-top: var(--sc-space-10); min-width: 0; }
.sc-course-block .sc-h3 { margin-bottom: var(--sc-space-4); }
.sc-course-block__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sc-space-2); margin-bottom: var(--sc-space-4); }
.sc-course-block__head .sc-h3 { margin: 0; }

.sc-course-learn { padding: var(--sc-space-6); background: var(--sc-white); border: 1px solid var(--sc-border); border-radius: var(--sc-radius-lg); }
.sc-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-space-3) var(--sc-space-6); margin: 0; padding: 0; list-style: none; }
.sc-checklist li { position: relative; padding-left: 28px; color: var(--sc-text); }
.sc-checklist li::before { content: "\2713"; position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 20px; height: 20px; font-size: 12px; font-weight: 700; color: var(--sc-success); background: var(--sc-success-bg); border-radius: 50%; }

.sc-bullets { display: flex; flex-direction: column; gap: var(--sc-space-2); margin: 0; padding-left: var(--sc-space-5); color: var(--sc-text); }
.sc-bullets li::marker { color: var(--sc-accent); }
.sc-prose { color: var(--sc-text-muted); line-height: 1.75; }

.sc-lessons { display: flex; flex-direction: column; padding-top: var(--sc-space-1); }
.sc-lessons .sc-lesson { padding: var(--sc-space-3) 0; border-top: 1px solid var(--sc-gray-100); }
.sc-lessons .sc-lesson:first-child { border-top: 0; }
.sc-lesson--extra { display: none !important; }
.sc-lessons.is-expanded .sc-lesson--extra { display: flex !important; }
.sc-lessons__more { align-self: flex-start; margin-top: var(--sc-space-3); }
.sc-lesson__no { flex: none; width: 24px; font-size: var(--sc-text-xs); color: var(--sc-text-subtle); }
.sc-lesson .fa { color: var(--sc-navy-400); }

.sc-course-benefits .sc-chip { cursor: default; }
.sc-course-benefits .sc-chip .fa { color: var(--sc-success); }
.sc-course-hiring { display: block; width: 100%; max-width: 760px; height: auto; border-radius: var(--sc-radius-lg); }

.sc-instructor { display: flex; align-items: center; gap: var(--sc-space-4); }
.sc-instructor strong { display: block; font-family: var(--sc-font-heading); font-size: var(--sc-text-xl); color: var(--sc-heading); }
.sc-instructor span { color: var(--sc-text-muted); }

#scVideoModal video { display: block; width: 100%; max-height: 80vh; background: #000; }
#scVideoModal .sc-modal__close { z-index: 2; background: rgba(255, 255, 255, 0.9); }
.sc-modal .sc-empty__icon { align-self: center; }
.sc-modal .sc-h3 { text-align: center; }
.sc-modal .sc-muted { text-align: center; }

/* ---------- Mobile enrol bar ---------- */
.sc-enrol-bar { display: none; }

@media (max-width: 991.98px) {
  .sc-course-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sc-enrol { grid-column: 1; grid-row: auto; margin-top: calc(-1 * var(--sc-space-6)); }
  .sc-enrol__card { position: static; }
  .sc-course-main { grid-row: auto; }
  .sc-enrol-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--sc-z-header);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sc-space-4);
    padding: var(--sc-space-3) var(--sc-gutter);
    background: var(--sc-white);
    border-top: 1px solid var(--sc-border);
    box-shadow: 0 -6px 20px rgba(10, 31, 56, 0.08);
    transform: translateY(100%);
    transition: transform var(--sc-duration) var(--sc-ease);
  }
  .sc-enrol-bar.is-visible { transform: none; }
  .sc-enrol-bar strong { font-family: var(--sc-font-heading); font-size: var(--sc-text-xl); color: var(--sc-heading); }
  .sc-enrol-bar s { color: var(--sc-text-subtle); }
}
@media (max-width: 575.98px) {
  .sc-checklist { grid-template-columns: minmax(0, 1fr); }
}