/* Videos page. Builds on site.css; the page is generated by tools/build_videos.py. */

.vp-hero { position: relative; padding: calc(var(--nav-h) + clamp(48px, 8vw, 96px)) 0 clamp(20px, 3vw, 36px); overflow: clip; }
.vp-hero .hero-bg { opacity: .85; }
.vp-hero .wrap { position: relative; }
.vp-hero h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 760; letter-spacing: -0.035em; margin: 14px 0 16px; max-width: 18ch; text-wrap: balance; }
.vp-hero .lede { max-width: 60ch; }

.vp-list { padding-bottom: var(--sec-y); }
.vp-notice { display: flex; gap: 12px; align-items: flex-start; max-width: 78ch; margin: 0 0 clamp(24px, 3vw, 36px); padding: 12px 16px;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--muted); font-size: 0.9rem; line-height: 1.55; }
.vp-notice svg { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--navy); stroke-width: 1.8; stroke-linejoin: round; }

/* The tutorial parts; .vp-parts below sets four across inside the series frame. */
.vp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(20px, 2.4vw, 32px); }
.vc { display: flex; flex-direction: column; min-width: 0; scroll-margin-top: calc(var(--nav-h) + 16px); }
.vc-thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow); cursor: pointer; font: inherit; color: inherit; }
.vc-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.vc-thumb:not(.soon):hover img, .vc-thumb:focus-visible img { transform: scale(1.03); }
.vc-thumb:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.vc-thumb.soon { cursor: default; }
.vc-thumb.soon img { filter: saturate(.75); }

.vc-num { position: absolute; left: 12px; top: 12px; padding: 3px 9px; border-radius: 999px; font-size: 0.74rem; font-weight: 750; letter-spacing: .06em;
  font-variant-numeric: tabular-nums; color: white; background: color-mix(in srgb, var(--navy) 82%, transparent); }
.vc-play { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, white 92%, transparent); box-shadow: 0 6px 22px -6px rgba(20,32,28,.45); transition: background .25s ease; }
.vc-play svg { width: 24px; height: 24px; margin-left: 3px; fill: var(--navy); }
.vc-thumb:hover .vc-play, .vc-thumb:focus-visible .vc-play { background: white; box-shadow: none; }
/* On hover the play button gets the prism rim and glow of the download buttons (site.css, .btn.ring) instead of
   growing; site.js turns it one and a half times. The gradient sits on the pseudo-elements themselves so the
   animated --grad-angle is read there. The rim reaches 1 px into the white disc and the dark drop shadow goes
   on hover: a rim that only touched the disc let the dark preview show through between the two smoothed
   edges, and the shadow under it darkened the rim's own edges — both made it look pixelated. */
.vc-play::before { content: ""; position: absolute; inset: -3px; border-radius: inherit; padding: 4px; pointer-events: none;
  background: conic-gradient(from var(--grad-angle), var(--green), var(--navy), var(--purple), var(--green));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .25s ease; }
.vc-play::after { content: ""; position: absolute; inset: -20px; padding: 20px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from var(--grad-angle), var(--green), var(--navy), var(--purple), var(--green)) content-box;
  filter: blur(9px);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .25s ease; }
.vc-thumb:hover .vc-play::before, .vc-thumb:focus-visible .vc-play::before { opacity: 1; }
.vc-thumb:hover .vc-play::after, .vc-thumb:focus-visible .vc-play::after { opacity: .8; }
.vc-src, .vc-soon { position: absolute; right: 10px; bottom: 10px; padding: 3px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 650;
  color: white; background: rgba(20, 32, 28, .62); }
.vc-soon { background: color-mix(in srgb, var(--wait) 88%, black); }

.vc-body { padding: 14px 2px 0; }
.vc-body h2, .vc-body h3 { font-size: 1.12rem; font-weight: 740; letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 6px; text-wrap: balance; }
.vc-body p { color: var(--muted); font-size: 0.94rem; line-height: 1.55; }
.vc-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-top: 10px; font-size: 0.84rem; color: var(--faint); }
.vc-meta svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; margin: 0 5px 0 0; }
.vc-out { font-weight: 650; }
.vc-out svg { margin: 0 0 0 5px; }

/* Player. The frame keeps YouTube's minimum viewport of 200 × 200 px even on a narrow phone (it letterboxes);
   nothing is drawn over it — the close button lives in the bar above. As large as the screen allows: as wide
   as the window, but no wider than a 16:9 frame plus the title bar fits its height. YouTube picks the
   resolution from the player's size (a quality cannot be preset any more), so a large player plays sharper. */
