/* journey-responsive.css — Journey layout on phones and wide screens.
   Split from app.module.css; load order in app.html preserves the original cascade. */

@media (max-width: 959px) {
  /* The nav stays on its own white surface under the video, as in the kit;
     the clip ends at the nav rather than running behind a dark bar. */
  body.journey-feed .vcap {
    text-shadow:
      0 1px 5px #10161fd9,
      0 0 20px #10161fbf;
  }

  .reel-check.big.caps {
    min-height: 48px;
    padding: 12px 14px;
  }
}

@media (min-width: 720px) {
  #journeyHeader {
    width: 540px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

@media (min-width: 960px) {
  #journeyHeader {
    width: var(--journey-stage-width);
    left: calc(50% + var(--desktop-centre-shift));
    top: calc(50% - var(--journey-stage-width) * 8 / 9);
    border-radius: 22px 22px 0 0;
  }

  body.journey-feed .vcap {
    top: auto;
    bottom: 87px;
    left: 20px;
    right: 20px;
  }

  body.journey-feed .vcap .f {
    display: none;
  }

  .reel-check {
    bottom: 22px;
  }
}

/* The corgi wordmark has a light canvas, framed as one logo on the navy rail. */