/* =========================================

   RESET A ZÁKLADNÍ STYLY

   Tento blok nastavuje výchozí font, barvy, marginy a paddingy pro celou stránku

========================================= */

body {

  font-family: Arial, sans-serif; /* základní font pro celou stránku */

  margin: 0;                      /* odstraní výchozí okraje */

  padding: 0;                     /* odstraní výchozí odsazení */

  line-height: 1.6;               /* mezera mezi řádky textu */

  color: #5f8765;                 /* hlavní barva textu */

  background: #fff;               /* bílá barva pozadí stránky */

  font-size: 10px;                /* základní velikost písma */

}



/* Odstavce */

p {

  font-size: 14px;                /* velikost písma pro odstavce */

  text-align: justify;            /* zarovnání textu do bloku */

  max-width: 650px;               /* maximální šířka textového bloku */

  margin: 0 auto;                 /* horizontální centrování */

  padding: 0 20px;                /* odsazení zleva a zprava */

}



/* Blok s informacemi (např. krátký text nad tlačítkem) */

.text-info p {

  text-align: center;             /* centrovaný text */

  margin-bottom: 0;               /* odstranění spodní mezery */

}



.text-info p:last-child {

  margin-bottom: 40px;            /* mezera pouze pod posledním odstavcem */

}



/* =========================================

   REZERVAČNÍ TLAČÍTKO

   Styl pro tlačítko rezervace s hover efektem

========================================= */

.rezervace-wrapper {

  text-align: center;             /* centrování tlačítka */

  margin: 10px 0;                 /* vertikální mezera */

}



.rezervace-btn {

  display: inline-block;          /* zajišťuje, že padding funguje */

  padding: 12px 24px;             /* velikost tlačítka */

  border: 2px solid #f8bbd0;      /* růžový okraj */

  background-color: rgba(248, 187, 208, 0.2); /* jemné růžové pozadí */

  color: #d81b60;                 /* barva textu */

  font-weight: bold;               /* tučný text */

  text-decoration: none;           /* odstranění podtržení */

  border-radius: 40px;             /* zakulacené rohy */

  font-size: 16px;                 /* velikost písma */

  transition: background 0.3s ease, color 0.3s ease; /* plynulý hover efekt */

  text-align: center;

}



.rezervace-btn:hover {

  background-color: rgba(248, 187, 208, 0.4); /* tmavší pozadí při hoveru */

  color: #ad1457;                 /* tmavší text při hoveru */

}



/* =========================================

   Hlavní menu

   Styl menu a odkazů

========================================= */

.main-menu {

  background-color: #fff;          /* bílé pozadí menu */

  padding: 15px 0;                 /* vertikální padding */

  text-align: center;              /* centrování obsahu menu */

  border-bottom: 1px solid #eee;   /* spodní linka oddělující menu */

}



.main-menu ul {

  list-style: none;                /* odstraní puntíky u seznamu */

  margin: 0;

  padding: 0;

  display: inline-flex;            /* položky horizontálně */

  gap: 30px;                       /* mezera mezi položkami */

}



.main-menu a {

  text-decoration: none;           /* odstranění podtržení odkazu */

  color: #5f8765;                  /* barva textu */

  font-weight: bold;               /* tučný text */

  transition: color 0.3s;          /* plynulý přechod při hoveru */

}



.main-menu a:hover {

  color: #ff69b4;                  /* růžová barva při hoveru */

}



/* =========================================

   HEADER

   Nadpisy a zarovnání stránky

========================================= */

header {

  text-align: center;              /* centrování obsahu */

  padding: 60px 20px;              /* padding okolo obsahu */

  background-color: #fff;          /* bílé pozadí */

}



h1 {

  font-family: 'Playfair Display', serif; /* ozdobný font pro hlavní nadpis */

  color: #ff69b4;                 /* růžová barva */

  font-size: 55px;                /* velikost hlavního nadpisu */

  margin: 0;                       /* odstraní výchozí mezery */

  font-weight: 400;               /* standardní tučnost písma */

}



h2 {

  font-family: 'Playfair Display', serif;

  text-align: center;

  font-size: 36px;

  color: #5f8765;

  font-weight: 400;

}



h3 {

  font-family: 'Playfair Display', serif;

  text-align: center;

  font-size: 24px;

  color: #ff69b4;

  font-weight: 400;

}



h4 {

  font-family: 'Playfair Display', serif;

  text-align: center;

  font-size: 24px;

  color: #5f8765;

  font-weight: 400;

}



/* Specifické nastavení pro .page-header */

.page-header {

  text-align: center;

}



.page-header h1 {

  margin-bottom: 0.2em; /* menší mezera pod H1 */

}



.page-header h4 {

  margin-top: 0;        /* odstraní horní mezeru H4 */

}



/* =========================================

   KONTAKT BOX

   Box pro kontaktní informace

========================================= */

