/* Import Google fontu do css */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* celý web má ladné / neškubané pohyby po zmáčknutí linků */
html{
  scroll-behavior: smooth;
}

/* nastavení fontu, barvy pozadí a textu pro celý web */
body {
  font-family: 'Montserrat', sans-serif;
  background-color: #f9f9f9;
  color: #201E1E;
}

/* user nemůže s objektem interagovat */
.no-select{
  -webkit-user-select: none; /* Safari/Chrome */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* Edge */
  user-select: none;         /* Standard */
}

/* ------------------------------ */
/*           NAVBAR               */
/* ------------------------------ */

#navbar {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  /* Navbar je nadebším co má menší hodnotu z-indexu */
  z-index: 100;
  /* po změně pozice navbaru se barva nezmění ihned, ale až po krátké chvilce */
  transition: background-color 0.3s;
}

.nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 10%; 
}

/* Navbar je zezačátku průhledný, mění se na tmavě šedý po scrollu, pomocí JavaScriptu */
#navbar.transparent {
  background-color: transparent;
}

/* Navbar je zezačátku průhledný, mění se na tmavě šedý po scrollu, pomocí JavaScriptu */
#navbar.solid {
  background-color: #201E1E;
}

.logo img {
  height: 70px; 
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 35px; /* mezera mezi linkama */
}

.nav-links a {
  position: relative;
  color: #fff;
  text-decoration: none;
  font-size: 1.4rem;
  transition: color 0.3s;
}

.nav-links a::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: #F08C09;
  border-radius: 2px;
  bottom: -6px; /* posune čáru pod text */
  transform: scaleX(0); /* velikost textu se nemění */
  transition: transform 0.3s; /* nastavení času za jakou dobu bude akce zhotovena z důvodu ladnosti pohybu */
  transform-origin: middle; /* čára vychází ze středu textu */
}

/* Hover efekt */
.nav-links a:hover::after {
  transform: scaleX(1);
}

/* Aktivní odkaz DOMŮ má underline stále */
.nav-links a.active::after {
  transform: scaleX(1);
}

/* Barva textu zůstává bílá i při hoveru */
.nav-links a, .nav-links a:hover, .nav-links a.active {
  color: #fff;
}

/* Hamburger ikona */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  width: 36px;
  height: 36px;
  z-index: 200;
}

.hamburger span {
  height: 4px;
  width: 100%;
  background: #fff;
  margin: 5px 0;
  border-radius: 2px;
  display: block;
  transition: 0.3s; /* nastavení času za jakou dobu bude akce zhotovena z důvodu ladnosti pohybu */
}

@media (max-width: 768px) {
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #201E1E;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    display: none;
    padding: 20px 10%;
    z-index: 150;
  }
  .nav-links.show {
    display: flex;
  }
  .nav-links li {
    width: 100%;
    margin: 0;
  }
  .nav-links a {
    padding: 16px 0;
    width: 100%;
    display: block;
    font-size: 1.3rem;
  }
  .hamburger {
    display: flex;
    margin-left: auto;
  }
  .nav-content {
    padding: 18px 5%;
  }
}

/* grid pro sekce, je v 80% width obrazovky */
.content-section, .galerie-section, .kontakt-section, .benefits-wrapper {
  width: 80%;
  margin: 100px auto 50px;
}

/* nastavení velikosti atributů pro h2 */
h2 {
  text-align: center;
  font-size: 3rem;
  margin-bottom: 40px;
}

.grid-layout {
  display: grid;
  /* nastavení počte sloupců vedle sebe */
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
}

/* vyměnění textu s obrázkem z leva do prava */
.grid-layout.reverse {
  direction: ltr;
}
/* vyměnění textu s obrázkem z leva do prava */
.grid-layout.reverse .image-side {
  order: -1;
}

/* nastavení velikosti atributů pro h3 */
.text-side h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
}

/* nastavení velikosti atributů pro p */
.text-side p {
  line-height: 1.6;
  font-size: 1.2rem;
}

/* V sekci onás bude obrázek vpravo, na úplném kraji gridu */
.image-side {
  display: flex;
  justify-content: flex-end;
}

