/*
*                                                                          
*     ▄▄▄▄▄           ▄                        ▄▄▄▄▄▄▄                 ▄   
*       █    ▄ ▄▄   ▄▄█▄▄   ▄ ▄▄   ▄▄▄            █     ▄▄▄   ▄   ▄  ▄▄█▄▄ 
*       █    █▀  █    █     █▀  ▀ █▀ ▀█           █    █▀  █   █▄█     █   
*       █    █   █    █     █     █   █           █    █▀▀▀▀   ▄█▄     █   
*     ▄▄█▄▄  █   █    ▀▄▄   █     ▀█▄█▀           █    ▀█▄▄▀  ▄▀ ▀▄    ▀▄▄ 
*                                                                          
*                                                                          
*/

.intro-text {
    justify-content: left;
    text-align: left;
    color: var(--text-color);
    padding-top: 2.5vw;
    padding-bottom: 2.5vw;
    margin: auto;
    width: 90%;
    max-width: 90%;
    max-width: 1920px;
    transform: translateX(10px); /* Moved slightly right due to border radius of grid */

}
.intro-text h2 { font-size: clamp(1.8rem, 5vw, 3.3rem); }
.intro-text h2 span { color: var(--blue); font-size: clamp(2rem, 5.5vw, 3.6rem); }
.intro-text h2 small { font-size: clamp(1.6rem, 4.5vw, 3rem); }
.intro-text p { font-size: clamp(1rem, 2.5vw, 1.7rem); max-width: 800px; }
.intro-text p span { color: var(--blue); font-weight: 600; }



/*
*                                                                          
*     ▄▄▄▄▄                  ▄                    ▄▄▄           ▀        █ 
*     █    █  ▄▄▄   ▄ ▄▄   ▄▄█▄▄   ▄▄▄          ▄▀   ▀  ▄ ▄▄  ▄▄▄     ▄▄▄█ 
*     █▄▄▄▄▀ █▀  █  █▀  █    █    █▀ ▀█         █   ▄▄  █▀  ▀   █    █▀ ▀█ 
*     █    █ █▀▀▀▀  █   █    █    █   █         █    █  █       █    █   █ 
*     █▄▄▄▄▀ ▀█▄▄▀  █   █    ▀▄▄  ▀█▄█▀          ▀▄▄▄▀  █     ▄▄█▄▄  ▀█▄██ 
*                                                                          
*                                                                          
*/

/* Section headers */
.grid-header {
    display: flex;
    justify-content: left;
    width: 90%;
    max-width: 1920px;
    margin: auto;
    transform: translateX(10px); /* Moved slightly right due to border radius of grid */
    padding-top: 60px;
    padding-bottom: 20px;
    color: var(--text-color);
}
.grid-header:first-of-type { padding-top: 0; }

/* Bento Grid */
.grid-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px; /* Lazy way to make drop shadows show properly */
}
.grid {
    display: grid;
    gap: 20px;
    width: 90%;
    max-width: 1920px;
    overflow: hidden;
}
.web .grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 300px); /* Box height */
}
.design .grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 300px);
}
.video-editing .grid {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(1, 300px);
    padding-bottom: max(200px, 10vh);
}

/* Grid column span utility classes */
.grid-span-1 { grid-column: span 1; }
.grid-span-2 { grid-column: span 2; }
.grid-span-3 { grid-column: span 3; }



/*
*                                                                                 
*     ▄▄▄▄▄                  ▄                    ▄▄▄                    █        
*     █    █  ▄▄▄   ▄ ▄▄   ▄▄█▄▄   ▄▄▄          ▄▀   ▀  ▄▄▄    ▄ ▄▄   ▄▄▄█   ▄▄▄  
*     █▄▄▄▄▀ █▀  █  █▀  █    █    █▀ ▀█         █      ▀   █   █▀  ▀ █▀ ▀█  █   ▀ 
*     █    █ █▀▀▀▀  █   █    █    █   █         █      ▄▀▀▀█   █     █   █   ▀▀▀▄ 
*     █▄▄▄▄▀ ▀█▄▄▀  █   █    ▀▄▄  ▀█▄█▀          ▀▄▄▄▀ ▀▄▄▀█   █     ▀█▄██  ▀▄▄▄▀ 
*                                                                                 
*                                                                                 
*/

/* Card base */
.card {
    background: var(--grey-light);
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.03);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: relative;
    transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.card:hover {
    transform: translateY(-2px);
    border-color: #ddd;
    background: var(--grey-light2);
    box-shadow: 0 6px 16px rgba(0,0,0,.06);
}
.card[aria-hidden="true"] { 
    background: #eaeaea; 
}


/* Card images */
.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
}
.card img.contain { object-fit: contain; background: #fff; }

/* Default + hover images */
.card img.default { opacity: 1; transition: opacity .25s ease; }
.card img.hover   { opacity: 0; transition: opacity .25s ease; }

/* Only fade when hover image exists */
.card:has(img.hover):hover img.hover   { opacity: 1; }
.card:has(img.hover):hover img.default { opacity: 0; }


/*
*                                                                                        
*     ▄    ▄        █        ▀    ▀▀█                   ▄▄▄▄    ▄             ▄▀▀    ▄▀▀ 
*     ██  ██  ▄▄▄   █▄▄▄   ▄▄▄      █     ▄▄▄          █▀   ▀ ▄▄█▄▄  ▄   ▄  ▄▄█▄▄  ▄▄█▄▄ 
*     █ ██ █ █▀ ▀█  █▀ ▀█    █      █    █▀  █         ▀█▄▄▄    █    █   █    █      █   
*     █ ▀▀ █ █   █  █   █    █      █    █▀▀▀▀             ▀█   █    █   █    █      █   
*     █    █ ▀█▄█▀  ██▄█▀  ▄▄█▄▄    ▀▄▄  ▀█▄▄▀         ▀▄▄▄█▀   ▀▄▄  ▀▄▄▀█    █      █   
*                                                                                        
*                                                                                        
*/

@media (max-width: 900px) {
    .grid {
        display: flex;
        flex-direction: column;
        gap: 20px;

        /* Place holder cards marked with "aria-hidden" are removed on mobile */
        .card[aria-hidden="true"] {
        display: none;}
    }

    .card {
        grid-column: auto !important;
        grid-row: auto !important;
        height: 18vh;
        width: 100%;
    }

    /* Reorder cards on mobile */
    .indie-archive { order: 1; }
    .nerdheard { order: 2; }
    .css-carousel { order: 3; }
    .modelsphere { order: 4; }
    .css-snapscroll { order: 5; }
    .interactive-narrative { order: 6; }
    .design .grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 200px); }
    .puppet-animation, .five-senses { grid-column: span 1; }
}

/* Add linebreak to my name on mobile */
@media (max-width: 520px) {
    h2 span::before {
        content: '\A';        /* line break */
        white-space: pre;     /* respect the break */
        display: block;       /* ensure it breaks the line */
        line-height: .25;     /* controls vertical spacing */
        margin: 0;
        padding: 0;
    }
}