/* DLM Immersive Lab (page-immersive-lab.php). Builds on affiliates.css and government.css. */

/* Hero video: a 21s loop cut from three little-used Pexels clips (free licence,
   no credit required), in this order since 2026-10-21 (Mr. Davis): 8632603
   (learner coached by an instructor, the two women), 7986283 (teen guided by a
   classmate), 7868517 (child steering a robot in a water tank, by Vanessa Loring). The first two are mirrored so the learner sits on
   the right, clear of the headline. The poster is the still shown before
   playback and for reduced motion. */
.vr .aff-hero {
  background: url("../img/vr-hero-poster.webp") center / cover no-repeat, var(--bg-deeper);
  isolation: isolate;
}
.vr-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.vr .aff-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(9, 17, 37, 0.78) 0%, rgba(14, 27, 57, 0.55) 50%, rgba(14, 27, 57, 0.3) 100%);
}
@media (max-width: 900px) {
  .vr .aff-hero::before { background: linear-gradient(180deg, rgba(9, 17, 37, 0.5) 0%, rgba(14, 27, 57, 0.62) 60%, rgba(14, 27, 57, 0.72) 100%); }
  .vr .aff-hero__h, .vr .aff-hero__sub { text-shadow: 0 1px 14px rgba(5, 10, 24, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .vr-hero__video { display: none; }
}

/* The short "practice before consequences" statement, centred */
.vr-why { text-align: center; }
.vr-why .aff-lead { margin-left: auto; margin-right: auto; }

/* Four cards across in the who / practice sections reuse .aff-sell__grid;
   the six "in the box" cards reuse government's three-across grid. */
.vr .gov-cap__grid { margin-top: 1.5rem; }
.vr .aff-sell__grid { margin-top: 1.5rem; }
.vr .aff-step { list-style: none; }

/* QA pass 2026-10-21.
   Phone hero: both buttons sat below the fold at 375x800 (hero 874 px tall).
   Tighter top padding, a smaller headline and no pill row keep the demo
   button inside the first screen. */
@media (max-width: 480px) {
  .vr .aff-hero { padding-top: calc(var(--nav-h) + 1.75rem); padding-bottom: 2.5rem; }
  .vr .aff-hero__h { font-size: 2.1rem; margin-bottom: 0.875rem; }
  .vr .aff-hero__sub { margin-bottom: 1.25rem; }
  .vr .gov-badges { display: none; }
  .vr .aff-hero__ctas .cta { width: 100%; justify-content: center; }
}

/* Designed focus state: gold ring on the navy hero, navy ring on light sections. */
.vr .cta:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; box-shadow: none; }
.vr .aff-hero .cta--gold:focus-visible { outline-color: #fff; }

/* The sticky header is 76 px; without this the anchor jump hides the section's top padding. */
.vr #quote, .vr #included { scroll-margin-top: calc(var(--nav-h) + 0.5rem); }

/* Skip link: off-screen until it has keyboard focus. */
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 1000; padding: 0.75rem 1rem; border-radius: 8px; background: var(--gold); color: #fff; font-weight: 700; text-decoration: none; transition: top var(--dur-fast) var(--ease-out); }
.skip-link:focus { top: 1rem; outline: 3px solid #fff; outline-offset: 2px; }