/* Minification failed. Returning unminified contents.
(6,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(7,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(8,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(23,18): run-time error CSS1039: Token not allowed after unary operator: '-margin-80px'
(24,21): run-time error CSS1039: Token not allowed after unary operator: '-base-padding-x'
(40,19): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-wrapper-gap'
(68,23): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-content-gap'
(70,29): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-column-gap'
(81,21): run-time error CSS1039: Token not allowed after unary operator: '-primary-color'
(82,26): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-button-gap'
(87,29): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-card-radius'
(103,19): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-content-gap'
(109,15): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-tag-gap'
(113,26): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-color'
(114,23): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-tag-padding-y'
(114,54): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-tag-padding-x'
(115,25): run-time error CSS1039: Token not allowed after unary operator: '-font-small'
(116,27): run-time error CSS1039: Token not allowed after unary operator: '-lh-label'
(118,21): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(156,21): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-desktop-image-width'
(157,24): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-desktop-image-width'
(170,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(181,23): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-mobile-wrapper-gap'
(213,29): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-card-radius'
(214,26): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(224,33): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-card-radius'
(224,62): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-card-radius'
(232,19): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(233,23): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-image-link-padding-y'
(233,61): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-image-link-padding-x'
(234,26): run-time error CSS1039: Token not allowed after unary operator: '-white-color'
(235,21): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-text'
(238,25): run-time error CSS1039: Token not allowed after unary operator: '-font-small'
(239,27): run-time error CSS1039: Token not allowed after unary operator: '-lh-label'
(240,33): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-card-radius'
(240,62): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-card-radius'
(245,25): run-time error CSS1039: Token not allowed after unary operator: '-secondary-color-text'
(249,26): run-time error CSS1039: Token not allowed after unary operator: '-text-gap-sm'
(293,23): run-time error CSS1039: Token not allowed after unary operator: '-portfolio-wrapper-gap'
 */
/* ==========================================
   PORTFOLIO SECTION - HOME PAGE ONLY
   ========================================== */

#portfolio {
    --portfolio-wrapper-gap: clamp(28px, 6vh, 64px);
    --portfolio-mobile-wrapper-gap: clamp(8px, 1.6vh, 16px);
    --portfolio-column-gap: 9vw;
    --portfolio-card-radius: clamp(20px, 1.5vw, 28px);
    --portfolio-content-gap: var(--text-gap-sm);
    --portfolio-button-gap: var(--text-gap-md);
    --portfolio-tag-gap: clamp(6px, 1vw, 10px);
    --portfolio-tag-padding-y: clamp(4px, 0.5vw, 6px);
    --portfolio-tag-padding-x: clamp(8px, 0.8vw, 12px);
    --portfolio-image-link-padding-y: clamp(10px, 3vw, 14px);
    --portfolio-image-link-padding-x: clamp(14px, 4vw, 20px);
    --portfolio-desktop-image-width: calc((100% - 6vw) / 2);
    display: flex;
    flex-direction: column;
    position: relative;
    height: calc(100vh - 20%) !important;
    justify-content: space-between;
    margin: var(--margin-80px) 0;
    padding: 0 var(--base-padding-x);
}

    #portfolio .title {
        display: flex;
        flex-direction: column;
    }

        #portfolio .title > div {
            align-self: flex-end;
            width: 50%;
        }

#portfolio-wrapper {
    display: flex;
    flex-direction: column;
    row-gap: var(--portfolio-wrapper-gap);
}

#portfolio-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    height: 50vh;
    overflow: hidden;
}

.portfolio-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    height: 50vh;
    opacity: 0;
    z-index: 1;
    width: 100%;
    left: 0;
    top: 0;
}

    .portfolio-item .left {
        display: flex;
        flex-direction: column;
        row-gap: var(--portfolio-content-gap);
        width: 50%;
        padding-right: var(--portfolio-column-gap);
        height: 100%;
        justify-content: space-between;
    }

    .portfolio-item .right {
        width: 50%;
        height: 100%;
    }

    .portfolio-item .left .buttonSecondary {
        color: var(--primary-color);
        margin-top: var(--portfolio-button-gap);
    }

    /* Desktop / normal image */
    .portfolio-item .right .item-image {
        border-radius: var(--portfolio-card-radius);
        width: 100%;
        height: 100%;
        max-height: none;
        object-fit: cover;
        display: block;
    }

