/* =============================================================================
   Equine Edu — course.css
   Page layout containers for course and lesson pages, plus responsive overrides.
   Loaded after core.css and components.css.
   ----------------------------------------------------------------------------
   Sections are translucent washes over the site atmosphere — content areas
   flow into one another instead of stacking as hard bands.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. Course landing page section
   ----------------------------------------------------------------------------- */
.course-section {
  margin-bottom: 2.75rem;
}


/* -----------------------------------------------------------------------------
   2. Lesson page two-column wrapper (main + sidebar)
   ----------------------------------------------------------------------------- */
.lesson-wrap {
  max-width: var(--shell-w);
  margin: 0 auto;
  padding: 2.5rem var(--page-pad) 5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 5rem;
  align-items: start;
}

.lesson-left {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-width: 0;
}

.lesson-right {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: sticky;
  top: calc(var(--nav-height) + 20px);
  min-width: 0;
}


/* -----------------------------------------------------------------------------
   2b. Sidebar prev / next nav
   ----------------------------------------------------------------------------- */
.sidebar-module-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.sidebar-nav-btn {
  display: block;
  padding: 0.7rem 1.1rem;
  background: var(--soft-white);
  border: 1.5px solid var(--blue-secondary);
  border-radius: var(--radius);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--blue-primary);
  text-decoration: none;
  line-height: 1.4;
  transition: background var(--motion-quick) var(--ease),
              border-color var(--motion-quick) var(--ease),
              color var(--motion-quick) var(--ease),
              transform var(--motion-quick) var(--ease);
  box-shadow: var(--shadow-rest);
}
.sidebar-nav-btn:hover {
  background: var(--blue-light);
  border-color: var(--blue-primary);
  color: var(--heading);
  transform: translateY(-1px);
}
.sidebar-nav-btn.next {
  background: var(--tan);
  border-color: var(--tan);
  color: var(--white);
  text-align: right;
}
.sidebar-nav-btn.next:hover {
  background: var(--leather);
  border-color: var(--leather);
  color: var(--white);
}
.sidebar-module-nav-return {
  gap: 0;
}
.sidebar-nav-btn-return,
.sidebar-nav-btn-return.next {
  background: var(--tan);
  border-color: var(--tan);
  color: var(--white);
  text-align: left;
}
.sidebar-nav-btn-return:hover,
.sidebar-nav-btn-return.next:hover {
  background: var(--leather);
  border-color: var(--leather);
  color: var(--white);
}


/* -----------------------------------------------------------------------------
   3. Prev / next lesson navigation (in-content, hidden by default;
      course-nav.js drives the sidebar version)
   ----------------------------------------------------------------------------- */
.lesson-nav {
  display: none;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}


/* -----------------------------------------------------------------------------
   4. Track / curriculum block (used on course landing pages)
   ----------------------------------------------------------------------------- */
.track-section {
  /* Soft-edged band — fades in and out of the atmosphere, no hard lines */
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(231, 220, 203, 0.55) 14%,
    rgba(231, 220, 203, 0.55) 86%,
    transparent 100%);
  padding: 72px var(--page-pad);
}

.track-inner {
  max-width: var(--content-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.track-section .section-title {
  color: var(--heading);
}

.track-section .section-sub {
  color: var(--leather-dark);
}

.track-section .section-desc {
  color: var(--body-text);
}

.track-list {
  list-style: none;
  display: grid;
  gap: 0.85rem;
  margin-top: 1.25rem;
}

.track-list li {
  display: flex;
  gap: 0.75rem;
  color: var(--body-text);
  font-size: 0.92rem;
  line-height: 1.6;
}

.track-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--room-accent);
  margin-top: 0.55rem;
  flex-shrink: 0;
}

.track-card {
  padding: 1.6rem;
}

.track-card h3 {
  font-family: var(--font-display);
  color: var(--heading);
  font-size: 1.3rem;
  margin-bottom: 1rem;
}


/* -----------------------------------------------------------------------------
   5. Closing CTA section — quiet editorial close, no hard band
   ----------------------------------------------------------------------------- */
