/* =========================================================
   TOOLS & RESOURCES
========================================================= */

.tools-resources {
    position: relative;

    padding: 64px 0 72px;

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


/* =========================================================
   HEADER
========================================================= */

.tools-resources__header {
    max-width: 900px;

    margin: 0 auto 34px;

    text-align: center;
}

.tools-resources__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;
}

.tools-resources__description {
    margin: 0 auto;

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

    font-size: 0.96rem;

    line-height: 1.55;
}


/* =========================================================
   GRID
========================================================= */

.tools-resources__grid {
    display: grid;

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

    gap: 24px;

    align-items: stretch;
}


/* =========================================================
   CARD
========================================================= */

.resource-card {
    display: flex;
    flex-direction: column;

    min-width: 0;

    overflow: hidden;

    background: var(--ppg-white);

    border: 1px solid var(--ppg-border);

    border-radius: 16px;

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

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

.resource-card:hover {
    transform: translateY(-5px);

    border-color:
        rgba(22, 168, 159, 0.45);

    box-shadow:
        0 18px 38px
        rgba(15, 39, 68, 0.11);
}


/* =========================================================
   IMAGE AREA
========================================================= */

.resource-card__media {
    position: relative;

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

    height: 245px;

    padding:
        22px
        18px
        0;

    overflow: hidden;

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

.resource-card__image {
    width: auto;
    height: 100%;

    max-width: 92%;

    object-fit: contain;

    object-position: center bottom;

    transition:
        transform 250ms ease;
}

.resource-card:hover
.resource-card__image {
    transform:
        translateY(-4px)
        scale(1.025);
}


/* =========================================================
   BODY
========================================================= */

.resource-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;

    align-items: center;

    padding:
        20px
        20px
        22px;

    text-align: center;
}

.resource-card__title {
    margin:
        0
        0
        7px;

    color:
        var(--ppg-navy);

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

    font-size:
        1rem;

    font-weight:
        700;

    line-height:
        1.25;
}

.resource-card__description {
    margin:
        0
        0
        18px;

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

    font-size:
        0.82rem;

    line-height:
        1.5;
}


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

.resource-card__cta {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    width: fit-content;

    margin-top: auto;

    color:
        var(--ppg-teal-dark);

    font-size:
        0.74rem;

    font-weight:
        800;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;

    transition:
        color var(--ppg-transition),
        gap var(--ppg-transition);
}

.resource-card__cta i {
    font-size:
        0.7rem;

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

.resource-card__cta:hover {
    gap: 12px;

    color:
        var(--ppg-navy);
}

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


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

@media (max-width: 1100px) {

    .tools-resources__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 22px;
    }

    .resource-card__media {
        height: 270px;
    }

}


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

@media (max-width: 760px) {

    .tools-resources {
        padding:
            52px
            0
            58px;
    }

    .tools-resources__header {
        margin-bottom:
            28px;
    }

    .tools-resources__grid {
        grid-template-columns:
            1fr;

        gap:
            20px;
    }

    .resource-card {
        width: 100%;
    }

    .resource-card__media {
        height:
            300px;

        padding-top:
            26px;
    }

    .resource-card__image {
        max-width:
            80%;
    }

}


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

@media (max-width: 480px) {

    .tools-resources {
        padding:
            44px
            0
            50px;
    }

    .tools-resources__header {
        text-align:
            left;
    }

    .tools-resources__title {
        font-size:
            clamp(
                1.8rem,
                8vw,
                2.3rem
            );
    }

    .tools-resources__description {
        margin-left:
            0;

        font-size:
            0.9rem;
    }

    .resource-card__media {
        height:
            255px;
    }

    .resource-card__image {
        max-width:
            88%;
    }

    .resource-card__body {
        padding:
            20px
            18px
            22px;
    }

    .resource-card__title {
        font-size:
            0.96rem;
    }

    .resource-card__description {
        font-size:
            0.8rem;
    }

}