/* ============================================================
   Celva: /quiz hero with a full-bleed clinic clip
   The hero is the dark sub-hero variant with the graded
   physicians_2 clip behind it. The clip sits in the RIGHT part
   of the band so the patient and physician stay clear of the
   copy; the scrim fades the navy into the picture across the
   seam. lazy-video.js swaps the source in (reduced motion keeps
   the poster and never downloads the clip).
   ============================================================ */
.sub-hero--quiz {
  overflow: hidden;
  min-height: clamp(500px, 58vh, 640px);
  display: flex; align-items: center;
}
.sub-hero--quiz .sub-hero__inner {
  position: relative; z-index: 2; width: 100%;
  grid-template-columns: minmax(0, 520px) 1fr;
}
.sub-hero__bg {
  position: absolute; top: 0; bottom: 0; right: 0; left: 40%;
  width: 60%; height: 100%;
  object-fit: cover; object-position: 44% 42%;
  pointer-events: none;
}
.sub-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg,
    rgb(11, 29, 58) 0%,
    rgb(11, 29, 58) 40%,
    rgba(11, 29, 58, 0.86) 46%,
    rgba(11, 29, 58, 0.34) 56%,
    rgba(11, 29, 58, 0.12) 72%,
    rgba(11, 29, 58, 0.28) 100%);
}
.sub-hero--quiz .sub-hero__lede { color: rgba(255, 255, 255, 0.82); max-width: 46ch; }
.sub-hero--quiz .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.sub-hero--quiz .btn--ghost:hover { color: #fff; border-color: #fff; }

/* Phones and tablets: a cover-fit crop of a 2.39:1 clip on a tall narrow
   hero shows a sixth of the frame, so the two people are always off-centre.
   Instead the clip runs as a full-width band above the copy at an aspect
   wide enough to hold both of them, and the copy sits on plain navy. */
@media (max-width: 1024px) {
  .sub-hero--quiz { display: block; min-height: 0; padding-top: 0; }
  .sub-hero__bg {
    position: relative; display: block; left: 0; height: auto;
    width: calc(100% + 2 * clamp(20px, 4vw, 56px));
    margin: 0 calc(-1 * clamp(20px, 4vw, 56px)) 32px;
    aspect-ratio: 16 / 10;
    object-position: 50% 40%;
  }
  .sub-hero__scrim { display: none; }
}