/* =========================================================================
   Lesson-menu + one-lesson-at-a-time view — shared across all 4 IELTS modules
   (reading / writing / listening / speaking). Data-driven: reads each page's
   existing .lchapter sections, so it needs NO per-page markup. Reuses each
   page's own CSS variables, so it is automatically theme-aware in light/dark.
   ========================================================================= */

/* ---- the lesson menu (grid of cards) ---- */
.lesson-menu{ max-width:1080px; margin:0 auto 44px; padding:0 28px; }
.lesson-menu .lm-head{ margin:6px 0 22px; }
.lesson-menu .lm-head h2{ font-size:1.5rem; color:var(--brand-strong); margin:0 0 7px; letter-spacing:-.01em; }
.lesson-menu .lm-head p{ color:var(--text-soft); font-size:1rem; margin:0; line-height:1.6; }
.lesson-menu .lm-head .bn{ display:block; margin-top:5px; font-family:"Hind Siliguri","Lexend",sans-serif; }
.lm-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:16px; }
.lm-card{
  text-align:left; cursor:pointer; font-family:inherit; text-decoration:none;
  background:var(--card-bg); border:1.5px solid var(--card-line); border-radius:16px;
  padding:20px; box-shadow:0 4px 16px rgba(55,48,163,.05);
  transition:border-color .15s, transform .15s, box-shadow .15s;
  display:flex; flex-direction:column; gap:9px; min-width:0;
}
/* Chapter 1 pointer card (links to the app-level orientation on the landing) */
.lm-card-start{ border-color:var(--brand); background:var(--bg-alt); }
.lm-card-start .lm-badge{ color:var(--brand-strong); }
.lm-card-start:hover{ border-color:var(--brand); }
.lm-card:hover{ border-color:var(--accent); transform:translateY(-3px); box-shadow:0 12px 28px rgba(55,48,163,.12); }
.lm-card .lm-badge{ display:inline-flex; align-items:baseline; gap:6px; font-weight:700; color:var(--accent-strong); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; }
.lm-card .lm-badge .num{ font-size:1.02rem; letter-spacing:0; }
.lm-card .lm-title{ font-weight:700; color:var(--brand-strong); font-size:1.1rem; line-height:1.32; }
.lm-card .lm-bn{ color:var(--text-soft); font-size:.9rem; line-height:1.6; font-family:"Hind Siliguri","Lexend",sans-serif; }
.lm-card .lm-go{ margin-top:auto; font-weight:700; color:var(--brand); font-size:.9rem; }
.lm-card.is-tests{ border-color:var(--accent); }
.lm-card.is-tests .lm-badge{ color:var(--accent-strong); }

/* ---- lesson navigation bar (Menu / Prev / Next) ---- */
.lesson-nav{ max-width:1080px; margin:0 auto; padding:14px 28px 6px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.lesson-nav.bottom{ margin-top:6px; margin-bottom:38px; border-top:1px solid var(--card-line); padding-top:18px; }
.ln-btn{
  font-family:inherit; cursor:pointer; font-weight:700; font-size:.9rem; border-radius:10px;
  padding:9px 16px; border:1.5px solid var(--card-line); background:var(--card-bg); color:var(--brand-strong);
  transition:border-color .15s, background .15s, color .15s;
}
.ln-btn:hover:not(:disabled){ border-color:var(--accent); }
.ln-btn:disabled{ opacity:.38; cursor:default; }
.ln-menu{ background:var(--brand); color:#fff; border-color:var(--brand); }
.ln-menu:hover{ background:var(--brand-strong); border-color:var(--brand-strong); }
.ln-spacer{ margin-left:auto; }
.ln-count{ color:var(--muted); font-size:.86rem; font-weight:600; white-space:nowrap; }

/* ---- view states (lesson groups are shown/hidden by JS via inline display) ---- */
body.view-menu .lesson-nav{ display:none; }
body.view-lesson .lesson-menu{ display:none; }

/* current lesson highlighted in the sticky pill switcher */
.lchapnav a.is-current{ background:var(--brand); color:#fff; border-color:var(--brand); }

@media (max-width:560px){
  .lesson-menu{ padding-left:16px; padding-right:16px; }
  .lesson-nav{ padding-left:16px; padding-right:16px; }
  .lm-grid{ grid-template-columns:minmax(0,1fr); }
  .ln-count{ display:none; }
}

/* ---- polished "Home" button in the module header (overrides the page's .btn-ghost) ---- */
header .btn-home{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 17px; border-radius:11px; font-weight:600; font-size:.92rem;
  color:var(--brand-strong); background:var(--card-bg);
  border:1.5px solid var(--card-line); box-shadow:0 1px 3px rgba(32,34,58,.05);
  transition:border-color .15s, background .15s, box-shadow .15s, transform .12s;
}
header .btn-home svg{ width:16px; height:16px; flex:none; }
header .btn-home:hover{
  border-color:var(--brand); background:var(--bg-alt);
  box-shadow:0 6px 16px rgba(79,70,229,.16); transform:translateY(-1px);
}