/* The purple strip takes the first 9.5% of the stage. Align all page content
   with the centre of the light panel, including cards, text and players. */
@media (max-width: 900px) {
  .stage {
    padding-left: 14.5%;
    padding-right: 5%;
  }

  .stage > .view .player-shell,
  .stage > .view .film-detail .player-shell,
  .stage > .view .film-detail.has-film .player-shell {
    width: min(720px, 100%);
    margin-inline: auto;
    transform: none;
  }

  .stage > .home-view .player-shell.featured-player {
    width: min(610px, 100%);
  }

  .stage > .view .film-copy,
  .stage > .view .activity-intro,
  .stage > .view .film-caption {
    width: min(720px, 100%);
    margin-inline: auto;
    transform: none;
  }

  .intro-bars .bar-a { top: 36%; }
  .intro-bars .bar-b { top: 12%; height: 28%; }
  .intro-bars .bar-c { bottom: 36%; }
  .intro-bars .bar-d { bottom: 12%; height: 28%; }
}

@media (max-width: 540px) and (orientation: portrait) {
  .intro-bars .bar-a { top: 38%; }
  .intro-bars .bar-b { top: 14%; height: 27%; }
  .intro-bars .bar-c { bottom: 38%; }
  .intro-bars .bar-d { bottom: 14%; height: 27%; }

  /* On the home page, let the film and menu determine the page height. */
  .site:has(.home-view:not([hidden])) {
    min-height: 0;
    grid-template-rows: auto auto auto;
  }

  .site:has(.home-view:not([hidden])) .stage {
    padding-bottom: 24px;
  }

  .site:has(.home-view:not([hidden])) .category-nav {
    margin-top: 22px;
  }
}