#work-page {padding-top: 0;}


/* 
HEADER
*/
#work_p-header {
    top: 0;
    z-index: 100;
}


/* FILTERS */
#work_p-filters {
    column-gap: 1rem;
    align-self: self-start;
}
#work_p-filters > p {
    min-width: 100%;
    margin-bottom: 4px;
}

/* .work_p-filters--group.--active[data-status='close'] button {text-decoration: underline !important;} */
.work_p-filters--group[data-status='open'] button {background: var(--c-blue);}

.work_p-filters--group[data-status='close'] ul {height: 0;}
.work_p-filters--group[data-status='close'] li {
    opacity: 0;
    transition: opacity 100ms ease-in-out;
}
.work_p-filters--group[data-status='open'] li {
    transition: opacity 100ms ease-in-out;
    transition-delay: 100ms;
}

.work_p-filters--link {margin: 4px 1rem 0 0;}
@media only screen and (min-width: 768px) {
    #work_p-filters {column-gap: 2.5rem;}
    #work_p-filters > p {min-width: fit-content;}
}
@media only screen and (min-width: 1024px) {
    #work_p-header {padding-bottom: .5rem;}
}


/* 
WORK
*/
#work_p-projects {
    margin-top: 1rem;
    row-gap: 4rem;
}
#work_p-projects li {grid-column: 1/-1;}


@media only screen and (min-width: 768px) {
    #work_p-projects {margin-top: 3rem;}
    #work_p-projects li {grid-column: span 2;}
}


@media only screen and (min-width: 1024px) {
    #work-page[data-layout='full'] #work_p-projects {row-gap: 8rem;}
    #work_p-projects {margin-top: 3rem;}

    #work-page[data-layout='full'] .project-block .--thumb {
        width: 100%;
        max-height: 80vh;
    }

    #work-page[data-layout='grid'] #work_p-projects li {grid-column: span 2;}
    #work-page[data-layout='full'] #work_p-projects li {grid-column: 1/-1;}

    /* VIEWS */
    #work_p-view {column-gap: 1.75rem;}
    #work_p-view > a.--active {text-decoration: underline;}
    /* #work_p-view > a.--active {border-bottom: 1px solid black;}

    #work_p-view--grid {
        display: flex;
        margin-left: 1.5rem;
    }

    #work_p-view--grid > div {
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 4px;
        border: 1px solid black;
        margin-bottom: 4px;
    }
    #work_p-view--grid > div:not(:last-of-type) {margin-right: .25rem;}

    #work_p-view--full > div {
        width: 5rem;
        height: 1.5rem;
        border-radius: 4px;
        border: 1px solid black;
        margin-bottom: 4px;
    } */
}


@media (hover: hover) {
    #work_p-filters > a:hover,
    .work_p-filters--group > button:hover {background: var(--c-blue);}
    .work_p-filters--group li:hover {text-decoration: underline;}

    #work_p-view a:hover {text-decoration: underline;}
}