/* Shared responsive sizing for the live TV, separate slideshow and video shelf. */
.layout > *, #yayin, #separateSlides, .videoShelf, .videoShelfStrip {
  min-width: 0;
  max-width: 100%;
}
#screenBox {
  position: relative;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9;
}
#screenBox > #liveHolder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#screenBox > #showPlayer, #liveHolder > iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  border: 0;
}
#separateSlides > #slidesPlayer {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto !important;
  min-height: 0;
  aspect-ratio: 16 / 9;
}
/* Preserve the selected aspect ratio on older browsers as well. */
@supports not (aspect-ratio: 16 / 9) {
  #screenBox { height: 0 !important; padding-top: 56.25%; }
  #separateSlides { position: relative; padding-bottom: 56.25%; }
  #separateSlides > #slidesPlayer { position: absolute; left: 0; bottom: 0; height: calc(100% - 32px) !important; }
}
@media (max-width: 800px) {
  .layout, .focus .layout { grid-template-columns: minmax(0, 1fr); }
  main { width: 100%; padding-left: 16px; padding-right: 16px; }
  .layout { gap: 20px; }
  .bar { flex-wrap: wrap; padding-left: 16px; padding-right: 16px; }
  .bar > *, .intro > *, .detail > *, .videoShelfHead > * { min-width: 0; }
  .brand { max-width: 100%; overflow-wrap: anywhere; }
  .intro, .detail { max-width: 100%; }
  .detail { gap: 12px; margin-top: 16px; }
  .detail h2, .detail p, #separateSlides h2 { overflow-wrap: anywhere; }
  .actions { width: 100%; flex-wrap: wrap; gap: 8px; }
  .actions .btn { min-height: 44px; white-space: normal; }
  .videoShelf { width: 100%; padding: 12px; }
  .videoShelfHead { flex-wrap: wrap; }
  .videoShelfControls { max-width: 100%; }
  .videoShelfStrip { width: 100%; overscroll-behavior-x: contain; }
  .videoShelfItem { flex-basis: 144px; }
  #separateSlides { margin-top: 20px !important; }
  #separateSlides h2 { font-size: 19px; }
  .heroPortrait { max-width: 320px; }
  .hero-art > img { max-height: 250px; object-fit: contain; }
  .chat { width: 100%; }
  .radioBox { grid-template-columns: minmax(0, 1fr); }
  .radioArt { min-width: 0; }
  .radioArt.hasYouTube { min-height: 0; }
  .radioYouTube { min-width: 0; }
}
@media (max-width: 360px) {
  main { padding-left: 12px; padding-right: 12px; }
  .bar { padding-left: 12px; padding-right: 12px; }
  .videoShelfItem { flex-basis: 132px; }
}
/* Fullscreen remains a full-screen player rather than a phone-sized box. */
#screenBox:fullscreen { width: 100%; height: 100% !important; aspect-ratio: auto; }