/* Site video player (js/video-player.js, Plyr 3.8.4 from js/vendor/plyr-3.8.4): Smartico colours on top of
   plyr.css. Cyan (#11ced7) for progress and hover like the MCP drawings, the red CTA colour (#f15851) for the big
   play button in the centre, Lexend Deca for the time. Loaded by partials/video-player-assets.hbs.
   It also holds the video band itself (.sp-video-band: title, 16:9 box, four points), so a band works on pages that
   do not load subpages.css (the MCP overview page). */
/* ------------------------------------------------ the video band */
.sp-video-band { position: relative; z-index: 2; background: #0d1019; color: #fff; padding-block: 6rem; overflow: hidden; }
.sp-video-band_head { max-width: 48rem; margin: 0 auto 2.5rem; text-align: center; display: grid; gap: 1rem; }
.sp-video-band .section_title { color: #fff; }
.sp-video-band .title_sub { margin: 0; color: #c9cee3; opacity: 1; }
.sp-video-band .sp-video { position: relative; width: 100%; max-width: 64rem; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 1rem; overflow: hidden; background: #000; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 2rem 4rem rgba(0, 0, 0, .45); }
.sp-video-band .sp-video video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.sp-video-band .sp-mail_pts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; max-width: 72rem; margin: 2.5rem auto 0; padding: 0; list-style: none; }
.sp-video-band .sp-mail_pt { padding: 1rem 1.125rem; border-radius: .75rem; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); color: #c9cee3; font-size: .9375rem; line-height: 1.5; }
.sp-video-band .sp-mail_pt strong { color: #fff; font-weight: 600; }
@media (max-width: 991px) { .sp-video-band .sp-mail_pts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .sp-video-band { padding-block: 4rem; } }
@media (max-width: 479px) { .sp-video-band .sp-mail_pts { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------ the player */
.sp-video .plyr {
  position: absolute; inset: 0; width: 100%; height: 100%;
  --plyr-color-main: #11ced7;
  --plyr-font-family: "Lexend Deca", sans-serif;
  --plyr-font-size-time: .8125rem;
  --plyr-video-background: #000;
  --plyr-video-control-color: #fff;
  --plyr-video-control-color-hover: #0d1019;
  --plyr-video-control-background-hover: #11ced7;
  --plyr-video-controls-background: linear-gradient(rgba(13, 16, 25, 0), rgba(13, 16, 25, .88));
  --plyr-control-radius: .5rem;
  --plyr-control-icon-size: 18px;
  --plyr-range-thumb-background: #fff;
  --plyr-range-thumb-shadow: 0 0 0 4px rgba(17, 206, 215, .35);
  --plyr-range-fill-background: #11ced7;
  --plyr-video-progress-buffered-background: rgba(255, 255, 255, .28);
  --plyr-tooltip-background: #0d1019;
  --plyr-tooltip-color: #fff;
  --plyr-tooltip-radius: .375rem;
}
.sp-video .plyr video { object-fit: contain; }
.sp-video .plyr__poster { background-size: cover; }

/* the big play button in the centre */
.sp-video .plyr__control--overlaid {
  width: 5.5rem; height: 5.5rem; padding: 0; display: grid; place-items: center;
  background: #f15851; color: #fff; opacity: 1;
  box-shadow: 0 0 0 .75rem rgba(241, 88, 81, .22), 0 1.25rem 3rem rgba(0, 0, 0, .55);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.sp-video .plyr__control--overlaid svg { width: 1.75rem; height: 1.75rem; left: .125rem; }
.sp-video .plyr__control--overlaid:hover,
.sp-video .plyr__control--overlaid:focus-visible {
  background: #f15851; color: #fff;
  transform: translate(-50%, -50%) scale(1.07);
  box-shadow: 0 0 0 1rem rgba(241, 88, 81, .28), 0 1.5rem 3.5rem rgba(0, 0, 0, .6);
}
.sp-video .plyr__control--overlaid:focus-visible { outline: 2px solid #fff; outline-offset: .375rem; }

/* the control bar */
.sp-video .plyr--video .plyr__controls { padding: 2.5rem 1rem .875rem; gap: .25rem; }
.sp-video .plyr__time { font-variant-numeric: tabular-nums; }
.sp-video .plyr__time + .plyr__time::before { color: rgba(255, 255, 255, .6); }

@media (max-width: 479px) {
  .sp-video .plyr__control--overlaid { width: 4rem; height: 4rem; box-shadow: 0 0 0 .5rem rgba(241, 88, 81, .22), 0 1rem 2rem rgba(0, 0, 0, .5); }
  .sp-video .plyr__control--overlaid svg { width: 1.375rem; height: 1.375rem; }
  .sp-video .plyr--video .plyr__controls { padding: 2rem .5rem .5rem; }
}