/* ==========================================================
   REVISI DESIGN SYSTEM
   UNIVERSAL PROJECT PAGE
========================================================== */


/* ==========================================================
   ACTIVE NAVIGATION
========================================================== */

.rv-menu a[aria-current="page"],
.rv-mobile-menu a[aria-current="page"] {
    color:
        var(--color-primary);
}


.rv-menu a[aria-current="page"]::after,
.rv-mobile-menu a[aria-current="page"]::after {
    opacity:
        1;

    transform:
        scaleX(1);
}


/* ==========================================================
   COMPACT PROJECT HEADER
========================================================== */

.rv-project-intro {
    position:
        relative;

    padding-top:
        clamp(
            8rem,
            12vw,
            9.5rem
        );

    padding-bottom:
        var(--space-8);

    background:
        var(--color-light);

    color:
        var(--color-dark);

    overflow:
        hidden;

    isolation:
        isolate;
}


.rv-project-intro-grid {
    position:
        absolute;

    inset:
        0;

    background-image:
        linear-gradient(
            rgba(10, 12, 12, .04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(10, 12, 12, .04) 1px,
            transparent 1px
        );

    background-size:
        48px 48px;

    pointer-events:
        none;

    z-index:
        -1;
}


.rv-project-intro-content {
    position:
        relative;
}


/* ==========================================================
   BACK LINK
========================================================== */

.rv-project-back-link {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        var(--space-2);

    font-size:
        var(--fs-xs);

    font-weight:
        var(--font-semibold);

    color:
        var(--color-muted-alpha);

    transition:
        color
        var(--transition-fast);
}


.rv-project-back-link:hover {
    color:
        var(--color-primary);
}


.rv-project-back-icon {
    display:
        inline-flex;

    width:
        var(--space-5);

    height:
        var(--space-5);

    align-items:
        center;

    justify-content:
        center;
}


.rv-project-back-icon svg {
    display:
        block;

    width:
        100%;

    height:
        100%;

    transition:
        transform
        var(--transition-premium);
}


.rv-project-back-link:hover
.rv-project-back-icon svg {
    transform:
        translateX(
            calc(
                var(--space-1) * -1
            )
        );
}


/* ==========================================================
   PROJECT INFORMATION
========================================================== */

.rv-project-intro-main {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(320px, .65fr);

    align-items:
        end;

    gap:
        clamp(
            3rem,
            8vw,
            8rem
        );

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


.rv-project-title {
    max-width:
        14ch;

    margin:
        0;

    font-size:
        var(--fs-h3);

    line-height:
        var(--lh-tight);

    color:
        var(--color-dark);
}


.rv-project-summary {
    max-width:
        var(--text-width-sm);

    margin:
        0;

    font-size:
        var(--fs-sm);

    font-weight:
        var(--font-medium);

    color:
        var(--color-muted-alpha);
}


/* ==========================================================
   PROJECT META
========================================================== */

.rv-project-meta {
    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        var(--space-4);

    margin:
        var(--space-6)
        0
        0;

    padding-top:
        var(--space-4);

    border-top:
        1px solid
        rgba(10, 12, 12, .16);
}


.rv-project-meta-item {
    min-width:
        0;
}


.rv-project-meta dt {
    margin-bottom:
        var(--space-2);

    font-size:
        var(--fs-xs);

    font-weight:
        var(--font-semibold);

    text-transform:
        uppercase;

    color:
        var(--color-muted);
}


.rv-project-meta dd {
    margin:
        0;

    font-size:
        var(--fs-sm);

    font-weight:
        var(--font-medium);

    color:
        var(--color-dark);
}


/* ==========================================================
   PROJECT SHOWCASE
========================================================== */

.rv-project-showcase {
    position:
        relative;

    padding-bottom:
        var(--section-padding);

    background:
        var(--color-light);

    overflow:
        hidden;
}


.rv-project-showcase-container {
    position:
        relative;
}


.rv-project-showcase-container::before {
    content:
        "";

    position:
        absolute;

    top:
        var(--space-12);

    right:
        calc(
            var(--space-10) * -1
        );

    bottom:
        calc(
            var(--space-12) * -1
        );

    left:
        calc(
            var(--space-10) * -1
        );

    background:
        var(--color-dark);

    border-radius:
        var(--radius-xl);

    opacity:
        .04;

    pointer-events:
        none;
}


/* ==========================================================
   CONNECTED GALLERY
========================================================== */

.rv-project-gallery {
    position:
        relative;

    z-index:
        1;

    overflow:
        hidden;

    background:
        var(--color-light);

    border-radius:
        var(--radius-lg);

    box-shadow:
        0 2px 5px
        rgba(10, 12, 12, .06),

        0 24px 70px
        rgba(10, 12, 12, .16),

        0 80px 140px
        rgba(10, 12, 12, .08);
}


.rv-project-frame {
    margin:
        0;

    padding:
        0;

    line-height:
        0;
}


.rv-project-frame img {
    display:
        block;

    width:
        100%;

    height:
        auto;

    margin:
        0;

    object-fit:
        cover;
}


/* ==========================================================
   PROJECT ACTIONS
========================================================== */

.rv-project-actions {
    padding-block:
        var(--section-padding);

    background:
        var(--color-dark);

    color:
        var(--color-light);
}


.rv-project-actions-content {
    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items:
        end;

    gap:
        clamp(
            3rem,
            8vw,
            8rem
        );
}


.rv-project-actions-title {
    max-width:
        12ch;

    margin:
        0;

    font-size:
        var(--fs-h2);

    color:
        var(--color-light);
}


.rv-project-actions-title span {
    display:
        block;

    color:
        var(--color-accent);
}


.rv-project-actions-description {
    max-width:
        var(--text-width-sm);

    margin-top:
        var(--space-6);

    font-size:
        var(--fs-base);

    font-weight:
        var(--font-medium);

    color:
        var(--color-muted);
}


.rv-project-actions-buttons {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    flex-wrap:
        wrap;

    gap:
        var(--space-4);
}


/* ==========================================================
   BACK BUTTON
========================================================== */

.rv-project-button-back {
    border-color:
        rgba(248, 248, 248, .22);

    background:
        transparent;

    color:
        var(--color-light);
}


.rv-project-button-back:hover {
    border-color:
        var(--color-light);

    background:
        var(--color-light);

    color:
        var(--color-dark);
}


.rv-project-button-back
.rv-btn-icon svg {
    transition:
        transform
        var(--transition-premium);
}


.rv-project-button-back:hover
.rv-btn-icon svg {
    transform:
        translateX(
            calc(
                var(--space-1) * -1
            )
        );
}


/* ==========================================================
   CONTACT BUTTON
========================================================== */

.rv-project-button-contact
.rv-btn-icon svg {
    transform:
        rotate(0deg);

    transition:
        transform
        var(--transition-premium);
}


.rv-project-button-contact:hover
.rv-btn-icon svg {
    transform:
        rotate(45deg);
}


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

@media (max-width: 1024px) {

    .rv-project-intro-main {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(280px, .7fr);

        gap:
            var(--space-10);
    }


    .rv-project-title {
        font-size:
            var(--fs-h3);
    }


    .rv-project-actions-content {
        grid-template-columns:
            1fr;

        align-items:
            start;
    }


    .rv-project-actions-buttons {
        justify-content:
            flex-start;
    }

}


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

@media (max-width: 768px) {

    .rv-project-intro {
        padding-top:
            clamp(
                7.5rem,
                24vw,
                9rem
            );

        padding-bottom:
            var(--space-6);
    }


    .rv-project-intro-main {
        grid-template-columns:
            1fr;

        gap:
            var(--space-5);

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


    .rv-project-title {
        font-size:
            var(--fs-h3);
    }


    .rv-project-summary {
        font-size:
            var(--fs-sm);
    }


    .rv-project-meta {
        grid-template-columns:
            1fr;

        gap:
            var(--space-4);

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


    .rv-project-meta-item {
        display:
            grid;

        grid-template-columns:
            90px
            minmax(0, 1fr);

        align-items:
            baseline;

        gap:
            var(--space-4);
    }


    .rv-project-meta dt {
        margin-bottom:
            0;
    }


    .rv-project-showcase {
        padding-bottom:
            var(--space-20);
    }


    .rv-project-showcase-container::before {
        top:
            var(--space-6);

        right:
            calc(
                var(--space-3) * -1
            );

        bottom:
            calc(
                var(--space-6) * -1
            );

        left:
            calc(
                var(--space-3) * -1
            );

        border-radius:
            var(--radius-lg);
    }


    .rv-project-gallery {
        border-radius:
            var(--radius-md);

        box-shadow:
            0 16px 45px
            rgba(10, 12, 12, .15),

            0 45px 80px
            rgba(10, 12, 12, .07);
    }


    .rv-project-actions {
        padding-block:
            var(--space-20);
    }


    .rv-project-actions-title {
        font-size:
            var(--fs-h2);
    }


    .rv-project-actions-description {
        font-size:
            var(--fs-sm);
    }

}


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

@media (max-width: 480px) {

    .rv-project-title {
        font-size:
            var(--fs-h4);
    }


    .rv-project-showcase-container {
        width:
            calc(
                100% - 2 * var(--space-3)
            );
    }


    .rv-project-gallery {
        border-radius:
            var(--radius-sm);
    }


    .rv-project-actions {
        padding-block:
            var(--space-16);
    }


    .rv-project-actions-title {
        font-size:
            var(--fs-h3);
    }


    .rv-project-actions-buttons {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .rv-project-actions-buttons
    .rv-btn {
        width:
            100%;
    }

}