/* Learning Center: lesson cards, the lesson page (video, chapters, transcript, takeaways) and the lesson-to-lesson navigation.
   Loaded only on /learn pages and the home page (render_page 'css' => ['learn']). Colours come from the tokens in site.css. */

/* ---- thumbnails and cards ---- */
.lthumb{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--cab)}
.lthumb img{display:block;width:100%;height:100%;object-fit:cover}
.lthumb-none{display:grid;place-items:center}
.lthumb-lem{width:auto;height:78%}
.lart{display:block;width:200px;height:auto}
.ldur{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 8px;border-radius:8px;background:rgba(16,32,26,.9);color:#E9F2EE;font:700 .8rem/1 var(--f-sans)}
.ldur .ic{width:14px;height:14px}
.lbody{display:flex;flex-direction:column;gap:6px;min-width:0}
.lmeta{font:600 .82rem/1.2 var(--f-sans);color:var(--muted)}
.lt{font:700 1.18rem/1.2 var(--f-display);letter-spacing:-.015em;color:var(--ink)}
.ld{font-size:.95rem;line-height:1.5;color:var(--ink-2)}
.lgo{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-weight:650;font-size:.93rem;color:var(--link)}
.lgo .ic{width:16px;height:16px;transition:transform .18s}

.llead,.lrow{display:grid;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);text-decoration:none;color:var(--ink);transition:border-color .18s,transform .18s,box-shadow .18s}
.llead:hover,.lrow:hover{border-color:var(--accent);color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow)}
.llead:hover .lgo .ic{transform:translateX(3px)}
.llead{grid-template-columns:1fr;padding:14px;gap:18px;align-items:start}
.llead .lt{font-size:1.65rem;line-height:1.12}
.llead .ld{font-size:1rem}
.lrow{grid-template-columns:190px minmax(0,1fr);padding:12px 18px 12px 12px;align-items:center}
.lrow .lt{font-size:1.1rem}
.lrow .ld{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.lgrid,.lhome{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;align-items:start}
.lstack-rows{display:flex;flex-direction:column;gap:14px}
.lrows-wide{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(440px,100%),1fr));gap:14px}
.ltopic+.ltopic{border-top:1px solid var(--line)}
.ltopic .sec-note{max-width:62ch}

/* ---- lesson page ---- */
.lesson .lhead .lede{max-width:62ch}
.lstage{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;margin-top:22px;align-items:start}
.lvid{margin:0}
.lvid video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:var(--r-l);background:var(--cab);border:1px solid var(--line)}
.lvid figcaption{margin-top:9px;font-size:.86rem;color:var(--muted)}
.lchap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:16px 12px}
.lchap h2{font:700 .76rem/1 var(--f-sans);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 10px 8px}
.lchap ol{list-style:none;display:flex;flex-direction:column;gap:2px}
.lchap button{display:grid;grid-template-columns:42px minmax(0,1fr);gap:8px;align-items:baseline;width:100%;padding:9px 8px;border:0;border-left:3px solid transparent;border-radius:6px 10px 10px 6px;background:none;color:var(--ink);text-align:left;font:600 .93rem/1.28 var(--f-sans);cursor:pointer}
.lchap button:hover{background:var(--surface-2)}
.lchap button[aria-current="true"]{background:var(--surface-2);border-left-color:var(--accent)}
.lchap time{font:700 .88rem/1.2 var(--f-num);color:var(--muted)}
.ltrans{margin-top:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.ltrans summary{padding:14px 18px;font-weight:650;cursor:pointer}
.ltrans-body{padding:0 20px 18px;font:400 1.02rem/1.65 var(--f-serif);color:var(--ink-2)}
.ltrans-body h3{font:700 .95rem/1.3 var(--f-sans);color:var(--ink);margin:16px 0 4px}
.ltake{background:var(--accent-soft);border-radius:var(--r-l);padding:18px 22px 20px;margin:28px 0 8px}
.ltake h2{font:700 1.05rem/1.2 var(--f-display);margin:0 0 12px}
.ltake ul{list-style:none;display:grid;gap:9px}
.ltake li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;line-height:1.5}
.ltake .ic{width:20px;height:20px;color:var(--accent);margin-top:2px}
.lnav{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:calc(var(--narrow) + var(--gut)*2);margin:36px auto 0;padding:0 var(--gut)}
.lnav a{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);text-decoration:none;color:var(--ink);transition:border-color .18s}
.lnav a:hover{border-color:var(--accent);color:var(--ink)}
.lnav small{display:inline-flex;align-items:center;gap:6px;font-weight:650;font-size:.84rem;color:var(--muted)}
.lnav small .ic{width:15px;height:15px}
.lnav b{font:700 1.05rem/1.25 var(--f-display);letter-spacing:-.01em}
.lnav-n{text-align:right;align-items:flex-end}

@media (max-width:900px){
  .lgrid,.lhome{grid-template-columns:1fr}
  .lstage{grid-template-columns:1fr}
  .lchap ol{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
}
@media (max-width:560px){
  .lrow{grid-template-columns:112px minmax(0,1fr);gap:12px;padding:10px 12px 10px 10px}
  .lrow .ld{display:none}
  .lrow .lt{font-size:1rem}
  .lrow .ldur{left:6px;bottom:6px;height:22px;font-size:.7rem;padding:0 7px 0 6px}
  .lrow .ldur .ic{width:11px;height:11px}
  .lnav{grid-template-columns:1fr}
  .lnav-n{text-align:left;align-items:flex-start}
  .llead .lt{font-size:1.4rem}
}
@media (prefers-reduced-motion:reduce){.llead,.lrow,.lgo .ic{transition:none}.llead:hover,.lrow:hover{transform:none}}