/* ---------- PORTFOLIO PAGE ---------- */

main {
    margin-top: 100px;
}

/* --- SECTION 1 - TOGGLE BAR --- */

.view-toggle {
    display: flex;
    flex-direction: column;
}

.view-toggle-header {
    display: grid;
    grid-template-columns: 1.22fr 1fr 1fr;
    grid-template-rows: auto;

    width: 100%;
    align-items: start;

    gap: 0 var(--half-margin);

    margin-bottom: var(--half-margin);
}


/* --- HEADER ITEMS --- */

.header-item {
    display: flex;
    align-items: flex-start;
}

/* left */

.header-item:nth-child(1) {
    grid-column: 1;

    justify-content: flex-start;
}

/* center */

.header-item:nth-child(2) {
    grid-column: 2;

    justify-content: flex-end;
    text-align: right;
}

/* right */

.header-item:nth-child(3) {
    grid-column: 3;

    justify-content: flex-end;
    text-align: right;
}


/* --- GROUP OPTIONS --- */

.list-group-options {
    display: flex;
    align-items: center;
    gap: 10px;
}

.list-group-options.hidden {
    display: none;
}


/* --- OPTIONS --- */

.group-option,
.view-option {
    font-size: var(--main-font-size);

    opacity: var(--opacity-value);

    transition: opacity 0.3s ease;

    cursor: pointer;
}

.group-option:hover,
.group-option.active,
.view-option:hover,
.view-option.active {
    opacity: 1;
}


/* separator */

.separator {
    opacity: var(--opacity-value);
    pointer-events: none;

    font-size: var(--main-font-size);
}


/* --- SECTION 2 - WORKS --- */

.works-container {
    display: flex;
    flex-direction: column;

    gap: var(--half-margin);

    margin-top: var(--margin);
}


/* --- GALLERY VIEW --- */

.work {
    width: 100%;
    display: flex;
    flex: 0 0 auto;

    cursor: pointer;
}

.work:nth-child(odd) {
    justify-content: flex-start;
}

.work:nth-child(even) {
    justify-content: flex-end;
}


/* image wrapper */

.work .work-img {
    position: relative;
    overflow: hidden;
}

.work .work-img img {
    display: block;

    position: relative;
    z-index: 2;

    object-fit: cover;

    transition: transform 0.4s ease;
}

.work .work-img p {
    position: absolute;

    bottom: 0;
    left: 0;

    width: 100%;

    margin: 0;
    padding-top: 5px;

    z-index: 1;

    transition: all 0.3s ease;
}


/* hover */

.work .work-img:hover img {
    transform: translateY(-30px);
}

.work .work-img:hover p {
    transition-delay: 0.15s;
}


/* random sizes */

.work.medium img {
    width: 750px;
    height: 650px;
}

.work.large img {
    width: 900px;
    height: 650px;
}

.work.square img {
    width: 650px;
    height: 650px;
}


/* --- LIST VIEW --- */

.works-container.list-view {
    display: grid;
    grid-template-columns: 0.8fr 1.8fr 2fr;

    gap: var(--margin);

    align-items: start;
    margin-bottom: var(--double-margin);
}

/* columns */

.list-categories,
.list-projects,
.list-preview {
    min-height: 0;
}

/* left + center */

.list-categories,
.list-projects {
    display: flex;
    flex-direction: column;

    gap: 5px;

    max-height: 450px;

    overflow: hidden;

    transition: overflow 0.2s ease;

    scroll-behavior: smooth;
}

.list-categories:hover,
.list-projects:hover {
    overflow-y: auto;
}

/* preview */

.list-preview {
    width: 100%;
    height: 450px;

    overflow: hidden;
}

.list-preview img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

/* typography */

.category,
.list-projects div {
    opacity: var(--opacity-value);

    cursor: pointer;

    transition: opacity 0.3s ease;

    font-size: var(--main-font-size);
}

.category:hover,
.category.active,
.list-projects div:hover,
.list-projects div.active {
    opacity: 1;
}

/* scrollbar */

.list-projects::-webkit-scrollbar,
.list-categories::-webkit-scrollbar {
    width: 5px;
}

.list-projects::-webkit-scrollbar-track,
.list-categories::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 20px;
}

.list-projects::-webkit-scrollbar-thumb,
.list-categories::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 20px;
}

.list-projects::-webkit-scrollbar-thumb:hover,
.list-categories::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}