/* Player's expanded information uses the existing B palette, type and controls. */
.page-player .detail-story-body--media {
  align-items:start;
}

.player-page-nav {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 28px;
  margin-top:20px;
}

.player-page-nav a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:14px;
  font-weight:550;
  text-decoration:underline;
  text-underline-offset:4px;
}

.player-gallery {
  padding-block:40px 64px;
  scroll-margin-top:24px;
}

.player-gallery-intro {
  max-width:760px;
  margin-bottom:36px;
}

.player-gallery-intro p {
  margin-top:20px;
  max-width:65ch;
}

.player-screens {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px 32px;
}

.player-screen {
  min-width:0;
}

.player-screen-media {
  display:flex;
  justify-content:center;
  align-items:center;
  padding:32px 24px;
  background:var(--player-field);
  border-radius:16px;
}

.player-screen-media img {
  width:100%;
  max-width:235px;
  height:auto;
}

.player-screen figcaption {
  padding-top:24px;
}

.player-screen h3 {
  font-size:20px;
  margin-bottom:12px;
}

.player-screen p {
  font-size:14px;
  line-height:1.85;
  max-width:65ch;
}

.player-screen .media-action {
  justify-content:flex-start;
  text-align:left;
  margin-top:8px;
}

.player-screen--wide {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:40px;
  align-items:center;
  padding-block:8px;
}

.player-screen--wide .player-screen-media {
  order:1;
}

.player-screen--wide img {
  max-width:none;
}

.player-screen--wide figcaption {
  padding-top:0;
}

.player-help {
  display:flex;
  flex-wrap:wrap;
  gap:12px 28px;
  padding-top:24px;
}

@media(max-width:768px) {
  .player-screens { gap:32px 20px; }
  .player-screen-media { padding:24px 16px; }
  .player-screen--wide { grid-template-columns:minmax(0,1fr); gap:24px; }
  .player-screen--wide .player-screen-media { order:0; }
}

@media(max-width:600px) {
  .player-gallery { padding-block:24px 36px; }
  .player-screens { grid-template-columns:minmax(0,1fr); gap:36px; }
  .player-screen-media { padding:32px 24px; }
  .player-screen figcaption { padding-top:20px; }
  .player-screen--wide figcaption { padding-top:0; }
  .player-page-nav { column-gap:20px; }
}