/* Link with tips on how to make a responsive image gallery https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery_responsive */


/* Got started with this site: https://code-boxx.com/responsive-image-gallery-html-css/ 
    Got more help from this site: https://www.w3schools.com/css/css_grid.asp 
*/

li {
    list-style-type: none;
}

h1 {
    position: fixed; /* If this happens to overlay things, make those position:relative; */
}

/* Style for the project pages ------------------------------------------------------------------------------------------------------------------ */
#textContainer {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 70%;
    margin: auto;
    gap: 60px;
    position: relative; 
}
#info {
    flex-grow: 3;
    width: 50%;
}
#description {
    flex-grow: 5;
    width: 50%;
    margin-top: 4.5rem;
}
h2 {
    font-size: 2.5rem; /*40px*/
    font-weight: 900;
}
h3 {
    font-size: 1.5rem; /*24px*/
    font-weight: normal;
}
h4 {
    font-size: 1.25rem; /*20px*/
    margin-bottom: 0.7rem;
} 
h2, 
h3, 
h4.project {
    text-align: right;
}

.placeholderImg {
    margin-top: 10rem;
    /* centering the image */
    display: grid;
    justify-content: center;
    justify-items: center;
    /* putting it on top of the fixed H1. */
    position: relative;
}
.placeholderImg img {
    /* width is needed for the centering, and height auto + object-fit:cover; allows for pretty scaling */
    width: 100%;
    height: auto;
    margin-bottom: 5vw;
    object-fit: cover;
    max-width: 1000px;
    max-height: 900px;
}

/* Style for the form --------------------------------------------------------------------------------------------------------------*/
#formContainer {
    width: 700px;
    margin: 42vh auto; /* top and bottom, and right and left. Auto to make it centered. */
    position: absolute; /* for when i don't want it to take up space */
    position: relative; /* for when i want it to take up space, but this makes the galleryContainer not centered:((( nvm adding width:100%; to gC fixed it.  */
    display: none; /* hides the form as default */

    /* for cal */
    margin-bottom: 600px;
}

/* Placing some of the form side-by-side. */
fieldset {
    width: 200px;
    height: 390px;
    float: left;
    /* margin-left: 10%; */
    border: none;

}

h4 {
    margin-bottom: 2rem; /* Adding bottom space to the h4 in the form. */
}

label.optional {
    font-style: italic;
    font-size: 0.7rem;
}


form input[type="text"],
textarea,
#textbox,
select {
    width: 250px; /* Sets width of input fields. */
}

select {
    width: 266px; /* Width of the dropdown menu.*/
}

#textbox {
    /* Width and height of large textbox */
    height: 100px; 
    width: 250px;
}

/* Hiding the existing button */
#chooseFiles input[type='file'] {
    opacity: 0;
    width: 0px;
    height: 0px;
    margin: 1rem 0;
    padding: 0;
}

/* Styling the new choose files button */
#chooseFiles {
    margin: 1rem 0;
    padding: 0.5rem 2rem;

    font-size: 0.8rem;
}
#chooseFiles:hover {
    outline: 1px solid rgba(3, 44, 54, 0.7);
    color: #E6921C;
}

/* Styling the submit button */
#submit {
    margin: 1rem 30px 20px 20px;
    padding: 0.8rem 1rem;
    float: right;
    border: none;
    border-radius: 4px;
    border: 2px solid #032C36; 
    font-size: 1.2rem;
}
#submit:hover {
    background-color: #E6921C;
}

/* Styling the formHide button */

#formHide {
    margin-top: 1.5rem;
    padding: 0.5rem 0.4rem;
    float: right;
    font-weight: 300;
    font-size: 1rem;
}
#formHide:hover {
    background-color: #FCF7F4;
}


/* Style for the gallery page --------------------------------------------------------------------------------------------------------------*/

#addProject {
    display: flex;
    justify-content: center
    }

#addProject button {
    width: 70%; /* 290px fullscreen pc*/
    border-radius: 20px;
}


/* .galleryContainer styles the gallery grid */
.galleryContainer {
    /* why does (margin-top: 10px;) also set the margin-top of the body and all of its contents? Something about ul already having a top margin. */
    width: 100%;
    display: grid; /* Places the thumbnails in a grid. */
    /* Sets the number of columns to be 3 and width to be 360px. */
    grid-template-columns: repeat(3, 360px);
    gap: 24px; /* the gap between the thumbnails. */ 
}

/* .galleryThumbnail styles the list elements. */
.galleryThumbnail {
    position: relative; /* Makes this the bounding parent of thumbnailText. */
    width: 360px; /* The size of the thumbnail boxes. Could set this size using the grid function. */
    height: 360px;
    list-style-type: none; /* Hides the standard list dots. */

    border-radius: 6px; /* Rounded corners on the thumbnails. */
    overflow: hidden; /* Makes everything inside this container, outside the borders, disappear (invisible and unclickable). */

    background-color: #FCF7F4; /* Temporary colour to make them visible without images.*/
    box-shadow: 6px 6px 12px 0px rgba(0, 0, 0, 0.15); /* horizontal, vertical, blur, spread, colour */
    /* onclick="window.location.href='projectPages/project_1.html'" in HTML will open the link in a new window. Removing "window" will open it in the same tab. */
}

/* Selects all images with the class galleryElementContainer. */
.galleryThumbnail img {
    width: 360px;
    height: 360px; /* 280px if not covered by the white */
    /* https://www.w3schools.com/css/css3_object-fit.asp
    object-fit:  
        cover will make the image fill the container. 
        contain will make the image fit in the container. 
        scale-down looks like the same as contain? 
        object-position: -10% 0 will make the image be constrained to the top and left.*/
    object-fit: cover;
}

