/* ============================================================
   lesson.css - guest lesson on the child template (lesson-guest.php,
   flag mentor_lesson_v2()). Printed last: after mentor.css,
   theme-brand.css and the parent's bootstrap. Tokens come from
   body.mentor-brand (theme-brand.css). Own classes are .ml-*; the
   video facade keeps its .mi-lesson-video markup (functions.php).
   Phone first (390), the side column starts at 1024.
   Selectors are scoped with .ml-lesson to outrank `body.mentor-brand a`.
   Any edit = version bump in mentor_lesson_v2_assets().
   ============================================================ */

.mb-main{padding:0}
.ml-lesson{--ml-pad:clamp(18px,4vw,28px);--ml-sticky:108px;color:var(--ink-soft);font-family:"Manrope",system-ui,sans-serif;overflow-wrap:break-word}
.ml-lesson *{box-sizing:border-box}
/* :where keeps the reset at one class, so every .ml-* rule below can set its own margin */
.ml-lesson :where(h1,h2,h3,p,ol,ul,figure){margin:0;padding:0}
.ml-lesson :where(ol,ul){list-style:none}
/* the icon box is reserved before the deferred icon script fills it */
.ml-lesson iconify-icon{display:inline-block;flex:0 0 auto;width:1em;height:1em;line-height:1}
.ml-wrap{max-width:calc(var(--maxw,1240px) + 2 * var(--ml-pad));margin-inline:auto;padding-inline:var(--ml-pad)}

