/* ============================================================
   GOD PAUL FOUNDATION
   OUR STRATEGY PAGE
   ============================================================ */


/* ============================================================
   MAIN PAGE CONTAINER
   ============================================================ */

.cuamm-priorities-container {
    position: relative;

    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    padding:
        90px 24px 110px;

    flex: 1;

    background:
        transparent;

    z-index: 1;
}


/* ============================================================
   PAGE BACKGROUND
   ============================================================ */

body {
    background:
        linear-gradient(
            180deg,
            #edf7f1 0%,
            #e8f3ed 45%,
            #e6f2f7 100%
        );
}


/* ============================================================
   PAGE TITLE
   ============================================================ */

.section-title {
    position: relative;

    max-width: 700px;

    margin:
        0 auto 55px;

    padding-bottom: 18px;

    color:
        #1f5639;

    font-family:
        'Poppins',
        sans-serif;

    font-size:
        clamp(
            2.5rem,
            5vw,
            3.8rem
        );

    font-weight: 700;

    text-align: center;

    line-height: 1.15;

    letter-spacing: -1px;
}


.section-title::before {
    content: 'WHAT WE DO';

    display: block;

    margin-bottom: 10px;

    color:
        var(--primary-green);

    font-size: 0.76rem;

    font-weight: 700;

    letter-spacing: 2.4px;

    text-transform: uppercase;
}


.section-title::after {
    content: '';

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 86px;
    height: 5px;

    transform:
        translateX(-50%);

    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            var(--primary-green),
            var(--primary-blue)
        );
}


/* ============================================================
   STRATEGY CARDS
   ============================================================ */

.priority-card {
    position: relative;

    margin-bottom: 30px;

    overflow: hidden;

    border:
        1px solid
        rgba(60, 179, 113, 0.14);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.88) 0%,
            rgba(241, 249, 244, 0.92) 100%
        );

    box-shadow:
        0 14px 38px
        rgba(30, 76, 48, 0.07);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


/* Alternate subtle blue tint */

.priority-card:nth-of-type(3),
.priority-card:nth-of-type(5) {
    background:
        linear-gradient(
            145deg,
            #f5fbfe 0%,
            #eaf5f9 100%
        );

    border-color:
        rgba(93, 173, 226, 0.18);
}


.priority-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(60, 179, 113, 0.28);

    box-shadow:
        0 24px 52px
        rgba(29, 76, 48, 0.13);
}


/* ============================================================
   CARD ACCENT BAR
   ============================================================ */

.priority-card::before {
    content: '';

    position: absolute;

    left: 0;
    top: 0;

    width: 5px;
    height: 100%;

    background:
        linear-gradient(
            to bottom,
            var(--primary-green),
            var(--primary-blue)
        );

    z-index: 4;
}


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

.card-header {
    position: relative;

    padding:
        26px 34px 24px 38px;

    overflow: hidden;

    color:
        #ffffff;
}


/* Green headers */

.card-header.header-green {
    background:
        linear-gradient(
            135deg,
            #2e8b57 0%,
            #3cb371 55%,
            #62c995 100%
        );
}


/* Blue headers */

.card-header.header-blue {
    background:
        linear-gradient(
            135deg,
            #3d8fbd 0%,
            #5dade2 55%,
            #87ceeb 100%
        );
}


/* Decorative circle */

.card-header::after {
    content: '';

    position: absolute;

    top: -60px;
    right: -45px;

    width: 150px;
    height: 150px;

    border-radius: 50%;

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

    pointer-events: none;
}


/* ============================================================
   FIRST OVERVIEW CARD
   ============================================================ */

.priority-card:first-of-type
.card-header {

    padding:
        31px 38px;

    background:
        linear-gradient(
            135deg,
            #236843 0%,
            #32965f 50%,
            #57b984 100%
        );
}


.priority-card:first-of-type
.card-header h4 {

    max-width: 930px;

    font-size:
        clamp(
            1.05rem,
            2vw,
            1.25rem
        );

    font-weight: 500;

    line-height: 1.75;
}


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

.card-header h3 {
    position: relative;

    max-width: 850px;

    margin: 0;

    padding-right: 70px;

    font-family:
        'Poppins',
        sans-serif;

    font-size:
        clamp(
            1.25rem,
            2.5vw,
            1.55rem
        );

    font-weight: 600;

    line-height: 1.4;

    letter-spacing: -0.25px;

    z-index: 2;
}


