/* HERO */

.hero {

  position: relative;

  width: 100%;

  height: 100vh;

  background: linear-gradient(-45deg, 

              #E6EBEB, #BFDCDC, #A8CACA, #77A8A8, 

              #E6EBEB, #BFDCDC, #A8CACA, #77A8A8); /* barvy duplikovány */

  background-size: 400% 400%;

  animation: gradientMove 6s linear infinite;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 20px;

  overflow: hidden;

}



@keyframes gradientMove {

  0% { background-position: 0% 50%; }

  100% { background-position: 100% 50%; }

}



.hero-text {

  text-align: center;

  color: black;

  padding: 20px 30px;

  border-radius: 15px;

  animation: fadeIn 2s ease forwards;

  opacity: 0;

}



/* animace textu při načtení */

@keyframes fadeIn {

  from {

    opacity: 0;

    transform: translateY(20px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.hero-text h1 {

  font-size: 2.5em;

  margin-bottom: 10px;

}



.hero-text p {

  font-size: 1.3em;

  margin-bottom: 20px;

}





/* responzivní úpravy pro mobily */

@media (max-width: 768px) {

  .hero-text h1 {

    font-size: 2em;

  }

  .hero-text p {

    font-size: 1.1em;

  }

}



/* BUTTON */

.btn {

    display: inline-block;

    padding: 10px 20px;

    background: #77A8A8;

    color: white;

    text-decoration: none;

    border: 1px solid #518080;

    border-radius: 7px;

    transition: 0.3s;

}



.btn:hover {

    background: #4b7979;

    color: black;

}



/* ================= ABOUT ================= */

.about {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    padding: 50px 10%;

    background: #F5F5F5;

    text-align: center;

}

.about-text, .about-img {

    flex: 1 1 100%;

    margin: 10px 0;

}

.about-img img {

    max-width: 300px;   /* desktop */

    max-height: 300px;  /* desktop */

    width: 100%;

    height: auto;

    border-radius: 10px;

}





/* ================= JEŽCI / Cards ================= */

.hedgehogs { text-align: center; padding: 50px 10%; }

.cards {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

    gap: 15px;

    margin-top: 20px;

}

.cards .card {

    text-align: center;

    padding: 10px;

}

.cards .card img {

    width: 100%;

    height: auto;

    max-height: 180px;

    border-radius: 10px;

}

.card1 img { border: solid 2px dodgerblue; }

.card2 img { border: solid 2px #DC143C; }

.card p { margin-top: 10px; font-weight: bold; }



/* ================= SLIDER JEŽCI ================= */

.slider-container {

    position: relative;

    width: 100%;

    max-width: 900px;

    margin: 0 auto;

    overflow: hidden;

    display: flex;

    align-items: center;

}

.cards-wrapper { overflow: hidden; flex: 1; }

.cards-slider {

    display: flex;

    transition: transform 0.5s ease;

}

.cards-slider .card {

    flex: 0 0 23%; /* desktop: 4 karty */

    box-sizing: border-box;

    text-align: center;

    padding: 10px;

}

button.prev, button.next {

    background-color: #77A8A8;

    color: white;

    border: 1px solid #518080;

    font-size: 2em;

    padding: 5px 10px;

    cursor: pointer;

    border-radius: 50%;

    z-index: 2;

}

button.prev { margin-right: 10px; }

button.next { margin-left: 10px; }

button.prev:hover, button.next:hover { background-color: #518080; color: black; }





/* ================= GALERIE ================= */

.gallery {

    text-align: center;

    padding: 50px 10%;

    background: #F5F5F5;

    border-top: 2px solid #ddd;

}

.gallery-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

    gap: 15px;

    margin-bottom: 20px;

}

.gallery-grid img {

    width: 100%;

    height: auto;

    object-fit: cover;

    border-radius: 10px;

    border: 2px solid #77A8A8;

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

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

}

.gallery-grid img:hover {

    transform: scale(1.05);

    box-shadow: 0 8px 16px rgba(0,0,0,0.2);

    cursor: pointer;

}



/* ================= MEDIA QUERIES ================= */

@media (max-width: 900px) {

    .hero-text h1 { font-size: 2em; }

    .hero-text p { font-size: 1.1em; }

    .cards, .gallery-grid {

        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

        gap: 15px;

    }

    .cards-slider .card { flex: 0 0 45%; } /* tablet: 2 karty */

}



@media (max-width: 600px) {

    .hero { height: 70vh; }

    .hero-text h1 { font-size: 1.6em; }

    .hero-text p { font-size: 1em; }



    /* 2 obrázky vedle sebe na mobilu */

    .cards, .gallery-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 10px;

    }

    .cards .card img, .gallery-grid img {

        max-height: none; /* obrázky zachovají poměr stran */

    }



    .cards-slider .card { flex: 0 0 48%; } /* slider: 2 karty vedle sebe */

    .about-text, .about-img { flex: 1 1 100%; }

    .album-card, .gallery-item, .litter-card { max-width: 100%; margin: 0 auto; }

    a.button, .btn { padding: 8px 16px; font-size: 0.9em; }

}