/* V sekci pozice bude obrázek vlevo, na úplném kraji gridu */
.grid-layout.reverse .image-side {
  justify-content: flex-start; 
}

.rounded-img {
  width: 70%;       
  border-radius: 20px; /* zakřivení rohů obrázků */
  box-shadow: 0 2px 10px rgba(32,30,30,1); /* stín pod obrázkami */
}

/* Media pro SEKCE 1080px */
@media (max-width: 1080px) {
  h2 {
    font-size: 2rem;
    margin-bottom: 28px;
  }
  .grid-layout {
    gap: 18px;
  }
  .rounded-img {
    width: 90%;
  }
  .text-side h3 {
    font-size: 1.3rem;
  }
  .text-side p {
    font-size: 1rem;
  }
}

/* Media pro SEKCE 768px */
@media (max-width: 768px) {
  h2 {
    font-size: 1.4rem;
    margin-bottom: 18px;
  }
  .grid-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .image-side,
  .grid-layout.reverse .image-side {
    justify-content: center;
    margin-bottom: 12px;
  }
  .rounded-img {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }
  .text-side h3 {
    font-size: 1.1rem;
    margin-bottom: 6px;
  }
  .text-side p {
    font-size: 0.98rem;
  }
}

/* ------------------------------ */
/*         LANDING SEKCE          */
/* ------------------------------ */

.landing-section {
  height: 70vh; /* vh neboli viewpoint height určuje výšku okna */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: 80px;
  overflow: hidden;
  color: white;
}

/* Overlay, ktarý zatmavuje obrázek a lépe zviditelňuje jak navbar, tak texty */
.landing-section::after {
  content: "";
  position: absolute;
  inset: 0; /* všechny čtyři okraje pozicovaného prvku budou nastaveny na hodnotu 0 */
  background: rgba(32, 30, 30, 0.6); /* barva overlaye */
  z-index: 0; /* mezi obrázkem a textem */
  pointer-events: none;
}

.landing-section h1 {
  font-size: 3.2rem;
}

.landing-section p {
  margin-top: 15px;
  font-size: 1.4rem;
}

/* Formátování textu pro b neboli bold písma v landing sekci */
.landing-section b{
    color: #201E1E;
    font-size: 4rem;
    transition: 0.3s;
}

/* změna barvy při hoveru */
.landing-section b:hover{
    color: #F08C09;
    text-shadow: 0 10px 30px rgba(240, 140, 9, 0.3); /* přidá shadow pod text */
}

.landing-section button {
  margin-top: 20px;
  padding: 16px 40px;
  border: none; 
  background-color: #fff;
  color: #201E1E;
  border-radius: 10px; /* zakřivení rohů buttonu */
  font-size: 1.2rem;
  cursor: pointer; /* cursor se vymění na ukazovátko */
  transition: background-color 0.3s; /* nastavení času za jakou dobu bude akce zhotovena z důvodu ladnosti pohybu */
}

/* změna barev při hoveru */
.landing-section button:hover {
  background-color: #F08C09;
  color: #fff;
}

.landing-image {
  position: absolute;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%;
  object-fit: cover;
  z-index: -1; /* Pod textem a průhledným overlayem */
  opacity: 1; 
}

/* zajišťuje, aby text a tlačítka v landing-section byly nad obrázkem i nad olerlayem */
.landing-section > *:not(.landing-image) {
  position: relative;
  z-index: 1;
}

/* Media pro LANDING 1080px */
@media (max-width: 1080px) {
    .landing-section h1 {
      font-size: 2.6rem;
    }
  
    .landing-section p {
      font-size: 1.2rem;
    }
  
    .landing-section b {
      font-size: 3.2rem;
    }
  
    .landing-section button {
      padding: 14px 36px;
      font-size: 1.1rem;
    }
  }
  
  
 /* Media pro LANDING 768px */
  @media (max-width: 768px) {
    .landing-section {
      padding: 60px 20px 0 20px;
    }
  
    .landing-section h1 {
      font-size: 2.2rem;
    }
  
    .landing-section p {
      font-size: 1rem;
    }
  
    .landing-section b {
      font-size: 2.5rem;
    }
  
    .landing-section button {
      padding: 12px 28px;
      font-size: 1rem;
    }
  }

