@import "general.css";

body{
    main{
        .container{
            display: flex;
            align-items: center;
            height: var(--containrHeight);
            width: 100%;
            position: relative;
            .first{
                height: 100%;
                img{
                    height: 100%;
                }
            }
            .second{
                flex-grow: 1;
                display: flex;
                justify-content: center;
                .marginedSecond{
                    width: calc((100vw - var(--containrHeight)) * 0.9);
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    gap: max(12.5vh, 70px);
                    font-size: 2vw;
                    p, #metro p{
                        font-family: "KyivTypeBold", serif;
                        font-size: 1em;
                        color: black;
                        text-align: center;
                        svg{
                            vertical-align: middle;
                            height: 1.2em;
                            width: auto;
                            transform: translateY(-10%);
                            overflow: visible;
                            path{
                                fill: black;
                            }
                        }
                    }
                    #adress{
                        font-family: "KyivType", serif;
                    }
                    #metro{
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        #metroSecond{
                            font-family: "KyivType", serif;
                            font-size: 0.8em;
                            color: var(--gray3);
                            margin-top: 10px;
                            svg{
                                path{
                                    fill: var(--gray3);
                                }
                            }
                        }
                    }
                    .button{
                        text-decoration: none;
                        background-color: var(--pink);
                        border: solid clamp(1px, 0.25vw, 2px) black;
                        border-radius: clamp(5px, 2vw, 12px);
                        font-size: 0.9em;
                        padding: clamp(2px, 1.6vw, 7px) clamp(3px, 2.25vw, 10px);
                        cursor: pointer;
                        transition: transform 0.25s ease;
                        font-family: "KyivTypeBold", serif;
                        color: white;
                        user-select: none;
                        -webkit-user-select: none;
                    }
                }
            }
            .gradient{
                position: absolute;
                z-index: 5;
                height: 100%;
                aspect-ratio: 1 / 2;
                background: linear-gradient(to left, white, transparent);
                transform: translateX(calc(100% + 1px));
            }
            #mobileGradient{
                display: none;
            }
        }
    }
    #windowContainer{
        position: fixed;
        z-index: 40;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        pointer-events: none;
        overflow-y: auto;
        transition: opacity 0.25s ease;
        #popUpWindow{
            position: relative;
            z-index: 31;
            background-color: white;
            border: solid clamp(3px, 0.5vw, 5px) var(--gray3);
            padding: min(25px, 3vw);
            padding-top: 15px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
            #name{
                color: black;
                font-family: "Kurale", serif;
                font-size: clamp(20px, 3.75vw, 4.75vh);
                text-align: center;
                #locationIcon{
                    vertical-align: middle;
                    height: 1.2em;
                    width: auto;
                    transform: translateY(-10%);
                    path{
                        fill: var(--gray3);
                    }
                }
            }
            iframe{
                border: solid clamp(2px, 0.3vw, 3px) var(--gray3);
                border-radius: 15px;
                aspect-ratio: 1 /1;
                width: clamp(min(315px, 80vw), 80vw, 70vh);
            }
            #crossIcon{
                position: absolute;
                top: 2vmin;
                right: 2vmin;
                width: clamp(20px, 4vmin, 3.5vh);
                height: clamp(20px, 4vmin, 3.5vh);
                cursor: pointer;
                transition: transform 0.25s ease;
                path{
                    fill: var(--gray3);
                }
            }
        }
        #mainShade{
            position: fixed;
            top: 0;
            z-index: 30;
            width: 100%;
            height: 100%;
            background-color: var(--gray3);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease;
        }
    }
}

@media (max-aspect-ratio: 7 / 5){
    body{
        main{
            .container{
                height: auto;
                align-items: stretch;
                .first{
                    height: auto;
                    img{
                        width: 55vw;
                    }
                }
                .second{
                    height: auto;
                    .marginedSecond{
                        width: calc(45vw * 0.9);
                        height: auto;
                        gap: 0;
                        justify-content: space-evenly;
                    }
                }
            }
        }
    }
}

@media (max-width: 1000px){
    body{
        main{
            .container{
                height: auto;
                flex-direction: column;
                .first{
                    width: 100vw;
                    height: auto;
                    aspect-ratio: auto;
                    img{
                        width: 100%;
                    }
                }
                .second{
                    width: 100vw;
                    margin: max(12px, 2vh) 0;
                    flex-grow: 0;
                    .marginedSecond{
                        width: 100%;
                        gap: max(20px, 10vw);
                        font-size: 5vw;
                        p, #metro p{
                            width: 80%;
                        }
                    }
                }
                .gradient{
                    display: none;
                }
                #mobileGradient{
                    display: block;
                    position: absolute;
                    z-index: 5;
                    height: 50vw;
                    width: 100vw;
                    background: linear-gradient(to top, white, transparent);
                    transform: translateY(calc(+100% + 1px));
                }
            }
        }
    }
}

@media (max-height: 452px){
    body{
        #windowContainer{
            align-items: flex-start;
        }
    }
}

@media (hover: hover) and (pointer: fine){
    .marginedSecond .button:hover{
        transform: scale(1.05);
    }
    #crossIcon:hover{
        transform: scale(1.1);
    }
}