/* Mobile-only CTA under image */
.portfolio-image-link {
    display: none;
}

.left-top {
    display: flex;
    flex-direction: column;
    row-gap: var(--portfolio-content-gap);
}

.item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--portfolio-tag-gap);
}

    .item-tags span {
        background: var(--tertiary-color);
        padding: var(--portfolio-tag-padding-y) var(--portfolio-tag-padding-x);
        font-size: var(--font-small);
        line-height: var(--lh-label);
        border-radius: 999px;
        color: var(--white-color);
    }

.item-button,
.item-paragraph,
.item-title {
    display: flex;
    margin: 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s, transform .5s;
}

.item-button {
    position: relative;
    z-index: 10;
}

.item-image {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1s;
}

.active-portfolio {
    z-index: 12;
}

.active .buttonSecondary {
    visibility: visible;
}

/* ==========================================
   DESKTOP
   ========================================== */

@media only screen and (min-width: 1025px) {

    .portfolio-item .right {
        width: var(--portfolio-desktop-image-width);
        flex: 0 0 var(--portfolio-desktop-image-width);
        margin-left: auto;
    }
}


/* ==========================================
   MOBILE
   ========================================== */

@media only screen and (max-width: 767px) {

    #portfolio {
        --portfolio-button-gap: clamp(4px, 1.5vh, 10px);
        height: 100vh !important;
        margin: 0;
        padding-top: 6px;
    }

        #portfolio .title > div {
            width: 100%;
        }

    #portfolio-wrapper {
        row-gap: var(--portfolio-mobile-wrapper-gap);
    }

    #portfolio-container {
        height: 80vh;
    }

    .portfolio-item {
        flex-wrap: wrap;
        row-gap: clamp(12px, 2.2vh, 20px);
    }

        .portfolio-item .left {
            width: 100%;
            padding: 0;
            justify-content: flex-start;
            height: auto;
            min-height: 0;
        }

            .portfolio-item .left .item-button {
                display: none !important;
            }

    .item-tags {
        display: none;
    }

    .portfolio-item .right {
        width: 100%;
        height: auto;
        overflow: hidden;
        border-radius: var(--portfolio-card-radius);
        background: var(--white-color);
        box-shadow: 2px 2px 16px 0 rgba(5, 32, 41, .18);
    }

        .portfolio-item .right .item-image {
            display: block;
            width: 100%;
            height: 180px;
            max-height: none;
            object-fit: cover;
            border-radius: var(--portfolio-card-radius) var(--portfolio-card-radius) 0 0;
        }

    .portfolio-image-link {
        position: static;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: var(--text-gap-sm);
        padding: var(--portfolio-image-link-padding-y) var(--portfolio-image-link-padding-x);
        background: var(--white-color);
        color: var(--secondary-color-text);
        text-decoration: none;
        font-family: Montserrat-Bold, sans-serif;
        font-size: var(--font-small);
        line-height: var(--lh-label);
        border-radius: 0 0 var(--portfolio-card-radius) var(--portfolio-card-radius);
    }

        .portfolio-image-link::after {
            content: "→";
            color: var(--secondary-color-text);
        }

    #portfolio .portfolio-item .left .buttonSecondary {
        margin-top: var(--text-gap-sm);
    }
}


/* ==========================================
   MOBILE FONT SCALE 150 / 200
   ========================================== */

@media only screen and (max-width: 767px) {

    html.ui-font-150 #portfolio .portfolio-item .right .item-image,
    html.ui-font-200 #portfolio .portfolio-item .right .item-image {
        height: 130px;
    }

    html.ui-font-150 #portfolio .portfolio-image-link,
    html.ui-font-200 #portfolio .portfolio-image-link {
        padding-top: 8px;
        padding-bottom: 8px;
    }
}


/* ==========================================
   TABLET PORTRAIT
   ========================================== */

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

    #portfolio {
        height: 100% !important;
    }

    #portfolio-container {
        height: 80vh;
    }

    #portfolio .title > div {
        align-self: flex-start;
    }

    .portfolio-item {
        flex-wrap: wrap;
        row-gap: var(--portfolio-wrapper-gap);
    }

        .portfolio-item .left,
        .portfolio-item .right {
            width: 100%;
            padding-right: 0;
        }

        .portfolio-item .left {
            height: auto;
        }
}