/**
 * Jiblotech 2.0
 * Project CTA
 */


/* ==========================================
   SECTION
   ========================================== */

.project-cta {
    position: relative;

    padding: clamp(5rem, 9vw, 9rem) 0;

    background: var(--jb-black);

    color: var(--jb-white);
    
    z-index: 1;
}

.project-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        var(--jb-accent-blue-soft) 0%,
        var(--jb-accent-coral-soft) 50%,
        var(--jb-accent-violet-soft) 100%
    );
    opacity: 0.6;
    z-index: -1;
    pointer-events: none;
}

.project-cta::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(
        90deg,
        var(--jb-accent-blue) 0%,
        var(--jb-accent-coral) 50%,
        var(--jb-accent-violet) 100%
    );
    opacity: 0.3;
    z-index: 1;
    pointer-events: none;
}


/* ==========================================
   TOP
   ========================================== */

.project-cta__top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-bottom: 1.5rem;

    border-bottom: 1px solid var(--jb-border);

    color: var(--jb-text-subtle);

    font-size: 0.62rem;
}


/* ==========================================
   MAIN
   ========================================== */

.project-cta__main {
    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(260px, 0.5fr);

    gap: 5rem;

    padding:
        clamp(4rem, 8vw, 8rem)
        0;
}


.project-cta__main h2 {
    max-width: 800px;

    margin: 0;

    color: var(--jb-white);

    font-family: var(--jb-font-display);

    font-size: clamp(2.7rem, 5vw, 5.2rem);

    font-weight: 500;

    line-height: 1.02;

    letter-spacing: -0.045em;
}


/* ==========================================
   ACTION
   ========================================== */

.project-cta__action {
    align-self: end;

    max-width: 330px;
}


.project-cta__action p {
    margin: 0 0 1.75rem;

    color: var(--jb-text-muted);

    font-size: 0.92rem;

    line-height: 1.7;
}




/* ==========================================
   BOTTOM
   ========================================== */

.project-cta__bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding-top: 1.25rem;

    border-top: 1px solid var(--jb-border);

    color: var(--jb-text-subtle);

    font-size: 0.62rem;
}


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

@media (max-width: 900px) {

    .project-cta__main {
        grid-template-columns: 1fr;

        gap: 2.5rem;
    }


    .project-cta__action {
        align-self: start;
    }

}


@media (max-width: 600px) {

    .project-cta {
        padding: 4rem 0;
    }


    .project-cta__top {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.75rem;
    }


    .project-cta__main {
        gap: 2rem;

        padding: 3rem 0;
    }


    .project-cta__main h2 {
        font-size: clamp(2.3rem, 9vw, 3.5rem);
    }


    .project-cta__bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 0.6rem;
    }

}