/* MTC LMS templates: catalogue, course page, lesson page. */

.mtc-lms .site-content,
.mtc-lms #content { background: var(--mtc-bg); }

.mtc-shell { max-width: var(--mtc-maxw); margin: 0 auto; padding: 0 20px; }
/* Astra lays .ast-container out as a flex row for its sidebar layouts, which
   would sit our hero band and content side by side. LMS screens are block. */
.mtc-lms .ast-container { display: block; max-width: 100%; padding: 0; }
.mtc-lms .site-content > .ast-container { width: 100%; }
.mtc-lms .ast-separate-container .site-main,
.mtc-lms #primary { margin: 0; padding: 0; }

/* ---------- hero ---------- */
.mtc-hero-band {
  background: linear-gradient(160deg, var(--mtc-plum) 0%, var(--mtc-purple-600) 62%, var(--mtc-purple) 100%);
  color: #fff;
  padding: 56px 0 60px;
}
.mtc-hero-band a { color: #fff; }
.mtc-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .82;
  margin: 0 0 12px;
}
.mtc-hero-band h1 {
  color: #fff;
  margin: 0 0 14px;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.12;
  max-width: 20ch;
}
.mtc-hero-lead { margin: 0; max-width: 62ch; opacity: .92; font-size: 17px; }
.mtc-hero-band .mtc-underline { display: block; width: 74px; height: 4px; background: var(--mtc-gold); border-radius: 2px; margin: 0 0 22px; }

.mtc-meta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; padding: 0; list-style: none; }
.mtc-meta-row li {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13.5px;
  font-weight: 600;
}

/* ---------- catalogue ---------- */
.mtc-catalogue { padding: 40px 0 70px; }
.mtc-filters {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  background: var(--mtc-surface);
  border: 1px solid var(--mtc-line);
  border-radius: var(--mtc-radius);
  padding: 18px;
  margin-bottom: 30px;
  box-shadow: var(--mtc-shadow);
}
.mtc-field { display: flex; flex-direction: column; gap: 6px; min-width: 165px; flex: 1 1 165px; }
.mtc-field label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mtc-muted); }
.mtc-field select, .mtc-field input {
  border: 1px solid var(--mtc-line);
  border-radius: var(--mtc-radius-sm);
  padding: 9px 11px;
  font-size: 14.5px;
  background: #fff;
  color: var(--mtc-ink);
  width: 100%;
}
.mtc-field select:focus, .mtc-field input:focus { outline: 2px solid var(--mtc-purple); outline-offset: 1px; }
.mtc-result-count { margin: 0 0 18px; color: var(--mtc-muted); font-size: 14.5px; }
/* ---------- course cards ---------- */
.mtc-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(292px, 1fr)); gap: var(--mtc-gap); }
.mtc-card {
  background: var(--mtc-surface);
  border: 1px solid var(--mtc-line);
  border-radius: var(--mtc-radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--mtc-shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mtc-card:hover { transform: translateY(-3px); box-shadow: var(--mtc-shadow-lg); border-color: var(--mtc-purple-line); }
.mtc-card-media { position: relative; aspect-ratio: 16 / 9; background: var(--mtc-purple-soft); overflow: hidden; }
.mtc-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mtc-card-media .mtc-placeholder {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--mtc-purple); font-weight: 700; letter-spacing: .12em; font-size: 13px;
}
.mtc-card-level {
  position: absolute; left: 12px; top: 12px;
  background: rgba(42,7,67,.9); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
}
.mtc-card-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.mtc-card-cat { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mtc-purple); }
.mtc-card-body h3 { margin: 0; font-size: 19px; line-height: 1.3; }
.mtc-card-body h3 a { color: var(--mtc-ink); text-decoration: none; }
.mtc-card-body h3 a:hover { color: var(--mtc-purple); }
.mtc-card-excerpt { margin: 0; color: var(--mtc-muted); font-size: 14.5px; line-height: 1.55; }
.mtc-card-facts {
  margin: auto 0 0; padding: 14px 0 0; list-style: none;
  border-top: 1px solid var(--mtc-line);
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: 13px; color: var(--mtc-muted);
}
.mtc-card-facts strong { color: var(--mtc-ink); font-weight: 600; }