/* ---------- Head: paper band with the place in the course ---------- */
.ml-head{background:var(--paper);border-bottom:1px solid var(--line);padding:.5rem 0 1.25rem}
.ml-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;column-gap:.5rem;font-size:.9rem;font-weight:600;line-height:1.35;color:var(--body)}
.ml-crumbs li{display:flex;align-items:center;gap:.5rem;min-height:44px}
.ml-crumbs li + li::before{content:"";width:.42rem;height:.42rem;border:solid var(--muted);border-width:2px 2px 0 0;rotate:45deg;flex:0 0 auto}
.ml-lesson .ml-crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink-soft);font-weight:700;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:.08em;text-underline-offset:.2em}
.ml-lesson .ml-crumbs a:hover{color:var(--orange-text);text-decoration-thickness:.14em}
.ml-lesson .ml-title{max-width:26ch;font-weight:800;font-size:clamp(1.6rem,1.15rem + 2.1vw,2.6rem);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
.ml-count{margin-top:.7rem;font-size:.92rem;font-weight:600;line-height:1.3;color:var(--body)}
.ml-count b{font-weight:800;color:var(--ink)}
/* one segment per lesson, grouped by module: seen, current, still ahead */
.ml-rail{display:flex;gap:6px;max-width:44rem;margin-top:.6rem}
.ml-rail-g{display:flex;flex:1 1 0;gap:2px;min-width:0}
.ml-rail i{flex:1 1 0;height:6px;border-radius:3px;background:#dfd5c5}
.ml-rail i.is-seen{background:var(--ink-soft)}
.ml-rail i.is-current{background:var(--orange-600)}

/* ---------- Video, text, files ---------- */
.ml-main{min-width:0}
.ml-video{position:relative;margin-inline:calc(-1 * var(--ml-pad));background:#000}
.ml-lesson .mi-lesson-video{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.ml-lesson .mi-lesson-video :is(img,button,iframe,.mi-lesson-video-fallback){position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0}
.ml-lesson .mi-lesson-video > img{max-width:none;object-fit:cover}
.ml-lesson .mi-lesson-video-play{display:flex;align-items:center;justify-content:center;background:transparent;cursor:pointer}
.ml-lesson .mi-lesson-video-play:hover svg{filter:brightness(1.15)}
body.mentor-brand .ml-lesson .mi-lesson-video-play:focus-visible{outline:3px solid #fff!important;outline-offset:-7px!important;box-shadow:inset 0 0 0 4px var(--ink)}
.ml-lesson .mi-lesson-video-fallback{display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.72);color:#fff;font-weight:700;text-decoration:underline}
.ml-figure img{display:block;width:100%;height:auto}

/* Opaque end card covers YouTube recommendations. Region, not a modal: no focus trap. */
.ml-video-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.ml-lesson .ml-video-end{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;overflow:auto;padding:12px;background:var(--paper);color:var(--ink)}
.ml-lesson .ml-video-end[hidden]{display:none}
.ml-video-end-card{display:grid;gap:8px;width:100%;max-width:34rem;margin:auto;text-align:center}
.ml-lesson .ml-video-end h2{font-family:"Onest",sans-serif;font-size:clamp(1.2rem,2.5vw,1.8rem);font-weight:800;line-height:1.2;color:var(--ink)}
.ml-video-end p{font-size:.875rem;line-height:1.35;color:var(--body)}
.ml-video-end .mentor-runtime{white-space:nowrap}
.ml-lesson .ml-video-end :is(a,button){display:flex;align-items:center;justify-content:center;position:static;width:100%;min-height:44px;height:auto;margin:0;padding:10px 14px;border:1px solid var(--ink);border-radius:var(--r-sm);font:700 .875rem/1.3 "Manrope",system-ui,sans-serif;text-decoration:none;cursor:pointer}
.ml-lesson .ml-video-end-primary{background:var(--ink);color:#fff}
.ml-lesson .ml-video-end-primary:hover{background:#0c1a1f;color:#fff}
.ml-lesson .ml-video-end-replay{background:transparent;color:var(--ink)}
.ml-lesson .ml-video-end-replay:hover{background:var(--paper-2)}
body.mentor-brand .ml-lesson .ml-video-end :is(a,button):focus-visible{outline:3px solid var(--ink)!important;outline-offset:3px!important;box-shadow:0 0 0 3px var(--paper)}
/* Certificate (template-parts/certificate.php): printed hidden on the last lesson, certificate.js shows it once every
   lesson is seen. Ink on the brand orange is 6:1; white on it would be 2.5:1. */
.ml-lesson .ml-video-end [hidden]{display:none}
.ml-lesson .ml-video-end-cert{border-color:var(--orange);background:var(--orange);color:var(--ink)}
.ml-lesson .ml-video-end-cert:hover{border-color:var(--orange-400);background:var(--orange-400)}
@media(min-width:700px){
  .ml-lesson .ml-video-end{padding:28px}
  .ml-video-end-card{gap:16px}
  .ml-video-end p{font-size:1.0625rem}
  .ml-lesson .ml-video-end :is(a,button){max-width:22rem;margin-inline:auto;min-height:48px;font-size:1rem}
}

.ml-body{max-width:42rem;margin-top:1.5rem;font-size:1.0625rem;line-height:1.7}
.ml-body::after{content:"";display:block;clear:both}
.ml-lesson .ml-body p{margin:0 0 1.1em;text-wrap:pretty}
.ml-lesson .ml-body :is(h2,h3,h4){margin:1.6em 0 .5em;font-weight:700;line-height:1.2}
.ml-lesson .ml-body h2{font-size:1.4rem}
.ml-lesson .ml-body h3{font-size:1.2rem}
.ml-lesson .ml-body h4{font-size:1.05rem}
.ml-lesson .ml-body :is(ul,ol){margin:0 0 1.1em;padding-left:1.4em}
.ml-lesson .ml-body ul{list-style:disc}
.ml-lesson .ml-body ol{list-style:decimal}
.ml-lesson .ml-body li{margin:.3em 0}
.ml-lesson .ml-body li::marker{color:var(--orange-600)}
/* --orange-600 is 3.2:1 on white: link text takes --orange-text (5.5:1), the brand orange stays in the underline */
.ml-lesson .ml-body a{color:var(--orange-text);text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:.08em;text-underline-offset:.18em}
.ml-lesson .ml-body a:hover{color:var(--orange-text);text-decoration-thickness:.16em}
.ml-lesson .ml-body :is(img,video){max-width:100%;height:auto;border-radius:var(--r-sm)}
.ml-lesson .ml-body iframe{max-width:100%;border:0}
.ml-lesson .ml-body > :last-child{margin-bottom:0}

.ml-files{max-width:42rem;margin-top:2rem}
.ml-lesson .ml-h2{font-weight:700;font-size:1.2rem;line-height:1.25}
.ml-files ul{display:grid;gap:.6rem;margin-top:.85rem}
.ml-lesson .ml-file{display:flex;align-items:center;gap:.85rem;min-height:64px;padding:.7rem .9rem;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--ink);text-decoration:none;transition:border-color .2s,background .2s}
.ml-lesson .ml-file:hover{border-color:var(--orange);background:var(--orange-50);color:var(--ink)}
.ml-file-ic{font-size:1.7rem;color:var(--orange-600)}
.ml-file-tx{flex:1 1 auto;min-width:0}
.ml-file-t{display:block;font-weight:700;font-size:1rem;line-height:1.3}
.ml-file-m{display:block;margin-top:.15rem;font-size:.84rem;font-weight:600;line-height:1.3;color:var(--body)}
.ml-file-go{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--paper-2);font-size:1.2rem;color:var(--ink)}
.ml-file:hover .ml-file-go{background:#fff}

/* "Поділитися уроком" (template-parts/share-page.php): the component is styled in theme-brand.css, here only its place */
.ml-lesson .mi-share{max-width:42rem;margin-top:2rem}

/* ---------- Next / previous: whole blocks are the tap targets ---------- */
.ml-nav{display:grid;gap:.75rem;max-width:42rem;margin-top:2.25rem}
.ml-nav-tx{display:block;flex:1 1 auto;min-width:0}
.ml-nav-dir{display:block;font-size:.84rem;font-weight:700;line-height:1.3}
.ml-nav-title{display:block;margin-top:.2rem;font-family:"Onest",sans-serif;font-weight:700;line-height:1.25}
.ml-lesson .ml-next{display:flex;align-items:center;gap:1rem;min-height:88px;padding:1.1rem 1.25rem;border-radius:var(--r-md);background:var(--ink);color:#fff;text-decoration:none;transition:background .2s}
.ml-lesson .ml-next:hover{background:#0c1a1f;color:#fff}
.ml-next .ml-nav-dir{color:var(--orange-200)}
.ml-next .ml-nav-title{font-size:1.2rem}
.ml-next > iconify-icon{font-size:1.6rem;color:var(--orange-400);transition:translate .3s var(--ease)}
.ml-next:hover > iconify-icon{translate:4px 0}
.ml-lesson .ml-prev{display:flex;align-items:center;gap:.85rem;min-height:64px;padding:.7rem 1.25rem;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;color:var(--ink);text-decoration:none;transition:border-color .2s}
.ml-lesson .ml-prev:hover{border-color:var(--orange);color:var(--ink)}
.ml-prev .ml-nav-dir{color:var(--body)}
.ml-prev .ml-nav-title{font-size:1rem}
.ml-prev > iconify-icon{transform:scaleX(-1);font-size:1.3rem;color:var(--orange-600)}
/* Last lesson. Printed neutral; course-progress.js sets data-ml-end: "rest" = lessons left (the dark block continues
   with the first unseen one, the return link steps back to an outline), "all" = every lesson seen (the warm look). */
.ml-done{padding:1.4rem 1.25rem 1.5rem;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper)}
.ml-done[data-ml-end="all"]{border-color:var(--orange-200);background:var(--orange-50)}
/* the display values of the parts below would win over the hidden attribute */
.ml-lesson .ml-done [hidden]{display:none}
.ml-done-ic{margin-bottom:.5rem;font-size:2.2rem;color:var(--orange-600)}
.ml-lesson .ml-done-title{font-weight:800;font-size:1.45rem;line-height:1.2}
.ml-done p{margin-top:.45rem;font-size:1rem;line-height:1.55}
.ml-done p b{font-weight:800;color:var(--orange-text)}
.ml-done .ml-next{margin-top:1rem}
.ml-lesson .ml-done-link{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;margin-top:1rem;padding:.6rem 1.3rem;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:#fff;font-weight:700;line-height:1.2;text-decoration:none;transition:background .2s,border-color .2s}
.ml-lesson .ml-done-link:hover{border-color:#0c1a1f;background:#0c1a1f;color:#fff}
.ml-done-link iconify-icon{color:var(--orange-400)}
.ml-lesson .ml-done[data-ml-end="rest"] .ml-done-link{border-color:var(--line);background:#fff;color:var(--ink)}
.ml-lesson .ml-done[data-ml-end="rest"] .ml-done-link:hover{border-color:var(--orange);background:#fff;color:var(--ink)}
.ml-done[data-ml-end="rest"] .ml-done-link iconify-icon{color:var(--orange-600)}
/* Certificate button of the "all" state (shown by certificate.js). With it on offer the return link steps back to an
   outline, as in the "rest" state. */
.ml-lesson .ml-done-cert{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;margin:1rem .5rem 0 0;padding:.6rem 1.3rem;border:1px solid var(--orange);border-radius:999px;background:var(--orange);color:var(--ink);font:700 1rem/1.2 "Manrope",system-ui,sans-serif;cursor:pointer;transition:background .2s,border-color .2s}
.ml-lesson .ml-done-cert:hover{border-color:var(--orange-400);background:var(--orange-400)}
.ml-done-cert iconify-icon{font-size:1.2rem}
.ml-lesson .ml-done-cert:not([hidden]) ~ .ml-done-link{border-color:var(--line);background:#fff;color:var(--ink)}
.ml-lesson .ml-done-cert:not([hidden]) ~ .ml-done-link:hover{border-color:var(--orange);background:#fff;color:var(--ink)}
.ml-done-cert:not([hidden]) ~ .ml-done-link iconify-icon{color:var(--orange-600)}

/* ---------- Course contents: folded on phones, a side column on wide screens ---------- */
.ml-side{margin:2.25rem 0 clamp(3rem,8vw,5rem);min-width:0}
.ml-toc{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;overflow:hidden}
/* summary holds the heading itself (no wrapper: only phrasing and heading content is valid there); the caret spans both text rows */
.ml-toc > summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:center;align-items:center;column-gap:1rem;min-height:64px;padding:.8rem 1.1rem;list-style:none;cursor:pointer}
.ml-toc > summary::-webkit-details-marker{display:none}
.ml-toc > summary:hover{background:var(--paper)}
.ml-toc > summary:focus-visible{outline:3px solid var(--orange-600);outline-offset:-3px}
.ml-lesson .ml-toc-title{grid-column:1;font-weight:700;font-size:1.1rem;line-height:1.25}
.ml-toc-progress{display:block;grid-column:1;margin-top:.2rem;font-size:.86rem;font-weight:600;line-height:1.3;color:var(--body)}
.ml-toc-progress[hidden]{display:none}
.ml-toc-progress b{color:var(--orange-text);font-weight:800}
.ml-toc-caret{grid-column:2;grid-row:1 / span 2;font-size:1.25rem;color:var(--body);transition:rotate .25s}
.ml-toc[open] .ml-toc-caret{rotate:180deg}
.ml-toc-list{position:relative;border-top:1px solid var(--line);padding-bottom:.4rem}
.ml-lesson .ml-toc-mod{padding:1rem 1.1rem .35rem;font-weight:700;font-size:.82rem;line-height:1.3;color:var(--body)!important;letter-spacing:0}
.ml-lesson .ml-toc-link{display:flex;align-items:flex-start;gap:.65rem;min-height:48px;padding:.75rem 1.1rem;color:var(--ink-soft);font-size:.95rem;font-weight:600;line-height:1.35;text-decoration:none}
.ml-lesson .ml-toc-link:hover{background:var(--paper);color:var(--ink)}
.ml-toc-ic{margin-top:.08rem;font-size:1.3rem;color:var(--muted)}
.ml-toc-link.is-seen .ml-toc-ic{color:var(--ink-soft)}
.ml-lesson .ml-toc-link.is-current{background:var(--orange-50);box-shadow:inset 3px 0 0 var(--orange-600);color:var(--ink);font-weight:800}
.ml-toc-link.is-current .ml-toc-ic{color:var(--orange-600)}
/* the list clips an outer focus ring (overflow) */
body.mentor-brand .ml-lesson .ml-toc-link:focus-visible{outline-offset:-3px!important}

@media(min-width:700px){
  .ml-head{padding:.9rem 0 1.75rem}
  .ml-main{padding-top:2rem}
  .ml-video{margin-inline:0;border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-soft)}
  .ml-body{font-size:1.125rem}
}
@media(min-width:1024px){
  .ml-grid{display:grid;grid-template-columns:minmax(0,1fr) 22.5rem;gap:clamp(2rem,4vw,3.5rem);align-items:start}
  .ml-main{padding-bottom:clamp(3.5rem,7vw,5.5rem)}
  .ml-side{position:sticky;top:var(--ml-sticky);margin:2rem 0}
  .ml-toc[open] .ml-toc-list{max-height:calc(100vh - var(--ml-sticky) - 7.5rem);overflow-y:auto;overscroll-behavior:contain}
}

/* Video runtime is secondary to the lesson title, including in the narrow TOC. */
.ml-toc-content{min-width:0;overflow-wrap:break-word}
.ml-toc-content .mentor-runtime{display:block;margin-top:.25rem;color:var(--body);font-size:.8rem;font-weight:500;white-space:nowrap}
.ml-count .mentor-runtime{white-space:nowrap}