/* ==========================================================
   IBIMA CBO — PROGRAMS PAGE
   programs.css

   This stylesheet controls ONLY the Programs page.
========================================================== */


/* ==========================================================
   01. PROGRAMS HERO
========================================================== */

/* ==========================================================
   01. PROGRAMS HERO
========================================================== */

.programs-hero {

    position: relative;

    min-height: 360px;

    display: flex;

    align-items: center;

    overflow: hidden;

    /*
    IMPORTANT:
    The actual Programs photo is loaded here.
    */

    background-image:
        linear-gradient(
            90deg,
            rgba(3, 25, 77, 0.98) 0%,
            rgba(3, 25, 77, 0.94) 25%,
            rgba(54, 77, 129, 0.78) 48%,
            rgba(245, 245, 245, 0.103) 68%,
            rgba(204, 197, 197, 0) 100%
        ),
        url("../images/program-community-hero.jpg");

    background-position:
        center,
        center center;

    background-size:
        cover,
        cover;

    background-repeat:
        no-repeat,
        no-repeat;
}

/* ==========================================================
   HERO PATTERN
========================================================== */

.programs-hero-pattern {

    position: absolute;

    inset: 0;

    opacity: 0.12;

    background-image:
        radial-gradient(
            circle,
            rgba(255,255,255,0.35) 1px,
            transparent 1px
        );

    background-size: 20px 20px;

    pointer-events: none;
}


/* ==========================================================
   GREEN BOTTOM CURVE
========================================================== */

.programs-hero::after {

    content: "";

    position: absolute;

    left: -5%;

    bottom: -55px;

    width: 110%;

    height: 95px;

    background: #ffffff;

    border-radius:
        50% 50% 0 0 /
        70% 70% 0 0;

    border-top:
        8px solid var(--ibima-green);

    z-index: 2;
}


/* ==========================================================
   HERO CONTAINER
========================================================== */

.programs-hero .container {

    position: relative;

    z-index: 3;
}


/* ==========================================================
   HERO CONTENT
========================================================== */

.programs-hero-content {

    width: 55%;

    padding:
        70px 0
        85px;
}


.programs-hero-text h1 {

    margin: 0;

    color: #ffffff;

    font-size: 48px;

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -0.6px;
}


/* ==========================================================
   HERO LINE
========================================================== */

