/* The shared "How it works" lightbox and its thumbnails (Pages/Shared/_HowItWorksVideo.cshtml, _HowItWorksThumb.cshtml,
   hiw-video.js). Desktop: the 16:9 cut, wide (at least 720px where the screen allows). Portrait and phones: the 9:16 cut
   (.is-tall), sized so the button under it stays on screen. */

/* The page behind doesn't scroll while a video is open */
html.hiw-locked { overflow: hidden; }

.hiw-dialog {
  /* As wide as fits, and short enough that the ✕ above, the video and the button under it are all on screen */
  width: min(94vw, 980px, calc((100dvh - 180px) * 16 / 9)); max-width: none; max-height: none;
  padding: 0; border: 0; background: transparent; overflow: visible;
  margin: auto; /* centered on screen: the site's reset zeroes every margin, the browser's dialog centering with it */
}
.hiw-dialog.is-tall { width: min(92vw, calc((100dvh - 150px) * 9 / 16)); }
.hiw-dialog::backdrop { background: rgba(10, 12, 18, .82); }
.hiw-dialog[open] { animation: hiw-in .18s ease-out; }
@keyframes hiw-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hiw-dialog[open] { animation: none; } }

.hiw-box { position: relative; }
.hiw-frame { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: #000; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7); }
.hiw-dialog.is-tall .hiw-frame { aspect-ratio: 9 / 16; }
.hiw-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }

/* ✕: above the video's top-right corner, clear of its controls; a big target */
.hiw-close {
  position: absolute; top: -52px; right: 0; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, .14); color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
  transition: background .13s;
}
.hiw-close:hover { background: rgba(255, 255, 255, .26); }
.hiw-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* The real button under the video; when the video ends, it draws the eye (the one in the video can't be clicked) */
.hiw-cta { display: flex; justify-content: center; margin-top: 16px; }
.hiw-dialog.is-ended .hiw-cta > * { animation: hiw-nudge 1.4s ease-in-out 2; }
@keyframes hiw-nudge { 0%, 100% { transform: none; } 50% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(255, 255, 255, .18); } }
@media (prefers-reduced-motion: reduce) { .hiw-dialog.is-ended .hiw-cta > * { animation: none; } }

/* A thumbnail that opens a lightbox: the poster, a play button, and "label · 0:33" */
.hiw-thumb {
  appearance: none; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.hiw-thumb-img {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: #000;
  box-shadow: 0 18px 44px -22px rgba(0, 0, 0, .55);
}
.hiw-thumb-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.hiw-thumb:hover .hiw-thumb-img img { transform: scale(1.03); }
.hiw-thumb-play {
  /* Bottom-left, off the poster's headline (the video's own title sits in the middle) */
  position: absolute; left: 20px; bottom: 20px; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; background: var(--brand-primary); color: #fff;
  box-shadow: 0 10px 30px -6px rgba(0, 0, 0, .55); transition: transform .15s ease;
}
.hiw-thumb-play svg { margin-left: 3px; }
.hiw-thumb:hover .hiw-thumb-play { transform: scale(1.08); }
.hiw-thumb:focus-visible { outline: none; }
.hiw-thumb:focus-visible .hiw-thumb-img { outline: 3px solid var(--brand-primary); outline-offset: 3px; }
.hiw-thumb-label { display: block; margin-top: 10px; font-weight: 800; font-size: 15px; }
.hiw-thumb-len { font-weight: 600; opacity: .7; }

@media (max-width: 767px) {
  .hiw-close { top: -50px; }
  .hiw-thumb-play { left: 14px; bottom: 14px; width: 52px; height: 52px; }
}