/* job-video.css: a click-to-play YouTube video on a job page (Abhi, 2026-10-04: the
   Light Vehicle Driver guide to recording a driving video). Loaded only by pages
   build-jobs.py renders with a "video" entry. The thumbnail is self-hosted, so nothing
   is fetched from YouTube until the candidate presses play (job-video.js). */

.yt-facade { position: relative; margin: 1.2rem 0 1rem; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--ink); border-radius: var(--radius); }
.yt-facade img, .yt-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-facade img { object-fit: cover; transition: transform .5s var(--ease-out); }
.yt-link { display: block; position: absolute; inset: 0; }
.yt-link:hover img { transform: scale(1.02); }
.yt-link:focus-visible { outline: 3px solid var(--brass-2); outline-offset: -3px; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px;
  display: grid; place-items: center; border-radius: 50%; background: var(--brass-2);
  box-shadow: 0 6px 24px rgba(9,19,33,.45); transition: transform .3s var(--ease-out); }
.yt-play svg { width: 30px; height: 30px; margin-left: 5px; fill: var(--ink); }
.yt-link:hover .yt-play { transform: scale(1.06); }
/* smaller on a phone, where 76px covers the title printed on the thumbnail */
@media (max-width: 560px) {
  .yt-play { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
  .yt-play svg { width: 22px; height: 22px; margin-left: 3px; }
}
/* The "send your video" button sits inside .prose, whose link colour (brass on green)
   would make it unreadable; site.css carries this exception for the other buttons only. */
.prose a.btn-wa, .prose a.btn-wa:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .yt-facade img, .yt-play { transition: none; }
  .yt-link:hover img, .yt-link:hover .yt-play { transform: none; }
}