:root{
  --bg:#f3e5d7;
  --brown:#5a2f1f;
  --accent:#d8893b;
}

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

body{
  font-family:'Open Sans', sans-serif;
  background:var(--bg);
  color:var(--brown);
}

/* HEADER */
header{
  position:sticky;
  top:0;
  background:linear-gradient(#efb87f,#d89959);

  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap; /* 👈 DŮLEŽITÉ */

  padding:15px 20px;
}

.logo{
  font-family:'Playfair Display';
  font-size:22px;
}

.menu-toggle{
  display:none; 
  font-size:26px;
  cursor:pointer;
}

nav{
  display:flex;
  gap:20px;
   margin-right: 20px;
}

nav a{
  text-decoration:none;
  color:var(--brown);
  font-weight:600;
}

/* HERO */
.hero {
  display: flex;
  align-items: center;
  min-height: 420px;

  /* PLYNULÝ PŘECHOD */
  background: linear-gradient(
    to right,
    #e9d2b5 0%,
    #e9d2b5 50%,
    rgba(233,210,181,0.9) 60%,
    rgba(233,210,181,0.6) 70%,
    rgba(233,210,181,0.2) 80%,
    rgba(233,210,181,0) 90%
  );
}

.hero-text {
  flex: 1;
  padding: 60px;
  max-width: 600px;
}

.hero-text h1{
  font-family:'Playfair Display';
  font-size:42px;
}

.hero-text p{
  margin:15px 0;
}

.btn{
  background:linear-gradient(#f5b25c,#d8893b);
  padding:12px 20px;
  border:none;
  cursor:pointer;
}

.hero-img {
  flex: 1;
  height: 420px;

  background: url("/img/hero.webp") right center no-repeat;
  background-size: cover;
}

/* GRID */
.section{
  max-width:1100px;
  margin:auto;
  padding:50px 20px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
}

.card{
  text-align:center;
}

.card img{
  width:80%;
  object-fit:cover;
  border-radius:8px;
}

.card h3{
  font-family:'Playfair Display';
  margin:10px 0;
}

.card button{
  margin-top:10px;
  width:80%;
  padding:10px;
  background:linear-gradient(#f5b25c,#d8893b);
  border:none;
  cursor:pointer;
}

.eso{
  text-align:center;
  margin-top:25px;
  font-weight:bold;
}
/* KONTAKT */

.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}

/* INFO */
.info h2{
  font-family:'Playfair Display';
}

.info p{
  margin:10px 0;
}

/* FORM */
form{
  background:#fff;
  padding:25px;
  border-radius:10px;
  box-shadow:0 5px 15px rgba(0,0,0,0.1);
}

.form-group{
  margin-bottom:15px;
}

input, textarea{
  width:100%;
  padding:10px;
  border:1px solid #ddd;
  border-radius:6px;
}

button{
  background:linear-gradient(#f5b25c,#d8893b);
  border:none;
  padding:12px;
  width:100%;
  font-weight:600;
  cursor:pointer;
}

/* MAPA */
.map{
  margin-top:40px;
}

iframe{
  width:100%;
  height:300px;
  border:none;
  border-radius:10px;
}

.fb-float{
    position:fixed;
    right:20px;
    bottom:20px;
    width:55px;
    height:55px;
    background:#1877f2;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 5px 15px rgba(0,0,0,0.3);
    transition:0.3s;
    z-index:999;
        }
/* hover efekt */
.fb-float:hover{
    transform:scale(1.1);
    background:#145dbf;
        }
.contact-info{
    display:flex;
        flex-direction:column;
            gap:8px;
            }

/* řádek */
.contact-info .item{
        display:flex;
        align-items:center;
        gap:8px;
        font-size:14px;
        }

/* ikonky */
.contact-info svg{
        width:16px;
        height:16px;
        fill:#e07a6f; /* tvoje červeno-růžová */
        flex-shrink:0;
        }
.katalog{
    width:100%;
    height:80vh;
    overflow:hidden;
     }
.katalog iframe{
    width:100%;
    height:100%;
    border:none;
    border-radius:10px;
        }

/* RESPONSIVE */
@media(max-width:768px){

  .hero{
    flex-direction: column;
    background: #e9d2b5; /* bez gradientu */
  }

  .hero-img{
    flex: none;
    order: 2;
    width: 100%;
    height: 300px;
    background: url("/img/hero.webp") ;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .hero-text{
    order: 1;
    padding: 25px;
  }
    header{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  nav{
    width:100%;
    display:none;
    flex-wrap:wrap;
    gap:10px;
  }

  nav a{
    flex:1 1 auto;
    font-size:14px;
  }
  header{
    flex-wrap:wrap;
  }

  .menu-toggle{
    display:block;
  }

  nav{
    display:none;
    width:100%;
    flex-direction:column;
    background:#fff;
    margin-top:10px;
    border-radius:8px;
    overflow:hidden;
  }

  nav a{
    padding:12px;
    border-bottom:1px solid #eee;
  }

  nav a:last-child{
    border-bottom:none;
  }

  nav.active{
    display:flex;
  }

    .grid{
    grid-template-columns:1fr;
  }
.fb-float{
	width:50px;
        height:50px;
        right:15px;
        bottom:15px;
    }
.katalog {
    height:90vh;
        }
  /* HERO */
    .hero-page{
          flex-direction:column;
                gap:20px;

          padding:25px 20px;
            }

  /* TEXT */
    .hero-page-text{
      width:100%;
    order:1;
  text-align:left;
        }

  .hero-page-text h1{
    font-size:30px;
  line-height:1.2;
  margin-bottom:15px;
          }
    .hero-page-text p{
      font-size:16px;
    line-height:1.6;
          }

    /* OBRÁZEK */
  .hero-page-image{
    width:100%;
  order:2;
        }
      .hero-page-image img{
        width:100%;
      height:auto;

    border-radius:12px;
  display:block;
        }
      /* CONTENT */
    .lahudky-content{
      display:flex;
    flex-direction:column;
      gap:25px;
        }
      .text-box{
        width:100%;
          }
    .text-box h2{
      font-size:26px;
    margin-bottom:15px;
          }

    .text-box p{
      font-size:16px;
    line-height:1.7;
          }
    .text-box li{
      font-size:15px;
      margin-bottom:10px;
              }

   .image-box{
          width:100%;
            }
  .image-box img{
        width:100%;
      height:auto;
      border-radius:12px;
      display:block;
            }
      /* SECTION */
    .section{
      padding:35px 20px;
        }
}






/* PODSTRÁNKA HERO */
.hero-page{
    display:flex;
        align-items:center;
            gap:40px;
            
                max-width:1200px;
                    margin:auto;
                        padding:60px 20px;
                        }
                        
                        .hero-page-text{
                            flex:1;
                            }
                            
                            .hero-page-text h1{
                                font-family:'Playfair Display';
                                    font-size:42px;
                                        margin-bottom:20px;
                                        }
                                        
                                        .hero-page-text p{
                                            font-size:17px;
                                                line-height:1.7;
                                                }
                                                
                                                .hero-page-image{
                                                    flex:1;
                                                    }
                                                    
                                                    .hero-page-image img{
                                                        width:100%;
                                                        height: 300px;
                                                            border-radius:14px;
                                                                object-fit:cover;
                                                                }
                                                                
                                                                /* CONTENT */
                                                                .lahudky-content{
                                                                    display:grid;
                                                                        grid-template-columns:1fr 1fr;
                                                                            gap:40px;
                                                                                align-items:center;
                                                                                }
                                                                                
                                                                                .text-box h2{
                                                                                    font-family:'Playfair Display';
                                                                                        margin-bottom:20px;
                                                                                        }
                                                                                        
                                                                                        .text-box p{
                                                                                            margin-bottom:15px;
                                                                                                line-height:1.7;
                                                                                                }
                                                                                                
                                                                                                .text-box ul{
                                                                                                    list-style:none;
                                                                                                        padding:0;
                                                                                                        }
                                                                                                        
                                                                                                        .text-box li{
                                                                                                            margin-bottom:10px;
                                                                                                            }
                                                                                                            
                                                                                                            .image-box img{
                                                                                                                width:100%;
                                                                                                                    border-radius:12px;
                                                                                                                    }
                                                                                                                    
                                                                                                                    /* MOBILE */
                                                                                                                    @media(max-width:768px){
                                                                                                                    
                                                                                                                        .hero-page{
                                                                                                                                flex-direction:column;
                                                                                                                                        padding:30px 20px;
                                                                                                                                            }
                                                                                                                                            
                                                                                                                                                .hero-page-text h1{
                                                                                                                                                        font-size:32px;
                                                                                                                                                            }
                                                                                                                                                            
                                                                                                                                                                .lahudky-content{
                                                                                                                                                                        grid-template-columns:1fr;
                                                                                                                                                                            }
                                                                                                                                                                            
                                                                                                                                                                            }