.kontakt-box {

  width: fit-content;   /* šířka podle obsahu */

  margin: 0 auto;       /* vycentrování horizontálně */

  text-align: left;     /* text uvnitř zarovnán vlevo */

}



/* =========================================

   MAIN CONTENT

   Maximální šířka obsahu a padding

========================================= */

main {

  max-width: 1000px;   /* maximální šířka hlavního obsahu */

  margin: 0 auto;       /* horizontální centrování */

  padding: 20px;        /* padding okolo obsahu */

}



section {

  margin-bottom: 80px;  /* mezera mezi jednotlivými sekcemi */

}



/* =========================================

   SEKCE O MNĚ

   Flex layout pro obrázek a text

========================================= */

#about {

  display: flex;

  flex-direction: row-reverse; /* obrázek vpravo, text vlevo */

  gap: 40px;                   /* mezera mezi obrázkem a textem */

  align-items: flex-start;     

  justify-content: center;

}



#about img {

  border-radius: 20px;         /* zakulacené rohy obrázku */

  width: 300px;                /* pevná šířka obrázku */

  height: auto;                /* výška podle poměru stran */

  margin-top: 40px;            /* odsazení od horního okraje */

}



#about div {

  max-width: 500px;            /* maximální šířka textového bloku */

  text-align: justify;          /* text zarovnaný do bloku */

}



/* =========================================

   Služby, boxy a hover efekty

========================================= */

.services-container {

  display: flex;

  justify-content: center;

  gap: 30px;

  flex-wrap: wrap;             /* zalamování boxů na menší obrazovce */

}



.service-box {

  background: #f7f7f7;         /* světle šedé pozadí */

  border-radius: 20px;

  padding: 25px 30px;

  width: 250px;

  text-align: center;

  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* jemný stín */

  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;

}



.single-box {

  justify-content: center;

}



.services-center-wrapper {

  display: flex;

  justify-content: center;

  margin-top: 2em;

}



.duration {

  font-size: 1.2em;

  text-align: center;

  margin: 0.5em 0;

  font-weight: 500;

}



.service-box:hover {

  transform: translateY(-8px);               /* zvednutí boxu při hoveru */

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* silnější stín */

  background-color: #fff0f5;                /* jemně růžové pozadí */

}



.service-box h3 {

  margin-top: 0;

  color: #5f8765;

}



.service-box strong {

  font-size: 20px;      /* velikost tučného textu */

}



/* =========================================

   FORMULÁŘE

========================================= */

form {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

}



input, textarea {

  padding: 10px;

  margin-bottom: 20px;

  width: 100%;

  max-width: 500px;

  border-radius: 40px;

  border: 1px solid #ccc;

  box-sizing: border-box;

}



button {

  background-color: #7b6c5f;

  color: white;

  padding: 10px 20px;

  border-radius: 40px;

  border: none;

  cursor: pointer;

  transition: background 0.3s;

  margin-top: 20px;

}



button:hover {

  background-color: #5a4b3c;

}



/* Checkbox label */

.checkbox-label {

  display: flex;

  align-items: center;

  gap: 8px;

  cursor: pointer;

  text-align: left !important;

  max-width: 600px;

  font-size: 14px;

  color: #5f8765;

}



.checkbox-label input[type="checkbox"] {

  margin: 0;

  flex-shrink: 0;  /* pevná velikost checkboxu */

  width: 18px;

  height: 18px;

  cursor: pointer;

}



.checkbox-label a {

  color: #f48fb1;           /* růžová barva odkazu */

  text-decoration: underline;

}



/* =========================================

   FOTO - SPUPINKA

========================================= */

.foto-wrapper {

  display: flex;

  justify-content: center;

  align-items: flex-start;

  gap: 20px;

  flex-wrap: wrap;

  margin: 30px 0;

}



.skupinka-foto {

  width: 45%;

  max-width: 400px;

  height: auto;

  border-radius: 15px;

  object-fit: cover;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

  transition: transform 0.3s ease;

}



.skupinka-foto:hover {

  transform: scale(1.02);

}



/* Na mobilech pod sebou */

@media (max-width: 768px) {

  .skupinka-foto {

    width: 90%;

  }

}



.mapa-foto {

  width: 20%; /* nebo třeba 25% */

  max-width: 200px; /* můžeš zmenšit podle potřeby */

}





/* =========================================

VESNA

========================================= */





.vesna-container {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 30px;

  flex-wrap: wrap; /* na menších obrazovkách se složí pod sebe */

  margin-bottom: 40px;

}



.vesna-text {

  flex: 1 1 60%;

}



.vesna-foto {

  flex: 1 1 35%;

  display: flex;

  justify-content: center;

}



/* =========================================

MAPA

========================================= */



.mapa-foto {

  width: 100%;

  max-width: 400px;

  border-radius: 15px;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

}





.text-foto {

  display: flex;

  flex-direction: column;

  align-items: center; /* toto zajistí centrování obsahu */

  gap: 20px;

}



