/* projects.css */
.card-container {
    display: none; /* Hidden by default */
    /* ... other styles ... */
}
/* 1. Make the whole container look clickable */
.projectcontainer {
    cursor: pointer;
    transition: border-color 0.3s ease, transform 0.2s ease;
    user-select: none; /* Prevents text highlighting on double click */
}

/* Optional: Add a subtle hover effect to the whole box */
.projectcontainer:hover {
    border-color: var(--color-accent); /* Glows when you hover the box */
}

/* 2. Reset the H1 specific styles since the parent handles it now */
.projectcontainer h1 {
    pointer-events: none; /* Allows click to pass through to the container */
}

/* 3. IMPORTANT: Reset cursor for the open area so users know cards aren't the 'toggle' */
.card-container {
    cursor: default;
    width: 100%; /* Ensure it fills the parent */
}

.ProjectSection{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: fit-content;
    width: 100%;
    gap: 5vmin;
    h1{
        text-shadow: 1.3vmin 1.3vmin 0vmin black;

        margin: 0px;
        font-size: 10vmin;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    
    }
    .projectP{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 90%;
        height: fit-content;
        padding: 2vmin;
        border-radius: 2vmin;
        border: 1vmin solid; 
        border-image: linear-gradient(to right,var(--accent), rgb(6, 6, 6)) 1;

        gap: 5vmin;
        h1{
            font-size: 7vmin;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    
        }
        .projectcontainer{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 4vmin;
            min-height: 15vmin;

            height: fit-content;
            width: 100%;
            padding: 2vmin;
            border-radius: 2vmin;
            

            
            h1{
                
                span{
                    color: var(--accent);
                }
            }

            .card-container {
                display: none;
                flex-direction: column;
                align-items: center;
                gap: 4vmin;
                width: 100%;
                
                height: fit-content;
                
                
            }
            
            .card {
                width: 90%;
                height: 20vmin;
                position: relative;
                transform-style: preserve-3d;
                transform: rotateY(0deg);
                transition: transform 1s linear, height .2s linear; /* Combine transitions */
                border-top: 0 solid gray;
                border-right: 1.5vmin solid var(--accent);
                border-bottom: 0 solid gray;
                border-left: 1.5vmin solid var(--accent);
                
                border-radius: 2vmin;
                perspective: 1000px;
                animation: swipedown 1s ease;
            }
           
            .card:hover {
                height: 40vmin;

                    transform: rotateY(180deg);
            }
            
            .front, .back {
                position: absolute;
                width: 100%;
                height: 100%;
                backface-visibility: hidden;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 4vmin;
                color: white;
                border-radius: 2vmin;
                background-color: black;
                
            }
            
            .front {
                display: flex;
                align-items: center;
               
                background-color: #000000;
                border-radius: 3vmin;
                justify-content: space-between;
                gap: 5vmin;
                img{
                    margin-left: 2vmin;
                    width: 15vmin;
                    height: 15vmin;
                    border-radius: 2vmin;
                }
                h4{
                    
                    width: 60vmin;
                    color: var(--accent);
                    text-shadow: .8vmin .8vmin 0vmin black;
                    font-size: 4vmin;
                    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    
                }
            }
            
            .back {
                display: flex;
                flex-direction: column;
                min-height: 100%;
                align-items: end;
                gap: 2vmin;
                height: fit-content;
                
                background-color: #000000;
                border-radius: 3vmin;
                transform: rotateY(180deg);
                transition: all 1s linear;
                p{
                    margin-left: 2vmin;
                    margin-right: 2vmin;
                    font-size: 3.5vmin;
                    color: white;
                    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
                }
                div{
                    display: flex;
                    margin-right: 3vmin;
                    gap: 4vmin;
                    margin-bottom: 2vmin;
                    a{
                        border-radius: 2vmin;
                    }
                    a:hover{
                        box-shadow: 0 0 5vmin var(--accent);
                    }
                    img{
                        width: 8vmin;
                        height: 8vmin;
                        background-color: white;
                        border-radius: 1vmin;
                    }
                }
                
            }
            


        }
        .projectcontainer::before{
            content: "";
            position: absolute;

            height: 20%;
            width: 50%;
        }
       
    }
}

.projectdisplayP:hover .projectdisplay{
    transform: rotateY(180deg);
}