.cta-section {
  padding: 72px var(--page-pad);
  /* Bright wash — alternates against the warm track band above it */
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.62) 18%,
    rgba(255, 255, 255, 0.62) 82%,
    transparent 100%);
  text-align: center;
}

.cta-inner {
  max-width: 650px;
  margin: 0 auto;
}

.cta-inner .section-title {
  margin-bottom: 1rem;
}

.cta-inner .section-desc,
.cta-inner .section-sub {
  margin: 0 auto 1.6rem;
  text-align: center;
}


/* -----------------------------------------------------------------------------
   6. Landing-page sections (course-landing index.html pages)
   Translucent washes, not solid bands.
   ----------------------------------------------------------------------------- */
.learn-section {
  padding: 80px var(--page-pad);
  /* Warm cream — matches the track band so the bright middle stands out */
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(231, 220, 203, 0.55) 14%,
    rgba(231, 220, 203, 0.55) 86%,
    transparent 100%);
}

.learn-inner {
  max-width: var(--content-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.curriculum-section {
  padding: 80px var(--page-pad);
  /* A touch lighter than the bands around it so the three sections
     read as distinct layers (still soft-edged — no hard lines) */
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.62) 16%,
    rgba(255, 255, 255, 0.62) 84%,
    transparent 100%);
}

.curriculum-inner {
  max-width: 780px;
  margin: 0 auto;
}

.curriculum-inner .section-title,
.curriculum-inner .section-label,
.curriculum-inner .section-sub {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}


/* -----------------------------------------------------------------------------
   7. Responsive breakpoints
   Tablet landscape (≤1050): collapse 2-col layouts, sidebar flows below content.
   Phones (≤760): collapse multi-col grids, stack navigation.
   ----------------------------------------------------------------------------- */
@media (max-width: 1050px) {
  .course-hero-inner,
  .lesson-hero-inner,
  .lesson-wrap,
  .track-inner {
    grid-template-columns: 1fr;
  }
  .lesson-wrap {
    gap: 2.5rem;
  }
  .lesson-right {
    position: static;
  }
}

@media (max-width: 760px) {
  .module-grid,
  .outcomes-grid,
  .term-grid,
  .concept-grid,
  .key-term-grid,
  .flip-grid,
  .learn-inner,
  .track-inner {
    grid-template-columns: 1fr;
  }
  .section-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .course-module {
    grid-template-columns: 36px 1fr 20px;
  }
  .module-type {
    display: none;
  }
  .lesson-nav {
    flex-direction: column;
    align-items: stretch;
  }
  .lesson-nav a,
  .nav-btn,
  .btn {
    width: 100%;
  }
  .diagram-stage {
    min-height: 310px;
  }
}

/* ============================================================================
   Course landing progress bar — rendered by course-nav.js on 1-index.html.
   Mirrors the sidebar progress styling; tokens only.
   ============================================================================ */
.course-progress {
  background: var(--soft-white);
  border: 1px solid var(--border);
  border-radius: var(--radius, 12px);
  padding: 1rem 1.25rem;
  margin-bottom: var(--space-5, 24px);
  box-shadow: var(--shadow-rest);
}
.course-progress-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4, 16px); margin-bottom: 0.6rem;
}
.course-progress-label {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--leather-dark);
}
.course-progress-count {
  font-size: var(--text-sm); font-weight: 600; color: var(--muted-text);
}
.course-progress-track {
  height: 8px; background: rgba(36, 54, 74, 0.07);
  border-radius: 999px; overflow: hidden;
}
.course-progress-fill {
  height: 100%; background: var(--room-accent, var(--tan));
  border-radius: 999px; transition: width var(--motion-soft, .4s) var(--ease, ease);
}
.course-progress.is-done .course-progress-fill { background: var(--success); }
.course-progress.is-done .course-progress-label { color: var(--success); }

/* completed module rows on the landing list */
.module-item.is-complete .module-num {
  background: var(--success); color: var(--white); border-color: var(--success);
}