/* Responzivní úpravy pro mobilní zařízení.
   Původní web má pevnou šířku 1245px a absolutní pozicování.
   Na malých obrazovkách přeskládáme obsah do jednoho sloupce. */

/* Obrázky a média se nikdy nesmí přetéct mimo obrazovku */
img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 900px) {

  html, body {
    overflow-x: hidden;
  }

  /* Pozadí pošleme úplně dozadu, aby nikdy nepřekrylo obsah */
  #bg {
    z-index: -1 !important;
  }

  /* Hlavní kontejnery – z pevné šířky na plynulou */
  #page,
  #main,
  #menu,
  #menuIMG,
  #hlavni,
  #velkyobr,
  div.wrap,
  #header2,
  #header2 div.wrap {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Prvek #bg má position:fixed, proto obsah musí zůstat pozicovaný
     (relative + z-index), jinak se propadne POD pozadí a zmizí. */
  #hlavni,
  #jirik {
    position: relative !important;
    z-index: 5 !important;
    clear: both !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    padding: 0 8px !important;
    box-sizing: border-box;
  }

  /* Hlavička – ponecháme původní desktopové rozvržení (webHeader.png,
     logo, souboj, uvodnikJivjany, …) beze změny a jen ji vycentrujeme
     na její původní šířku 1245px. Díky tomu se podle šířky displeje
     zobrazuje od prostředka (na šířku/ležato se vejde víc). */
  #header {
    position: relative !important;
    width: 1245px !important;
    max-width: 1245px !important;
    height: 140px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    overflow: hidden !important;
  }

  /* Logo musí být vždy celé viditelné – vycentrujeme ho na střed displeje
     (= střed hlavičky) a zmenšíme podle šířky displeje, aby se vešlo. */
  html > body #logo,
  #logo {
    left: 50% !important;
    top: 18px !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    width: 80vw !important;
    max-width: 500px !important;
    height: 16vw !important;   /* poměr loga 500:100 = 5:1 */
    max-height: 100px !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    z-index: 5 !important;
  }

  /* Menu – z vodorovného na svislé */
  #menu {
    position: relative !important;
    height: auto !important;
  }
  /* Dekorativní pruh na pozadí roztáhneme přes celou výšku menu opakováním
     a dáme za text odkazů (z-index) */
  #menuIMG {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: auto !important;
    background-repeat: repeat !important;
    z-index: 0 !important;
  }
  ul#hlavniMenu {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 5px 0 !important;
  }
  ul#hlavniMenu li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }
  ul#hlavniMenu a {
    display: block;
    padding: 12px 10px !important;
    border-bottom: 1px solid #333;
  }

  /* Úvodní slider zpružníme na šířku mobilu.
     Snímky zůstávají absolutně pozicované (JS je posouvá přes 'left')
     a kontejner je ořezává (overflow:hidden), aby byl vidět jen jeden. */
  #header2,
  #header2 div.wrap {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
  }
  #header2 div#slide-holder,
  #header2 div#slide-holder div#slide-runner {
    position: relative !important;
    width: 100% !important;
    height: 38vw !important;   /* poměr obrázku 472/1245 ≈ 0.38 */
    max-height: 472px !important;
    overflow: hidden !important;
  }
  #header2 div#slide-holder img {
    position: absolute !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
  }

  .fotoBIG {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 590px;
    margin: 10px auto !important;
  }

  /* Sekce sponzorů */
  #jirik {
    text-align: center;
    margin-top: 15px !important;
  }
  #jirik a {
    float: none !important;
    display: inline-block;
    margin: 5px !important;
    vertical-align: middle;
  }
  #jirik img {
    max-width: 100%;
    height: auto;
  }
  #jirik table {
    display: inline-block;
    vertical-align: middle;
  }

  /* Text v hlavní části */
  #hlavni p {
    text-align: justify !important;
    height: auto !important;
  }

  /* Vnitřní bloky s pevnou šířkou (sekce "Co se děje", "Chcete nám pomoci",
     "O nás", "O skanzenu" – napevno 590px a float:left) zpružníme,
     aby se skládaly pod sebe a nepřetékaly mimo obrazovku */
  #hlavni div {
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
    text-align: left !important;
    box-sizing: border-box;
  }
  #hlavni table {
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
  }
  /* Prázdná odsazovací buňka (td width="110") drží prázdné místo vpravo */
  #hlavni table td:empty {
    display: none !important;
    width: 0 !important;
  }
  #hlavni table td {
    width: auto !important;
  }
}