/* ---------- buttons ---------- */
.mtc-button, .mtc-lms a.mtc-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--mtc-purple); color: #fff;
  border: 1px solid var(--mtc-purple);
  border-radius: var(--mtc-radius-sm);
  padding: 12px 20px;
  font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer;
  transition: background .16s ease;
}
.mtc-button:hover, .mtc-lms a.mtc-button:hover { background: var(--mtc-purple-600); color: #fff; }
.mtc-button--block { width: 100%; }
.mtc-button--ghost, .mtc-lms a.mtc-button--ghost {
  background: transparent; color: var(--mtc-purple); border-color: var(--mtc-purple-line);
}
.mtc-button--ghost:hover, .mtc-lms a.mtc-button--ghost:hover { background: var(--mtc-purple-soft); color: var(--mtc-purple-600); }
.mtc-button:focus-visible { outline: 3px solid var(--mtc-gold); outline-offset: 2px; }

.mtc-empty {
  background: var(--mtc-surface); border: 1px dashed var(--mtc-purple-line);
  border-radius: var(--mtc-radius); padding: 44px; text-align: center; color: var(--mtc-muted);
}
/* ---------- single course layout ---------- */
.mtc-course-layout {
  display: grid; grid-template-columns: minmax(0,1fr) 348px;
  gap: 40px; align-items: start; padding: 40px 0 72px;
}

/* tabs */
.mtc-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--mtc-line); margin-bottom: 28px; overflow-x: auto; }
.mtc-tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  padding: 13px 18px; font-size: 15px; font-weight: 700; color: var(--mtc-muted);
  border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap;
}
.mtc-tab:hover { color: var(--mtc-purple); }
.mtc-tab[aria-selected="true"] { color: var(--mtc-plum); border-bottom-color: var(--mtc-purple); }
.mtc-tab:focus-visible { outline: 2px solid var(--mtc-purple); outline-offset: -3px; }
.mtc-panel[hidden] { display: none; }

.mtc-prose { color: var(--mtc-ink); font-size: 16.5px; line-height: 1.72; }
.mtc-prose h3 { margin: 30px 0 12px; font-size: 20px; color: var(--mtc-plum); }
.mtc-prose p { margin: 0 0 16px; }
.mtc-prose ul, .mtc-prose ol { margin: 0 0 18px; padding-left: 22px; }
.mtc-prose li { margin-bottom: 7px; }
.mtc-list-lead { margin-bottom: 8px !important; }

.mtc-flow {
  background: var(--mtc-purple-soft); border-left: 3px solid var(--mtc-purple);
  padding: 14px 18px; border-radius: 0 var(--mtc-radius-sm) var(--mtc-radius-sm) 0;
  font-weight: 600; color: var(--mtc-plum); overflow-x: auto;
}
.mtc-callout {
  background: var(--mtc-gold-soft); border: 1px solid #F0DDBC;
  border-radius: var(--mtc-radius-sm); padding: 16px 18px; margin: 0 0 18px;
}
.mtc-check {
  background: var(--mtc-surface); border: 1px solid var(--mtc-purple-line);
  border-radius: var(--mtc-radius-sm); padding: 16px 18px; margin: 0 0 18px;
}
.mtc-callout-title {
  margin: 0 0 6px !important; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mtc-gold);
}
.mtc-check .mtc-callout-title { color: var(--mtc-purple); }
.mtc-choices { list-style: upper-alpha; margin: 10px 0 12px !important; }
.mtc-check details summary { cursor: pointer; font-weight: 700; color: var(--mtc-purple); }
.mtc-check details p { margin: 8px 0 0; }
/* ---------- curriculum accordion ---------- */
.mtc-module {
  background: var(--mtc-surface); border: 1px solid var(--mtc-line);
  border-radius: var(--mtc-radius); margin-bottom: 14px; overflow: hidden;
}
.mtc-module-head {
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; background: none; border: 0; cursor: pointer; text-align: left;
}
.mtc-module-head:hover { background: var(--mtc-purple-soft); }
.mtc-module-head:focus-visible { outline: 2px solid var(--mtc-purple); outline-offset: -2px; }
.mtc-module-num {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px;
  background: var(--mtc-plum); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mtc-module-title { flex: 1; min-width: 0; }
.mtc-module-title strong { display: block; font-size: 16px; color: var(--mtc-ink); line-height: 1.35; }
.mtc-module-title span { display: block; font-size: 13px; color: var(--mtc-muted); margin-top: 3px; }
.mtc-module-count { flex: 0 0 auto; font-size: 13px; color: var(--mtc-muted); font-weight: 600; }
.mtc-chevron { flex: 0 0 auto; transition: transform .2s ease; color: var(--mtc-muted); }
.mtc-module-head[aria-expanded="true"] .mtc-chevron { transform: rotate(180deg); }
.mtc-module-body { border-top: 1px solid var(--mtc-line); }
.mtc-module-body[hidden] { display: none; }

.mtc-lesson-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px 12px 62px; border-bottom: 1px solid var(--mtc-line);
  font-size: 15px;
}
.mtc-lesson-row:last-child { border-bottom: 0; }
.mtc-lesson-row a { color: var(--mtc-ink); text-decoration: none; flex: 1; min-width: 0; }
.mtc-lesson-row a:hover { color: var(--mtc-purple); text-decoration: underline; }
.mtc-lesson-row .mtc-locked-label { color: var(--mtc-muted); flex: 1; }
.mtc-lesson-time { font-size: 13px; color: var(--mtc-muted); white-space: nowrap; }
.mtc-tick {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--mtc-line); display: grid; place-items: center;
}
.mtc-tick--done { background: var(--mtc-ok); border-color: var(--mtc-ok); color: #fff; }
.mtc-badge-draft {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mtc-warn); background: #FCEFE3; border-radius: 4px; padding: 3px 7px;
}
/* ---------- enrolment card ---------- */
.mtc-enrol-card {
  position: sticky; top: 24px;
  background: var(--mtc-surface); border: 1px solid var(--mtc-line);
  border-radius: var(--mtc-radius); overflow: hidden; box-shadow: var(--mtc-shadow-lg);
}
.mtc-enrol-media { aspect-ratio: 16 / 10; background: var(--mtc-purple-soft); }
.mtc-enrol-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mtc-enrol-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.mtc-enrol-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.mtc-enrol-facts li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--mtc-line); font-size: 14.5px;
}
.mtc-enrol-facts li:last-child { border-bottom: 0; }
.mtc-enrol-facts span { color: var(--mtc-muted); }
.mtc-enrol-facts strong { color: var(--mtc-ink); text-align: right; }
.mtc-enrol-note {
  margin: 0; font-size: 13.5px; color: var(--mtc-muted); line-height: 1.55;
  background: var(--mtc-purple-soft); border-radius: var(--mtc-radius-sm); padding: 12px 14px;
}

