/* Video watch pages (/videos/<slug>/). Additive to layout.css and components.css (the player is styled there). */

/* A compact head, so the video sits in the first screen (1366 x 768 and up); the caption under the video is the
   short description. */
.page-head--video { padding-block: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 2.5vw, 1.5rem); }
.page-head--video .breadcrumb ol { margin-bottom: .25rem; }
.page-head--video .eyebrow { margin-bottom: .5rem; }
.page-head--video h1 { max-width: none; margin-bottom: 0; font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); }
.watch-section { padding-top: clamp(1.25rem, 3vw, 2rem); }

/* The video comes first and stays large; on wide screens it keeps to a readable width. */
.watch-video { max-width: 60rem; }

.watch-body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; max-width: 64rem; margin-top: clamp(2rem, 4vw, 3rem); }
.watch-body > :only-child { grid-column: 1 / -1; }
.watch-body h2 { margin: 0 0 .75rem; }

.video-chapters { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.video-chapters li { border-bottom: 1px solid var(--rule); }
.video-chapters a { display: flex; align-items: baseline; gap: 1rem; min-height: var(--target); padding: .55rem 0; text-decoration: none; }
.video-chapters a:hover span:last-child, .video-chapters a:focus-visible span:last-child { text-decoration: underline; }
.video-chapters .tnum { flex: 0 0 3rem; color: var(--ink-soft); }

.watch-transcript p { margin: 0 0 1rem; color: var(--ink-soft); }
.watch-transcript ol { margin: 0; padding-left: 1.25rem; }
.watch-transcript li + li { margin-top: .6rem; }

.watch-more { list-style: none; display: grid; gap: .25rem; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; }

@media (max-width: 860px) {
  .watch-body { grid-template-columns: minmax(0, 1fr); }
}
/* Phones: the product link is enough; the last crumb repeats the heading (as on the product page). */
@media (max-width: 600px) {
  .page-head--video .breadcrumb li:last-child { display: none; }
}