.programs-hero-line {

    width: 78px;

    height: 4px;

    margin:
        13px 0
        18px;

    border-radius: 10px;

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


/* ==========================================================
   HERO DESCRIPTION
========================================================== */

.programs-hero-text p {

    max-width: 610px;

    margin: 0;

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

    font-size: 17px;

    line-height: 1.75;
}



/* ==========================================================
   02. PROGRAM AREAS SECTION
========================================================== */

.program-areas-section {

    position: relative;

    padding:
        75px 0
        85px;

    background: #ffffff;
}


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

.programs-section-heading {

    max-width: 760px;

    margin:
        0 auto
        50px;

    text-align: center;
}


.programs-section-heading > span {

    display: inline-block;

    margin-bottom: 8px;

    color: var(--ibima-green);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.programs-section-heading h2 {

    margin: 0;

    color: var(--ibima-navy);

    font-size: 36px;

    line-height: 1.2;

    font-weight: 800;
}


/* ==========================================================
   HEADING LINE
========================================================== */

.heading-line {

    width: 65px;

    height: 4px;

    margin:
        15px auto
        18px;

    border-radius: 10px;

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


.programs-section-heading p {

    max-width: 680px;

    margin:
        0 auto;

    color: #667085;

    font-size: 16px;

    line-height: 1.75;
}



/* ==========================================================
   03. PROGRAM GRID
========================================================== */

.programs-grid {

    display: grid;

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

    gap: 25px;
}



/* ==========================================================
   04. PROGRAM CARD
========================================================== */

.program-area-card {

    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 315px;

    padding: 30px 28px 27px;

    background: #ffffff;

    border:
        1px solid #e8edf3;

    border-radius: 14px;

    box-shadow:
        0 8px 25px rgba(3,25,77,0.06);

    overflow: hidden;

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


/* ==========================================================
   CARD TOP ACCENT
========================================================== */

.program-area-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 4px;

    background: var(--ibima-green);

    transform:
        scaleX(0);

    transform-origin: left;

    transition:
        transform 0.3s ease;
}


.program-area-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(3,25,77,0.10);

    box-shadow:
        0 18px 40px rgba(3,25,77,0.11);
}


.program-area-card:hover::before {

    transform:
        scaleX(1);
}



/* ==========================================================
   05. PROGRAM ICON
========================================================== */

.program-area-icon {

    width: 62px;

    height: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 22px;

    border-radius: 14px;

    font-size: 25px;
}


/* ==========================================================
   ICON COLORS
========================================================== */

.icon-green {

    color: #16845a;

    background: #e8f7f0;
}


.icon-orange {

    color: #d97706;

    background: #fff4df;
}


.icon-purple {

    color: #7c3aed;

    background: #f1eaff;
}


.icon-blue {

    color: #2563eb;

    background: #eaf1ff;
}


.icon-teal {

    color: #0f766e;

    background: #e5f7f5;
}


.icon-gold {

    color: #a16207;

    background: #fff8df;
}


.icon-cyan {

    color: #0891b2;

    background: #e5f8fc;
}


.icon-pink {

    color: #db2777;

    background: #fceaf3;
}


.icon-red {

    color: #dc2626;

    background: #ffeded;
}


.icon-dark-green {

    color: #166534;

    background: #eaf7ed;
}


.icon-magenta {

    color: #be185d;

    background: #fceaf3;
}


.icon-navy {

    color: var(--ibima-navy);

    background: #e9eef7;
}



/* ==========================================================
   06. PROGRAM CARD CONTENT
========================================================== */

.program-area-card h3 {

    margin:
        0 0
        12px;

    color: var(--ibima-navy);

    font-size: 20px;

    line-height: 1.35;

    font-weight: 750;
}


.program-area-card p {

    margin:
        0 0
        20px;

    color: #667085;

    font-size: 15px;

    line-height: 1.7;
}


/* ==========================================================
   07. LEARN MORE
========================================================== */

.program-area-card a {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: auto;

    width: fit-content;

    color: var(--ibima-green);

    font-size: 14px;

    font-weight: 750;

    text-decoration: none;

    transition:
        gap 0.25s ease,
        color 0.25s ease;
}


.program-area-card a:hover {

    gap: 13px;

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



/* ==========================================================
   08. VIEW ALL PROGRAMS
========================================================== */

.programs-view-all {

    display: flex;

    justify-content: center;

    margin-top: 45px;
}


.programs-view-all a {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        13px 25px;

    color: #ffffff;

    background:
        var(--ibima-navy);

    border-radius: 6px;

    font-size: 14px;

    font-weight: 750;

    text-decoration: none;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}


.programs-view-all a:hover {

    background:
        var(--ibima-green);

    transform:
        translateY(-2px);
}



/* ==========================================================
   09. EVENTS & ACTIVITIES
========================================================== */

.events-section {

    padding:
        85px 0;

    background:
        #f5f8fb;
}


/* ==========================================================
   EVENTS EMPTY STATE
========================================================== */

.events-empty-state {

    max-width: 650px;

    margin:
        0 auto;

    padding:
        55px 35px;

    text-align: center;

    background:
        #ffffff;

    border:
        1px solid #e6ebf1;

    border-radius: 16px;

    box-shadow:
        0 10px 30px rgba(3,25,77,0.05);
}


.events-empty-icon {

    width: 72px;

    height: 72px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin:
        0 auto
        20px;

    border-radius: 50%;

    color: var(--ibima-green);

    background:
        #e8f7f0;

    font-size: 28px;
}


.events-empty-state h3 {

    margin:
        0 0
        10px;

    color:
        var(--ibima-navy);

    font-size: 24px;

    font-weight: 800;
}


.events-empty-state p {

    max-width: 480px;

    margin:
        0 auto;

    color: #667085;

    font-size: 15px;

    line-height: 1.7;
}



/* ==========================================================
   10. SUPPORT CTA
========================================================== */

.program-support-cta {

    position: relative;

    overflow: hidden;

    padding:
        55px 0;

    background:
        var(--ibima-navy);
}


.program-support-cta::before {

    content: "";

    position: absolute;

    top: -100px;

    right: -80px;

    width: 300px;

    height: 300px;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.04);
}


.program-support-cta::after {

    content: "";

    position: absolute;

    bottom: -130px;

    left: -100px;

    width: 320px;

    height: 320px;

    border-radius: 50%;

    border:
        35px solid rgba(255,255,255,0.03);
}


.program-support-content {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 30px;
}



/* ==========================================================
   SUPPORT ICON
========================================================== */

.program-support-icon {

    width: 72px;

    height: 72px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 16px;

    color: var(--ibima-green);

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

    font-size: 29px;
}



/* ==========================================================
   SUPPORT TEXT
========================================================== */

.program-support-text span {

    display: block;

    margin-bottom: 6px;

    color: var(--ibima-green);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1.8px;
}


.program-support-text h2 {

    margin:
        0 0
        8px;

    color: #000000;

    font-size: 28px;

    line-height: 1.25;

    font-weight: 800;
}


.program-support-text p {

    max-width: 650px;

    margin: 0;

    color: #000000;

    font-size: 15px;

    line-height: 1.65;
}



/* ==========================================================
   11. SUPPORT BUTTONS
========================================================== */

.program-support-buttons {

    display: flex;

    align-items: center;

    gap: 12px;

    white-space: nowrap;
}


.program-support-buttons .btn-primary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        13px 21px;

    color: #ffffff;

    background:
        var(--ibima-green);

    border-radius: 6px;

    font-size: 13px;

    font-weight: 800;

    text-decoration: none;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


.program-support-buttons .btn-primary:hover {

    transform:
        translateY(-2px);

    background:
        #053a08;

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


.program-contact-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        12px 20px;

    color: #000000;

    border:
        1px solid rgba(27, 11, 11, 0.45);

    border-radius: 6px;

    font-size: 13px;

    font-weight: 750;

    text-decoration: none;

    transition:
        background 0.25s ease,
        border-color 0.25s ease;
}


.program-contact-button:hover {

    color: var(--ibima-navy);

    background: #084b16;

    border-color: #ffffff;
}



/* ==========================================================
   12. TABLET
========================================================== */

@media (max-width: 992px) {

    .programs-hero-content {

        width: 70%;
    }


    .programs-grid {

        grid-template-columns:
            repeat(2, 1fr);

        gap: 22px;
    }


    .program-support-content {

        grid-template-columns:
            auto 1fr;

        gap: 25px;
    }


    .program-support-buttons {

        grid-column: 2;

        justify-content: flex-start;
    }

}



/* ==========================================================
   13. MOBILE
========================================================== */

@media (max-width: 768px) {

    /* HERO */

.programs-hero {

    min-height: 330px;

    background-image:
        linear-gradient(
            90deg,
            rgba(3,25,77,0.96) 0%,
            rgba(3,25,77,0.78) 55%,
            rgba(3,25,77,0.40) 100%
        ),
        url("../images/program-community-hero.jpg");

    background-position:
        center,
        center center;

    background-size:
        cover,
        cover;

    background-repeat:
        no-repeat,
        no-repeat;
}


    .programs-hero::after {

        bottom: -45px;

        height: 75px;

        border-top-width: 6px;
    }


    .programs-hero-content {

        width: 100%;

        padding:
            60px 0
            70px;
    }


    .programs-hero-text h1 {

        font-size: 36px;
    }


    .programs-hero-text p {

        max-width: 100%;

        font-size: 15px;

        line-height: 1.7;
    }



    /* PROGRAM AREAS */

    .program-areas-section {

        padding:
            60px 0
            65px;
    }


    .programs-section-heading {

        margin-bottom: 35px;
    }


    .programs-section-heading h2 {

        font-size: 29px;
    }


    .programs-section-heading p {

        font-size: 15px;
    }


    .programs-grid {

        grid-template-columns: 1fr;

        gap: 18px;
    }


    .program-area-card {

        min-height: auto;

        padding:
            26px 23px;
    }


    .program-area-card h3 {

        font-size: 19px;
    }



    /* EVENTS */

    .events-section {

        padding:
            65px 0;
    }


    .events-empty-state {

        padding:
            45px 23px;
    }



    /* SUPPORT CTA */

    .program-support-cta {

        padding:
            50px 0;
    }


    .program-support-content {

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;
    }


    .program-support-text h2 {

        font-size: 25px;
    }


    .program-support-text p {

        font-size: 14px;
    }


    .program-support-buttons {

        display: flex;

        flex-wrap: wrap;

        width: 100%;
    }


    .program-support-buttons .btn-primary,
    .program-contact-button {

        flex: 1;

        min-width: 135px;

        text-align: center;
    }

}



/* ==========================================================
   14. SMALL MOBILE
========================================================== */

@media (max-width: 480px) {

    .programs-hero-text h1 {

        font-size: 32px;
    }


    .programs-hero-text p {

        font-size: 14px;
    }


    .program-area-card {

        padding:
            24px 20px;
    }


    .program-area-icon {

        width: 56px;

        height: 56px;

        margin-bottom: 18px;

        font-size: 22px;
    }


    .programs-view-all a {

        width: 100%;

        justify-content: center;
    }


    .program-support-buttons {

        flex-direction: column;

        align-items: stretch;
    }


    .program-support-buttons .btn-primary,
    .program-contact-button {

        width: 100%;

        flex: none;
    }

}
/* PREMIUM PROGRAMS VISUAL POLISH */
.programs-page{background:#f7faf8;overflow:hidden}.programs-hero{min-height:520px;background-position:center 48%}.programs-hero-pattern{opacity:.07;background-size:28px 28px}.programs-hero-content{width:62%;padding:105px 0 125px}.programs-hero-text h1{font-size:clamp(48px,6vw,78px);letter-spacing:-.05em}.programs-hero-text p{font-size:18px;max-width:650px}
.program-areas-section{padding:105px 0 110px;background:linear-gradient(180deg,#f7faf8 0%,#fff 18%,#fff 82%,#f7faf8 100%)}
.programs-section-heading{margin-bottom:58px}.programs-section-heading>span{display:inline-flex;align-items:center;gap:10px;padding:7px 12px;border-radius:999px;background:#e9f7ef;color:var(--ibima-green);font-size:10px;letter-spacing:.15em}.programs-section-heading>span:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ibima-orange)}.programs-section-heading h2{font-size:clamp(36px,4.5vw,56px);letter-spacing:-.045em;margin-top:14px}.programs-section-heading p{font-size:16px;max-width:720px}.heading-line{height:4px;width:78px;background:linear-gradient(90deg,var(--ibima-green),var(--ibima-orange));margin:17px auto 20px}
.programs-grid{grid-template-columns:repeat(3,1fr);gap:24px}.program-area-card{min-height:350px;padding:34px 29px 28px;border:1px solid #e2ebe5;border-radius:28px;background:#fff;box-shadow:0 15px 40px rgba(5,55,31,.055);transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}.program-area-card:after{content:"";position:absolute;inset:0 0 auto 0;height:150px;opacity:.08;background-position:center;background-size:cover;z-index:0;mask-image:linear-gradient(to bottom,#000,transparent);-webkit-mask-image:linear-gradient(to bottom,#000,transparent);transition:opacity .35s ease,transform .45s ease}
#community-mental-health:after{background-image:url('../images/program-health-hero.jpg')}#substance-prevention:after{background-image:url('../images/health-story.jpg')}#youth-school:after{background-image:url('../images/program-education-hero.jpg')}#workplace:after{background-image:url('../images/partners-meeting.jpg')}#psychosocial-support:after{background-image:url('../images/program-community.jpg')}#governance:after{background-image:url('../images/about-team.jpg')}#digital-health:after{background-image:url('../images/program-health.jpg')}#research:after{background-image:url('../images/impact-education.jpg')}#suicide-prevention:after{background-image:url('../images/support-impact.jpg')}#emergency-support:after{background-image:url('../images/community-story.jpg')}#maternal-support:after{background-image:url('../images/support-community.jpg')}#safe-spaces:after{background-image:url('../images/home-empowerment.jpg')}
.program-area-card>*{position:relative;z-index:1}.program-area-card:hover{transform:translateY(-10px);box-shadow:0 28px 60px rgba(5,55,31,.12);border-color:rgba(11,107,58,.18)}.program-area-card:hover:after{opacity:.18;transform:scale(1.05)}.program-area-card:before{height:5px;background:linear-gradient(90deg,var(--ibima-green),var(--ibima-orange))}.program-area-icon{width:68px;height:68px;border-radius:21px;margin-bottom:24px;box-shadow:0 10px 25px rgba(5,55,31,.08);border:5px solid rgba(255,255,255,.75)}.program-area-card h3{font-size:21px;letter-spacing:-.015em}.program-area-card p{font-size:14px;line-height:1.75}.program-area-card a{font-size:13px}.programs-view-all{margin-top:55px}.programs-view-all a{border-radius:999px;padding:14px 26px;box-shadow:0 10px 25px rgba(3,25,77,.12)}.events-section{padding:100px 0;background:#eef6f0}.events-empty-state{border:0;border-radius:28px;box-shadow:0 22px 55px rgba(5,55,31,.08)}.program-support-cta{padding:75px 0;background:linear-gradient(120deg,#032f1c,#0b6b3a 60%,#0d8150)}.program-support-text h2,.program-support-text p{color:#fff}.program-support-text span{color:#f5b95a}
@media(max-width:992px){.programs-hero-content{width:75%}.programs-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.programs-hero{min-height:480px;background-position:58% center}.programs-hero-content{width:100%;padding:85px 0 105px}.programs-grid{grid-template-columns:1fr;gap:18px}.program-area-card{min-height:315px}.program-area-card:after{height:135px}.program-areas-section{padding:78px 0 85px}.programs-section-heading{margin-bottom:42px}}

/* UPCOMING EVENT FEATURE */
.events-section{background:#eef6f0}
.program-event-feature{display:grid;grid-template-columns:minmax(280px,.78fr) 1.22fr;gap:0;overflow:hidden;background:#fff;border:1px solid #dfeae2;border-radius:30px;box-shadow:0 22px 55px rgba(5,55,31,.09)}
.program-event-poster{background:#e8f1eb;display:flex;align-items:center;justify-content:center;min-height:100%}
.program-event-poster img{display:block;width:100%;height:100%;min-height:480px;object-fit:cover;object-position:center top}
.program-event-content{padding:48px 52px;display:flex;flex-direction:column;justify-content:center}
.program-event-date{display:inline-flex;align-items:center;gap:8px;width:max-content;padding:8px 13px;border-radius:999px;background:#e9f7ef;color:var(--ibima-green);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.program-event-date i{color:var(--ibima-orange)}
.program-event-content h3{font-family:Manrope,sans-serif;color:var(--ibima-green);font-size:clamp(30px,3.5vw,48px);line-height:1.05;letter-spacing:-.04em;margin:18px 0 14px}
.program-event-content>p{max-width:680px;color:#596b61;font-size:16px;line-height:1.75;margin:0}
.program-event-meta{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 28px}
.program-event-meta span{display:inline-flex;align-items:center;gap:8px;padding:11px 13px;border-radius:12px;background:#f5f8f6;color:#3e5147;font-size:13px;font-weight:700}
.program-event-meta i{color:var(--ibima-orange)}
.program-event-actions{display:flex;flex-wrap:wrap;gap:12px}
.program-event-actions .btn-primary,.program-event-actions .program-contact-button{min-height:46px}
@media(max-width:992px){.program-event-feature{grid-template-columns:1fr}.program-event-poster img{height:auto;min-height:0;max-height:720px;object-fit:contain;background:#eef4ef}.program-event-content{padding:38px 34px}}
@media(max-width:768px){.program-event-feature{border-radius:22px}.program-event-poster img{width:100%;height:auto;max-height:none}.program-event-content{padding:30px 24px}.program-event-content h3{font-size:32px}.program-event-content>p{font-size:14px;line-height:1.7}.program-event-meta{flex-direction:column}.program-event-meta span{width:100%;box-sizing:border-box}.program-event-actions{flex-direction:column}.program-event-actions .btn-primary,.program-event-actions .program-contact-button{width:100%;box-sizing:border-box}}
@media(max-width:480px){.program-event-content{padding:25px 19px}.program-event-content h3{font-size:28px}.program-event-date{font-size:10px}.program-event-actions .btn-primary,.program-event-actions .program-contact-button{justify-content:center}}