.card-header h4 {
    position: relative;

    margin: 0;

    font-family:
        'Poppins',
        sans-serif;

    font-size: 1.08rem;

    font-weight: 500;

    line-height: 1.6;

    z-index: 2;
}


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

.card-content {
    position: relative;

    padding:
        31px 36px 34px 38px;
}


.card-content p {
    margin:
        0 0 18px;

    color:
        #4a6254;

    font-size: 0.97rem;

    line-height: 1.85;
}


.card-content p:last-child {
    margin-bottom: 0;
}


/* ============================================================
   SUBTLE PARAGRAPH MARKERS
   ============================================================ */

.priority-card:not(:first-of-type)
.card-content p {

    position: relative;

    padding-left: 20px;
}


.priority-card:not(:first-of-type)
.card-content p::before {

    content: '';

    position: absolute;

    left: 0;
    top: 11px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        var(--primary-green);
}


.priority-card:nth-of-type(3)
.card-content p::before,
.priority-card:nth-of-type(5)
.card-content p::before {

    background:
        var(--dark-blue);
}


/* ============================================================
   STRATEGY CARD NUMBERING
   ============================================================ */

.priority-card:nth-of-type(2)
.card-header::before {

    content: '01';
}


.priority-card:nth-of-type(3)
.card-header::before {

    content: '02';
}


.priority-card:nth-of-type(4)
.card-header::before {

    content: '03';
}


.priority-card:nth-of-type(5)
.card-header::before {

    content: '04';
}


.priority-card:not(:first-of-type)
.card-header::before {

    position: absolute;

    top: 17px;
    right: 25px;

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

    font-family:
        'Poppins',
        sans-serif;

    font-size: 3.2rem;

    font-weight: 700;

    line-height: 1;

    z-index: 1;
}


/* ============================================================
   CARD HOVER ACCENT
   ============================================================ */

.priority-card:hover
.card-header::after {

    transform:
        scale(1.15);
}


.card-header::after {
    transition:
        transform 0.5s ease;
}


/* ============================================================
   ADD SECTION RHYTHM BETWEEN CARDS
   ============================================================ */

.priority-card:nth-of-type(2) {
    margin-top: 45px;
}


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

@media (max-width: 992px) {

    .cuamm-priorities-container {
        padding:
            75px 24px 90px;
    }


    .section-title {
        margin-bottom: 45px;
    }


    .card-header {
        padding:
            24px 28px 22px 32px;
    }


    .card-content {
        padding:
            28px 30px 31px 32px;
    }

}


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

@media (max-width: 768px) {

    .cuamm-priorities-container {
        padding:
            60px 18px 75px;
    }


    .section-title {
        margin-bottom: 38px;

        font-size: 2.3rem;
    }


    .priority-card {
        margin-bottom: 22px;

        border-radius: 16px;
    }


    .card-header,
    .priority-card:first-of-type
    .card-header {

        padding:
            23px 23px 21px 27px;
    }


    .card-header h3 {
        padding-right: 50px;

        font-size: 1.2rem;
    }


    .priority-card:not(:first-of-type)
    .card-header::before {

        top: 17px;
        right: 18px;

        font-size: 2.5rem;
    }


    .card-content {
        padding:
            25px 24px 27px 27px;
    }


    .card-content p {
        font-size: 0.92rem;

        line-height: 1.78;
    }


    .priority-card:nth-of-type(2) {
        margin-top: 30px;
    }

}


/* ============================================================
   SMALL PHONES
   ============================================================ */

@media (max-width: 480px) {

    .cuamm-priorities-container {
        padding:
            48px 15px 65px;
    }


    .section-title {
        font-size: 2rem;
    }


    .section-title::before {
        font-size: 0.68rem;

        letter-spacing: 1.8px;
    }


    .card-header,
    .priority-card:first-of-type
    .card-header {

        padding:
            21px 19px 20px 23px;
    }


    .card-header h3 {
        max-width: 85%;

        padding-right: 0;

        font-size: 1.08rem;
    }


    .priority-card:not(:first-of-type)
    .card-header::before {

        font-size: 2.1rem;
    }


    .priority-card:first-of-type
    .card-header h4 {

        font-size: 0.98rem;
    }


    .card-content {
        padding:
            22px 20px 24px 23px;
    }


    .card-content p {
        font-size: 0.88rem;
    }

}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .priority-card,
    .card-header::after {

        transition:
            none !important;
    }


    .priority-card:hover {

        transform:
            none;
    }

}