/* VLPremier Pro · Learn module (Phase 004): tutorial detail page + small additions to the approved tutorials / help pages.
   Loaded after tutorials.css and/or help.css; reuses their components (.tut, .path-list, .crop, .art-meta, .related, .contact-box). */

/* /tutorials/: lesson cards and the learning-path button are links now (same look as the approved buttons) */
.tut a.watch { display: inline-flex; align-items: center; text-decoration: none; }

/* ============ TUTORIAL DETAIL ============ */
.tl-head { padding-top: 24px; }
.tl-head h1 { max-width: 22ch; font-size: clamp(34px, 3.8vw, 52px); }
.tl-head .lede { margin-top: 18px; max-width: 60ch; }
.tl-head .art-meta .badge { height: 26px; }

.tl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 4vw, 56px); align-items: start; padding-top: 32px; padding-bottom: var(--section-y); }
.tl-main { min-width: 0; }
.tl-player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-panel); background: var(--panel); }
.tl-player video, .tl-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.tl-player > .crop, .tl-player > .lic { position: absolute; inset: 0; aspect-ratio: auto; opacity: .35; }
.tl-player > .lic { justify-items: stretch; align-content: center; padding: 12% 18%; font-size: 14px; }
.tl-soon { position: absolute; inset: auto 0 0; display: grid; gap: 10px; justify-items: start; padding: clamp(20px, 3vw, 32px); background: linear-gradient(to top, rgb(9 13 23 / .94), rgb(9 13 23 / 0)); }
.tl-soon b { font: 600 clamp(18px, 1.8vw, 22px)/1.3 var(--font-display); }
.tl-soon p { max-width: 56ch; font-size: var(--fs-sm); color: var(--muted); }

.tl-text { margin-top: 40px; max-width: 68ch; }
.tl-text > * + * { margin-top: 16px; }
.tl-text h2 { margin-top: 40px; font-size: clamp(22px, 2.2vw, 28px); }
.tl-text h3 { margin-top: 28px; font-size: 20px; }
.tl-text p, .tl-text li { color: var(--muted); }
.tl-text b, .tl-text strong { color: var(--text); font-weight: 600; }
.tl-text a:not([class]) { color: var(--accent-bright); text-underline-offset: 3px; }
.tl-text ul, .tl-text ol { padding-left: 22px; }
.tl-text li + li { margin-top: 8px; }
.tl-text img, .tl-text video { max-width: 100%; height: auto; border-radius: var(--r-ctl); }
.tl-transcript { margin-top: 40px; max-width: 68ch; }
.tl-transcript .ans > * + * { margin-top: 12px; }

.tl-side { position: sticky; top: calc(var(--nav-h) + 32px); display: grid; gap: 20px; }
.tl-box { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.tl-box .side-h { margin-bottom: 4px; }
.tl-box .path-list { padding: 0; }
.tl-box .path-list li:last-child { border-bottom: 0; }
.tl-seek { padding: 0; border: 0; background: none; color: var(--text); font: 600 var(--fs-sm)/1.4 var(--font-display); text-align: left; cursor: pointer; transition: color var(--t-tap); }
.tl-seek:hover, .tl-seek:focus-visible { color: var(--accent-bright); }
.tl-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 12px 0 0; font-size: 14px; }
.tl-facts dt { font: 500 var(--fs-meta)/1.6 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.tl-facts dd { margin: 0; }
.tl-more { padding-bottom: var(--section-y); }
.tl-more h2 { margin-bottom: 24px; font-size: clamp(24px, 2.4vw, 30px); }
.tl-more .lib > .tut:first-child { grid-column: auto; grid-template-columns: none; grid-template-rows: auto 1fr; }
.tl-more .lib > .tut:first-child .thumb { border-right: 0; border-bottom: 1px solid var(--line); }
.tl-more .lib > .tut:first-child .body { padding: 16px 18px 18px; }
.tl-more .lib > .tut:first-child h3 { font-size: 18px; }
.tl-related { margin-top: 48px; }

/* help article: the helpful vote is a small form now (same look as the approved buttons) */
.helpful.is-done button { opacity: .55; pointer-events: none; }
.helpful .form-msg { flex-basis: 100%; margin: 0; font-size: 14px; color: var(--muted); }
.callout.soon { margin-top: 24px; }

@media (max-width: 1023px) {
  .tl-layout { grid-template-columns: minmax(0, 1fr); }
  .tl-side { position: static; }
}
@media (max-width: 719px) {
  .tl-more .lib > .tut:first-child { grid-template-columns: 128px minmax(0, 1fr); grid-template-rows: auto; }
  .tl-more .lib > .tut:first-child .thumb { border-bottom: 0; border-right: 1px solid var(--line); }
  .tl-more .lib > .tut:first-child .body { padding: 12px 14px; }
  .tl-more .lib > .tut:first-child h3 { font-size: 16px; }
  .tl-soon { position: static; background: none; }
  .tl-player:has(.tl-soon) { aspect-ratio: auto; display: grid; }
  .tl-player:has(.tl-soon) > .crop, .tl-player:has(.tl-soon) > .lic { position: relative; aspect-ratio: 16 / 9; }
  .tl-player:has(.tl-soon) > .lic { padding: 8px 14px; }
}