/* Pro Dive self-hosted video section (data/static/site-video.js). Design tokens from scripts/lib/layout.mjs. */
.vid{margin:3rem 0 1rem;scroll-margin-top:1rem}
.vid-wrap{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(16rem,1fr);gap:1.5rem;align-items:start}
.vid-player{position:relative;background:var(--abyss,#0a1826);border-radius:10px;overflow:hidden;aspect-ratio:16/9;box-shadow:0 14px 34px rgba(10,24,38,.28)}
.vid-player video{position:absolute;inset:0;width:100%;height:100%;display:block;background:#0a1826;object-fit:contain}
.vid-play{position:absolute;inset:0;margin:auto;width:5.5rem;height:5.5rem;border:0;border-radius:50%;cursor:pointer;
  background:var(--brand,#d82731);box-shadow:0 8px 30px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;transition:transform .15s}
.vid-play:hover,.vid-play:focus-visible{transform:scale(1.07)}
.vid-play:focus-visible{outline:3px solid #fff;outline-offset:3px}
.vid-play span{display:block;width:0;height:0;margin-left:.45rem;border-style:solid;border-width:1.1rem 0 1.1rem 1.8rem;border-color:transparent transparent transparent #fff}
.vid.playing .vid-play{display:none}
/* word-by-word captions (site-video.js drawCc) */
.vid-player{container-type:inline-size}
.vid-cc{position:absolute;left:50%;bottom:17%;transform:translateX(-50%);z-index:1;width:max-content;max-width:88%;text-align:center;pointer-events:none;
  font-family:var(--display,"Barlow Condensed",sans-serif);font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1.15;
  font-size:clamp(1.1rem,4.4cqw,2.6rem);color:#fff;opacity:0;transition:opacity .12s;
  text-shadow:0 0 .12em #0a1826,0 .06em .2em rgba(0,0,0,.9),0 0 .5em rgba(10,24,38,.6)}
.vid-cc.on{opacity:1}
.vid-cc span{display:inline-block;padding:0 .14em;border-radius:.16em;transition:background-color .08s,transform .08s}
.vid-cc span.now{background:var(--brand,#d82731);text-shadow:none;transform:scale(1.08)}
.vid-cc[hidden]{display:none}
.vid-sound{display:none;position:absolute;right:.75rem;top:.75rem;z-index:2;border:0;border-radius:999px;cursor:pointer;
  padding:.5rem .95rem;background:rgba(10,24,38,.82);color:#fff;font:600 .95rem/1 system-ui,-apple-system,sans-serif;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.vid-sound:hover,.vid-sound:focus-visible{background:var(--brand,#d82731)}
.vid-sound:focus-visible{outline:3px solid #fff;outline-offset:2px}
.vid.auto .vid-sound{display:inline-flex;gap:.4rem;align-items:center}
.vid-side{background:var(--navy,#102c47);color:#fff;border-radius:10px;padding:1.25rem 1.25rem 1rem;border-top:6px solid var(--brand,#d82731)}
.vid-k{margin:0 0 .35rem;font-family:var(--display,"Barlow Condensed",sans-serif);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#b9d2e6;font-size:.95rem}
.vid-side h2{margin:0 0 .9rem;color:#fff;font-family:var(--display,"Barlow Condensed",sans-serif);text-transform:uppercase;font-size:clamp(1.6rem,2.4vw,2.1rem);line-height:1}
.vid-ch{list-style:none;margin:0;padding:0;counter-reset:ch}
.vid-ch li{margin:0}
.vid-ch button{all:unset;box-sizing:border-box;display:flex;gap:.8rem;align-items:baseline;width:100%;padding:.5rem .6rem;border-radius:6px;cursor:pointer;
  color:#e6eef6;font-size:1rem;line-height:1.3}
.vid-ch button:hover{background:rgba(255,255,255,.08)}
.vid-ch button:focus-visible{outline:2px solid #fff;outline-offset:1px}
.vid-ch .t{flex:none;min-width:2.9rem;font-family:var(--display,"Barlow Condensed",sans-serif);font-weight:700;color:#5bc4dd;font-variant-numeric:tabular-nums}
.vid-ch button.on{background:var(--brand,#d82731);color:#fff}
.vid-ch button.on .t{color:#fff}
.vid-yt{display:inline-block;margin-top:.8rem;color:#b9d2e6;font-size:.9rem}
.vid-yt:hover{color:#fff}
@media (max-width:860px){
  .vid-wrap{grid-template-columns:1fr;gap:1rem}
  .vid-player{border-radius:8px}
  .vid-play{width:4.5rem;height:4.5rem}
  .vid-ch{max-height:none}
}
/* Desktop: the side column is exactly as tall as the 16:9 player. The row is
   stretched, and the side's contents are absolutely positioned so they add no
   height of their own; the chapter list fills what's left and scrolls. */
@media (min-width:861px){
  .vid-wrap{align-items:stretch}
  .vid-side{position:relative;min-height:0}
  .vid-side-in{position:absolute;inset:1.25rem 1.25rem 1rem;display:flex;flex-direction:column;overflow:auto}
  .vid-side-in h2{flex:none}
  .vid-ch{flex:1 1 auto;min-height:0;overflow:auto}
  .vid-note,.vid-yt{flex:none}
}

.vid-note{margin:14px 0 0;font-size:.82rem;line-height:1.4;opacity:.72}