/* Responzivní vrstva zachovává původní desktopový vzhled a na telefonu
   používá motiv staré mobilní verze: modré pozadí, světlý list a ikonové menu. */

.preskocit {
  position: fixed;
  z-index: 1000;
  left: 1rem;
  top: -5rem;
  padding: .7rem 1rem;
  color: #fff;
  background: #711a1a;
  border-radius: 0 0 .4rem .4rem;
}
.preskocit:focus { top: 0; }
.mobilni-ikona { display: none; }

#menu ul > li {
  flex: 1 1 0;
  background-image: var(--menu-image);
}
#menu ul > li > a {
  display: block;
  height: 100%;
  border-right: var(--velikostOhraniceni) solid var(--barvaOhraniceni1);
  box-sizing: border-box;
}
#menu ul > li:last-child > a { border-right: 0; }
#menu ul > li:first-child { border-radius: 8px 0 0 8px; }
#menu ul > li:last-child { border-radius: 0 8px 0 0; }

img, video, object, iframe { max-width: 100%; }
input, select, textarea, button { font: inherit; }
.antispam { position: absolute !important; left: -10000px !important; }
button, input[type="submit"], select { min-height: 2.75rem; }

@media (max-width: 1100px) {
  #kontejner {
    grid-template-columns: minmax(220px, 28vw) minmax(0, 1fr);
  }
  #stranka { min-width: 0; }
  #menu { min-width: 0; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 1rem; }
  body {
    margin: 0;
    overflow-x: hidden;
    background: #003770 url("../subdom/m/img/bg.jpg") repeat-x;
    font-size: 16px;
    text-align: left;
  }
  #kontejner {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    background: transparent;
  }
  #kontejner > .box:first-child,
  #sloupec,

  #zahlavi {
    order: 1;
    display: block;
    width: auto;
    height: auto;
    margin: .6rem auto .35rem;
    padding: 0 1rem;
    position: static;
  }
  #zahlavi #logotyp {
    display: block;
    width: min(92vw, 540px);
    height: auto;
    margin: 0 auto;
  }

  #menu {
    order: 2;
    position: static !important;
    z-index: 1;
    width: calc(100% - 1.5rem);
    height: auto !important;
    min-height: 0;
    margin: 0 .75rem .75rem;
    border: 2px solid #863133;
    border-radius: .5rem;
    background: #014380;
    box-shadow: 0 3px 7px rgba(0,0,0,.28);
  }
  #menu .menu-prepinac {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 3rem;
    margin: 0;
    padding: .55rem 1rem;
    border: 0;
    border-radius: .35rem;
    color: #fff;
    background: transparent;
    font: 1.1rem BoldFont, sans-serif;
    cursor: pointer;
  }
  #menu .menu-prepinac span { font-size: 1.35rem; }
  #menu ul {
    display: none;
    grid-template-columns: 1fr;
    align-items: stretch;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0 .35rem .35rem;
    box-sizing: border-box;
  }
  #menu.otevrene ul { display: grid; }
  #menu li,
  #menu li.fixnuto {
    display: block;
    width: auto;
    height: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none !important;
    list-style: none;
  }
  #menu li a {
    display: grid;
    grid-template-columns: 2.2rem 1fr;
    align-items: center;
    gap: .7rem;
    min-height: 2.8rem;
    padding: .45rem .65rem;
    color: #fff;
    text-decoration: none;
  }
  #menu li.aktivni a {
    background: rgba(255,255,255,.13);
    border-radius: .4rem;
  }
  #menu .mobilni-ikona {
    display: block;
    width: 2rem;
    height: 2rem;
    object-fit: contain;
  }
  #menu li div,
  #menu li.fixnuto div {
    position: static !important;
    display: block;
    width: 100%;
    height: auto;
    padding: 0;
    background: none !important;
    text-align: left;
    line-height: 1.05;
  }
  #menu li b {
    overflow: visible;
    font-size: 1rem;
    font-weight: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #menu li i { display: none; }

  #stranka {
    order: 3;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 55vh;
    margin: 0;
    border: 0;
    border-top: 2px solid #863133;
    border-bottom: 2px solid #863133;
    border-radius: 0;
    box-sizing: border-box;
    background: #f6efe5;
    box-shadow: 0 5px 8px rgba(0,0,0,.35);
    text-align: left;
  }
  #obsah {
    width: auto;
    min-width: 0;
    padding: .85rem clamp(.8rem, 4vw, 1.5rem) 1.5rem;
  }
  #obsah p { text-align: left; line-height: 1.55; }
  h1, h2 {
    clear: both;
    font-size: 1.25rem;
    line-height: 1.3;
    text-align: center;
  }
  h1 img, h2 img { max-height: 2rem; width: auto; }

  #index #program .udalost,
  #program .udalost {
    display: grid;
    grid-template-columns: 1fr;
    gap: .25rem;
    width: auto;
    margin: .75rem 0;
    padding: .8rem;
    border-radius: .5rem;
    background: #f2e0e0;
  }
  #index #program .udalost > div,
  #program .udalost > div { width: auto; text-align: left; }
  #index #program .udalost > div:last-child,
  #program .udalost > div:last-child { color: #757575; }

  #aktuality .aktualita {
    display: flow-root;
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 1rem;
  }
  #aktuality .aktualita > img { max-width: 52px; height: auto; }

  .formular,
  #kniha .formular { width: 100%; max-width: 32rem; box-sizing: border-box; }
  .formular input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  .formular textarea,
  .formular select {
    max-width: 100%;
    box-sizing: border-box;
  }
  #kniha .formular textarea { width: 100%; }

  .tabulka-scroll {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }
  #rezervace > table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }
  #galerie .nahled { height: auto; width: min(26vw, 110px); }
  #cinnost img { max-width: 100%; height: auto; }
  #nabidka .dira { width: calc(100% + 2 * clamp(.8rem, 4vw, 1.5rem)); }
  #clenove #aktivni,
  #schrankaclenu { max-width: 100%; }

  /* Desktopové řádky se na telefonu skládají pod sebe. */
  #nabidka .hra,
  #cinnost .akce,
  #kniha form[name=prispevek],
  .dvoukomorovy,
  .dvoukomorovy .kontejner {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 100%;
    box-sizing: border-box;
  }
  #nabidka .hra { padding: 1rem; }
  #nabidka .hra > div:nth-child(2) { align-items: center; }
  #nabidka .hra > div:nth-child(2) img {
    width: min(100%, 15rem);
    margin: .5rem auto;
  }
  #nabidka .hra h2 { white-space: normal; }
  #cinnost .akce { gap: .75rem; padding: 1rem; }
  #cinnost .akce > .posuvnik,
  #cinnost .akce > .medium-kontejner,
  #cinnost .akce > div:nth-of-type(1):not(.posuvnik) img,
  #cinnost .akce > div:nth-of-type(1) .bezfotky {
    width: 100%;
    max-width: 100%;
  }
  #cinnost .akce > .medium-kontejner { flex-basis: auto; }
  #cinnost .akce .posuvnik { margin-right: 0; }
  #kniha form[name=prispevek] { gap: .5rem; margin-bottom: 2rem; }
  #kniha form[name=prispevek] > div:nth-of-type(2) { flex-basis: auto; }
  #kniha form[name=prispevek] textarea { min-height: 8rem; }
  .dvoukomorovy div:not(.kontejner)+div:not(.kontejner) { margin-left: 0; }
  .dvoukomorovy input[type=submit] { height: auto; margin: .5rem 0 0; }
}

@media (max-width: 430px) {
  #menu .mobilni-ikona { width: 1.8rem; height: 1.8rem; }
  #menu li b { font-size: .95rem; }
  #zahlavi { margin-top: .4rem; }
  #obsah { padding-inline: .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

.vstup-do-uctu {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 200;
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.vstup-do-uctu img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.vstup-do-uctu:hover,
.vstup-do-uctu:focus-visible {
  transform: scale(1.1);
  filter: brightness(1.12);
}

@media (max-width: 700px) {
  .vstup-do-uctu {
    right: 10px;
    bottom: 10px;
    width: 56px;
    height: 56px;
  }
}