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

.cta-section {
    position: relative;

    padding:
        24px
        0
        28px;

    background:
        var(--ppg-background);
}


/* =========================================================
   PANEL
========================================================= */

.cta-section__panel {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(320px, 0.85fr);

    align-items: center;

    min-height: 150px;

    overflow: hidden;

    background:
        var(--cta-background);

    border-radius:
        18px;

    box-shadow:
        0 14px 34px
        rgba(15, 39, 68, 0.15);
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.cta-section__content {
    position: relative;
    z-index: 3;

    padding:
        30px
        36px;
}

.cta-section__title {
    max-width:
        620px;

    margin:
        0
        0
        7px;

    color:
        var(--ppg-white);

    font-family:
        var(--ppg-font-heading);

    font-size:
        clamp(
            1.6rem,
            2.4vw,
            2.35rem
        );

    font-weight:
        700;

    line-height:
        1.08;

    letter-spacing:
        -0.02em;
}

.cta-section__description {
    max-width:
        520px;

    margin:
        0
        0
        20px;

    color:
        rgba(255, 255, 255, 0.82);

    font-size:
        0.9rem;

    line-height:
        1.5;
}

.cta-section__button {
    min-height:
        44px;

    padding:
        10px
        22px;

    color:
        var(--ppg-navy);

    background:
        var(--ppg-lime);
}

.cta-section__button:hover {
    background:
        var(--ppg-lime-dark);
}


/* =========================================================
   RIGHT BRANDING
========================================================= */

.cta-section__branding {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 150px;

    padding:
        24px
        120px
        24px
        32px;

    overflow: hidden;
}


/* =========================================================
   LOGO
========================================================= */

.cta-section__logo {
    position: relative;
    z-index: 5;

    width: min(300px, 78%);
    max-height: 105px;

    object-fit: contain;

    /*
        IMPORTANT:
        Do NOT apply brightness/invert here.
        It was turning the entire PNG background white.
    */
    filter: none;

    opacity: 1;
}


/* =========================================================
   DECORATIVE GRAPHIC
   Simple parallel diagonal lines
========================================================= */

.cta-section__graphic {
    position: absolute;
    z-index: 1;
    inset: 0;

    overflow: hidden;
    pointer-events: none;
}

.cta-section__graphic::before {
    display: none;
}

.cta-section__graphic-circle,
.cta-section__graphic-arc {
    position: absolute;

    width: 165px;
    height: 34px;

    right: -25px;

    border: 0;
    border-radius: 999px;

    transform: rotate(-45deg);
}

.cta-section__graphic-circle {
    bottom: 62px;

    background: var(--cta-graphic-primary);
}

.cta-section__graphic-arc {
    bottom: 18px;

    background: var(--cta-graphic-secondary);
}

.cta-section__graphic-arc::after {
    display: none;
}

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

@media (max-width: 900px) {

    .cta-section__panel {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(260px, 0.7fr);
    }

    .cta-section__content {
        padding:
            28px;
    }

    .cta-section__branding {
        padding:
            24px
            95px
            24px
            24px;
    }

    .cta-section__logo {
        width: min(250px, 82%);
    }

}


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

@media (max-width: 700px) {

    .cta-section {
        padding:
            18px
            0
            24px;
    }

    .cta-section__panel {
        grid-template-columns:
            1fr;

        border-radius:
            16px;
    }

    .cta-section__content {
        padding:
            30px
            24px
            26px;
    }

    .cta-section__title {
        max-width:
            100%;

        font-size:
            clamp(
                1.7rem,
                7vw,
                2.3rem
            );
    }

    .cta-section__description {
        max-width:
            100%;
    }

    .cta-section__branding {
        min-height: 165px;

        padding:
            30px
            90px
            30px
            24px;

        border-top:
            1px solid
            rgba(255, 255, 255, 0.08);
    }

    .cta-section__logo {
        width: min(250px, 75%);
    }


    .cta-section__graphic-circle,
    .cta-section__graphic-arc {
        width: 140px;
        height: 28px;

        right: -25px;

        transform: rotate(-45deg);
    }

    .cta-section__graphic-circle {
        bottom: 58px;
    }

    .cta-section__graphic-arc {
        bottom: 20px;
    }

}


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

@media (max-width: 480px) {

    .cta-section__content {
        padding:
            26px
            20px
            24px;
    }

    .cta-section__title {
        font-size:
            clamp(
                1.55rem,
                8vw,
                2rem
            );
    }

    .cta-section__description {
        font-size:
            0.86rem;
    }

    .cta-section__button {
        width:
            100%;
    }

    .cta-section__branding {
        min-height: 150px;

        padding:
            28px
            70px
            28px
            20px;
    }

    .cta-section__logo {
        width: min(220px, 78%);
    }

    .cta-section__graphic-circle,
    .cta-section__graphic-arc {
        width: 115px;
        height: 24px;

        right: -22px;
    }

    .cta-section__graphic-circle {
        bottom: 53px;
    }

    .cta-section__graphic-arc {
        bottom: 20px;
    }

}