/* Tutorials list + tutorial detail (tu-*). Tokens only. */

/* ---- List: ui-grid of ui-card links with a 16:9 thumbnail on top ---- */
.tu-list          { list-style: none; margin: 0; padding: 0; }
.tu-list > li     { display: flex; }
.tu-card          { flex: 1; padding: 0; overflow: hidden; gap: var(--space-3); color: var(--color-text); text-decoration: none; }
.tu-card > :not(.tu-card__thumb) { padding-inline: var(--space-5); }
.tu-card > :last-child { padding-bottom: var(--space-5); }
.tu-card__thumb   { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--color-surface-2); }
.tu-card__thumb--none { display: flex; align-items: center; justify-content: center; color: var(--color-accent); font-size: var(--font-size-xxl); }

/* ---- Detail ---- */
.tu-back          { align-self: flex-start; }
.tu-title         { margin-bottom: 0; }
.tu-video         { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-2); }
.tu-video iframe  { display: block; width: 100%; height: 100%; border: 0; }

/* Description HTML from the tutorials table. Existing rows use the legacy journey markup:
   .journey / .user-journey > h1 + .step > .step-number + .step-content (h2, p, ul). */
.tu-body .journey, .tu-body .user-journey { display: flex; flex-direction: column; gap: var(--space-4); }
.tu-body .step    { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-1); }
.tu-body .step-number { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: calc(var(--space-6) + var(--space-2)); aspect-ratio: 1; border-radius: 50%;
                    background: var(--color-accent-soft); color: var(--color-accent); font-weight: var(--font-weight-bold); }
.tu-body .step-content { min-width: 0; }
.tu-body .step-content > * + * { margin-top: var(--space-2); }
.tu-body .step-content h2 { margin-top: 0; font-size: var(--font-size-lg); }
/* The page title is the h1; headings inside the guide (existing rows start with their own h1) sit one step below it. */
.tu-body h1       { font-size: var(--font-size-xl); margin-top: 0; }
.tu-body img      { max-width: 100%; height: auto; border-radius: var(--radius-sm); }