/* CSS By Jessica Seapno */
/* Color Palette

Cyan: #2AB6DB
Lime Green: #91DB2A
Electric Pink: #BA29DB
Orange: #DB822E
Quiet Purple: #7B4686
Slate Blue-Grey: #3F565C
Cloudy White: #D9D8D7
*/

/* GLOBAL (base) MOBILE FIRST */
/* I previously did have mobile queries at the top initially, but needed to move it to the end so that the mobile view of NAV is stacked, but on PC is still inline. */

body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    margin: 0;
    text-align: center;
    background-color:#3F565C;
    color: black;
    font-family: 'Courier New', Courier, monospace;
    font-size: 15px;
    background-image: url("images/istockphoto-1472539099-612x612.jpg");
    background-size: cover;
    background-attachment: fixed;
    line-height: 1.4;
    
}

header, footer {
    background-color: black;
    color: #2AB6DB;
    padding: 20px;
    text-align: center;
    border:5px groove #91DB2A;
}

header {
    background-image: url("images/vaporwave wide.jpeg");
    background-size: cover;
    background-position: center;
    background-color: rgba(0, 0, 0, 0.6);
    background-blend-mode: overlay;
}

nav {
    background-color: #7B4686;
    margin: 20px auto;
    padding: 20px;
    text-align: center;
    border-style: groove;
    border-color: #91DB2A;

}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

nav ul li {
    flex: 0 1 40%;
    box-sizing: border-box;
    margin: 5px;
    padding: 10px 5px;
    border: groove;
    border-color:#D9D8D7;
    box-sizing: border-box;
}

nav ul li a {
    color: #91DB2A;
    text-decoration: none;
    font-weight: bold;
}

nav ul li a:hover {
    color: #D9D8D7;
    text-decoration: underline;
    text-decoration-style: wavy;
    transition: transform 0.3s ease, color 0.3s ease;
}

main {
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

section {
    background-image: url("images/bg dim.jpg");
    background-size: cover;
    color:#91DB2A;
    font-size: 18px;
    text-shadow: 5px 5px 15px #BA29DB;
    background-color: rgba(0, 0, 0, 0.7);
    background-blend-mode:overlay;
    border-radius: 15px;;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 20px 10px;
    height: 100%;
    width: 100%;
    min-height: 200px;
    box-sizing: border-box;
    overflow: visible;
    margin: 10px auto;
    margin-top: 0;
    border: 3px groove #91DB2A;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

section p {
    display: -webkit-box;
    -webkit-line-clamp: 3;    /* Limits text to 3 lines */
    -webkit-box-orient: vertical;  
    overflow: hidden;
    text-overflow: ellipsis;  /* Adds the ... at the end */
}

section:hover {
    transform: translateY(-5px);
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
}

@keyframes slide-and-fade {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
}

section h2, section p{
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px 20px;
    border-radius: 30px;
    display: block;
    width: 90%;
    margin: 5px auto;
    animation: slide-and-fade 0.5s ease-out;
}

.bento-container {
  display: grid;
  grid-template-columns: 1fr; 
  grid-auto-rows: auto;                
  gap: 20px;
  padding: 10px;
  max-width: 1200px;
  margin: 0 auto;
}

a {
    color: #BA29DB;
    text-decoration: none;
    font-weight: bold;
    text-decoration: none;
}

.image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 18px;
    margin: 20px 0;
    width: 100%;
}

.image-gallery img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

@media screen and (max-width: 500px) {
    
    main {
        padding: 15px 10px;
    }

    header, footer {
        padding: 16px 10px;
    }

    nav ul {
        flex-wrap: wrap;
        gap: 10px;
    }

    nav ul li {
        flex: 0 1 40%;
        width: auto;
        margin: 5px;
        padding: 10px 5px;
    }

    .bento-container {
        gap: 18px;
        padding: 0 10px;
    }

    section {
        min-height: auto;
        padding: 16px 10px;
        width: auto;
    }

    section h2, section p {
        width: auto;
        padding: 10px;
    }

    .image-gallery {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Tablet view */
@media screen and (min-width: 800px) {
    body {
        background-color: #2AB6DB;
    }
    div.card-row {
        grid-template-columns: repeat(2, 1fr); /* 2 per row */
    }
}

.image-gallery img:hover {
    transform: scale(1.05);
}

.item-wide {
    grid-column: span 1;
}
/* PC VIEW (900px and up) */
@media screen and (min-width: 1200px) {
    body {
        background-color: #91DB2A;
        border: 10px solid transparent;
    }

   
    nav ul {
        flex-wrap: nowrap; 
        gap: 20px;
    }

    nav ul li {
        flex: 0 1 auto;
        width: auto;
        padding: 3px 20px;
        margin: 0;
    }
    
    .bento-container {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: minmax(250px, auto);
        justify-content: center;
    }

    .item-feature {
        grid-column: span 2;
        grid-row: span 2;
    }
    .item-wide {
        grid-column: span 2;
        
    }
    .item-tall {
        grid-row: span 2;
    }

    .image-gallery {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
    }
}