@import "../__common__/root.scss";

$project_boorder_radius: 2.5vw;

.projects {
    background-color: $primary-dark;
    --color: rgba(114, 114, 114, 0.3);
    background-image: linear-gradient(0deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent),
    linear-gradient(90deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent);
    $size: 70px;
    background-size: $size $size;

    .transition {
        position: absolute;
        width: 100%;
        height: 10vh;
        // background-color: red;
        background: rgb(29,29,29);
        background: linear-gradient(180deg, rgba(29,29,29,1) 0%, rgba(255,255,255,0) 90%);
    }

    .holder {
        position: relative;
        width: 100%;
        height: 100vh;
        padding: 0vw;
    }

    .carousel {
        position: relative;
        width: 100%;
        height: 100%;

        .carousel-inner {
            position: relative;
            top:50%;
            left: 50%;
            transform: translate(-50%, -50%);
            height: max-content;
            justify-content: center;            
            // background-color: red;
            padding: 3vw;
            // background-color: red;
        }

        .carousel-item {

            .content_holder {
                position: relative;
                left: 50%;
                transform: translate(-50%, 0%);
                // padding: 0.5vw;
                width: max-content;
                background-color: #0a1d26; 
                border-radius: $project_boorder_radius;
                height: 61vh;
                width: 60vw;
                border: 0.2vw $primary-light solid;
                filter: drop-shadow(0vh 0vh 1.5vw #000000);
                overflow: hidden;
                
                .img_holder {
                    position: absolute;
                    
                    .overlay {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        border-radius: $project_boorder_radius;
                        background-color: #1d1d1d;
                        opacity: 0.5;
                        z-index: 2;
                    }

                    img {
                        position: absolute;
                        left: 50%;
                        transform: translate(-50%);
                        // width: 100%;
                        max-height: 60vh;
                        z-index: 1;
                    }
                }

                .text_holder {
                    a {
                        transition: 0.1s all ease-in-out;
                        color: #ffc857;
                        &:hover {
                            color: #e6b14c;
                        }

                        text-transform: lowercase;
                        text-decoration: none;
                        // text-decoration: underline;
                    }
                }
            }
        }
    }
}   


/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {

    .projects {

        .title {
            position: absolute;
            top: 16%;
            left: 50%;
            transform: translate(-50%, -16%);
            color: $primary-light;
            font-size: 3vw;
            display: none;
        }

        .content_holder {
            width: 60vw;

            .img_holder {
                width: 100%;
                height: 100%;
            }

            .text_holder {
                position: relative;
                top: 100%;
                transform: translate(0%, -100%);
                background: rgb(29,29,29);
                background: linear-gradient(0deg, rgba(10,29,38,1) 25%, rgba(10,29,38,0) 100%);
                padding: 1.2vw;
                padding-bottom: 0.2vw;
                border-radius: 0vw 0vh $project_boorder_radius $project_boorder_radius;
                color: $primary-light;
                z-index: 3;

                a {
                    font-size: 3vw;
                }

                p {
                    font-size: 1.1vw;

                    &:nth-child(2) {
                        font-size: 0.9vw;
                    }
                }
            }
        }
    }

}

/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
    .projects {
        
        .title {
            position: absolute;
            top: 12.5%;
            left: 50%;
            transform: translate(-50%, -12.5%);
            color: $primary-light;
            font-size: 7vw;
            width: 100%;
            text-align: center;
        }

        .carousel {

            .carousel-inner {
                top: 60%;
                left: 50%;
                transform: translate(-50%, -60%);
            }

            .carousel-item {
    
                .content_holder {
                    width: 70vw;

                    .img_holder {
                        position: relative;
                        width: 100%;

    
                        .overlay {
                            display: none;
                        }
    
                        img {
                            position: relative;

                            border-radius: $project_boorder_radius;
                            width: 100%;
                            max-height: unset;
                        }
                    }
    
                    .text_holder {
                        position: relative;
                        padding: 2vh;
                        color: $primary-light;
                        z-index: 3;
                        width: 100%;

                        a {
                            font-size: calc(1vw + 1em);
                            white-space: nowrap;        
                            overflow: hidden;          
                            text-overflow: ellipsis;
                            max-width: 100%;
                            text-align: center;
                        }
    
                        p {
                            font-size: 3vw;
                        }
                    }
                }
            }
        }
    }
}