{"id":1973,"date":"2026-01-27T02:08:01","date_gmt":"2026-01-27T02:08:01","guid":{"rendered":"https:\/\/clcadventist.org\/wp-public\/?page_id=1973"},"modified":"2026-03-19T05:44:10","modified_gmt":"2026-03-19T05:44:10","slug":"news","status":"publish","type":"page","link":"https:\/\/clcadventist.org\/wp-public\/news\/","title":{"rendered":"News Flash"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1973\" class=\"elementor elementor-1973\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4e3228c e-flex e-con-boxed e-con e-parent\" data-id=\"4e3228c\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a572156 elementor-widget elementor-widget-html\" data-id=\"a572156\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"hero-slot\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"hero-slot\" style=\"min-height: 300px;\">\r\n    <h3 style=\"color:white; opacity:0.5;\">Loading Latest News...<\/h3>\r\n<\/div>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-523b9f6 e-con-full e-flex e-con e-child\" data-id=\"523b9f6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-4035b2c e-con-full e-flex e-con e-child\" data-id=\"4035b2c\" data-element_type=\"container\" data-e-type=\"container\" id=\"card-slot-1\">\n\t\t\t\t<div class=\"elementor-element elementor-element-cdbcfbe elementor-widget elementor-widget-html\" data-id=\"cdbcfbe\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"card-slot-1\" style=\"min-height: 200px;\"><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8306372 e-con-full e-flex e-con e-child\" data-id=\"8306372\" data-element_type=\"container\" data-e-type=\"container\" id=\"card-slot-2\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dd8d2f0 elementor-widget elementor-widget-html\" data-id=\"dd8d2f0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"card-slot-2\" style=\"min-height: 200px;\"><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5b1bdfc e-con-full e-flex e-con e-child\" data-id=\"5b1bdfc\" data-element_type=\"container\" data-e-type=\"container\" id=\"list-slot\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6031783 elementor-widget elementor-widget-html\" data-id=\"6031783\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"list-slot\" style=\"min-height: 200px;\"><\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6a0f4a6 e-flex e-con-boxed e-con e-parent\" data-id=\"6a0f4a6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0784587 elementor-widget elementor-widget-html\" data-id=\"0784587\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    \/* --- MASTER STYLES --- *\/\r\n    \/* Force all elements to use Poppins *\/\r\n    .hero-layout, .hero-layout * { font-family: 'Poppins', sans-serif; box-sizing: border-box; }\r\n\r\n    \/* HERO SECTION *\/\r\n    .hero-layout { display: flex; gap: 40px; align-items: center; color: white; }\r\n    .hero-txt { width: 45%; }\r\n    \r\n    \/* STRICT HERO IMAGE BOX *\/\r\n    .hero-img { \r\n        width: 55%; \r\n        height: 380px; \/* Desktop Height *\/\r\n        border-radius: 4px; \r\n        overflow: hidden; \r\n        position: relative; \r\n        flex-shrink: 0; \/* Prevents squishing *\/\r\n    }\r\n    .hero-img img { \r\n        width: 100%; \r\n        height: 100%; \r\n        object-fit: cover; \/* CROPS the image to fit the box *\/\r\n        transition: transform 0.3s ease; \r\n        display: block;\r\n    }\r\n    .hero-img:hover img { transform: scale(1.03); }\r\n\r\n\r\n    \/* --- CARDS (THE FIX) --- *\/\r\n    .card-layout { \r\n        display: flex; \r\n        flex-direction: column; \r\n        gap: 15px; \r\n        color: white; \r\n        height: 100%; \r\n    }\r\n\r\n    \/* The \"Box\" that holds the image - STRICT SIZE LOCK *\/\r\n    .card-img-wrapper {\r\n        width: 100%;\r\n        height: 220px; \/* Desktop Height *\/\r\n        border-radius: 4px;\r\n        overflow: hidden;\r\n        flex-shrink: 0; \/* Crucial: Stops box from shrinking *\/\r\n        position: relative;\r\n        background: #333; \/* Placeholder color while loading *\/\r\n    }\r\n\r\n    \/* The Image inside the box *\/\r\n    .card-img { \r\n        width: 100% !important; \r\n        height: 100% !important; \r\n        object-fit: cover !important; \/* Force Crop *\/\r\n        object-position: center center; \/* Focus on center *\/\r\n        transition: transform 0.3s ease; \r\n        display: block;\r\n    }\r\n    \r\n    .card-img-wrapper:hover .card-img { transform: scale(1.03); }\r\n\r\n\r\n    \/* LIST SECTION *\/\r\n    .list-layout { display: flex; flex-direction: column; gap: 20px; background: rgba(255,255,255,0.03); padding: 25px; border-radius: 4px; height: 100%; }\r\n    .list-item { border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px; }\r\n    \r\n    \/* TYPOGRAPHY *\/\r\n    .news-meta { color: #00BADE; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 8px; }\r\n    .news-h1 { font-size: 32px; font-weight: 700; line-height: 1.2; margin-bottom: 15px; }\r\n    .news-h3 { font-size: 18px; font-weight: 600; line-height: 1.3; margin: 0; }\r\n    .news-link { color: white; text-decoration: none; transition: 0.3s; }\r\n    .news-link:hover { color: #00BADE; }\r\n    \/* .news-excerpt removed from here as it is no longer used *\/\r\n\r\n    \/* SEE MORE BUTTON *\/\r\n    .see-more-btn {\r\n        margin-top: auto; \r\n        display: inline-block;\r\n        color: #00BADE;\r\n        font-family: 'Poppins', sans-serif;\r\n        font-size: 13px;\r\n        font-weight: 600;\r\n        text-decoration: none;\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        transition: all 0.3s ease;\r\n        padding-top: 10px;\r\n    }\r\n    .see-more-btn:hover { color: white; padding-left: 5px; }\r\n    .see-more-btn::after { content: ' \u2192'; }\r\n\r\n\r\n    \/* --- RESPONSIVE FIXES --- *\/\r\n\r\n    \/* TABLET (1024px and below) *\/\r\n    @media (max-width: 1024px) {\r\n        .hero-layout { flex-direction: column-reverse; gap: 25px; }\r\n        .hero-txt, .hero-img { width: 100%; }\r\n        \r\n        \/* Force Tablet Height *\/\r\n        .hero-img { height: 350px !important; }\r\n        \r\n        .news-h1 { font-size: 28px; }\r\n        \r\n        \/* Force Card Height on Tablet *\/\r\n        .card-img-wrapper { height: 200px !important; }\r\n    }\r\n\r\n    \/* MOBILE (767px and below) *\/\r\n    @media (max-width: 767px) {\r\n        \/* Force Mobile Heights *\/\r\n        .hero-img { height: 250px !important; }\r\n        .card-img-wrapper { height: 200px !important; }\r\n        \r\n        .news-h1 { font-size: 24px; }\r\n        .list-layout { padding: 20px; }\r\n    }\r\n<\/style>\r\n\r\n<script>\r\n    async function distributeNews() {\r\n        const heroSlot = document.getElementById('hero-slot');\r\n        const newsPageURL = '\/wp-public\/all-news'; \r\n        \r\n        \/\/ --- CONFIGURATION ---\r\n        const NEWS_FLASH_ID = 11; \r\n        \r\n        try {\r\n            if (!heroSlot) { console.error(\"News Error: No hero-slot found\"); return; }\r\n            heroSlot.innerHTML = '<h3 style=\"color:white;\">Fetching data...<\/h3>';\r\n\r\n            \/\/ This fetches posts ONLY from Category 11 and its children\r\n            const res = await fetch(`\/wp-public\/wp-json\/wp\/v2\/posts?_embed&per_page=6&categories=${NEWS_FLASH_ID}`);\r\n            \r\n            if (!res.ok) throw new Error(`API Error: ${res.status}`);\r\n            const posts = await res.json();\r\n\r\n            if (posts.length === 0) {\r\n                heroSlot.innerHTML = '<h3 style=\"color:white;\">No posts found.<\/h3>';\r\n                return;\r\n            }\r\n\r\n            const get = (p) => {\r\n                let imgURL = 'https:\/\/via.placeholder.com\/800x600?text=No+Image'; \r\n                \r\n                \/\/ 1. Check for Manual Featured Image\r\n                if (p._embedded && p._embedded['wp:featuredmedia'] && p._embedded['wp:featuredmedia'][0]) {\r\n                    imgURL = p._embedded['wp:featuredmedia'][0].source_url;\r\n                } \r\n                \/\/ 2. Fallback: Check for YouTube Video in Content\r\n                else {\r\n                    const ytMatch = p.content.rendered.match(\/youtube\\.com\\\/embed\\\/([a-zA-Z0-9_-]+)\/) || \r\n                                    p.content.rendered.match(\/youtube\\.com\\\/watch\\?v=([a-zA-Z0-9_-]+)\/);     \r\n                    if (ytMatch && ytMatch[1]) {\r\n                        imgURL = `https:\/\/img.youtube.com\/vi\/${ytMatch[1]}\/mqdefault.jpg`;\r\n                    }\r\n                }\r\n\r\n                return {\r\n                    title: p.title.rendered,\r\n                    link: p.link,\r\n                    img: imgURL,\r\n                    date: new Date(p.date).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }),\r\n                    \/\/ Excerpt is still fetched but we won't use it in the hero below\r\n                    excerpt: p.excerpt.rendered.replace(\/<[^>]*>?\/gm, '').substring(0, 110) + '...' \r\n                };\r\n            };\r\n\r\n            \/\/ HERO - Updated to remove excerpt\r\n            if(posts[0]) {\r\n                const hero = get(posts[0]);\r\n                heroSlot.innerHTML = `\r\n                    <div class=\"hero-layout\">\r\n                        <div class=\"hero-txt\">\r\n                            <span class=\"news-meta\">${hero.date}<\/span>\r\n                            <h1 class=\"news-h1\"><a href=\"${hero.link}\" class=\"news-link\">${hero.title}<\/a><\/h1>\r\n                            <\/div>\r\n                        <div class=\"hero-img\"><a href=\"${hero.link}\"><img decoding=\"async\" src=\"${hero.img}\"><\/a><\/div>\r\n                    <\/div>`;\r\n            }\r\n\r\n            \/\/ CARD 1\r\n            const card1Slot = document.getElementById('card-slot-1');\r\n            if(posts[1] && card1Slot) {\r\n                const c1 = get(posts[1]);\r\n                card1Slot.innerHTML = `\r\n                    <div class=\"card-layout\">\r\n                        <a href=\"${c1.link}\" class=\"card-img-wrapper\"><img decoding=\"async\" src=\"${c1.img}\" class=\"card-img\"><\/a>\r\n                        <div>\r\n                            <span class=\"news-meta\">${c1.date}<\/span>\r\n                            <h3 class=\"news-h3\"><a href=\"${c1.link}\" class=\"news-link\">${c1.title}<\/a><\/h3>\r\n                        <\/div>\r\n                    <\/div>`;\r\n            }\r\n\r\n            \/\/ CARD 2\r\n            const card2Slot = document.getElementById('card-slot-2');\r\n            if(posts[2] && card2Slot) {\r\n                const c2 = get(posts[2]);\r\n                card2Slot.innerHTML = `\r\n                    <div class=\"card-layout\">\r\n                        <a href=\"${c2.link}\" class=\"card-img-wrapper\"><img decoding=\"async\" src=\"${c2.img}\" class=\"card-img\"><\/a>\r\n                        <div>\r\n                            <span class=\"news-meta\">${c2.date}<\/span>\r\n                            <h3 class=\"news-h3\"><a href=\"${c2.link}\" class=\"news-link\">${c2.title}<\/a><\/h3>\r\n                        <\/div>\r\n                    <\/div>`;\r\n            }\r\n\r\n            \/\/ LIST\r\n            const listSlot = document.getElementById('list-slot');\r\n            if (listSlot) {\r\n                let listHTML = '<div class=\"list-layout\">';\r\n                for(let i=3; i<posts.length; i++) {\r\n                    const item = get(posts[i]);\r\n                    listHTML += `\r\n                        <div class=\"list-item\">\r\n                            <span class=\"news-meta\" style=\"border-left:2px solid #00B5D8; padding-left:8px;\">${item.date}<\/span>\r\n                            <h3 class=\"news-h3\" style=\"font-size:14px;\"><a href=\"${item.link}\" class=\"news-link\">${item.title}<\/a><\/h3>\r\n                        <\/div>`;\r\n                }\r\n                listHTML += `<a href=\"${newsPageURL}\" class=\"see-more-btn\">See All News<\/a>`;\r\n                listHTML += '<\/div>';\r\n                listSlot.innerHTML = listHTML;\r\n            }\r\n\r\n        } catch (e) {\r\n            console.error(e);\r\n            if(heroSlot) heroSlot.innerHTML = `<h3 style=\"color:red;\">Error: ${e.message}<\/h3>`;\r\n        }\r\n    }\r\n    setTimeout(distributeNews, 500);\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ce988bb e-flex e-con-boxed e-con e-parent\" data-id=\"ce988bb\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c79330d elementor-widget elementor-widget-html\" data-id=\"c79330d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n    \/* --- GLOBAL FONTS --- *\/\r\n    .video-section-container, \r\n    .video-section-container * {\r\n        font-family: 'Poppins', sans-serif !important;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    \/* --- SECTION HEADER (Updated to Match All News) --- *\/\r\n    .vid-header {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center; \/* Center vertically with the dot *\/\r\n        margin-bottom: 30px;\r\n        border-bottom: 1px solid #eee; \/* Softer border like All News *\/\r\n        padding-bottom: 15px;\r\n    }\r\n\r\n    .vid-header-left {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 12px;\r\n    }\r\n\r\n    \/* THE PULSING DOT ANIMATION *\/\r\n    .live-dot {\r\n        width: 10px;\r\n        height: 10px;\r\n        background-color: #245463;\r\n        border-radius: 50%;\r\n        box-shadow: 0 0 0 0 rgba(36, 84, 99, 0.7);\r\n        animation: pulse-primary 2s infinite;\r\n    }\r\n\r\n    @keyframes pulse-primary {\r\n        0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(36, 84, 99, 0.7); }\r\n        70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(36, 84, 99, 0); }\r\n        100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(36, 84, 99, 0); }\r\n    }\r\n\r\n    .vid-title {\r\n        font-size: 24px;\r\n        font-weight: 800; \/* Extra Bold to match All News *\/\r\n        color: #001E2B;\r\n        text-transform: uppercase;\r\n        letter-spacing: -0.5px;\r\n        margin: 0;\r\n        line-height: 1;\r\n        border: none; \/* Removed the old border bar *\/\r\n        padding: 0;\r\n    }\r\n\r\n    .header-highlight { color: #245463; }\r\n\r\n    .vid-link {\r\n        font-size: 13px;\r\n        font-weight: 600;\r\n        color: #245463;\r\n        text-decoration: none;\r\n        transition: all 0.3s;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 5px;\r\n    }\r\n    .vid-link:hover { color: #001E2B; transform: translateX(5px); }\r\n\r\n    \/* --- VIDEO GRID --- *\/\r\n    .video-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(3, 1fr); \/* 3 Columns *\/\r\n        gap: 30px;\r\n    }\r\n\r\n    \/* --- VIDEO CARD (Updated with Gradient) --- *\/\r\n    .video-card {\r\n        \/* NEW: Subtle Gradient Background *\/\r\n        background: linear-gradient(135deg, #ffffff 70%, #eff6f8 100%);\r\n        border-radius: 12px;\r\n        overflow: hidden;\r\n        text-decoration: none;\r\n        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n        \r\n        \/* The \"Clean Card\" Shadow look *\/\r\n        box-shadow: 0 10px 30px rgba(0,0,0,0.05); \r\n        border: 1px solid rgba(0,0,0,0.03);\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n\r\n    .video-card:hover {\r\n        transform: translateY(-8px);\r\n        box-shadow: 0 20px 40px rgba(0,0,0,0.12);\r\n        \/* Remove gradient on hover for contrast *\/\r\n        background: #ffffff;\r\n    }\r\n\r\n    \/* --- THUMBNAIL AREA --- *\/\r\n    .vid-thumb-box {\r\n        position: relative;\r\n        width: 100%;\r\n        height: 200px; \/* Fixed height *\/\r\n        overflow: hidden;\r\n        background-color: #000;\r\n    }\r\n\r\n    .vid-thumb-box img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n        opacity: 0.9;\r\n        transition: transform 0.5s ease, opacity 0.3s;\r\n    }\r\n    .video-card:hover .vid-thumb-box img {\r\n        transform: scale(1.1);\r\n        opacity: 0.7; \/* Darken slightly on hover *\/\r\n    }\r\n\r\n    \/* --- THE PLAY BUTTON (CSS Only) --- *\/\r\n    .play-btn-overlay {\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 50%;\r\n        transform: translate(-50%, -50%);\r\n        width: 50px;\r\n        height: 50px;\r\n        background: rgba(255, 255, 255, 0.2);\r\n        backdrop-filter: blur(4px);\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        border: 2px solid #ffffff;\r\n        transition: all 0.3s ease;\r\n        z-index: 2;\r\n        box-shadow: 0 0 20px rgba(0,0,0,0.2);\r\n    }\r\n    \r\n    .play-btn-overlay::after {\r\n        content: '';\r\n        display: block;\r\n        width: 0; \r\n        height: 0; \r\n        border-top: 8px solid transparent;\r\n        border-bottom: 8px solid transparent;\r\n        border-left: 14px solid #ffffff;\r\n        margin-left: 4px; \r\n    }\r\n\r\n    .video-card:hover .play-btn-overlay {\r\n        background: #245463; \r\n        border-color: #245463;\r\n        transform: translate(-50%, -50%) scale(1.2);\r\n    }\r\n\r\n    \/* --- BADGE --- *\/\r\n    .vid-badge {\r\n        position: absolute;\r\n        top: 15px;\r\n        left: 15px;\r\n        background-color: #245463;\r\n        color: white;\r\n        font-size: 10px;\r\n        font-weight: 700;\r\n        padding: 4px 10px;\r\n        border-radius: 4px;\r\n        text-transform: uppercase;\r\n        letter-spacing: 0.5px;\r\n        z-index: 3;\r\n    }\r\n\r\n    \/* --- CONTENT AREA --- *\/\r\n    .vid-content {\r\n        padding: 20px;\r\n        display: flex;\r\n        flex-direction: column;\r\n        flex-grow: 1;\r\n    }\r\n\r\n    .vid-meta {\r\n        font-size: 11px;\r\n        font-weight: 600;\r\n        color: #888;\r\n        text-transform: uppercase;\r\n        margin-bottom: 8px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 6px;\r\n    }\r\n    .vid-meta::before {\r\n        content: '';\r\n        width: 6px;\r\n        height: 6px;\r\n        background-color: #245463;\r\n        border-radius: 50%;\r\n    }\r\n\r\n    .vid-card-title {\r\n        font-size: 18px;\r\n        font-weight: 700;\r\n        color: #245463;\r\n        margin: 0 0 10px 0;\r\n        line-height: 1.4;\r\n        transition: color 0.2s;\r\n        display: -webkit-box;\r\n        -webkit-line-clamp: 2;\r\n        -webkit-box-orient: vertical;\r\n        overflow: hidden;\r\n    }\r\n    .video-card:hover .vid-card-title { color: #245463; }\r\n\r\n    \/* --- RESPONSIVE --- *\/\r\n    @media (max-width: 900px) {\r\n        .video-grid { grid-template-columns: repeat(2, 1fr); }\r\n    }\r\n    @media (max-width: 600px) {\r\n        .video-grid { grid-template-columns: 1fr; }\r\n        .vid-header { flex-direction: column; align-items: flex-start; gap: 10px; }\r\n        \/* Keep header items aligned on mobile *\/\r\n        .vid-header-left { width: 100%; }\r\n        .vid-link { align-self: flex-end; }\r\n    }\r\n<\/style>\r\n\r\n<div class=\"video-section-container\">\r\n    \r\n    <div class=\"vid-header\">\r\n        <div class=\"vid-header-left\">\r\n            <div class=\"live-dot\"><\/div>\r\n            <h2 class=\"vid-title\">Latest <span class=\"header-highlight\">Videos<\/span><\/h2>\r\n        <\/div>\r\n        <a href=\"\/wp-public\/all-videos\" class=\"vid-link\">Watch more videos \u2192<\/a>\r\n    <\/div>\r\n\r\n    <div id=\"video-grid-target\" class=\"video-grid\">\r\n        <div style=\"grid-column: span 3; text-align: center; padding: 40px; color: #ccc;\">\r\n            Loading Videos...\r\n        <\/div>\r\n    <\/div>\r\n\r\n<\/div>\r\n\r\n<script>\r\n    async function loadLatestVideos() {\r\n        const container = document.getElementById('video-grid-target');\r\n        \r\n        \/\/ --- CONFIGURATION ---\r\n        \/\/ UPDATED: Added '&categories=32' to filter ONLY video posts\r\n        const VIDEO_API = '\/wp-public\/wp-json\/wp\/v2\/posts?_embed&per_page=3&categories=32'; \r\n\r\n        try {\r\n            const res = await fetch(VIDEO_API);\r\n            if (!res.ok) throw new Error('API Error');\r\n            const posts = await res.json();\r\n\r\n            container.innerHTML = ''; \/\/ Clear loading message\r\n\r\n            if(posts.length === 0) {\r\n                container.innerHTML = '<p style=\"text-align:center; color:#888;\">No videos found.<\/p>';\r\n                return;\r\n            }\r\n\r\n            posts.forEach(post => {\r\n                \/\/ --- SMART IMAGE LOGIC START ---\r\n                \r\n                \/\/ 1. Default Placeholder\r\n                let imgURL = 'https:\/\/clcadventist.org\/wp-content\/uploads\/placeholder.jpg'; \r\n\r\n                \/\/ 2. Check for Manual Featured Image (Priority #1)\r\n                if (post._embedded && post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'][0]) {\r\n                    imgURL = post._embedded['wp:featuredmedia'][0].source_url;\r\n                } \r\n                \/\/ 3. Check for YouTube Video in Content (Priority #2)\r\n                else {\r\n                    \/\/ Scan the post content for YouTube links or embeds\r\n                    const ytMatch = post.content.rendered.match(\/youtube\\.com\\\/embed\\\/([a-zA-Z0-9_-]+)\/) || \r\n                                    post.content.rendered.match(\/youtube\\.com\\\/watch\\?v=([a-zA-Z0-9_-]+)\/);\r\n                                    \r\n                    if (ytMatch && ytMatch[1]) {\r\n                        \/\/ Use the High Quality YouTube Thumbnail\r\n                        imgURL = `https:\/\/img.youtube.com\/vi\/${ytMatch[1]}\/mqdefault.jpg`;\r\n                    }\r\n                }\r\n                \/\/ --- SMART IMAGE LOGIC END ---\r\n\r\n                const date = new Date(post.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });\r\n\r\n                const card = `\r\n                    <a href=\"${post.link}\" class=\"video-card\">\r\n                        <div class=\"vid-thumb-box\">\r\n                            <span class=\"vid-badge\">Video<\/span>\r\n                            <div class=\"play-btn-overlay\"><\/div>\r\n                            <img decoding=\"async\" src=\"${imgURL}\" alt=\"${post.title.rendered}\" loading=\"lazy\">\r\n                        <\/div>\r\n                        <div class=\"vid-content\">\r\n                            <div class=\"vid-meta\">${date}<\/div>\r\n                            <h3 class=\"vid-card-title\">${post.title.rendered}<\/h3>\r\n                        <\/div>\r\n                    <\/a>\r\n                `;\r\n                container.innerHTML += card;\r\n            });\r\n\r\n        } catch (e) {\r\n            console.error(e);\r\n            container.innerHTML = '<p style=\"color:red; text-align:center;\">Unable to load videos.<\/p>';\r\n        }\r\n    }\r\n\r\n    \/\/ Run\r\n    loadLatestVideos();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Loading Latest News&#8230; Latest Videos Watch more videos \u2192 Loading Videos&#8230;<\/p>\n","protected":false},"author":809,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-custom.blade.php","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-1973","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/clcadventist.org\/wp-public\/wp-json\/wp\/v2\/pages\/1973","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clcadventist.org\/wp-public\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/clcadventist.org\/wp-public\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/clcadventist.org\/wp-public\/wp-json\/wp\/v2\/users\/809"}],"replies":[{"embeddable":true,"href":"https:\/\/clcadventist.org\/wp-public\/wp-json\/wp\/v2\/comments?post=1973"}],"version-history":[{"count":105,"href":"https:\/\/clcadventist.org\/wp-public\/wp-json\/wp\/v2\/pages\/1973\/revisions"}],"predecessor-version":[{"id":5956,"href":"https:\/\/clcadventist.org\/wp-public\/wp-json\/wp\/v2\/pages\/1973\/revisions\/5956"}],"wp:attachment":[{"href":"https:\/\/clcadventist.org\/wp-public\/wp-json\/wp\/v2\/media?parent=1973"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}