/* -------------------------------------------------------------- UVODNI HEADER -------------------------------------------------------------------- */

.hero {
    position: relative;
    max-width: 100%;  /* Hero banner pokryje celou šířku viewportu */
    height: 68vh;
    max-height: 650px; /* Výšku můžeš přizpůsobit */
    background-image: url('/img/Duo.jpeg'); /* Cesta k obrázku */
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 10px 40px 7px rgba(0, 0, 0, 0.6);
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    background-color: #0000009c; /* Černá clona s průhledností */
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: inset 0 50px 50px rgba(0, 0, 0, 1), inset 0 -50px 50px rgba(0, 0, 0, 1);

}

.hero-overlay h1 {
    color: #ffffff;
    font-size: 48px;
    margin: 0;
    padding: 7px;
}

.hero-overlay p {
    color: #ffffff;
    font-size: 2em;
    margin: 20px 0;
}

/* Stylizace fontu pro název firmy */
.nazev_firma{
    font-family: 'MadameCosmetics', sans-serif;
}

@media (max-width: 768px) {
    .hero {
        margin-top: 20px;
        max-width: 100%;  /* Hero banner pokryje celou šířku viewportu */
        height: 70vh;
        max-height: 650px; /* Výšku můžeš přizpůsobit */
    }
}


/*
.hero-button {
    padding: 10px 20px;
    background-color: #7A2B42;
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    margin-top: 20px;
}

.hero-button:hover {
    background-color: #6a2d42;
}
*/
/* Styl pro tlačítka níže */

/*
.button-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 50px;
}
*/

/* -------------------------------------------------------------- /UVODNI HEADER -------------------------------------------------------------------- */
/* -------------------------------------------------------------- TLACITKA -------------------------------------------------------------------- */

.button-container {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 40px 0px 0px 0px;
    user-select: none;
}

.custom-button {
    position: relative;
    width: 28vw; /* Šířka tlačítka def 360*/
    height: 29vh; /* Výška tlačítka def 200*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    transition: transform 0.3s, opacity 0.3s;
    outline: none;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;


}

.custom-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000c6; /* Černá průhledná clona */
    z-index: 1;
}

.custom-button:hover {
    transform: scale(1.05); 

}

.custom-button:hover::before {
    background: #000000e6; /* Zesílení clony při hoveru */
}

.custom-button span {
    position: relative;
    z-index: 2;
}

/* Pozadí tlačítek */
.tetovani-button {
    background-image: url('/img/Tetovaci_jehla.webp'); /* URL obrázku pro Tetování */
}

.makeup-button {
    background-image: url('/img/Stetec.webp'); /* URL obrázku pro Permanentní makeup */
}

.navrh-button {
    background-image: url('/img/Plato.webp'); /* URL obrázku pro Návrhy tetování */
}
/* Styl pro text nad tlačítkem */
.custom-button-text {
    position: absolute;
    text-align: center;
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    z-index: 2; /* Text bude nad clonou a obrázkem */
    
}
@media (max-width: 768px) {
    .button-container {
        display: grid;
        gap: 15px;
    }

    .custom-button {
        width: 90vw;
        height: 6vh;
    }
}

/* -------------------------------------------------------------- /TLACITKA -------------------------------------------------------------------- */
section {
    margin: 20px 20px 20px 20px;
        box-shadow: 0px 0px 40px 7px rgba(0, 0, 0, 0.6);

}

/* -------------------------------------------------------------- Nadpisy -------------------------------------------------------------------- */

.nadpis_sekce {
    text-align: center;
    font-size: 2em;
    margin-left: 0px;
    margin-right: 0px;
    background-position: center;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
    background-color: transparent;
}

#tetovani{
    margin-top: 25px;
}

@media (max-width: 768px) {
    .h2 {
        width: 90vw;
        height: 6vh;
    }
}

