/* tutorials.css: the videos page (/tutorials/), built by the app's scripts/videos/page.js. */

.video-contents ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; counter-reset: part; }
.video-contents li { counter-increment: part; }
.video-contents a {
  display: inline-block; padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--rule);
  color: var(--accent-ink); font-weight: 600; text-decoration: none;
}
.video-contents a::before { content: counter(part) ". "; }
.video-contents a:hover { border-color: var(--accent); }

.video-part { scroll-margin-top: 80px; }
.video {
  display: grid; gap: 18px; padding: 18px; margin: 0 0 16px; border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow); scroll-margin-top: 80px;
}
@media (min-width: 720px) {
  .video { grid-template-columns: 270px 1fr; align-items: start; }
}
.video-frame video, .video-soon {
  display: block; width: 100%; max-width: 300px; margin: 0 auto; aspect-ratio: 540 / 1110; height: auto;
  border-radius: 18px; background: var(--accent-strong); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.video-soon { display: grid; place-items: center; color: var(--on-dark-soft); font-weight: 600; }
.video-text { display: grid; gap: 8px; align-content: start; }
.video-text .num {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); color: var(--on-dark); font-weight: 800;
}
.video-text h3 { margin: 0; font-size: 1.3rem; }
.video-text p { margin: 0; color: var(--ink-soft); }
.video-text .time { color: var(--accent-ink); font-weight: 600; font-size: 0.95rem; }
.video-text details { margin-top: 6px; }
.video-text summary { cursor: pointer; font-weight: 600; color: var(--accent-ink); }
.video-text ol { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 6px; }