/* =========================================================
   POLISHED PROFESSIONAL GROUP
   Services Section
   ========================================================= */


/* =========================================================
   Section
   ========================================================= */

.ppg-services {
    position: relative;

    padding:
        58px
        0
        64px;

    background:
        #fbfaf7;
}


/* =========================================================
   Section Header
   ========================================================= */

.ppg-services__header {
    max-width: 850px;

    margin:
        0 auto
        32px;

    text-align: center;
}

.ppg-services__title {
    margin:
        0
        0
        8px;

    color:
        var(--ppg-navy);

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

    font-size:
        clamp(
            1.9rem,
            3vw,
            2.65rem
        );

    font-weight: 700;

    line-height: 1.08;

    letter-spacing:
        -0.025em;
}

.ppg-services__description {
    max-width: 670px;

    margin:
        0 auto;

    color:
        var(--ppg-text-secondary);

    font-size:
        0.96rem;

    line-height: 1.55;
}


/* =========================================================
   Grid
   ========================================================= */

.ppg-services__grid {
    display: grid;

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

    gap: 24px;

    align-items: stretch;
}


/* =========================================================
   Card
   ========================================================= */

.ppg-service-card {
    position: relative;

    display: grid;

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

    align-items: start;

    gap: 20px;

    min-height: 190px;

    padding:
        28px
        26px;

    background:
        rgba(
            255,
            255,
            255,
            0.68
        );

    border:
        1px solid
        #cdd3d2;

    border-radius:
        16px;

    box-shadow:
        0 8px 24px
        rgba(
            15,
            39,
            68,
            0.035
        );

    transition:
        transform
        var(--ppg-transition),
        border-color
        var(--ppg-transition),
        box-shadow
        var(--ppg-transition);
}

.ppg-service-card:hover {
    transform:
        translateY(-4px);

    border-color:
        var(--service-accent);

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


/* =========================================================
   Icon
   ========================================================= */

.ppg-service-card__icon {
    display: grid;

    place-items: center;

    width: 64px;
    height: 64px;

    flex-shrink: 0;

    color:
        var(--ppg-white);

    background:
        var(--service-accent);

    border-radius:
        50%;

    font-size:
        1.55rem;

    box-shadow:
        inset
        0
        0
        0
        1px
        rgba(
            255,
            255,
            255,
            0.2
        );
}

.ppg-service-card__icon i {
    line-height: 1;
}


/* Lime icons need dark text for contrast */

.ppg-service-card[
    style*="#c7df35"
]
.ppg-service-card__icon {
    color:
        var(--ppg-navy);
}


/* =========================================================
   Card Content
   ========================================================= */

.ppg-service-card__content {
    display: flex;

    flex-direction: column;

    min-width: 0;

    height: 100%;
}

.ppg-service-card__title {
    margin:
        1px
        0
        9px;

    color:
        var(--ppg-navy);

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

    font-size:
        0.88rem;

    font-weight: 800;

    line-height: 1.25;

    letter-spacing:
        0.02em;

    text-transform:
        uppercase;
}

.ppg-service-card__description {
    margin:
        0
        0
        18px;

    color:
        var(--ppg-text-secondary);

    font-size:
        0.82rem;

    line-height:
        1.52;
}


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

.ppg-service-card__cta {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    width: fit-content;

    margin-top: auto;

    color:
        var(--service-accent);

    font-size:
        0.75rem;

    font-weight: 800;

    line-height: 1;

    letter-spacing:
        0.035em;

    text-transform:
        uppercase;

    transition:
        gap
        var(--ppg-transition),
        opacity
        var(--ppg-transition),
        transform
        var(--ppg-transition);
}

.ppg-service-card__cta i {
    font-size:
        0.72rem;

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

.ppg-service-card__cta:hover {
    gap: 12px;
}

.ppg-service-card__cta:hover i {
    transform:
        translateX(3px);
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1024px) {

    .ppg-services {
        padding:
            54px
            0;
    }

    .ppg-services__grid {
        gap: 18px;
    }

    .ppg-service-card {
        grid-template-columns:
            60px
            minmax(0, 1fr);

        gap: 16px;

        padding:
            24px
            20px;
    }

    .ppg-service-card__icon {
        width: 56px;
        height: 56px;

        font-size:
            1.35rem;
    }

}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 760px) {

    .ppg-services {
        padding:
            48px
            0;
    }

    .ppg-services__header {
        margin-bottom:
            28px;
    }

    .ppg-services__title {
        font-size:
            clamp(
                1.8rem,
                8vw,
                2.35rem
            );
    }

    .ppg-services__description {
        max-width:
            520px;

        font-size:
            0.92rem;
    }


    /* Cards stack vertically */

    .ppg-services__grid {
        grid-template-columns:
            1fr;

        gap:
            16px;
    }

    .ppg-service-card {
        min-height:
            auto;

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

        padding:
            24px;

        gap:
            18px;
    }

}


/* =========================================================
   Small Mobile
   ========================================================= */

@media (max-width: 480px) {

    .ppg-services {
        padding:
            42px
            0;
    }

    .ppg-services__header {
        text-align:
            left;
    }

    .ppg-services__description {
        margin-left:
            0;
    }

    .ppg-service-card {
        grid-template-columns:
            52px
            minmax(0, 1fr);

        gap:
            15px;

        padding:
            20px
            18px;

        border-radius:
            14px;
    }

    .ppg-service-card__icon {
        width:
            50px;

        height:
            50px;

        font-size:
            1.15rem;
    }

    .ppg-service-card__title {
        font-size:
            0.82rem;
    }

    .ppg-service-card__description {
        font-size:
            0.8rem;
    }

}