/* ----------- main css ----------- */



/* general */

.hidden { display: none; }



body, html, pages, div, p {

    position: relative;

    margin: 0;

    padding: 0;

}



body, html {

    height: 100vh;

    width: 100vw;

    overflow: hidden;

    font: 100%/1.5 'Open Sans', sans-serif;

    font-weight: 300;

}



b { font-weight: 600; }



a { color: grey; }



p, ul { color: grey; }



p.txt { font-size: 1em; margin: 15pt; }

p.medium { font-size: 1.5em; margin: 15pt 15pt 25pt 15pt; }

p.big { font-size: 2em; margin: 15pt; }

p.title { margin: 15pt; font-size: 2.5em; font-weight: 700; }

p.title.columned { position: absolute; width: calc(100% - 30pt); top: -2em; }



.title-spacer { height: 5em; }



@media (max-width: 350pt) {

    p.title { font-size: 2em; }

    .title-spacer { height: 4em; }

}

@media (max-width: 280pt) {

    p.title { font-size: 1.5em; }

    .title-spacer { height: 3em; }

}

@media (max-height: 350pt) {

    p.title { font-size: 1.5em; }

    .title-spacer { height: 3em; }

}



p.title:first-letter { text-decoration: underline; }



page.inverted { background: grey; }

page.inverted p, page.inverted a { color: white; }



page.blue { background: lightblue; }

page.blue p, page.blue a { color: black; }



page { position: relative; padding: 0; margin: 0; }

page.tall { display: block; width: 100%; min-height: 100vh; }



/* --- Kontejnery stránky --- */

.valigner-frame {

    display: block;       /* změna z table */

    width: 100%;

    min-height: 100vh;

    position: relative;   /* pro z-index */

}



.valigner-content {

    display: flex;

    flex-direction: column;

    justify-content: center; /* vertikálně */

    align-items: center;     /* horizontálně */

    width: 100%;

    position: relative;

}



.wrapper {

    position: relative;

    max-width: 800px;

    width: 100%;

    margin: 0 auto;

}



/* sloupcové rozložení */

.col-1 { width: 100%; display: inline-block; text-align: center; }

.col-2 { width: 49.5%; display: inline-block; vertical-align: top; }

@media (max-width: 600pt) { .col-2 { width: 100%; } }

.col-3 { width: 33%; display: inline-block; vertical-align: top; }

@media (max-width: 600pt) { .col-3 { width: 49.5%; } }

@media (max-width: 400pt) { .col-3 { width: 100%; } }



.col { position: relative; display: inline-block; vertical-align: top; margin: 0; padding: 0; }

.flex { position: relative; display: flex; justify-content: space-around; flex-wrap: wrap; }



/* page-specific */

.menu { position: absolute; top: 0; left: 0; right: 0; z-index: 2; }

.debug { position: absolute; top: 0; z-index: 10; background: black; color: white; }



#home { background-position: center; background-size: cover; }



.site-title {

    z-index: 1;

    margin: 40pt 20pt 5pt 40pt;

    font-weight: 700;

    font-size: 4em;

    color: white;

    text-shadow: 0 0 20px black;

    transition-duration: 0.3s;

}

.site-title.minimised {

    margin: 5pt;

    font-size: 1em;

    opacity: 0.5;

}



/* Headlines */

.headlines-frame {

    display: block;

    position: absolute;

    left: 0;

    right: 5vw;

    bottom: 10vh;

    overflow: hidden;

    pointer-events: none; /* zabrání překrývání formuláře */

}

.headlines-frame a { pointer-events: auto; }

.headlines, .headline { pointer-events: none; }



/* swipe gallery */

#swipe-gallery { height: 100vh; width: 100vw; display: block; white-space: nowrap; overflow: hidden; background: black; }

#swipe-gallery > div { height: 100vh; width: 100vw; background-position: center; background-size: cover; position: absolute; }

.sliding { transition-duration: 300ms; }



#controls {

    z-index: 2;

    position: absolute;

    top: 0;

    bottom: 100vh;

    left: 0;

    right: 100vw;

    transform: scaleY(2);

}

#controls div { font-weight: 500; font-size: 50pt; line-height: 50vh; text-shadow: 0 0 20px black; color: lightgrey; position: fixed; top: 0; bottom: 100vh; height: 50vh; width: 0.6em; cursor: default; }

#controls div:hover { color: white; background: rgba(183, 183, 183, 0.16); }



/* --- Rezervační formulář --- */

.rezervace-form {

  position: relative;

  z-index: 1000; /* dostatečně nad ostatními vrstvami */

  max-width: 800px;

  margin: 20px auto;

}



.rezervace-form label { font-weight: 600; }

.rezervace-form input,

.rezervace-form textarea {

  width: 100%;

  padding: 8px;

  border: 1px solid #ccc;

  border-radius: 6px;

  box-sizing: border-box;

}



/* dva sloupce formuláře */

.form-columns { display: flex; flex-wrap: wrap; gap: 20px; }

.form-left {

  flex: 1;

  min-width: 250px;

  display: flex;

  flex-direction: column;

  gap: 12px;

}

.form-right {

  flex: 1;

  min-width: 250px;

  display: flex;

  flex-direction: column;

}

.form-right textarea { flex: 1; min-height: 200px; resize: vertical; }



/* tlačítko odeslat */

.btn-submit {

  margin-top: 20px;

  padding: 12px 20px;

  background-color: #0077cc;

  color: #fff;

  border: none;

  border-radius: 8px;

  cursor: pointer;

  font-weight: 600;

  transition: background-color 0.3s ease;

}

.btn-submit:hover { background-color: #005fa3; }



/* zprávy po odeslání */

.form-success { color: green; margin-bottom: 15px; }

.form-error { color: red; margin-bottom: 15px; }



/* responzivita pro mobily */

@media (max-width: 768px) {

  .form-columns {

    flex-direction: column; /* sloupce pod sebe */

    gap: 12px; /* menší mezera pro mobil */

  }



  /* Levý sloupec: zachovat stejnou šířku všech polí */

  .form-left input,

  .form-left textarea {

    width: 100%; /* zaručí stejné šířky řádků */

  }



  /* Pravý sloupec: textarea pod levým sloupcem */

  .form-right {

    width: 100%;

  }

  

  .form-right textarea {

    min-height: 120px;

    width: 100%; /* aby textarea vyplnila šířku */

  }

} 





/* tlačítko "Rezervace" */

.btn-rezervace {

  display: inline-block;

  padding: 12px 24px;

  background-color: #0077cc;

  color: #fff;

  text-decoration: none;

  font-weight: 600;

  border-radius: 8px;

  transition: background-color 0.3s ease, transform 0.2s ease;

}

.btn-rezervace:hover {

  background-color: #005fa3;

  transform: scale(1.05);

}



/* plynulé skrolování ke kotvě */

html { scroll-behavior: smooth; }



/* obrázky */

.img-small {

  width: 70%;

  height: auto;

  max-width: 700px;

}



page.tall.inverted .valigner-frame {

  display: none;

}