/* Static-site responsive layer.
 * The original 2012 design is fixed-width (937px containers, a 386px
 * sidebar, a viewport meta pinned to width=950) with no mobile support at
 * all. This file is appended after the compiled webdoc.css on every page
 * and overrides just enough to make the whole app usable on phones/tablets
 * without touching the original pixel-art desktop layout.
 */

@media (max-width: 780px) {
  html, body { overflow-x: hidden; }

  /* Any element carrying a pixel width as an inline style (the sidebar
     boxes on mapa/player/info) -- inline styles win over plain selectors,
     so these need !important to be overridden at all. */
  [style*="width: 386px"],
  [style*="width: 884px"],
  .box[style],
  .box.in[style],
  .box.lista[style],
  .box.sinopse[style],
  .box.box-large[style] {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Containers sized in the stylesheet itself -- same selector specificity,
     later in the cascade, so no !important needed. */
  .container, .info, .info-container, .logo, .videos, #lateral, #menul {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .container { padding: 0 12px; }
  .info { padding: 0 12px; top: 20px; }
  .info-container { padding: 0 5px; }
  .logo { padding-top: 20px; }

  img.logos, img.logo, .logo img { max-width: 100%; height: auto; }

  .item, .boxr.item, .boxx.item {
    width: auto !important;
    font-size: 16px;
  }

  /* home: episode nav arrows were placed with fixed pixel offsets tuned to
     a 937px-wide container; pin them to the viewport edges instead. */
  .nav { position: fixed; top: 50%; margin-top: -20px; z-index: 5; }
  .nav.esq { left: 8px; }
  .nav.dir { right: 8px; left: auto; margin-left: 0; }
  .info-box { width: 90%; left: 5%; }
  #ensaio { display: none; }

  /* videos: let the thumbnail grid wrap instead of overflowing */
  .videos.box.caixa {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }
  .video {
    float: none !important;
    width: 46% !important;
    margin: 2%;
    padding: 0 !important;
  }
  .video img { width: 100%; height: auto; }
  .ensaio .video { width: 100% !important; }

  /* mapa + player: the fixed-width right sidebar becomes a full-width
     block that stacks below the map/video instead of floating beside it. */
  #menul { position: static; margin: 0; padding: 10px; height: auto; }
  #lateral { float: none; }
  .full { position: relative !important; height: 55vh !important; }
  #mapa { height: 100% !important; }
  #video.full { position: relative !important; height: 38vh !important; }
  .comment { width: 100%; }

  #wdg_logo { max-width: 60%; height: auto; }
}

@media (max-width: 480px) {
  .video { width: 96% !important; }
  .item, .boxr.item, .boxx.item { font-size: 14px; }
}