/* progress */
.mtc-progress { display: flex; flex-direction: column; gap: 8px; }
.mtc-progress-top { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 700; }
.mtc-progress-top span:last-child { color: var(--mtc-purple); font-variant-numeric: tabular-nums; }
.mtc-progress-track { height: 9px; background: var(--mtc-purple-soft); border-radius: 999px; overflow: hidden; }
.mtc-progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--mtc-purple) 0%, var(--mtc-plum) 100%);
}

/* ---------- lesson page ---------- */
.mtc-lesson-layout {
  display: grid; grid-template-columns: 320px minmax(0,1fr);
  gap: 36px; align-items: start; padding: 34px 0 70px;
}
.mtc-sidebar {
  position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto;
  background: var(--mtc-surface); border: 1px solid var(--mtc-line); border-radius: var(--mtc-radius);
}
.mtc-sidebar-head { padding: 16px 18px; border-bottom: 1px solid var(--mtc-line); }
.mtc-sidebar-head a { font-size: 13px; font-weight: 700; color: var(--mtc-purple); text-decoration: none; }
.mtc-sidebar-head strong { display: block; margin-top: 6px; font-size: 15px; line-height: 1.35; }
.mtc-sidebar .mtc-module { border: 0; border-radius: 0; margin: 0; border-bottom: 1px solid var(--mtc-line); box-shadow: none; }
.mtc-sidebar .mtc-lesson-row { padding-left: 52px; font-size: 14px; }
.mtc-lesson-row--current { background: var(--mtc-purple-soft); }
.mtc-lesson-row--current a { color: var(--mtc-purple-600); font-weight: 700; }

.mtc-lesson-main {
  background: var(--mtc-surface); border: 1px solid var(--mtc-line);
  border-radius: var(--mtc-radius); padding: 32px; box-shadow: var(--mtc-shadow);
}
.mtc-lesson-main h1 { margin: 6px 0 18px; font-size: clamp(24px, 3vw, 32px); color: var(--mtc-plum); }
.mtc-lesson-nav {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--mtc-line);
}
.mtc-video { position: relative; aspect-ratio: 16/9; margin-bottom: 24px; border-radius: var(--mtc-radius-sm); overflow: hidden; background: #000; }
.mtc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* ---------- locked state ---------- */
.mtc-locked-panel {
  background: var(--mtc-surface); border: 1px solid var(--mtc-purple-line);
  border-radius: var(--mtc-radius); padding: 34px; text-align: center;
}
.mtc-locked-panel h2 { margin: 0 0 10px; font-size: 21px; color: var(--mtc-plum); }
.mtc-locked-panel p { margin: 0 auto 16px; color: var(--mtc-muted); max-width: 52ch; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .mtc-course-layout { grid-template-columns: 1fr; gap: 30px; }
  .mtc-enrol-card { position: static; }
  .mtc-lesson-layout { grid-template-columns: 1fr; }
  .mtc-sidebar { position: static; max-height: none; order: 2; }
  .mtc-lesson-main { order: 1; }
}
@media (max-width: 640px) {
  .mtc-hero-band { padding: 40px 0 44px; }
  .mtc-card-grid { grid-template-columns: 1fr; }
  .mtc-lesson-main { padding: 22px; }
  .mtc-lesson-row { padding-left: 18px; }
  .mtc-sidebar .mtc-lesson-row { padding-left: 18px; }
  .mtc-filters { padding: 14px; }
  .mtc-course-layout, .mtc-catalogue { padding-bottom: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .mtc-card, .mtc-chevron { transition: none; }
}

/* ---------- print ---------- */
@media print {
  .mtc-sidebar, .mtc-lesson-nav, .mtc-filters, .mtc-enrol-card { display: none; }
  .mtc-lesson-layout, .mtc-course-layout { grid-template-columns: 1fr; }
  .mtc-lesson-main { border: 0; box-shadow: none; padding: 0; }
}