/* ------------------------------ */
/*            BENEFITY            */
/* ------------------------------ */

  .benefits-wrapper {
    width: 80%;
    margin: 0 auto;
  }
  
  .benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* v gridu se automaticky vytvoří tolik sloupců, kolik se jich vejde do dostupné šířky kontejneru (280px) */
    gap: 24px; /* mezera mezi objekty */
    margin-top: 40px;
  }
  
  .benefit-card {
    background-color: white;
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* stín objektu */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* ladný pohyb objektu */
    cursor: default;
  }
  
  /* přihoveru se objekt zvětší a zobrazí se větší shadow s jinou barvou */
  .benefit-card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(240, 140, 9, 0.3);
  }
  
  .benefit-img {
    font-size: 2.5rem;
    color: #f08c09;
    margin-bottom: 12px;
  }
  
  .benefit-title {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.4;
  }
  
  /* Media pro BENEFITY 1080px */
  @media (max-width: 1080px) {
    .benefits-wrapper {
      width: 90%;
    }

    .benefits-grid {
      gap: 20px;
      grid-template-columns: repeat(2, 1fr);
    }
  
    .benefit-title {
      font-size: 1rem;
    }
  }
  
  /* Media pro BENEFITY 768px */
  @media (max-width: 768px) {
    .benefits-grid {
      grid-template-columns: 1fr;
    }
  
    .benefit-card {
      padding: 24px 16px;
    }
  
    .benefit-img {
      font-size: 2rem;
    }
  
    .benefit-title {
      font-size: 0.95rem;
    }
  }

/* ------------------------------ */
/*            GELERIE             */
/* ------------------------------ */

.gallery-grid {
  display: grid;
  /* V řádku se vyskutují jen 4 obrázky */
  grid-template-columns: repeat(4, 1fr);
  gap: 20px; /* mezera mezi obrazky */
}

.gallery-grid img {
  width: 100%;
  transition: transform 0.3s; /* ladný pohyb objektu */
  border-radius: 10px;
}

.gallery-grid img:hover {
  transform: scale(1.05); /* zvětšení při hoveru */
  box-shadow: 0 6px 24px rgba(32,30,30,0.5); /* větší stín při hoveru */
}

/* Media pro GALERII 1080px */
@media (max-width: 1080px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr); /* počet obrázků v řádku */
    gap: 16px;
  }
}

/* Media pro GALERII 768px */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(1, 1fr); /* počet obrázků v řádku */
    gap: 12px;
  }
}

/* ------------------------------ */
/*            NÁŠ TÝM             */
/* ------------------------------ */

.team-section {
  width: 80%;
  margin: 60px auto 50px;
  text-align: center;
}

.team-section h2 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.team-section h3 {
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 40px;
  color: #201E1E;
}

.team-cards {
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
}

.team-card-glow {
  background: #fff;
  border-radius: 22px; /* zaoblení rohů objektu */
  box-shadow:
    0 0 40px 10px rgba(240, 140, 9, 0.3), /* stín objektu */
    0 0 0 4px rgba(240, 140, 9, 0.1); /* stín objektu */
  padding: 18px 18px 14px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 320px;
  margin: 0 auto;
  position: relative;
  transition: box-shadow 0.3s, transform 0.2s; /* ladný pohyb objektu */
}

/* zvetšení stínu a velikosti při hoveru */
.team-card-glow:hover {
  box-shadow:
    0 0 60px 20px rgba(240, 140, 9, 0.7),
    0 0 0 6px rgba(240, 140, 9, 0.3);
  transform: translateY(-6px) scale(1.04);
}

.team-card-glow img {
  width: 100%;
  border-radius: 18px;
  margin-bottom: 18px;
  object-fit: cover;
  box-shadow: 0 0 24px 0 rgba(240, 140, 9, 0.18); /* shadow / glow obrázku */
}

.team-card img {
  width: 100%;
  border-radius: 16px 16px 0 0;
  margin-bottom: 20px;
  object-fit: cover;
}

.team-card-text {
  text-align: center;
}

.team-card-name {
  font-size: 1.3rem;
  font-weight: bold;
  color: #201E1E;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.team-card-role {
  font-size: 1.05rem;
  font-weight: 600;
  color: #F08C09;
  letter-spacing: 1px;
}

