/* Lesson cards: every story carries one lesson a child can understand. One card per book,
   a real cover, the lesson in a few words, and a question to talk about together.
   API: <div class="db-lessons" data-db="lessons"> … <ul class="db-lessons__row"> <li class="db-lesson"> */
.db-lessons__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--db-s4);margin-bottom:var(--db-s6)}
.db-lessons__intro{max-width:46ch}
.db-lessons__nav{display:flex;gap:var(--db-s2)}

.db-lessons__arrow{width:44px;height:44px;flex:none;border-radius:var(--db-r-pill);border:0;
  background:var(--db-card-2);color:var(--fg);display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:var(--db-shadow-1);
  transition:transform var(--m-dur-fast) var(--m-ease),background var(--m-dur-fast) var(--m-ease)}
.db-lessons__arrow:hover{background:rgba(255,255,255,.18)}
.db-lessons__arrow:active{transform:scale(.92)}
.db-lessons__arrow svg{width:20px;height:20px}
.db-lessons__arrow[disabled]{opacity:.35;cursor:not-allowed;pointer-events:none}

.db-lessons__row{display:flex;gap:var(--db-s5);overflow-x:auto;scroll-snap-type:x mandatory;
  margin:0;padding:var(--db-s2) var(--db-s1) var(--db-s4);list-style:none;scrollbar-width:none;
  scroll-padding-inline:var(--db-s1)}
.db-lessons__row::-webkit-scrollbar{display:none}

.db-lesson{flex:0 0 auto;width:min(80vw,300px);scroll-snap-align:start;background:var(--db-card);
  border-radius:var(--db-r-xl);overflow:hidden;box-shadow:var(--db-shadow-2);display:flex;flex-direction:column}
.db-lesson__cover-wrap{position:relative}
.db-lesson__cover{width:100%;aspect-ratio:8/5;object-fit:cover}
.db-lesson__chip{position:absolute;top:var(--db-s3);left:var(--db-s3)}

.db-lesson__body{padding:var(--db-s5);display:flex;flex-direction:column;gap:var(--db-s2);flex:1}
.db-lesson__title{font-size:var(--db-fs-h3);font-weight:700}
.db-lesson__lesson{font-weight:800;color:var(--db-gold);font-size:var(--db-fs-small);margin:0}
.db-lesson__talk{margin-top:auto;padding-top:var(--db-s3);border-top:var(--db-border);
  font-size:var(--db-fs-small);color:var(--fg-muted)}
.db-lesson__talk-kicker{display:block;font-weight:800;letter-spacing:var(--db-track-label);
  text-transform:uppercase;font-size:.7rem;color:var(--fg);margin-bottom:.35rem}

@media (prefers-reduced-motion:reduce){.db-lessons__row{scroll-behavior:auto}}