/* -------------------------------------------------------------- /Nadpisy -------------------------------------------------------------------- */
/* -------------------------------------------------------------- GALERIE -------------------------------------------------------------------- */

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 15px;
    padding: 20px;
    justify-items: center;
}
.gallery img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s, filter 0.3s;
    user-select: none;
}
.gallery img:hover {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* Tetování: Obrázky budou čtvercové */
.tetovani_gallery img {
    width: 350px;  /* Pevná šířka */
    max-height: 467px; /* Max výška */
    object-fit: cover; /* Zajistí, že obrázek bude vyplňovat celý čtverec bez deformace */
    overflow: hidden;
}

/* Návrhy tetování: Obrázky budou obdélníkové (na šířku) */
.navrh_gallery img {
    width: 350px;  /* Pevná šířka */
    max-height: 500px; /* Max výška */
    object-fit: cover; /* Zachová poměr stran a přizpůsobí obrázek */
    overflow: hidden;
}

/* Permanentní makeup: Obrázky budou obdélníkové (na výšku) */
.makeup_gallery img {
    width: 350px;  /* Pevná šířka */
    max-height: 350px; /* Max výška */
    object-fit: cover;
    overflow: hidden;
}

@media (min-width: 769px) and (max-width: 1600px) {
    .gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px + 5%, 1fr));
        gap: 10px;
        padding: 10px;
    }
    .tetovani_gallery img {
        width: 150px + 5%;
        max-height: 200px + 5%;
    }
    .navrh_gallery img {
        width: 150px + 5%;
        max-height: 212px + 5%;
    }
    .makeup_gallery img {
        width: 150px + 5%;  /* Pevná šířka */
        max-height: 150px + 5%; /* Max výška */
    }
}


@media (max-width: 768px) {
    .gallery {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px;
        padding: 10px;
    }
    .tetovani_gallery img {
        width: 150px;
        max-height: 200px;
    }
    .navrh_gallery img {
        width: 150px ;
        max-height: 212px;
    }
    .makeup_gallery img {
        width: 150px;  /* Pevná šířka */
        max-height: 150px; /* Max výška */
    }
}

@media (max-width: 490px) {
    .gallery {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}
/* -------------------------------------------------------------- /GALERIE -------------------------------------------------------------------- */
/* -------------------------------------------------------------- MODÁLNÍ OKNO (ZVĚZTŠÍ OBRÁZEK PO NAKLIKNUTÍ) -------------------------------------------------------------------- */

/* Modal styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000000e1;
    justify-content: center;
    align-items: center;
}
.modal-content {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 12px;
    overflow: hidden;
    justify-content: center;
    align-items: center;
}

.modal-content img {
    max-width: calc(100vw - 40px); /* Maximální šířka obrázku 90% šířky okna (viewport width) */
    max-height: calc(100vh - 40px); /* Maximální výška obrázku bude 100 % výšky okna minus 40px (rezerva pro lištu) */
    width: auto;      /* Zachování poměru stran pro šířku */
    height: auto;     /* Zachování poměru stran pro výšku */
    margin: auto;     /* Zarovnání obrázku uprostřed */
    display: block;   /* Aby obrázek zabíral celý dostupný prostor */
    object-fit: contain; /* Obrázek se zmenší, aby se vešel do kontejneru */
}

.close {
    position: absolute;
    top: 5%;
    right: 5%;
    color: #ffffff;
    font-size: 60px;
    border-radius: 50%;
    cursor: pointer;
}

.close:hover{
    color: #cccccc;
    transition: transform 0.5s, opacity 0.5s;
}

/* Styly pro šipky */
.arrow {
    position: fixed;
    top: 50%;
    border-radius: 50%; 
    transform: translateY(-50%);
    color: #ffffff;
    font-size: 40px;
    cursor: pointer;
    user-select: none;
    z-index: 1001;  
}

.arrow.left {
    left: 23vw;
}

.arrow.right {
    right: 23vw;
}

.arrow:hover {
    color: #cccccc;
}

@media (max-width: 768px) {
    .close {
        left: 46vw;
        top: 88vh;
    }

    .arrow {
        top: 92vh;
    }

    .arrow.left {
        left: 25vw;
    }
    .arrow.right {
        right: 25vw;
    }
}


/* -------------------------------------------------------------- /MODÁLNÍ OKNO -------------------------------------------------------------------- */


@media (max-width: 768px) {
    .modal-content img {
        max-width: 100vw;  /* Na mobilních zařízeních použij celou šířku */
        max-height: 80vh;  /* Výška zůstává maximálně 80 % výšky okna prohlížeče */
    }
}