/* Styles the text area of the thumbnail */
.thumbnailText {
    background-color: #ffffff;
    width: 86%; /* Makes the white fill the whole width. 100%-(left-right-padding) */
    display: inline-block;
    /* Make it bound to the bottom-right of galleryThumbnail. */
    position: absolute;
    bottom: 0;
    right: 0;
    /* Makes the box the correct size
        top, right, bottom, left */
    padding: 4% 7% 5% 7%;
    width: 310px;
    height: 48px;
}
/* Styles the name of the project, in the thumbnail. */
.thumbnailText h3 {
    font-size: clamp(1rem, 1.25rem, 2rem); /*16px ~24px 32px*/
    font-weight: 700;
    margin-bottom: 1%; /* Adds some space between h3 and p. */
}
/* Styles the other information in the thumbnail. */
.thumbnailText p {
    font-size: clamp(0.625rem, 0.9rem, 1.25rem); /*10px 16px 20px*/
    font-weight: 400; /* 300=light */

}
/* Styles all decendants (*) of .thumbnailText */
.thumbnailText * {
    text-align: right;
    margin-right: 7%; /* 26/360 percent */
    margin: 0;
}
/* Styles the position of the date. */
.thumbnailText p:first-of-type {
    font-weight: 400;
    text-align: left;
    margin-bottom: -10px;
}


/* When hovering a thumbnail */
.galleryThumbnail:hover img {
    transition: 0.4s ease; /* Smoothes out the transformation. */
    transform: scale(1.005);
    position: absolute;
    z-index: 50; /* Pushes the image behind the text */
}
.galleryThumbnail:hover, 
#addProject button {
    /* outline: 2px solid #032c36; Outline, instead of border, will prevent the line from pushing on other things. */
    box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.15);
    transition: 0.1s ease-out;
    transform: translate(2px, 2px); /* moves the card 2px to the right and down. Error: creates a gap between the white text box and the thumbnail itself. */
}

.galleryThumbnail:hover .thumbnailText {
    z-index: 100;
    transition: 0.3s ease-in;
    background-color: rgba(255, 255, 255, 0);
}

/* When hovering the add project button */
#addProject button:hover {
    background-color: #E6921C;
    color: #000000;
    /* The transform doesn't work*/
    transform: translate(2px, 2px); /* moves the card 2px to the right and down. Error: creates a gap between the white text box and the thumbnail itself. */
}

@media screen and (min-width: 0px) and (max-width: 799px) {
    .galleryContainer, 
    #textContainer {
        padding-top: 20vh; /* I want the gallery to start at this height, in relation to the h1 "Gallery" header. */
        /* Centers the container left-right */
        margin: auto; 
        flex-direction: column;
        align-content: center;
        gap: 24px;
    }
    #description {
        margin-top: 0;
        padding-left: 0;
        width: 100%;
    }
    #info {
        width: 100%;
    }
    .placeholderImg {
        margin-top: 6rem;
    }
    .placeholderImg img {
        max-width: 270px;
        max-height: 340px;
    }
    h2, h3, h4 {
        text-align: left;
    }

    /* form */
    #formContainer {
        width: min-content;
    }
    #fieldset2 {
        height: 320px;
    }

    #submit, 
    #formHide, 
    fieldset {
        float: none;
        margin-left: 0;
        margin-top: 0;
    }
    
    .galleryContainer {
        max-width: 360px;
        /* Places the thumbnails in a grid. */
        display: grid; 
        /* grid-template-columns repeat(1, 360px); sets the number of columns to be 1 and width to be 360px. */
        grid-template-columns: repeat(1, 360px);
        gap: 24px; /* the gap between the thumbnails. */
    } 
    #addProject button {
        height: 64px;
        margin-top: 20%;
        margin-bottom: 15%;
    }
}
    
@media screen and (min-width: 800px) and (max-width: 1299px) {
    .galleryContainer, 
    #textContainer {
        padding-top: 30vh; /* 23vh I want the gallery to start at this height, in relation to the h1 "Gallery" header. */
        /* Centers the container left-right */
        margin: auto; 
        flex-direction: column;
        gap: 24px;
    }
    /* project page */
    #description {
        margin-top: 0;
        padding-left: 217px;
        width: 70%;
    }
    #info {
        width: 70%;
    }
    .placeholderImg img {
        max-width: 545px;
        max-height: 670px;
    }
    h2, h3, h4 {
        text-align: left;
    }

    /* form */
    fieldset, h4 {
        margin-left: 10%;
    }
    #fieldset2 {
        height: 390px;
    }

    /* gallery */
    .galleryContainer {
        max-width: 744px;
        /* Places the thumbnails in a grid. */
        display: grid; 
        grid-template-columns: repeat(2, 360px);
    }    
    #addProject button {
        height: 80px;
        margin-top: 45%;
        font-size: 1.3rem;
    }
}
    
@media screen and (min-width: 1300px) {
    .galleryContainer, 
    #textContainer {
        padding-top: 30vh; /* I want the gallery to start at this height, in relation to the h1 "Gallery" header. */
        /* Centers the container left-right */
        margin: auto; 
        flex-direction: row;
    }
    fieldset, h4 {
        margin-left: 10%;
    }
    .galleryContainer {
        max-width: 1128px;
        grid-template-columns: repeat(3, 360px);
    }
    #addProject button {
        height: 88px;
        margin-top: 30%;
    }
}