/* =====================================================================
   Beyond Journey - the client reel, full size (the <dialog>)
   ---------------------------------------------------------------------
   The film over the page: on the home and Golden Journeys heroes after
   a tap on the box (and once more, on its own, after the first close),
   and on /holiday on its own four seconds after arrival (2026-10-10).
   Moved out of css/bj-golden.css so a page without that hero can carry
   the film; the box's own rules stay there. Behaviour: js/bj-reel.js.
   ===================================================================== */

/* the UA centres a modal dialog with margin: auto only while its width is
   its content's - width: auto would stretch it edge to edge */
.gj-reel-dlg { border: 0; padding: 0; margin: auto; background: transparent; max-width: none; max-height: none; width: fit-content; height: fit-content; overflow: visible; }
.gj-reel-dlg::backdrop { background: rgba(10, 16, 32, .86); }
.gj-reel-dlg__video {
  display: block;
  height: min(86vh, 900px);
  max-width: 92vw;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  background: #000;
  object-fit: contain;
}
.gj-reel-dlg__close {
  position: absolute; top: -6px; right: -54px;
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: #fff; color: #17233e; font-size: 16px; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .6);
}
.gj-reel-dlg__close:hover { background: #f5761a; color: #fff; }
@media (max-width: 767px) {
  .gj-reel-dlg__video { height: min(78vh, 78svh); }
  .gj-reel-dlg__close { right: 0; top: -52px; }
}
html.gj-reel-open, html.gj-reel-open body { overflow: hidden; }