/* ==========================================================
   main-course.css
   Course-page-only components layered on top of site.css.
   Load order: site.css, then main-course.css.
   ========================================================== */

:root{
  /* Subtler than --pai-line; used only for the hairlines between
     lesson rows inside a syllabus week, where --pai-line reads too
     heavy against the section's tinted background. */
  --pai-line-soft: oklch(92% 0.006 75);
}

/* ---------- brand mark ----------
   Fallback logo: an initial in a colored square, used in the nav
   when no logo image is supplied. */
.brand-mark{
  width:34px;height:34px;border-radius:6px;
  background:var(--pai-accent);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--pai-mono);font-weight:600;font-size:14px;
  flex:none;
}

/* ---------- hero media frame ---------- */
.hero-media{
  margin-top:52px;border:1px solid var(--pai-line);border-radius:4px;overflow:hidden;
}
.hero-media video,.hero-media img{width:100%;aspect-ratio:16/9;display:block;object-fit:cover;}

/* ---------- testimonial ---------- */
.testimonial__slide{margin:0;}
.testimonial__quote{
  font-family:var(--pai-serif);font-size:clamp(22px,2.2vw,30px);
  line-height:1.25;letter-spacing:-.01em;margin:0;
}
.testimonial__byline{margin-top:22px;}
.testimonial__name{font-family:var(--pai-serif);font-size:19px;font-weight:600;}
.testimonial__role{font-family:var(--pai-mono);font-size:12.5px;letter-spacing:.08em;color:var(--pai-accent-deep);text-transform:uppercase;margin-top:4px;}

.testimonial-controls{display:flex;align-items:center;gap:20px;margin-top:32px;}
.testimonial-controls__btn{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--pai-line-strong);
  background:transparent;cursor:pointer;color:var(--pai-ink);font-size:16px;
  display:flex;align-items:center;justify-content:center;
}
.testimonial-controls__btn:hover{border-color:var(--pai-ink);}
.testimonial-dots{display:flex;gap:8px;margin-left:8px;}
.testimonial-dots__dot{
  width:8px;height:8px;border-radius:50%;border:0;cursor:pointer;padding:0;
  background:var(--pai-line);
}
.testimonial-dots__dot.is-active{background:var(--pai-accent);}

/* ---------- mid-page CTA bar ---------- */
.cta-bar{padding-block:clamp(48px,6vw,70px);background:var(--pai-paper-2);}
.cta-bar .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
.cta-bar h2{font-size:clamp(24px,2.6vw,32px);max-width:34ch;}
.cta-bar .actions{display:flex;gap:14px;flex-wrap:wrap;}
@media(max-width:640px){.cta-bar .wrap{justify-content:flex-start;}}

/* ---------- syllabus ----------
   auto-fit collapses any column track with no week in it, instead of
   reserving empty space the way a fixed repeat(5,1fr) did — a course
   with 1 week gets 1 full-width column, not 1 populated column next
   to 4 empty ones. Column count then grows on its own as weeks are
   added, wrapping to additional rows once they no longer fit at
   minmax's 200px floor — which also covers the mobile/tablet
   collapse that used to need separate breakpoints below. */
.syllabus-grid{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:1px;
  background:var(--pai-line);border:1px solid var(--pai-line);margin-top:46px;
}
.syllabus-week{background:var(--pai-surface);padding:26px 22px;}
.syllabus-week__label{
  font-family:var(--pai-mono);font-size:12px;letter-spacing:.1em;color:var(--pai-ink-3);
  text-transform:uppercase;margin-bottom:14px;
}
.syllabus-week__list{list-style:none;margin:0;padding:0;}
.syllabus-week__item{
  font-size:14.5px;color:var(--pai-ink);padding:7px 0;
  border-top:1px solid var(--pai-line-soft);
}