{"id":2200,"date":"2026-08-05T15:47:39","date_gmt":"2026-08-05T07:17:39","guid":{"rendered":"https:\/\/depedilocosnorte.com\/sdoin\/?page_id=2200"},"modified":"2026-08-26T10:13:16","modified_gmt":"2026-08-26T01:43:16","slug":"projects-programs-2","status":"publish","type":"page","link":"https:\/\/depedilocosnorte.com\/sdoin\/index.php\/projects-programs-2\/","title":{"rendered":"Projects &#038; Programs"},"content":{"rendered":"\n<div class=\"sdoin-program-section\">\n\n    <!-- =====================================================\n         INTRODUCTION\n         ===================================================== -->\n\n    <div class=\"sdoin-program-intro\">\n\n        <div class=\"sdoin-program-label\">\n            Projects &amp; Programs\n        <\/div>\n\n        <h1 class=\"sdoin-program-title\">\n            Programs that reach every Learner\n        <\/h1>\n\n        <p class=\"sdoin-program-description\">\n            Flagship division initiatives implemented with schools,\n            families, and local partners \u2014 with published objectives,\n            coverage, and results.\n        <\/p>\n\n    <\/div>\n\n\n    <!-- =====================================================\n         TWO IMAGE GRID\n         ===================================================== -->\n\n    <div class=\"sdoin-image-grid\">\n\n\n        <!-- =================================================\n             IMAGE 1\n             ================================================= -->\n\n        <div class=\"sdoin-image-card\">\n\n            <div class=\"sdoin-image-card-label\">\n                FEATURED INITIATIVE\n            <\/div>\n\n            <h2 class=\"sdoin-image-card-title\">\n                SDOIN School-Based Integrative &amp; Inclusive\n                Reading Initiative\n            <\/h2>\n\n\n            <!-- IMAGE PREVIEW -->\n\n            <button type=\"button\" class=\"sdoin-preview-image\" onclick=\"sdoinOpenPreview(\n                    'http:\/\/depedilocosnorte.com\/sdoin\/wp-content\/uploads\/2026\/08\/fb4b13ac-7eb0-4da2-b4ea-d2fd09307387-scaled.jpeg',\n                    'SDOIN School-Based Integrative &amp; Inclusive Reading Initiative'\n                )\" aria-label=\"Preview SDOIN Reading Initiative image\">\n\n                <div class=\"sdoin-image-wrapper\">\n\n                    <img decoding=\"async\" src=\"http:\/\/depedilocosnorte.com\/sdoin\/wp-content\/uploads\/2026\/08\/fb4b13ac-7eb0-4da2-b4ea-d2fd09307387-scaled.jpeg\" alt=\"SDOIN School-Based Integrative &amp; Inclusive Reading Initiative\" class=\"sdoin-program-image\">\n\n                    <div class=\"sdoin-image-overlay\">\n\n                        <span class=\"sdoin-overlay-icon\">\n                            \ud83d\udd0d\n                        <\/span>\n\n                        <span>\n                            Click to Preview\n                        <\/span>\n\n                    <\/div>\n\n                <\/div>\n\n            <\/button>\n\n\n            <!-- IMAGE NOTE -->\n\n            <p class=\"sdoin-image-note\">\n                Click the image to view it in full size.\n            <\/p>\n\n\n            <!-- DOWNLOAD BUTTON -->\n\n            <a href=\"http:\/\/depedilocosnorte.com\/sdoin\/wp-content\/uploads\/2026\/08\/fb4b13ac-7eb0-4da2-b4ea-d2fd09307387-scaled.jpeg\" download=\"SDOIN-Reading-Initiative.jpeg\" class=\"sdoin-image-download-button\" onclick=\"sdoinForceDownload(event, this);\">\n\n                <span class=\"sdoin-button-icon\">\n                    \u2193\n                <\/span>\n\n                Download Image\n\n            <\/a>\n\n        <\/div>\n\n\n\n        <!-- =================================================\n             IMAGE 2\n             ================================================= -->\n\n        <div class=\"sdoin-image-card\">\n\n            <div class=\"sdoin-image-card-label\">\n                PROGRAM MATERIAL\n            <\/div>\n\n            <h2 class=\"sdoin-image-card-title\">\n                SDOIN Reading Initiative\n            <\/h2>\n\n\n            <!-- IMAGE PREVIEW -->\n\n            <button type=\"button\" class=\"sdoin-preview-image\" onclick=\"sdoinOpenPreview(\n                    'https:\/\/depedilocosnorte.com\/sdoin\/wp-content\/uploads\/2026\/08\/775232910_4777671349186071_7112628471982185467_n-723x1024.jpg',\n                    'SDOIN Reading Initiative Program Material'\n                )\" aria-label=\"Preview SDOIN Reading Initiative program material\">\n\n                <div class=\"sdoin-image-wrapper\">\n\n                    <img decoding=\"async\" src=\"https:\/\/depedilocosnorte.com\/sdoin\/wp-content\/uploads\/2026\/08\/775232910_4777671349186071_7112628471982185467_n-723x1024.jpg\" alt=\"SDOIN Reading Initiative Program Material\" class=\"sdoin-program-image\">\n\n                    <div class=\"sdoin-image-overlay\">\n\n                        <span class=\"sdoin-overlay-icon\">\n                            \ud83d\udd0d\n                        <\/span>\n\n                        <span>\n                            Click to Preview\n                        <\/span>\n\n                    <\/div>\n\n                <\/div>\n\n            <\/button>\n\n\n            <!-- IMAGE NOTE -->\n\n            <p class=\"sdoin-image-note\">\n                Click the image to view it in full size.\n            <\/p>\n\n\n            <!-- DOWNLOAD BUTTON -->\n\n            <a href=\"https:\/\/depedilocosnorte.com\/sdoin\/wp-content\/uploads\/2026\/08\/775232910_4777671349186071_7112628471982185467_n-723x1024.jpg\" download=\"SDOIN-Reading-Initiative-Program-Material.jpg\" class=\"sdoin-image-download-button\" onclick=\"sdoinForceDownload(event, this);\">\n\n                <span class=\"sdoin-button-icon\">\n                    \u2193\n                <\/span>\n\n                Download Image\n\n            <\/a>\n\n        <\/div>\n\n    <\/div>\n\n<\/div>\n\n\n\n<!-- =========================================================\n     IMAGE PREVIEW \/ LIGHTBOX\n     ========================================================= -->\n\n<div id=\"sdoin-image-preview\" class=\"sdoin-image-preview-modal\" aria-hidden=\"true\">\n\n    <div class=\"sdoin-preview-backdrop\"><\/div>\n\n    <div class=\"sdoin-preview-content\">\n\n        <!-- CLOSE BUTTON -->\n\n        <button type=\"button\" class=\"sdoin-preview-close\" onclick=\"sdoinClosePreview()\" aria-label=\"Close image preview\">\n            \u00d7\n        <\/button>\n\n\n        <!-- IMAGE -->\n\n        <img decoding=\"async\" id=\"sdoin-preview-image\" src=\"\" alt=\"\">\n\n\n        <!-- IMAGE TITLE -->\n\n        <div id=\"sdoin-preview-title\" class=\"sdoin-preview-title\"><\/div>\n\n    <\/div>\n\n<\/div>\n\n\n\n<style>\n\n\/* =========================================================\n   MAIN SECTION\n   ========================================================= *\/\n\n.sdoin-program-section {\n\n    width: 100%;\n    max-width: 1200px;\n\n    margin: 0 auto;\n\n    padding: 0 20px 60px;\n\n    box-sizing: border-box;\n\n    font-family:\n        Arial,\n        Helvetica,\n        sans-serif;\n\n}\n\n\n\n\/* =========================================================\n   INTRODUCTION\n   ========================================================= *\/\n\n.sdoin-program-intro {\n\n    width: 100%;\n\n    padding:\n        35px\n        10px\n        35px;\n\n    box-sizing: border-box;\n\n}\n\n\n\n\/* =========================================================\n   LABEL\n   ========================================================= *\/\n\n.sdoin-program-label {\n\n    display: inline-block;\n\n    margin-bottom: 10px;\n\n    color: #f2b705;\n\n    font-size: 16px;\n\n    font-weight: 800;\n\n    letter-spacing: 0.8px;\n\n    text-transform: uppercase;\n\n}\n\n\n\n\/* =========================================================\n   MAIN TITLE\n   ========================================================= *\/\n\n.sdoin-program-title {\n\n    margin:\n        0\n        0\n        15px\n        0;\n\n    color: #082b68 !important;\n\n    font-family:\n        Arial,\n        Helvetica,\n        sans-serif !important;\n\n    font-size:\n        clamp(32px, 5vw, 52px) !important;\n\n    font-weight:\n        800 !important;\n\n    line-height:\n        1.08 !important;\n\n}\n\n\n\n\/* =========================================================\n   DESCRIPTION\n   ========================================================= *\/\n\n.sdoin-program-description {\n\n    max-width: 850px;\n\n    margin:\n        0;\n\n    color: #555 !important;\n\n    font-size:\n        17px !important;\n\n    line-height:\n        1.65 !important;\n\n}\n\n\n\n\/* =========================================================\n   TWO IMAGE GRID\n   ========================================================= *\/\n\n.sdoin-image-grid {\n\n    display: grid;\n\n    grid-template-columns:\n        repeat(2, minmax(0, 1fr));\n\n    gap: 30px;\n\n    width: 100%;\n\n}\n\n\n\n\/* =========================================================\n   IMAGE CARD\n   ========================================================= *\/\n\n.sdoin-image-card {\n\n    background:\n        #ffffff;\n\n    border:\n        1px solid #e1e6ec;\n\n    border-radius:\n        18px;\n\n    padding:\n        28px;\n\n    text-align:\n        center;\n\n    box-sizing:\n        border-box;\n\n    box-shadow:\n        0 10px 35px\n        rgba(0, 0, 0, 0.08);\n\n    transition:\n        transform 0.25s ease,\n        box-shadow 0.25s ease;\n\n}\n\n\n\n\/* =========================================================\n   CARD HOVER\n   ========================================================= *\/\n\n.sdoin-image-card:hover {\n\n    transform:\n        translateY(-4px);\n\n    box-shadow:\n        0 16px 40px\n        rgba(0, 0, 0, 0.13);\n\n}\n\n\n\n\/* =========================================================\n   CARD LABEL\n   ========================================================= *\/\n\n.sdoin-image-card-label {\n\n    display:\n        inline-block;\n\n    margin-bottom:\n        10px;\n\n    padding:\n        7px\n        14px;\n\n    background:\n        #fff6d9;\n\n    color:\n        #9b7400;\n\n    border-radius:\n        50px;\n\n    font-size:\n        11px;\n\n    font-weight:\n        800;\n\n    letter-spacing:\n        1px;\n\n}\n\n\n\n\/* =========================================================\n   CARD TITLE\n   ========================================================= *\/\n\n.sdoin-image-card-title {\n\n    margin:\n        0\n        0\n        22px\n        0 !important;\n\n    color:\n        #082b68 !important;\n\n    font-size:\n        23px !important;\n\n    font-weight:\n        800 !important;\n\n    line-height:\n        1.3 !important;\n\n}\n\n\n\n\/* =========================================================\n   PREVIEW IMAGE BUTTON\n   ========================================================= *\/\n\n.sdoin-preview-image {\n\n    display:\n        block;\n\n    width:\n        100%;\n\n    max-width:\n        500px;\n\n    margin:\n        0 auto;\n\n    padding:\n        0;\n\n    border:\n        none;\n\n    background:\n        transparent;\n\n    cursor:\n        pointer;\n\n    text-align:\n        center;\n\n    appearance:\n        none;\n\n    -webkit-appearance:\n        none;\n\n}\n\n\n\n\/* =========================================================\n   IMAGE WRAPPER\n   ========================================================= *\/\n\n.sdoin-image-wrapper {\n\n    position:\n        relative;\n\n    width:\n        100%;\n\n    max-width:\n        500px;\n\n    margin:\n        0 auto;\n\n    background:\n        #f5f7fa;\n\n    border-radius:\n        12px;\n\n    overflow:\n        hidden;\n\n    box-shadow:\n        0 6px 20px\n        rgba(0, 0, 0, 0.12);\n\n}\n\n\n\n\/* =========================================================\n   IMAGE\n   ========================================================= *\/\n\n.sdoin-program-image {\n\n    display:\n        block !important;\n\n    width:\n        100% !important;\n\n    max-width:\n        500px !important;\n\n    height:\n        auto !important;\n\n    margin:\n        0 auto !important;\n\n    border:\n        none !important;\n\n    border-radius:\n        0 !important;\n\n    transition:\n        transform 0.3s ease,\n        filter 0.3s ease;\n\n}\n\n\n\n\/* =========================================================\n   IMAGE HOVER\n   ========================================================= *\/\n\n.sdoin-preview-image:hover\n.sdoin-program-image {\n\n    transform:\n        scale(1.02);\n\n    filter:\n        brightness(0.78);\n\n}\n\n\n\n\/* =========================================================\n   IMAGE OVERLAY\n   ========================================================= *\/\n\n.sdoin-image-overlay {\n\n    position:\n        absolute;\n\n    top:\n        50%;\n\n    left:\n        50%;\n\n    transform:\n        translate(-50%, -50%);\n\n    display:\n        flex;\n\n    align-items:\n        center;\n\n    justify-content:\n        center;\n\n    gap:\n        8px;\n\n    padding:\n        11px\n        18px;\n\n    background:\n        rgba(8, 43, 104, 0.94);\n\n    color:\n        #ffffff;\n\n    border-radius:\n        9px;\n\n    font-size:\n        14px;\n\n    font-weight:\n        700;\n\n    white-space:\n        nowrap;\n\n    opacity:\n        0;\n\n    pointer-events:\n        none;\n\n    transition:\n        opacity 0.25s ease;\n\n    box-shadow:\n        0 6px 20px\n        rgba(0, 0, 0, 0.22);\n\n}\n\n\n\n\/* =========================================================\n   SHOW OVERLAY\n   ========================================================= *\/\n\n.sdoin-preview-image:hover\n.sdoin-image-overlay {\n\n    opacity:\n        1;\n\n}\n\n\n\n\/* =========================================================\n   OVERLAY ICON\n   ========================================================= *\/\n\n.sdoin-overlay-icon {\n\n    font-size:\n        18px;\n\n    font-weight:\n        800;\n\n    line-height:\n        1;\n\n}\n\n\n\n\/* =========================================================\n   IMAGE NOTE\n   ========================================================= *\/\n\n.sdoin-image-note {\n\n    margin:\n        14px\n        0\n        18px\n        0 !important;\n\n    color:\n        #777 !important;\n\n    font-size:\n        13px !important;\n\n    line-height:\n        1.5 !important;\n\n}\n\n\n\n\/* =========================================================\n   DOWNLOAD BUTTON\n   ========================================================= *\/\n\n.sdoin-image-download-button {\n\n    display:\n        inline-flex !important;\n\n    align-items:\n        center !important;\n\n    justify-content:\n        center !important;\n\n    gap:\n        9px;\n\n    min-height:\n        46px;\n\n    padding:\n        0\n        22px;\n\n    background:\n        #082b68 !important;\n\n    color:\n        #ffffff !important;\n\n    border:\n        2px solid #082b68 !important;\n\n    border-radius:\n        8px;\n\n    text-decoration:\n        none !important;\n\n    font-size:\n        14px !important;\n\n    font-weight:\n        700 !important;\n\n    line-height:\n        1;\n\n    box-shadow:\n        0\n        5px\n        15px\n        rgba(8, 43, 104, 0.20);\n\n    transition:\n        all 0.25s ease;\n\n}\n\n\n\n\/* =========================================================\n   DOWNLOAD BUTTON ICON\n   ========================================================= *\/\n\n.sdoin-button-icon {\n\n    font-size:\n        21px;\n\n    font-weight:\n        800;\n\n    line-height:\n        1;\n\n}\n\n\n\n\/* =========================================================\n   DOWNLOAD BUTTON HOVER\n   ========================================================= *\/\n\n.sdoin-image-download-button:hover {\n\n    background:\n        #f2b705 !important;\n\n    border-color:\n        #f2b705 !important;\n\n    color:\n        #082b68 !important;\n\n    transform:\n        translateY(-3px);\n\n    box-shadow:\n        0\n        8px\n        22px\n        rgba(0, 0, 0, 0.18);\n\n}\n\n\n\n\/* =========================================================\n   IMAGE PREVIEW MODAL\n   ========================================================= *\/\n\n.sdoin-image-preview-modal {\n\n    position:\n        fixed;\n\n    inset:\n        0;\n\n    width:\n        100%;\n\n    height:\n        100%;\n\n    display:\n        flex;\n\n    align-items:\n        center;\n\n    justify-content:\n        center;\n\n    padding:\n        30px;\n\n    box-sizing:\n        border-box;\n\n    background:\n        rgba(0, 0, 0, 0.88);\n\n    opacity:\n        0;\n\n    visibility:\n        hidden;\n\n    pointer-events:\n        none;\n\n    transition:\n        opacity 0.25s ease,\n        visibility 0.25s ease;\n\n    z-index:\n        999999;\n\n}\n\n\n\n\/* =========================================================\n   MODAL OPEN\n   ========================================================= *\/\n\n.sdoin-image-preview-modal.active {\n\n    opacity:\n        1;\n\n    visibility:\n        visible;\n\n    pointer-events:\n        auto;\n\n}\n\n\n\n\/* =========================================================\n   MODAL BACKDROP\n   ========================================================= *\/\n\n.sdoin-preview-backdrop {\n\n    position:\n        absolute;\n\n    inset:\n        0;\n\n    width:\n        100%;\n\n    height:\n        100%;\n\n    cursor:\n        pointer;\n\n}\n\n\n\n\/* =========================================================\n   PREVIEW CONTENT\n   ========================================================= *\/\n\n.sdoin-preview-content {\n\n    position:\n        relative;\n\n    z-index:\n        2;\n\n    display:\n        flex;\n\n    flex-direction:\n        column;\n\n    align-items:\n        center;\n\n    justify-content:\n        center;\n\n    width:\n        100%;\n\n    height:\n        100%;\n\n    box-sizing:\n        border-box;\n\n}\n\n\n\n\/* =========================================================\n   PREVIEW IMAGE\n   ========================================================= *\/\n\n#sdoin-preview-image {\n\n    display:\n        block;\n\n    max-width:\n        92vw;\n\n    max-height:\n        82vh;\n\n    width:\n        auto;\n\n    height:\n        auto;\n\n    object-fit:\n        contain;\n\n    border-radius:\n        8px;\n\n    box-shadow:\n        0\n        15px\n        50px\n        rgba(0, 0, 0, 0.5);\n\n    animation:\n        sdoinPreviewZoom 0.25s ease;\n\n}\n\n\n\n\/* =========================================================\n   PREVIEW ANIMATION\n   ========================================================= *\/\n\n@keyframes sdoinPreviewZoom {\n\n    from {\n\n        transform:\n            scale(0.92);\n\n        opacity:\n            0;\n\n    }\n\n    to {\n\n        transform:\n            scale(1);\n\n        opacity:\n            1;\n\n    }\n\n}\n\n\n\n\/* =========================================================\n   CLOSE BUTTON\n   ========================================================= *\/\n\n.sdoin-preview-close {\n\n    position:\n        absolute;\n\n    top:\n        20px;\n\n    right:\n        25px;\n\n    z-index:\n        10;\n\n    width:\n        48px;\n\n    height:\n        48px;\n\n    display:\n        flex;\n\n    align-items:\n        center;\n\n    justify-content:\n        center;\n\n    padding:\n        0;\n\n    border:\n        none;\n\n    border-radius:\n        50%;\n\n    background:\n        rgba(255, 255, 255, 0.95);\n\n    color:\n        #082b68;\n\n    font-size:\n        34px;\n\n    font-weight:\n        400;\n\n    line-height:\n        1;\n\n    cursor:\n        pointer;\n\n    box-shadow:\n        0\n        5px\n        20px\n        rgba(0, 0, 0, 0.25);\n\n    transition:\n        all 0.2s ease;\n\n}\n\n\n\n\/* =========================================================\n   CLOSE BUTTON HOVER\n   ========================================================= *\/\n\n.sdoin-preview-close:hover {\n\n    background:\n        #f2b705;\n\n    color:\n        #082b68;\n\n    transform:\n        rotate(90deg);\n\n}\n\n\n\n\/* =========================================================\n   PREVIEW TITLE\n   ========================================================= *\/\n\n.sdoin-preview-title {\n\n    margin-top:\n        15px;\n\n    max-width:\n        90vw;\n\n    padding:\n        8px\n        16px;\n\n    background:\n        rgba(8, 43, 104, 0.90);\n\n    color:\n        #ffffff;\n\n    border-radius:\n        7px;\n\n    font-size:\n        14px;\n\n    font-weight:\n        700;\n\n    text-align:\n        center;\n\n}\n\n\n\n\/* =========================================================\n   TABLET\n   ========================================================= *\/\n\n@media (max-width: 850px) {\n\n    .sdoin-image-grid {\n\n        grid-template-columns:\n            1fr;\n\n        gap:\n            25px;\n\n    }\n\n\n    .sdoin-image-card {\n\n        max-width:\n            700px;\n\n        width:\n            100%;\n\n        margin:\n            0 auto;\n\n    }\n\n\n    .sdoin-image-wrapper {\n\n        max-width:\n            550px;\n\n    }\n\n\n    .sdoin-program-image {\n\n        max-width:\n            550px !important;\n\n    }\n\n}\n\n\n\n\/* =========================================================\n   MOBILE\n   ========================================================= *\/\n\n@media (max-width: 480px) {\n\n    .sdoin-program-section {\n\n        padding:\n            0\n            10px\n            40px;\n\n    }\n\n\n    .sdoin-program-intro {\n\n        padding:\n            20px\n            5px\n            25px;\n\n    }\n\n\n    .sdoin-program-label {\n\n        font-size:\n            12px;\n\n    }\n\n\n    .sdoin-program-title {\n\n        font-size:\n            29px !important;\n\n        line-height:\n            1.15 !important;\n\n    }\n\n\n    .sdoin-program-description {\n\n        font-size:\n            14px !important;\n\n        line-height:\n            1.55 !important;\n\n    }\n\n\n    .sdoin-image-grid {\n\n        gap:\n            20px;\n\n    }\n\n\n    .sdoin-image-card {\n\n        padding:\n            18px;\n\n        border-radius:\n            14px;\n\n    }\n\n\n    .sdoin-image-card-title {\n\n        font-size:\n            20px !important;\n\n    }\n\n\n    .sdoin-image-wrapper {\n\n        max-width:\n            100%;\n\n    }\n\n\n    .sdoin-program-image {\n\n        max-width:\n            100% !important;\n\n    }\n\n\n    .sdoin-image-overlay {\n\n        padding:\n            9px\n            13px;\n\n        font-size:\n            12px;\n\n    }\n\n\n    .sdoin-image-note {\n\n        font-size:\n            12px !important;\n\n    }\n\n\n    .sdoin-image-download-button {\n\n        width:\n            100% !important;\n\n        box-sizing:\n            border-box;\n\n    }\n\n\n    .sdoin-image-preview-modal {\n\n        padding:\n            15px;\n\n    }\n\n\n    #sdoin-preview-image {\n\n        max-width:\n            96vw;\n\n        max-height:\n            78vh;\n\n    }\n\n\n    .sdoin-preview-close {\n\n        top:\n            12px;\n\n        right:\n            12px;\n\n        width:\n            42px;\n\n        height:\n            42px;\n\n        font-size:\n            29px;\n\n    }\n\n\n    .sdoin-preview-title {\n\n        font-size:\n            12px;\n\n        margin-top:\n            10px;\n\n    }\n\n}\n\n<\/style>\n\n\n\n<script>\n\n\/* =========================================================\n   SDOIN IMAGE PREVIEW \/ LIGHTBOX\n   ========================================================= *\/\n\nfunction sdoinOpenPreview(imageURL, imageTitle) {\n\n    const modal =\n        document.getElementById(\n            \"sdoin-image-preview\"\n        );\n\n    const previewImage =\n        document.getElementById(\n            \"sdoin-preview-image\"\n        );\n\n    const previewTitle =\n        document.getElementById(\n            \"sdoin-preview-title\"\n        );\n\n\n    if (!modal || !previewImage) {\n        return;\n    }\n\n\n    \/* SET IMAGE *\/\n\n    previewImage.src =\n        imageURL;\n\n\n    \/* SET ALT TEXT *\/\n\n    previewImage.alt =\n        imageTitle || \"Image Preview\";\n\n\n    \/* SET TITLE *\/\n\n    if (previewTitle) {\n\n        previewTitle.textContent =\n            imageTitle || \"\";\n\n    }\n\n\n    \/* SHOW MODAL *\/\n\n    modal.classList.add(\n        \"active\"\n    );\n\n    modal.setAttribute(\n        \"aria-hidden\",\n        \"false\"\n    );\n\n\n    \/* PREVENT PAGE SCROLL *\/\n\n    document.body.style.overflow =\n        \"hidden\";\n\n}\n\n\n\n\/* =========================================================\n   CLOSE IMAGE PREVIEW\n   ========================================================= *\/\n\nfunction sdoinClosePreview() {\n\n    const modal =\n        document.getElementById(\n            \"sdoin-image-preview\"\n        );\n\n    const previewImage =\n        document.getElementById(\n            \"sdoin-preview-image\"\n        );\n\n\n    if (!modal) {\n        return;\n    }\n\n\n    \/* HIDE MODAL *\/\n\n    modal.classList.remove(\n        \"active\"\n    );\n\n    modal.setAttribute(\n        \"aria-hidden\",\n        \"true\"\n    );\n\n\n    \/* CLEAR IMAGE AFTER CLOSING *\/\n\n    if (previewImage) {\n\n        setTimeout(\n            function() {\n\n                previewImage.src = \"\";\n\n            },\n            250\n        );\n\n    }\n\n\n    \/* RESTORE PAGE SCROLL *\/\n\n    document.body.style.overflow =\n        \"\";\n\n}\n\n\n\n\/* =========================================================\n   CLOSE WHEN CLICKING BACKDROP\n   ========================================================= *\/\n\ndocument.addEventListener(\n    \"click\",\n    function(event) {\n\n        const modal =\n            document.getElementById(\n                \"sdoin-image-preview\"\n            );\n\n        if (!modal) {\n            return;\n        }\n\n\n        if (\n            event.target.classList.contains(\n                \"sdoin-preview-backdrop\"\n            )\n        ) {\n\n            sdoinClosePreview();\n\n        }\n\n    }\n);\n\n\n\n\/* =========================================================\n   CLOSE WITH ESCAPE KEY\n   ========================================================= *\/\n\ndocument.addEventListener(\n    \"keydown\",\n    function(event) {\n\n        if (\n            event.key === \"Escape\"\n        ) {\n\n            const modal =\n                document.getElementById(\n                    \"sdoin-image-preview\"\n                );\n\n            if (\n                modal &&\n                modal.classList.contains(\n                    \"active\"\n                )\n            ) {\n\n                sdoinClosePreview();\n\n            }\n\n        }\n\n    }\n);\n\n\n\n\/* =========================================================\n   FORCE IMAGE DOWNLOAD\n   DOWNLOAD-ONLY FIX \u2014 PREVIEW CODE UNCHANGED\n   ========================================================= *\/\n\nfunction sdoinForceDownload(event, element) {\n\n    event.preventDefault();\n    event.stopPropagation();\n\n    let imageURL = element.getAttribute(\"href\");\n    const fileName = element.getAttribute(\"download\");\n\n    if (!imageURL) {\n        return;\n    }\n\n    \/* Use HTTPS for the download request only.\n       The preview image above remains completely unchanged. *\/\n    if (imageURL.indexOf(\"http:\/\/\") === 0) {\n        imageURL = imageURL.replace(\"http:\/\/\", \"https:\/\/\");\n    }\n\n    fetch(imageURL, {\n        method: \"GET\",\n        credentials: \"same-origin\",\n        cache: \"no-cache\"\n    })\n    .then(function(response) {\n\n        if (!response.ok) {\n            throw new Error(\"Download failed: \" + response.status);\n        }\n\n        return response.blob();\n    })\n    .then(function(blob) {\n\n        const blobURL =\n            window.URL.createObjectURL(blob);\n\n        const downloadLink =\n            document.createElement(\"a\");\n\n        downloadLink.href = blobURL;\n        downloadLink.download = fileName || \"SDOIN-Image.jpg\";\n        downloadLink.style.display = \"none\";\n\n        document.body.appendChild(downloadLink);\n        downloadLink.click();\n        document.body.removeChild(downloadLink);\n\n        setTimeout(function() {\n            window.URL.revokeObjectURL(blobURL);\n        }, 1000);\n    })\n    .catch(function(error) {\n\n        console.error(\"SDOIN image download error:\", error);\n\n        \/* Fallback only if the server blocks the fetch. *\/\n        window.open(imageURL, \"_blank\", \"noopener\");\n    });\n}\n\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Projects &amp; Programs Programs that reach every Learner Flagship division initiatives implemented with schools, families, and local partners \u2014 with &hellip; <\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2200","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/depedilocosnorte.com\/sdoin\/index.php\/wp-json\/wp\/v2\/pages\/2200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/depedilocosnorte.com\/sdoin\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/depedilocosnorte.com\/sdoin\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/depedilocosnorte.com\/sdoin\/index.php\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/depedilocosnorte.com\/sdoin\/index.php\/wp-json\/wp\/v2\/comments?post=2200"}],"version-history":[{"count":3,"href":"https:\/\/depedilocosnorte.com\/sdoin\/index.php\/wp-json\/wp\/v2\/pages\/2200\/revisions"}],"predecessor-version":[{"id":3755,"href":"https:\/\/depedilocosnorte.com\/sdoin\/index.php\/wp-json\/wp\/v2\/pages\/2200\/revisions\/3755"}],"wp:attachment":[{"href":"https:\/\/depedilocosnorte.com\/sdoin\/index.php\/wp-json\/wp\/v2\/media?parent=2200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}