/*
 * Responsive adaptation layer for the classic Rosforth site.
 *
 * The classic site is a 1:1 clone of the original fixed-width (960px) PHP
 * site and must stay pixel-identical on desktop. Every rule in this file is
 * therefore scoped to viewports NARROWER than the original design width;
 * at >=980px this file has no effect at all.
 *
 * The markup uses legacy fixed-width tables and inline styles, so overrides
 * need !important to win over style="" attributes.
 */

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

  #container {
    width: auto !important;
    margin: 0 8px !important;
  }

  /* Header: scale the 960x85 logo banner down proportionally. */
  #header {
    width: auto !important;
    max-width: 960px;
    height: auto !important;
    aspect-ratio: 960 / 85; /* match the logo banner, no gap below it */
    background-size: contain !important;
    background-repeat: no-repeat;
  }

  #content {
    margin-left: 0 !important;
  }

  /* All legacy fixed-width tables become fluid. */
  #content table,
  #content table[width] {
    width: 100% !important;
    height: auto !important;
  }

  /* ---- Home: film index rows ---- */
  #content td[width='160px'] {
    width: 96px !important;
  }
  #content td[width='160px'] img {
    width: 96px !important;
    height: auto;
    display: block;
  }
  #content td[width='770px'],
  #column {
    width: auto !important;
    background-size: cover;
  }
  #movietitle {
    font-size: 18px;
    padding-left: 6px;
  }
  #movieyear {
    font-size: 12px;
    padding: 6px;
  }

  /* ---- Film detail: title bar (< back | TITLE YEAR) ---- */
  #content table[background] td {
    width: auto !important;
  }

  /* Video player / framegrab fallback scale with the viewport. */
  [data-vjs-player] {
    max-width: 100%;
  }
  #content img[width='935'] {
    width: 100% !important;
    max-width: 935px;
    height: auto !important;
  }

  /* ---- Film detail: stack the text column and "Where to watch" ---- */
  #contentwrapper {
    float: none;
  }
  #contentcolumn {
    margin-right: 0 !important;
  }
  #rightcolumn {
    float: none;
    width: auto !important;
    margin-left: 0 !important;
  }

  /* Legacy HTML injected from the old site (film descriptions, watch
     links) contains fixed-size images/iframes: keep them in bounds. */
  .xinnertube img,
  .innertube img {
    max-width: 100% !important;
    height: auto;
  }
  .xinnertube iframe,
  .innertube iframe {
    max-width: 100%;
  }
  .xinnertube table,
  .innertube table {
    width: 100% !important;
  }
}