/* ==========================================================================
   PAGE: VSL / Training
   Self-contained — depends only on tokens.css, not hero.css.
   ========================================================================== */

.vsl {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--sp-6) var(--sp-24);
  background: var(--bg-base);
  min-height: 100vh;
}

/* --- Atmosphere ----------------------------------------------------------- */
.vsl__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.vsl__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 50% at 50% -5%, rgba(27, 110, 243, 0.18) 0%,
                                        rgba(27, 110, 243, 0) 68%),
    radial-gradient(45% 35% at 50% 48%, rgba(33, 168, 242, 0.07) 0%,
                                        rgba(33, 168, 242, 0) 72%);
}
.vsl__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.045;
  mix-blend-mode: overlay;
}

/* --- Brand bar ------------------------------------------------------------ */
.vsl__brand {
  display: flex;
  justify-content: center;
  margin-bottom: var(--sp-16);
}
.vsl__logo {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-decoration: none;
  line-height: 1;
}
.vsl__logo span {
  display: block;
  font-size: 0.5em;
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: var(--sp-1);
}

/* --- Headline -------------------------------------------------------------
   160 characters. 40ch measure lands it on four lines at 40px — any wider and
   the eye loses the line return on a centred block.
   ------------------------------------------------------------------------- */
.vsl__title {
  max-width: 40ch;
  margin: 0 auto var(--sp-6);
  text-align: center;
  text-wrap: balance;
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 3vw, 2.5rem);
  font-weight: var(--fw-bold);
  line-height: 1.16;
  letter-spacing: -0.018em;
  color: var(--text-primary);
}
/* Core promise. Colour only, no plate — a tinted plate spanning four lines of
   a centred headline fragments badly. Delete the span to remove. */
.vsl__title em {
  font-style: normal;
  color: var(--accent-hover);
}

/* --- Subhead -------------------------------------------------------------- */
.vsl__sub {
  max-width: 64ch;
  margin: 0 auto var(--sp-16);
  text-align: center;
  text-wrap: pretty;
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--text-body);
}

/* --- Video ---------------------------------------------------------------- */
.vsl__media {
  max-width: 920px;
  margin: 0 auto var(--sp-12);
}
.vsl__plate {
  padding: 5px;
  border-radius: calc(var(--r-2xl) + 5px);
  background: rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-raised);
}
.vsl__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  padding: 0;
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: #000 center / cover no-repeat;
  cursor: pointer;
}
.vsl__frame:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Embedded player fills the frame once swapped in */
.vsl__frame iframe,
.vsl__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.vsl__play {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: #FFFFFF;
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.5);
  transition: scale var(--dur-base) var(--ease-out);
}
.vsl__frame:hover .vsl__play { scale: 1.06; }
.vsl__play svg { width: 30px; height: 30px; fill: var(--accent); margin-left: 5px; }

/* Runtime badge — mirrors the "12-minute training" promise in the subhead */
.vsl__runtime {
  position: absolute;
  right: var(--sp-4);
  bottom: var(--sp-4);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

/* --- CTA ------------------------------------------------------------------
   Only action on the page, so it runs larger than the standard button.
   ------------------------------------------------------------------------- */
.vsl__actions { text-align: center; }

.vsl__cta {
  font-size: var(--fs-lg);
  padding: var(--sp-5) var(--sp-10);
  border-radius: var(--r-full);
  box-shadow:
    0 0 0 1px var(--border-medium),
    0 10px 30px rgba(27, 110, 243, 0.40);
}
.vsl__cta:hover {
  box-shadow:
    0 0 0 1px var(--border-strong),
    0 12px 38px rgba(27, 110, 243, 0.52);
}
.vsl__cta svg { width: 18px; height: 18px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .vsl          { padding-block: var(--sp-5) var(--sp-20); }
  .vsl__brand   { margin-bottom: var(--sp-10); }
  .vsl__title   { max-width: 26ch; }
  .vsl__sub     { margin-bottom: var(--sp-10); }
  .vsl__media   { margin-bottom: var(--sp-10); }
  .vsl__play    { width: 64px; height: 64px; }
  .vsl__play svg { width: 22px; height: 22px; }
}

@media (max-width: 520px) {
  .vsl__cta {
    font-size: var(--fs-sm);
    padding: var(--sp-4) var(--sp-6);
    white-space: normal;
    max-width: 100%;
    line-height: 1.3;
  }
}