.text-foto .text {

  max-width: 650px;

  text-align: justify;

}



.mapa-wrapper {

  display: flex;

  justify-content: center; /* mapa uprostřed */

  width: 100%;

  margin-top: 20px;

}



.mapa-wrapper iframe {

  max-width: 100%;

  height: 300px;

  border: 0;

}







/* =========================================

   FOOTER

========================================= */

.site-footer {

  padding: 60px 60px;

  font-size: 14px;

  color: #f48fb1;

}



.footer-line {

  width: 80%;

  margin: 0 auto 20px;

  border: none;

  border-top: 1px solid #ddd;

}



.footer-wrapper {

  display: flex;

  justify-content: space-evenly;

  align-items: center;

  max-width: 900px;

  margin: 0 auto;

  flex-wrap: wrap;

  gap: 40px;

}



.footer-left {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 6px;

}



.footer-left a {

  color: #f48fb1;

  text-decoration: none;

  font-size: 14px;

}



.footer-right {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 10px;

}



.footer-right a img {

  width: 30px;

  height: 30px;

}



/* =========================================

   SOCIÁLNÍ IKONY

========================================= */

.social-icons {

  display: flex;

  justify-content: center;

  gap: 15px;

  padding: 10px 0;

}



.social-icons img {

  width: 30px;

  height: 30px;

}



/* =========================================

   RESPONSIVNÍ

========================================= */

@media (max-width: 768px) {

  #about {

    flex-direction: column;

    align-items: center;

  }



  #about div {

    text-align: justify;

  }



  .close-btn {

    top: 15px;

    right: 20px;

    font-size: 32px;

    z-index: 10000;

  }

}



/* =========================================

   CUSTOM LIST

========================================= */

* {

  box-sizing: border-box;

}



.custom-list {

  list-style: none;

  padding-left: 0;   

  margin: 40px auto;

  width: 100%;        /* zabere dostupný prostor */

  max-width: 600px;   /* ale nikdy víc než 600px */

  line-height: 1.6;

  text-align: left;

}



.custom-list li { 

display: flex; 

align-items: flex-start; 

gap: 8px; 

margin-bottom: 10px; 

font-size: 14px; 

color: #5f8765; 

} 



.heart { 

font-size: 14px; 

line-height: 1; 

color: #f48fb1; 

flex-shrink: 0; 

margin-top: 2px; }



/* Responsivní pro malé obrazovky */

@media (max-width: 600px) {

  .custom-list {

    width: 95%;

    margin: 20px auto;       /* menší odsazení nahoře a dole */

  }



  .custom-list li {

    font-size: 16px;         /* větší text na mobilu */

  }

}







/* =========================================

   DRUHÝ BANNER – LETO

========================================= */

.leto {

  position: relative;

  display: block;

  width: fit-content;

  max-width: 600px;

  color: #f48fb1;

  font-weight: bold;

  font-size: 16px;

  margin: 20px auto;

  padding: 20px 60px;

  text-align: center;

  z-index: 1;

}



.leto::before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: rgba(244, 143, 177, 0.3);

  border-radius: 16px;

  z-index: -1;

  box-shadow: 0 2px 8px rgba(244, 143, 177, 0.2);

}



/* =========================================

   CAROUSEL – RECENZE

========================================= */

.carousel-container {

  overflow-x: auto;            /* umožní horizontální scroll */

  scroll-snap-type: x mandatory; /* snap na každou recenzi */

  -webkit-overflow-scrolling: touch; /* plynulý scroll na mobilu */

  padding: 20px 0;

}



.carousel-snap {

  display: flex;

  gap: 30px;                   /* mezera mezi recenzemi */

}



.review {

  flex: 0 0 300px;             /* pevná šířka recenze */

  background: rgba(244, 143, 177, 0.15);

  color: #5f8765;

  border-radius: 10px;

  text-align: center;

  padding: 25px 20px;

  scroll-snap-align: start;    /* snap na začátek recenze */

}



.carousel-indicators {

  text-align: center;

  margin-top: 20px;

}



.carousel-indicators .dot {

  height: 12px;

  width: 12px;

  margin: 0 5px;

  background-color: #ddd;

  border-radius: 50%;

  display: inline-block;

  transition: background-color 0.3s;

}



.carousel-indicators .dot.active {

  background-color: #f48fb1; /* růžová pro aktivní recenzi */

}



/* Volitelné: přidat jemný stín a hover efekt */

.review:hover {

  background-color: rgba(244, 143, 177, 0.25);

}











/* =========================================

SPRÁVNÉ ZOBRAZENÍ - TABLET, NOTEBOOK, TELEFON

========================================= */





/* Responsivní */

@media (max-width: 992px) {

  .review {

    flex: 0 0 45%;             /* 2 recenze vedle sebe */

  }

}



@media (max-width: 600px) {

  .review {

    flex: 0 0 90%;             /* 1 recenze na řádek */

  }

}