/* Page — rules emitted only by the video watch template (single-ca-video.php).
   The page opens with the player rather than a hero, so it owns the offset that
   clears the fixed nav. Cream throughout: hero and footer are the site's only
   dark surfaces, and this page has neither.
   Notes: docs/video-module-notes.md */

/* ── Player ── A page-scoped modification of the promo-video component. */
.promo-video.video-watch-player{padding:clamp(7.5rem,12vw,10.5rem) 2.5rem 0}
.video-watch-player .promo-video-wrap{max-width:1200px;border-radius:8px}

/* ── Metadata ── */
.video-watch-meta{background:#faf9f6;padding:2rem 2.5rem 0}
.video-watch-meta-inner{max-width:1200px;margin:0 auto}
.video-watch-title{font-family:var(--display);font-size:clamp(1.6rem,3.2vw,2.6rem);font-weight:500;letter-spacing:.03em;text-transform:uppercase;line-height:1.15;color:#2A2A2A;margin:0 0 .6rem}
.video-watch-details{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin:0 0 1rem}
.video-watch-duration{font-family:var(--body);font-size:.875rem;color:#6b6b6b}
/* The eyebrow convention on cream is #2A2A2A, as .prose-eyebrow: gold-dark is
   the accent for states, not a colour a standalone label can be read in. */
.video-watch-category{font-family:var(--body);font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#2A2A2A}
.video-watch-description{font-family:var(--body);font-size:1rem;line-height:1.6;color:#555;max-width:800px;margin:0}

/* ── Related ── Tighter than the catalog's own grid section. */
.video-grid-section.video-watch-related{padding:3rem 2.5rem}

/* ── Category pills ── */
.video-watch-categories{background:#faf9f6;padding:0 2.5rem 4rem}
.video-watch-categories-inner{max-width:1400px;margin:0 auto}
.video-watch-categories-label{display:block;font-family:var(--body);font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6b6b6b;margin:0 0 12px}
.video-watch-category-pills{display:flex;flex-wrap:wrap;gap:8px}
.video-watch-pill{display:inline-block;padding:6px 16px;font-family:var(--body);font-size:.8125rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#2A2A2A;background:rgba(0,0,0,.05);border-radius:20px;transition:background .2s ease,color .2s ease}
/* Hover is the gold-dark accent, over a wash that keeps the label legible. */
.video-watch-pill:hover{background:rgba(230,173,31,.18)}
/* Dark focus ring for the light surface. */
.video-watch-categories :focus-visible,
.video-watch-meta :focus-visible{outline-color:#0a0a0a}

@media(max-width:768px){
  .promo-video.video-watch-player{padding:clamp(6.5rem,17vw,8rem) 1.5rem 0}
  .video-watch-meta{padding:1.5rem 1.5rem 0}
  .video-grid-section.video-watch-related{padding:2.25rem 1.5rem}
  .video-watch-categories{padding:0 1.5rem 3rem}
}

@media(max-width:480px){
  .promo-video.video-watch-player{padding-left:1.15rem;padding-right:1.15rem}
  .video-watch-player .promo-video-wrap{border-radius:4px}
  .video-watch-meta{padding-left:1.15rem;padding-right:1.15rem}
  .video-grid-section.video-watch-related{padding-left:1.15rem;padding-right:1.15rem}
  .video-watch-categories{padding-left:1.15rem;padding-right:1.15rem}
}