.vp-player { --vp-w: min(calc(100vw - 32px), calc((100vh - 120px) * 16 / 9)); width: var(--vp-w); max-width: none; padding: 0; border: 0; border-radius: var(--r-lg); overflow: hidden;
  background: #0b1116; color: #e7edf0; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); }
.vp-player::backdrop { background: rgba(10, 16, 20, .72); }
.vp-player-bar { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; }
.vp-player-bar h2 { color: #e7edf0; flex: 1; min-width: 0; font-size: 0.98rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-close { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; }
.vp-close:hover, .vp-close:focus-visible { background: rgba(255,255,255,.1); }
.vp-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.vp-frame { width: 100%; aspect-ratio: 16 / 9; min-height: 200px; max-height: calc(100vh - 120px); background: black; }
.vp-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* The consent step inside the player: our own preview, dimmed, with the notice and "Load video". It is
   replaced by the YouTube frame, never laid over it. */
.vp-consent { position: relative; width: 100%; height: 100%; display: grid; place-items: center; padding: 16px; overflow: auto; }
.vp-consent-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(3px) brightness(.45); transform: scale(1.04); }
.vp-consent-card { position: relative; max-width: 54ch; padding: clamp(16px, 3vw, 28px); border-radius: var(--r-lg);
  background: rgba(11, 17, 22, .82); border: 1px solid rgba(255,255,255,.14); color: #e7edf0; }
.vp-consent-card h3 { font-size: clamp(1.02rem, 2vw, 1.25rem); font-weight: 720; margin-bottom: 8px; color: #fff; }
.vp-consent-card p { font-size: 0.9rem; line-height: 1.55; color: #c3cfd6; }
.vp-consent-card a { color: #b9e34a; }
.vp-consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; }
.vp-consent-cancel { background: transparent; color: #e7edf0; border-color: rgba(255,255,255,.3); }
.vp-consent-out { font-size: 0.88rem; font-weight: 650; }
/* On a phone the notice is taller than a 16:9 frame: the frame then grows with it instead of cutting it off. */
.vp-frame:has(> .vp-consent) { aspect-ratio: auto; max-height: none; }
.vp-frame > .vp-consent { height: auto; min-height: calc(var(--vp-w) * .5625); overflow: visible; }

/* ------------------------------------------------------------------ product video and tutorial series
   The product video stands in a row of its own; the tutorials below share one frame with a prism spine on top
   and a "Part n of 8" line on every card, so the eight read as one series rather than eight loose videos. */
.vp-feature { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(20px, 3.5vw, 48px); align-items: center;
  margin-bottom: clamp(40px, 6vw, 72px); scroll-margin-top: calc(var(--nav-h) + 16px); }
.vp-feature h2, .vp-series-head h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 760; letter-spacing: -0.025em; line-height: 1.18;
  margin: 8px 0 10px; text-wrap: balance; }
.vp-feature-body > p:not(.eyebrow) { color: var(--muted); max-width: 52ch; }
.vp-feature .vc-meta { margin-top: 16px; font-size: 0.9rem; }
.vp-next { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-weight: 650; font-size: 0.92rem; }
.vp-next svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 860px) { .vp-feature { grid-template-columns: 1fr; } }
.vp-series { position: relative; padding: clamp(20px, 3vw, 36px); border: 1px solid var(--border); border-radius: 26px; background: var(--surface);
  box-shadow: var(--shadow); scroll-margin-top: calc(var(--nav-h) + 16px); overflow: clip; }
.vp-series::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--prism-line); }
.vp-series-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; margin-bottom: clamp(20px, 3vw, 32px); }
.vp-series-head > div > p:not(.eyebrow) { color: var(--muted); max-width: 60ch; }
.vp-series-stats { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 0.88rem; color: var(--muted); white-space: nowrap; }
.vp-series-stats b { color: var(--text); font-weight: 750; font-variant-numeric: tabular-nums; }
.vp-parts { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.vc-part { margin-bottom: 4px; font-size: 0.74rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--green-ink); }
/* In the four-across series the previews are small and carry their own title and part number: a smaller play
   button in the corner instead of the middle, and no "Plays from YouTube" tag (the notice above says it). */
.vp-parts .vc-play { left: auto; top: auto; right: 10px; bottom: 10px; width: 42px; height: 42px; margin: 0; }
.vp-parts .vc-play svg { width: 18px; height: 18px; margin-left: 2px; }
.vp-parts .vc-src { display: none; }