/* Visible stories, illustrated mechanisms. No hidden reading steps or pin spacer. */
.chapter-lessons { padding-top: 64px; padding-bottom: 92px; }
.chapter-lessons .section-heading { align-items: center; margin-bottom: 64px; }
.lesson-showcases { display: grid; gap: clamp(64px, 7vw, 112px); }
.lesson-showcase { display: grid; grid-template-columns: minmax(0,1.18fr) minmax(0,.9fr); gap: clamp(36px,6vw,96px); align-items: center; }
.lesson-showcase:nth-child(even) { grid-template-columns: minmax(0,.9fr) minmax(0,1.18fr); }
.lesson-showcase:nth-child(even) .lesson-artboard { grid-column: 2; grid-row: 1; }
.lesson-showcase:nth-child(even) .lesson-narrative { grid-column: 1; grid-row: 1; }
.lesson-artboard { position: relative; isolation: isolate; min-width: 0; padding: 25px 20px 18px; border: 1px solid #bacfe955; border-radius: 28px; background: linear-gradient(155deg,#f7faff 0,#e0ecfc 63%,#d2e3f8 100%); box-shadow: 0 26px 60px -48px #16498550; }
.lesson-artboard::before { content: ''; position: absolute; z-index: -1; inset: 12% 0 14%; pointer-events: none; background-image: linear-gradient(#6a95ca0b 1px,transparent 1px),linear-gradient(90deg,#6a95ca0b 1px,transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(ellipse,#000 15%,transparent 70%); }
.lesson-artboard-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 8px 18px; font-size: 10px; letter-spacing: .06em; color: #587aa4; }
.lesson-orbit-dot { width: 7px; height: 7px; border-radius: 50%; background: #448ef1; box-shadow: 0 0 0 5px #448ef112; flex: none; }
.lesson-showcase .lesson-visual { width: 100%; max-width: none; min-height: 310px; display: flex; align-items: center; margin: 0; }
.lesson-showcase .lesson-visual > figure { width: 100%; }
.lesson-replay { display: flex; align-items: center; gap: 9px; margin: 22px auto 0; padding: 10px 12px; border: 1px solid #799ccb40; border-radius: 30px; background: #f2f7fe99; color: #496d9a; font-size: 11px; transition: background .2s,color .2s; }
.lesson-replay[hidden] { display: none; }
.lesson-replay svg { width: 15px; height: 15px; }
.lesson-replay:hover { color: #056bff; background: #fff; }
.lesson-replay:active svg { transform: rotate(-35deg); }
.lesson-counter { display: block; color: #81a6d2; font-size: 12px; letter-spacing: .16em; margin-bottom: 20px; }
.lesson-narrative h3 { max-width: 18ch; font-size: clamp(30px,3vw,47px); line-height: 1.1; margin-bottom: 29px; }
.lesson-showcase .lesson-text { display: grid; grid-template-columns: 1fr; gap: 24px; }
.lesson-showcase .lesson-text > div { min-width: 0; }
.lesson-showcase .lesson-text h4 { font-size: 9px; letter-spacing: .15em; margin-bottom: 8px; }
.lesson-showcase .lesson-text p { font-size: clamp(15px,1.15vw,17px); line-height: 1.65; max-width: 45ch; }
.lesson-showcase .lesson-text > div:nth-child(2) { border-left: 2px solid #2882f1; padding-left: 18px; }
.lesson-showcase .lesson-text > div:nth-child(2) h4 { color: #056bff; }
.lesson-showcase .lesson-text > div:nth-child(2) p { color: #243e5b; }
.lesson-showcase .lesson-text > div:nth-child(3) { border-top: 1px solid #adc5e244; padding-top: 18px; }
.lesson-showcase .lesson-text > div:nth-child(3) p { font-size: 13px; color: #607b9c; }
.chapter-journey { padding-top: 66px; padding-bottom: 96px; }
.chapter-journey h2 { margin-bottom: 48px; }
@media(min-width:1500px) {
  .lesson-showcase .lesson-visual { min-height: 400px; }
  .lesson-artboard { padding: 32px 28px 22px; }
}
@media(max-width:900px) {
  .lesson-showcase, .lesson-showcase:nth-child(even) { gap: 32px; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .lesson-artboard { padding-inline: 10px; }
  .lesson-showcase .lesson-visual { min-height: 240px; }
  .lesson-artboard-heading { font-size: 9px; }
}
@media(max-width:700px) {
  .chapter-lessons { padding-block: 45px 55px; }
  .chapter-lessons .section-heading { margin-bottom: 40px; }
  .lesson-showcases { gap: 65px; }
  .lesson-showcase, .lesson-showcase:nth-child(even) { grid-template-columns: minmax(0,1fr); gap: 26px; }
  .lesson-showcase:nth-child(even) .lesson-artboard, .lesson-showcase:nth-child(even) .lesson-narrative { grid-column: auto; grid-row: auto; }
  .lesson-artboard { padding: 20px 12px 15px; border-radius: 22px; }
  .lesson-showcase .lesson-visual { min-height: 0; }
  .lesson-counter { margin-bottom: 14px; }
  .lesson-narrative h3 { font-size: 33px; margin-bottom: 25px; max-width: 20ch; }
  .lesson-showcase .lesson-text { gap: 21px; }
  .lesson-showcase .lesson-text p { font-size: 16px; }
  .lesson-showcase .lesson-text > div:nth-child(3) p { font-size: 14px; }
  .chapter-journey { padding-block: 45px 70px; }
  .chapter-journey h2 { margin-bottom: 36px; }
}
@media(prefers-reduced-motion:reduce) { .lesson-replay { display: none; } }