/* Media pro TÝM 1080px */
@media (max-width: 1080px) {
  .team-section {
    width: 95%;
  }
  .team-cards {
    gap: 20px;
  }
  .team-card-glow {
    width: 270px;
  }
}

/* Media pro TÝM 768px */
@media (max-width: 768px) {
  .team-section {
    width: 100%;
    padding: 0 2vw;
  }

  .team-section h2 {
    font-size: 1.4rem;
  }

  .team-cards {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
  .team-card-glow {
    width: 95vw;
    max-width: 350px;
  }
}

/* ------------------------------ */
/*            KONTAKT             */
/* ------------------------------ */

.kontakt-section h3{
  font-size: 1.3rem;
  font-weight: 400; /* tloušťka písma */
  margin-bottom: 40px;
  color: #201E1E;
  text-align: center; /* zazovnání na střed */
}

.kontakt-section form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 60%;
  margin: 0 auto;
}

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

.form-group {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.form-group label {
  margin-bottom: 6px;
  font-weight: bold; /* tučné písmo */
  font-size: 1rem;
}

.kontakt-section input, .kontakt-section textarea {
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  resize: vertical; /* umožňuje uživateli zvětšovat objekt nahoru a dolů */
}

/* Černé tlačítko vlevo */
.blck-btn {
  background-color: #201E1E;
  color: white;
  border: none; /* tlačítko nemá border */
  border-radius: 10px;
  padding: 12px 32px;
  font-size: 1rem;
  font-weight: bold; /* tučné písmo */
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.2s; /* ladná změna barvy */
}

/* změna barvy při hoveru */
.blck-btn:hover {
  background-color: #F08C09;
}

/* Media pro KONTAKTY 1080px */
@media (max-width: 1080px) {
  .kontakt-section form {
    width: 80%;
  }
  .form-row {
    gap: 12px;
  }
}

/* Media pro KONTAKTY 768px */
@media (max-width: 768px) {
  .kontakt-section form {
    width: 98%;
    padding: 0 2vw;
  }
  .form-row {
    flex-direction: column;
    gap: 0;
  }
  .blck-btn {
    width: 100%;
    align-self: stretch;
    text-align: center;
    font-size: 1.1rem;
    padding: 16px 0;
    margin-top: 8px;
  }
  .form-group label {
    font-size: 1.05rem;
  }
  .kontakt-section input, .kontakt-section textarea {
    font-size: 1.05rem;
  }
}

/* ------------------------------ */
/*            FOOTER              */
/* ------------------------------ */

.footer-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 24px;
    background-color: #201E1E;
    color: #fff;
  }
  
  .footer-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    background: none;
    padding: 32px 48px;
    font-size: 1.4rem;
  }
  
  .footer-kontakty {
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-size: 1.5rem;
  }
  
  .footer-mapa iframe {
    width: 400px;
    height: 200px;
    border: 0;
    border-radius: 8px;
  }

  .footer-copyright {
    font-size: 1.2rem;
    padding-bottom: 15px; /* mezera naspod */
    letter-spacing: 0.5px;
  }
  
  footer {
    text-align: center; /* Pro zarovnání na střed */
    background-color: #201E1E;
    color: #fff;
  }

  @media (max-width: 1080px) {
    .footer-info {
      gap: 32px;
      padding: 24px 16px;
      font-size: 1.15rem;
    }
    .footer-mapa iframe {
      width: 320px;
      height: 160px;
    }
    .footer-kontakty {
      font-size: 1.2rem;
    }
    .footer-copyright {
        font-size: 1.1rem;
      }
  }
  
  @media (max-width: 768px) {
    .footer-box {
      flex-direction: column;
      gap: 24px;
      padding: 0 8px;
    }
    .footer-info {
      flex-direction: column;
      align-items: center;
      gap: 18px;
      padding: 16px 0;
      font-size: 1rem;
    }
    .footer-mapa iframe {
      width: 100%;
      min-width: 0;
      height: 140px;
    }
    .footer-kontakty {
      align-items: center;
      font-size: 1rem;
    }
    .footer-copyright {
        font-size: 0.8rem;
      }
  }