{"id":1628,"date":"2026-01-22T00:53:16","date_gmt":"2026-01-22T00:53:16","guid":{"rendered":"https:\/\/clcadventist.org\/wp-public\/?page_id=1628"},"modified":"2026-04-01T14:33:13","modified_gmt":"2026-04-01T14:33:13","slug":"central-luzon-conference-front","status":"publish","type":"page","link":"https:\/\/clcadventist.org\/wp-public\/","title":{"rendered":"Central Luzon Conference Front"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1628\" class=\"elementor elementor-1628\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5317197 e-con-full e-flex e-con e-parent\" data-id=\"5317197\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5783aa4 elementor-widget elementor-widget-html\" data-id=\"5783aa4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"synced-slider-container\">\r\n    <div class=\"slider-bg-layer\" id=\"bgLayer\"><\/div>\r\n    \r\n    <div class=\"slider-content-left\">\r\n        <div class=\"progress-line-container\" id=\"progressLine\">\r\n            <div class=\"progress-track\"><\/div>\r\n        <\/div>\r\n        <div class=\"text-wrapper\" id=\"textWrapper\">\r\n            <h1 class=\"slider-title\" id=\"mainTitle\">Loading News...<\/h1>\r\n            <p class=\"slider-desc\" id=\"mainDesc\">Fetching latest updates...<\/p>\r\n            <a href=\"#\" class=\"slider-btn\" id=\"mainBtn\">Read More &raquo;<\/a>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"slider-cards-right\">\r\n        <div class=\"cards-viewport\">\r\n            <div class=\"cards-track\" id=\"cardsTrack\"><\/div>\r\n        <\/div>\r\n        <div class=\"nav-controls\">\r\n            <div class=\"nav-circle\" id=\"prevBtn\" onclick=\"prevSlide()\">&#8592;<\/div>\r\n            <div class=\"nav-circle\" id=\"nextBtn\" onclick=\"nextSlide()\">&#8594;<\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<style>\r\n\/* --- FONT & RESET --- *\/\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;600;700&display=swap');\r\n\r\n\/* --- 1. BASE CONTAINER --- *\/\r\n.synced-slider-container {\r\n    width: calc(100% + 20px) !important; \r\n    margin-left: -10px !important;\r\n    min-height: 600px;\r\n    position: relative;\r\n    overflow: hidden; \r\n    background-color: #1a1a1a;\r\n    color: white;\r\n    font-family: 'Poppins', sans-serif;\r\n    display: flex;\r\n    align-items: center;\r\n    flex-direction: row; \r\n}\r\n\r\nbody { margin: 0; padding: 0; overflow-x: hidden; }\r\n\r\n\/* --- 2. DYNAMIC BACKGROUND --- *\/\r\n.slider-bg-layer {\r\n    position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 100%; z-index: 0;\r\n}\r\n.slider-bg-layer::after {\r\n    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;\r\n    background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.2) 100%);\r\n}\r\n.bg-image {\r\n    width: 100%; height: 100%; min-height: 100%; object-fit: cover; position: absolute;\r\n    opacity: 0; transition: opacity 1s ease-in-out, transform 6s ease; transform: scale(1);\r\n}\r\n.bg-image.active { opacity: 1; transform: scale(1.05); }\r\n\r\n\/* --- 3. LEFT CONTENT --- *\/\r\n.slider-content-left {\r\n    position: relative; z-index: 2;\r\n    width: 45%; \r\n    height: 100%;\r\n    display: flex; flex-direction: column; justify-content: center;\r\n    padding-left: 5%; \r\n    padding-right: 20px;\r\n}\r\n\r\n\/* PROGRESS DOTS *\/\r\n.progress-line-container {\r\n    position: absolute; \r\n    left: 20px; \r\n    top: 50%; \r\n    transform: translateY(-50%);\r\n    height: 300px !important; \r\n    min-height: 300px !important;\r\n    max-height: 300px !important;\r\n    display: flex; \r\n    flex-direction: column; \r\n    justify-content: space-between; \r\n    align-items: center; \r\n    z-index: 10;\r\n    width: 20px;\r\n    flex-shrink: 0; \r\n}\r\n.progress-track {\r\n    position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;\r\n    background: rgba(255,255,255,0.15); transform: translateX(-50%); z-index: -1;\r\n}\r\n.progress-dot {\r\n    width: 12px; height: 12px; border-radius: 50%; background: #555; border: 2px solid transparent; \r\n    cursor: pointer; transition: all 0.3s ease; pointer-events: auto;\r\n}\r\n.progress-dot:hover { background: #183A45; transform: scale(1.2); }\r\n.progress-dot.active-dot {\r\n    background: #245463; box-shadow: 0 0 10px #245463; transform: scale(1.4); border: 2px solid #1a1a1a;\r\n}\r\n\r\n\/* TEXT *\/\r\n.text-wrapper {\r\n    transition: opacity 0.5s ease, transform 0.5s ease; opacity: 1; transform: translateY(0);\r\n    padding-left: 20px; \r\n}\r\n.text-wrapper.fade-out { opacity: 0; transform: translateY(20px); }\r\n\r\n.slider-title { \r\n    font-size: clamp(24px, 3.5vw, 40px);\r\n    font-weight: 700; line-height: 1.2; margin-bottom: 15px; \r\n}\r\n\r\n.slider-desc { \r\n    font-size: 15px; \r\n    line-height: 1.6; \r\n    margin-bottom: 25px; \r\n    max-width: 100%; \r\n    color: rgba(255,255,255,0.9);\r\n    display: -webkit-box;\r\n    -webkit-line-clamp: 3;\r\n    -webkit-box-orient: vertical;\r\n    overflow: hidden;\r\n    font-family: 'Poppins', sans-serif;\r\n}\r\n\r\n.slider-btn {\r\n    display: inline-block; padding: 12px 30px; background-color: #245463; color: white;\r\n    font-weight: 700; text-transform: uppercase; text-decoration: none; border-radius: 4px;\r\n    letter-spacing: 1px; transition: all 0.3s ease; font-size: 13px;\r\n    flex-shrink: 0; \r\n}\r\n.slider-btn:hover { background-color: #183A45; color: #fff; }\r\n\r\n\/* --- 4. RIGHT CONTENT (CARDS) --- *\/\r\n.slider-cards-right {\r\n    position: relative; z-index: 2;\r\n    width: 55%; height: 100%;\r\n    display: flex; flex-direction: column; justify-content: center;\r\n    padding-left: 30px;\r\n    overflow: hidden; \r\n}\r\n\r\n.cards-viewport {\r\n    width: 100%; height: 420px; \r\n    overflow: hidden; margin-bottom: 30px;\r\n    mask-image: linear-gradient(to right, black 85%, transparent 100%);\r\n    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);\r\n}\r\n.cards-track {\r\n    display: flex; gap: 20px; \r\n    padding-left: 5px; padding-top: 10px;\r\n    transition: opacity 0.3s ease; \r\n    width: max-content; \r\n}\r\n\r\n\/* CARD STYLE *\/\r\n.info-card {\r\n    width: 550px; height: 390px;    \r\n    position: relative; border-radius: 12px; overflow: hidden;\r\n    cursor: pointer; transition: transform 0.3s ease, opacity 0.3s ease;\r\n    opacity: 0.5; transform: scale(0.95); background: #000;\r\n    flex-shrink: 0; \r\n}\r\n.info-card.active-card-style {\r\n    opacity: 1; transform: scale(1); box-shadow: 0 15px 35px rgba(0,0,0,0.5); border: 2px solid rgba(255,255,255,0.2);\r\n}\r\n.card-img { width: 100%; height: 100%; object-fit: cover; }\r\n.card-overlay {\r\n    position: absolute; bottom: 0; left: 0; width: 100%; padding: 15px 20px;\r\n    background: linear-gradient(to top, rgba(0,0,0,0.95), transparent);\r\n}\r\n.card-label { font-size: 18px; font-weight: 700; display: block; margin-bottom: 2px; }\r\n.card-sub { font-size: 12px; color: #00BADE; text-transform: uppercase; letter-spacing: 1px; }\r\n\r\n\/* NAV *\/\r\n.nav-controls { display: flex; gap: 15px; padding-left: 5px; }\r\n.nav-circle {\r\n    width: 45px; height: 45px; border-radius: 50%; background: rgba(255,255,255,0.1);\r\n    backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.2); color: white;\r\n    font-size: 18px; display: flex; align-items: center; justify-content: center;\r\n    cursor: pointer; transition: all 0.3s ease; user-select: none;\r\n}\r\n.nav-circle:hover { background: #183A45; color: white; border-color: #245463; }\r\n\r\n\/* --- RESPONSIVE 1: TABLET --- *\/\r\n@media (max-width: 1024px) {\r\n    .info-card { width: 300px; height: 260px; } \r\n    .cards-viewport { height: 290px; }\r\n    .slider-title { font-size: 26px; }\r\n    .slider-desc { -webkit-line-clamp: 2; margin-bottom: 15px; }\r\n    .slider-content-left { padding-right: 15px; width: 40%; }\r\n    .slider-cards-right { padding-left: 15px; width: 60%; }\r\n    .progress-line-container { left: 10px; }\r\n}\r\n\r\n\r\n\/* --- RESPONSIVE 2: MOBILE --- *\/\r\n@media (max-width: 767px) {\r\n    .synced-slider-container { \r\n        flex-direction: column; height: auto; padding-bottom: 30px; \r\n    }\r\n    .slider-content-left { \r\n        width: 100%; padding: 40px 20px 20px 20px; \r\n    }\r\n    .progress-line-container { display: none; } \r\n    \r\n    .slider-cards-right { \r\n        width: 100%; padding-left: 20px; \r\n    }\r\n    \r\n    .cards-viewport { \r\n        overflow-x: auto; mask-image: none; padding-bottom: 15px; \r\n        height: 230px; margin-bottom: 10px; \r\n    }\r\n    \r\n    .cards-viewport::-webkit-scrollbar { height: 6px; }\r\n    .cards-viewport::-webkit-scrollbar-thumb { background-color: #245463; border-radius: 10px; }\r\n    .cards-viewport::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); }\r\n    \r\n    .info-card { width: 280px; height: 180px; }\r\n    .nav-controls { padding-left: 0; margin-top: 0; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n    let slidesData = []; \r\n    let currentDataIndex = 0;\r\n    let isAnimating = false;  \r\n    \r\n    const bgLayer = document.getElementById('bgLayer');\r\n    const cardsTrack = document.getElementById('cardsTrack');\r\n    const textWrapper = document.getElementById('textWrapper');\r\n    const progressLine = document.getElementById('progressLine');\r\n\r\n    async function loadWordPressPosts() {\r\n        try {\r\n            \/\/ 1. Fetch posts\r\n            const response = await fetch('\/wp-public\/wp-json\/wp\/v2\/posts?_embed&per_page=6');\r\n            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);\r\n            const rawPosts = await response.json();\r\n\r\n            \/\/ 2. Filter: Remove Current Post\r\n            const normalize = (url) => url.split('?')[0].replace(\/\\\/$\/, \"\");\r\n            const currentUrl = normalize(window.location.href);\r\n            \r\n            const posts = rawPosts.filter(p => normalize(p.link) !== currentUrl).slice(0, 5);\r\n\r\n            \/\/ 3. Process Data\r\n            slidesData = posts.map(post => {\r\n                \/\/ --- A. SMART IMAGE LOGIC ---\r\n                let imgUrl = 'https:\/\/clcadventist.org\/wp-content\/uploads\/placeholder.jpg'; \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                } else {\r\n                    const ytMatch =\r\n                        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                    if (ytMatch && ytMatch[1]) {\r\n                        imgUrl = `https:\/\/img.youtube.com\/vi\/${ytMatch[1]}\/maxresdefault.jpg`;\r\n                    }\r\n                }\r\n\r\n                \/\/ --- B. CATEGORY LOGIC ---\r\n                let category = \"News\";\r\n                if (post._embedded && post._embedded['wp:term'] && post._embedded['wp:term'][0]) {\r\n                    const categories = post._embedded['wp:term'][0];\r\n                    const newsFlash = categories.find(cat => cat.name === \"News Flash\");\r\n                    const otherCat = categories.find(cat => cat.name !== \"Communications Department\");\r\n\r\n                    if (newsFlash) category = \"News Flash\";\r\n                    else if (otherCat) category = otherCat.name;\r\n                }\r\n\r\n                \/\/ --- C. START OF ARTICLE ONLY (FIRST <p> FROM CONTENT) ---\r\n                const getFirstParagraphText = (contentHtml) => {\r\n                    const div = document.createElement(\"div\");\r\n                    div.innerHTML = contentHtml || \"\";\r\n\r\n                    \/\/ remove non-article blocks before reading paragraphs\r\n                    div.querySelectorAll(\"script, style, noscript, iframe\").forEach(n => n.remove());\r\n                    div.querySelectorAll(\".wp-block-embed, .wp-block-embed-youtube, figure\").forEach(n => n.remove());\r\n\r\n                    const paras = Array.from(div.querySelectorAll(\"p\"))\r\n                        .map(p => (p.textContent || \"\").replace(\/\\u00A0\/g, \" \").trim())\r\n                        .filter(t => t.length > 0);\r\n\r\n                    return paras[0] || \"\";\r\n                };\r\n\r\n                \/\/ Keep ONLY words that are 1\u201310 characters long\r\n                const keepWords1to10 = (text) => {\r\n                    const normalized = (text || \"\").replace(\/\\s+\/g, \" \").trim();\r\n                    const kept = normalized\r\n                        .split(\" \")\r\n                        .map(w => w.trim())\r\n                        .filter(Boolean)\r\n                        .filter(w => {\r\n                            const core = w.replace(\/^[^\\w']+|[^\\w']+$\/g, \"\");\r\n                            return core.length >= 1 && core.length <= 10;\r\n                        })\r\n                        .join(\" \");\r\n                    return kept.replace(\/\\s+\/g, \" \").trim();\r\n                };\r\n\r\n                \/\/ Get the start of the article\r\n                let cleanExcerpt = getFirstParagraphText(post.content?.rendered || \"\");\r\n\r\n                \/\/ Light cleanup (keep minimal since you want the true start)\r\n                cleanExcerpt = cleanExcerpt.replace(\/(https?:\\\/\\\/[^\\s]+)\/g, '');      \/\/ remove urls\r\n                cleanExcerpt = cleanExcerpt.replace(\/^[\\s\\-\\\u2013\\\u2014\\.|,:]+\/, '').trim();  \/\/ trim leading symbols\r\n\r\n                \/\/ Apply 1\u201310 char rule (remove if you don\u2019t want it anymore)\r\n                cleanExcerpt = keepWords1to10(cleanExcerpt);\r\n\r\n                \/\/ Fallback\r\n                if (!cleanExcerpt || cleanExcerpt.length < 5) {\r\n                    cleanExcerpt = \"Read more.\";\r\n                }\r\n\r\n                return {\r\n                    title: post.title.rendered,\r\n                    desc: cleanExcerpt.substring(0, 160) + (cleanExcerpt.length > 160 ? \"...\" : \"\"),\r\n                    sub: category,\r\n                    image: imgUrl,\r\n                    link: post.link\r\n                };\r\n            });\r\n\r\n            if (slidesData.length > 0) initSlider();\r\n            else document.getElementById('mainTitle').innerText = \"No Posts Found\";\r\n\r\n        } catch (error) {\r\n            console.error(error);\r\n            document.getElementById('mainTitle').innerText = \"Error Loading\";\r\n        }\r\n    }\r\n    \r\n    function initSlider() {\r\n        bgLayer.innerHTML = '';\r\n        progressLine.innerHTML = '<div class=\"progress-track\"><\/div>';\r\n        cardsTrack.innerHTML = '';\r\n\r\n        slidesData.forEach((slide, index) => {\r\n            const img = document.createElement('img');\r\n            img.src = slide.image;\r\n            img.classList.add('bg-image');\r\n            if(index === 0) img.classList.add('active');\r\n            bgLayer.appendChild(img);\r\n        });\r\n\r\n        slidesData.forEach((_, index) => {\r\n            const dot = document.createElement('div');\r\n            dot.classList.add('progress-dot');\r\n            if(index === 0) dot.classList.add('active-dot');\r\n            dot.onclick = () => goToSlide(index); \r\n            progressLine.appendChild(dot);\r\n        });\r\n\r\n        slidesData.forEach((slide, index) => {\r\n            const card = document.createElement('div');\r\n            card.classList.add('info-card');\r\n            if(index === 0) card.classList.add('active-card-style');\r\n            card.setAttribute('data-index', index);\r\n            card.innerHTML = `\r\n                <img decoding=\"async\" src=\"${slide.image}\" class=\"card-img\">\r\n                <div class=\"card-overlay\">\r\n                    <span class=\"card-label\">${slide.title}<\/span>\r\n                    <span class=\"card-sub\">${slide.sub}<\/span>\r\n                <\/div>\r\n            `;\r\n            card.onclick = () => window.location.href = slide.link;\r\n            cardsTrack.appendChild(card);\r\n        });\r\n\r\n        updateText(0);\r\n    }\r\n\r\n    function getScrollAmount() {\r\n        const card = cardsTrack.firstElementChild;\r\n        if (!card) return 0;\r\n        return card.getBoundingClientRect().width + 20;\r\n    }\r\n\r\n    function nextSlide() {\r\n        if(isAnimating || slidesData.length === 0) return;\r\n        isAnimating = true;\r\n\r\n        currentDataIndex++;\r\n        if(currentDataIndex >= slidesData.length) currentDataIndex = 0;\r\n        updateContent(currentDataIndex);\r\n\r\n        const moveDistance = getScrollAmount();\r\n        \r\n        cardsTrack.style.transition = \"transform 0.5s ease-in-out\";\r\n        cardsTrack.style.transform = `translateX(-${moveDistance}px)`;\r\n\r\n        setTimeout(() => {\r\n            cardsTrack.appendChild(cardsTrack.firstElementChild);\r\n            cardsTrack.style.transition = \"none\";\r\n            cardsTrack.style.transform = \"translateX(0)\";\r\n            updateCardStyles();\r\n            isAnimating = false;\r\n        }, 500);\r\n    }\r\n\r\n    function prevSlide() {\r\n        if(isAnimating || slidesData.length === 0) return;\r\n        isAnimating = true;\r\n\r\n        currentDataIndex--;\r\n        if(currentDataIndex < 0) currentDataIndex = slidesData.length - 1;\r\n        updateContent(currentDataIndex);\r\n\r\n        const moveDistance = getScrollAmount();\r\n\r\n        cardsTrack.style.transition = \"none\";\r\n        cardsTrack.prepend(cardsTrack.lastElementChild);\r\n        cardsTrack.style.transform = `translateX(-${moveDistance}px)`;\r\n\r\n        void cardsTrack.offsetWidth;\r\n\r\n        cardsTrack.style.transition = \"transform 0.5s ease-in-out\";\r\n        cardsTrack.style.transform = \"translateX(0)\";\r\n\r\n        setTimeout(() => {\r\n            updateCardStyles();\r\n            isAnimating = false;\r\n        }, 500);\r\n    }\r\n\r\n    function goToSlide(targetIndex) {\r\n        if(isAnimating || currentDataIndex === targetIndex) return;\r\n        isAnimating = true;\r\n\r\n        cardsTrack.style.opacity = '0';\r\n        textWrapper.classList.add('fade-out');\r\n\r\n        setTimeout(() => {\r\n            while(cardsTrack.firstElementChild.getAttribute('data-index') != targetIndex) {\r\n                cardsTrack.appendChild(cardsTrack.firstElementChild);\r\n            }\r\n            currentDataIndex = targetIndex;\r\n            updateContent(currentDataIndex);\r\n            updateCardStyles();\r\n\r\n            cardsTrack.style.opacity = '1';\r\n            textWrapper.classList.remove('fade-out');\r\n            isAnimating = false;\r\n        }, 300);\r\n    }\r\n\r\n    function updateContent(index) {\r\n        document.querySelectorAll('.bg-image').forEach((bg, i) => {\r\n            bg.classList.toggle('active', i === index);\r\n        });\r\n        document.querySelectorAll('.progress-dot').forEach((dot, i) => {\r\n            dot.classList.toggle('active-dot', i === index);\r\n        });\r\n        if(cardsTrack.style.opacity !== '0') {\r\n            textWrapper.classList.add('fade-out');\r\n            setTimeout(() => {\r\n                updateText(index);\r\n                textWrapper.classList.remove('fade-out');\r\n            }, 400);\r\n        } else {\r\n            updateText(index);\r\n        }\r\n    }\r\n\r\n    function updateCardStyles() {\r\n        const allCards = document.querySelectorAll('.info-card');\r\n        allCards.forEach((card, i) => {\r\n            if(i === 0) card.classList.add('active-card-style');\r\n            else card.classList.remove('active-card-style');\r\n        });\r\n    }\r\n\r\n    function updateText(index) {\r\n        if(slidesData[index]) {\r\n            document.getElementById('mainTitle').innerHTML = slidesData[index].title;\r\n            document.getElementById('mainDesc').innerHTML = slidesData[index].desc;\r\n            document.getElementById('mainBtn').href = slidesData[index].link;\r\n        }\r\n    }\r\n\r\n    loadWordPressPosts();\r\n<\/script>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-54ace11 e-con-full e-flex e-con e-parent\" data-id=\"54ace11\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-cb4d70f e-con-full e-flex e-con e-child\" data-id=\"cb4d70f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-25f536c elementor-widget elementor-widget-image\" data-id=\"25f536c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"568\" src=\"https:\/\/clcadventist.org\/wp-public\/wp-content\/uploads\/2025\/10\/CLC_Front-No-Text-1024x568.png\" class=\"elementor-animation-grow attachment-large size-large wp-image-632\" alt=\"\" srcset=\"https:\/\/clcadventist.org\/wp-public\/wp-content\/uploads\/2025\/10\/CLC_Front-No-Text-1024x568.png 1024w, https:\/\/clcadventist.org\/wp-public\/wp-content\/uploads\/2025\/10\/CLC_Front-No-Text-300x166.png 300w, https:\/\/clcadventist.org\/wp-public\/wp-content\/uploads\/2025\/10\/CLC_Front-No-Text-768x426.png 768w, https:\/\/clcadventist.org\/wp-public\/wp-content\/uploads\/2025\/10\/CLC_Front-No-Text-1536x852.png 1536w, https:\/\/clcadventist.org\/wp-public\/wp-content\/uploads\/2025\/10\/CLC_Front-No-Text-350x194.png 350w, https:\/\/clcadventist.org\/wp-public\/wp-content\/uploads\/2025\/10\/CLC_Front-No-Text-700x388.png 700w, https:\/\/clcadventist.org\/wp-public\/wp-content\/uploads\/2025\/10\/CLC_Front-No-Text-1100x610.png 1100w, https:\/\/clcadventist.org\/wp-public\/wp-content\/uploads\/2025\/10\/CLC_Front-No-Text.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8c830c2 elementor-widget elementor-widget-heading\" data-id=\"8c830c2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Who We Are<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ba339fa elementor-widget elementor-widget-text-editor\" data-id=\"ba339fa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-style: Poppins;\">We are a movement called by God to share the eternal gospel of Jesus with every nation, tribe, language, and people. Our mission is preparing hearts for Jesus\u2019 soon return. We help people discover the Bible\u2019s life-changing truths for themselves, finding the freedom, healing, and hope that only Jesus offers.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e6d9510 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"e6d9510\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/clcadventist.org\/wp-public\/our-history\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Learn More<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ed4ce3a e-con-full e-flex e-con e-child\" data-id=\"ed4ce3a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6c33079 elementor-widget elementor-widget-image\" data-id=\"6c33079\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/clcadventist.org\/wp-public\/wp-content\/uploads\/2024\/09\/Bible-Reading-and-Prayer-1024x683.webp\" class=\"elementor-animation-grow attachment-large size-large wp-image-206\" alt=\"\" srcset=\"https:\/\/clcadventist.org\/wp-public\/wp-content\/uploads\/2024\/09\/Bible-Reading-and-Prayer-1024x683.webp 1024w, https:\/\/clcadventist.org\/wp-public\/wp-content\/uploads\/2024\/09\/Bible-Reading-and-Prayer-300x200.webp 300w, https:\/\/clcadventist.org\/wp-public\/wp-content\/uploads\/2024\/09\/Bible-Reading-and-Prayer-768x512.webp 768w, https:\/\/clcadventist.org\/wp-public\/wp-content\/uploads\/2024\/09\/Bible-Reading-and-Prayer-350x233.webp 350w, https:\/\/clcadventist.org\/wp-public\/wp-content\/uploads\/2024\/09\/Bible-Reading-and-Prayer-700x467.webp 700w, https:\/\/clcadventist.org\/wp-public\/wp-content\/uploads\/2024\/09\/Bible-Reading-and-Prayer-900x600.webp 900w, https:\/\/clcadventist.org\/wp-public\/wp-content\/uploads\/2024\/09\/Bible-Reading-and-Prayer-1100x733.webp 1100w, https:\/\/clcadventist.org\/wp-public\/wp-content\/uploads\/2024\/09\/Bible-Reading-and-Prayer.webp 1500w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9ddff57 elementor-widget elementor-widget-heading\" data-id=\"9ddff57\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What We Believe<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0bf9afb elementor-widget elementor-widget-text-editor\" data-id=\"0bf9afb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-style: Poppins;\">We believe in a God whose love never fails, even in a broken world. Despite the cosmic conflict that has raged since before time, God\u2019s plan of salvation continues. Jesus is coming soon to restore our world to its original perfection. We await with joy the day when God will give us new hearts in a new earth, where we\u2019ll live in His presence for eternity.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-037ecee elementor-align-center elementor-widget elementor-widget-button\" data-id=\"037ecee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/adventist.org\/beliefs\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Learn More<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e69f604 e-con-full e-flex e-con e-child\" data-id=\"e69f604\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2fbdb15 elementor-widget elementor-widget-image\" data-id=\"2fbdb15\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"830\" height=\"539\" src=\"https:\/\/clcadventist.org\/wp-public\/wp-content\/uploads\/2024\/09\/Digital-Transformation-v2.jpg\" class=\"elementor-animation-grow attachment-large size-large wp-image-102\" alt=\"\" srcset=\"https:\/\/clcadventist.org\/wp-public\/wp-content\/uploads\/2024\/09\/Digital-Transformation-v2.jpg 830w, https:\/\/clcadventist.org\/wp-public\/wp-content\/uploads\/2024\/09\/Digital-Transformation-v2-300x195.jpg 300w, https:\/\/clcadventist.org\/wp-public\/wp-content\/uploads\/2024\/09\/Digital-Transformation-v2-768x499.jpg 768w, https:\/\/clcadventist.org\/wp-public\/wp-content\/uploads\/2024\/09\/Digital-Transformation-v2-350x227.jpg 350w, https:\/\/clcadventist.org\/wp-public\/wp-content\/uploads\/2024\/09\/Digital-Transformation-v2-700x455.jpg 700w\" sizes=\"(max-width: 830px) 100vw, 830px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7d98a95 elementor-widget elementor-widget-heading\" data-id=\"7d98a95\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">What We Do<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dfc00ee elementor-widget elementor-widget-text-editor\" data-id=\"dfc00ee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-style: Poppins;\">Guided by our mission to call all people to discipleship and to proclaim the three angels\u2019 messages of Revelation 14:6\u201312, we unite churches, schools, and ministries across Central Luzon. Through worship, education, and compassionate service, we seek to reveal God\u2019s love, uplift communities, and prepare every heart for Christ\u2019s glorious return.<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2f2d386 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"2f2d386\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/clcadventist.org\/wp-public\/what-we-do\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Learn More<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-36f5184 e-con-full e-flex e-con e-parent\" data-id=\"36f5184\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b6abe15 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"b6abe15\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* --- FONT & RESET --- *\/\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap');\r\nbody { margin: 0; padding: 0; overflow-x: hidden; }\r\n\r\n\/* --- 1. MAIN CONTAINER --- *\/\r\n.spotlight-wrapper {\r\n    font-family: 'Poppins', sans-serif;\r\n    background-color: #183A45; \r\n    padding: 50px 5%;\r\n    color: white;\r\n    position: relative;\r\n    overflow: hidden;\r\n    width: calc(100% + 20px) !important; \r\n    margin-left: -10px !important;\r\n    margin-top: -10px !important;\r\n    margin-bottom: -10px !important;\r\n    box-sizing: border-box;\r\n}\r\n\r\n\/* --- HEADER --- *\/\r\n.spotlight-header {\r\n    font-size: 32px;\r\n    font-weight: 500;\r\n    margin-bottom: 30px;\r\n    padding-left: 10px;\r\n}\r\n\r\n\/* --- SLIDER TRACK --- *\/\r\n.spotlight-track-container {\r\n    width: 100%;\r\n    overflow-x: auto; \r\n    scroll-behavior: smooth;\r\n    scrollbar-width: none; \r\n    -ms-overflow-style: none; \r\n    padding-bottom: 20px; \r\n    scroll-snap-type: x mandatory; \r\n    min-height: 280px; \/* Keep height while loading *\/\r\n}\r\n.spotlight-track-container::-webkit-scrollbar { display: none; }\r\n\r\n.spotlight-track {\r\n    display: flex;\r\n    gap: 25px;\r\n    width: max-content; \r\n}\r\n\r\n\/* --- THE CARD --- *\/\r\na.spotlight-card {\r\n    background-color: #245463; \r\n    width: 480px; \r\n    height: 280px; \r\n    border-radius: 8px;\r\n    display: flex;\r\n    overflow: hidden;\r\n    position: relative;\r\n    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;\r\n    flex-shrink: 0;\r\n    box-shadow: 0 10px 30px rgba(0,0,0,0.1);\r\n    scroll-snap-align: center; \r\n    text-decoration: none;\r\n    color: white;\r\n    cursor: pointer;\r\n}\r\n\r\n\/* HOVER STATE *\/\r\na.spotlight-card:hover {\r\n    transform: translateY(-5px);\r\n    box-shadow: 0 15px 40px rgba(0,0,0,0.25);\r\n    background-color: #15343e;\r\n}\r\n\r\n\/* 1. Vertical Label *\/\r\n.card-label-vertical {\r\n    width: 40px;\r\n    background-color: #245463;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    border-right: 1px solid rgba(255,255,255,0.1);\r\n    transition: background 0.3s ease;\r\n}\r\na.spotlight-card:hover .card-label-vertical { \r\n    background-color: #15343e;\r\n}\r\n.card-label-text {\r\n    writing-mode: vertical-rl;\r\n    transform: rotate(180deg);\r\n    font-size: 10px; \r\n    text-transform: uppercase;\r\n    letter-spacing: 2px;\r\n    color: rgba(255,255,255,0.7);\r\n    white-space: nowrap;\r\n}\r\n\r\n\/* 2. Image Area *\/\r\n.card-image-area {\r\n    width: 45%;\r\n    position: relative;\r\n    overflow: hidden;\r\n    padding: 20px; \r\n}\r\n.card-img-wrapper {\r\n    width: 100%;\r\n    height: 100%;\r\n    border-radius: 6px;\r\n    overflow: hidden;\r\n    box-shadow: 0 5px 15px rgba(0,0,0,0.2);\r\n    background: #112a33; \/* Loading placeholder color *\/\r\n}\r\n.card-img-wrapper img {\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    transition: transform 0.3s ease;\r\n}\r\na.spotlight-card:hover .card-img-wrapper img {\r\n    transform: scale(1.1);\r\n}\r\n\r\n\/* 3. Text Area *\/\r\n.card-content-area {\r\n    width: 50%; \r\n    padding: 30px 25px 30px 0; \r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n}\r\n\r\n\/* Title Styling *\/\r\n.card-title-text {\r\n    font-size: 18px; \r\n    font-weight: 600;\r\n    color: white;\r\n    margin: 0 0 10px 0;\r\n    display: inline-block;\r\n    border-bottom: 1px solid rgba(255,255,255,0.3);\r\n    padding-bottom: 2px;\r\n    width: fit-content;\r\n    transition: border-color 0.3s ease;\r\n}\r\na.spotlight-card:hover .card-title-text {\r\n    border-color: white;\r\n}\r\n\r\n.card-desc {\r\n    font-size: 13px; \r\n    line-height: 1.6;\r\n    color: rgba(255,255,255,0.85);\r\n    margin: 0;\r\n    display: -webkit-box;\r\n    -webkit-line-clamp: 4;\r\n    -webkit-box-orient: vertical;\r\n    overflow: hidden;\r\n    font-family: 'Poppins', sans-serif;\r\n}\r\n\r\n\/* --- NAVIGATION ARROWS --- *\/\r\n.spotlight-nav {\r\n    display: flex;\r\n    justify-content: flex-end;\r\n    gap: 10px;\r\n    margin-top: 10px;\r\n    padding-right: 10px;\r\n}\r\n\r\n.s-nav-btn {\r\n    width: 40px;\r\n    height: 40px;\r\n    border-radius: 50%;\r\n    background: transparent;\r\n    border: 1px solid rgba(255,255,255,0.3);\r\n    color: white;\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    transition: all 0.2s ease;\r\n}\r\n.s-nav-btn:hover {\r\n    background: #245463; \r\n    color: white; \r\n    border-color: #245463; \r\n}\r\n\r\n\/* --- RESPONSIVE FIXES --- *\/\r\n@media (max-width: 1024px) {\r\n    .spotlight-wrapper {\r\n        width: calc(100% + 20px) !important; \r\n        margin-left: -10px !important;\r\n        padding: 20px 10px 40px 10px; \r\n        margin-top: -20px !important;\r\n        margin-bottom: -20px !important;\r\n    }\r\n    a.spotlight-card {\r\n        width: 270px; \r\n        height: auto;\r\n        flex-direction: column; \r\n    }\r\n    .card-label-vertical {\r\n        width: 100%;\r\n        height: 30px;\r\n        border-right: none;\r\n        border-bottom: 1px solid rgba(255,255,255,0.1);\r\n    }\r\n    .card-label-text {\r\n        writing-mode: horizontal-tb;\r\n        transform: none;\r\n        letter-spacing: 1px;\r\n    }\r\n    .card-image-area {\r\n        width: 100%;\r\n        height: 160px; \r\n        padding: 20px 20px 0 20px;\r\n    }\r\n    .card-content-area {\r\n        width: 100%;\r\n        padding: 20px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<div class=\"spotlight-wrapper\">\r\n    <h2 class=\"spotlight-header\">Spotlight<\/h2>\r\n\r\n    <div class=\"spotlight-track-container\" id=\"spotTrack\">\r\n        <div class=\"spotlight-track\" id=\"apiTarget\">\r\n            <p style=\"padding:20px; opacity:0.7;\">Loading latest articles...<\/p>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"spotlight-nav\">\r\n        <button class=\"s-nav-btn\" onclick=\"slideSpotlight(-1)\">&#10094;<\/button>\r\n        <button class=\"s-nav-btn\" onclick=\"slideSpotlight(1)\">&#10095;<\/button>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n    \/\/ --- 1. CONFIGURATION ---\r\n    const API_URL = 'https:\/\/clcadventist.org\/wp-public\/wp-json\/wp\/v2\/posts?categories=33&_embed&per_page=6';\r\n\r\n    \/\/ --- HELPER: Get First Paragraph Only ---\r\n    const getFirstParagraphText = (contentHtml) => {\r\n        const div = document.createElement(\"div\");\r\n        div.innerHTML = contentHtml || \"\";\r\n\r\n        \/\/ Remove scripts, styles, embeds, figures so we don't grab captions\/code\r\n        div.querySelectorAll(\"script, style, noscript, iframe\").forEach(n => n.remove());\r\n        div.querySelectorAll(\".wp-block-embed, .wp-block-embed-youtube, figure\").forEach(n => n.remove());\r\n\r\n        \/\/ Find all paragraphs, clean spaces, and take the first one that has text\r\n        const paras = Array.from(div.querySelectorAll(\"p\"))\r\n            .map(p => (p.textContent || \"\").replace(\/\\u00A0\/g, \" \").trim())\r\n            .filter(t => t.length > 0);\r\n\r\n        return paras[0] || \"\";\r\n    };\r\n\r\n    \/\/ --- HELPER: Filter Words (Keep only 1-10 chars) ---\r\n    const keepWords1to10 = (text) => {\r\n        const normalized = (text || \"\").replace(\/\\s+\/g, \" \").trim();\r\n        const kept = normalized.split(\" \")\r\n            .map(w => w.trim())\r\n            .filter(Boolean)\r\n            .filter(w => {\r\n                \/\/ Remove punctuation from edges to check real word length\r\n                const core = w.replace(\/^[^\\w']+|[^\\w']+$\/g, \"\");\r\n                return core.length >= 1 && core.length <= 10;\r\n            })\r\n            .join(\" \");\r\n        return kept.replace(\/\\s+\/g, \" \").trim();\r\n    };\r\n\r\n    \/\/ --- 2. FETCH & RENDER FUNCTION ---\r\n    async function loadSpotlightPosts() {\r\n        const track = document.getElementById('apiTarget');\r\n\r\n        try {\r\n            const response = await fetch(API_URL);\r\n            if (!response.ok) throw new Error('Network response was not ok');\r\n            \r\n            const posts = await response.json();\r\n            track.innerHTML = '';\r\n\r\n            posts.forEach(post => {\r\n                \r\n                \/\/ A. Get Image\r\n                let imgUrl = 'https:\/\/via.placeholder.com\/800x600?text=No+Image';\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\r\n                \/\/ B. Get Category Name\r\n                let catName = 'Spotlight';\r\n                if (post._embedded && post._embedded['wp:term'] && post._embedded['wp:term'][0]) {\r\n                    const categories = post._embedded['wp:term'][0];\r\n                    if(categories.length > 0) {\r\n                        catName = categories[0].name;\r\n                    }\r\n                }\r\n\r\n                \/\/ --- C. ADVANCED EXCERPT LOGIC (Applied Here) ---\r\n                \/\/ 1. Grab raw content\r\n                let rawContent = post.content?.rendered || \"\";\r\n                \r\n                \/\/ 2. Extract just the first valid paragraph\r\n                let cleanExcerpt = getFirstParagraphText(rawContent);\r\n\r\n                \/\/ 3. Remove URL strings and leading symbols\r\n                cleanExcerpt = cleanExcerpt.replace(\/(https?:\\\/\\\/[^\\s]+)\/g, '');\r\n                cleanExcerpt = cleanExcerpt.replace(\/^[\\s\\-\\\u2013\\\u2014\\.|,:]+\/, '').trim();\r\n\r\n                \/\/ 4. Apply the \"Word Length\" filter (The special condition)\r\n                cleanExcerpt = keepWords1to10(cleanExcerpt);\r\n\r\n                \/\/ 5. Fallback if empty\r\n                if (!cleanExcerpt || cleanExcerpt.length < 5) {\r\n                    cleanExcerpt = \"Read more about this topic.\";\r\n                }\r\n                \/\/ ------------------------------------------------\r\n\r\n                \/\/ D. Build the Card HTML\r\n                const cardHTML = `\r\n                    <a href=\"${post.link}\" class=\"spotlight-card\">\r\n                        <div class=\"card-label-vertical\"><span class=\"card-label-text\">${catName}<\/span><\/div>\r\n                        <div class=\"card-image-area\">\r\n                            <div class=\"card-img-wrapper\">\r\n                                <img decoding=\"async\" src=\"${imgUrl}\" alt=\"${post.title.rendered}\">\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"card-content-area\">\r\n                            <h3 class=\"card-title-text\">${post.title.rendered}<\/h3>\r\n                            <p class=\"card-desc\">${cleanExcerpt}<\/p>\r\n                        <\/div>\r\n                    <\/a>\r\n                `;\r\n\r\n                track.innerHTML += cardHTML;\r\n            });\r\n\r\n        } catch (error) {\r\n            console.error('Error fetching posts:', error);\r\n            track.innerHTML = '<p style=\"padding:20px;\">Unable to load content.<\/p>';\r\n        }\r\n    }\r\n\r\n    \/\/ --- 3. NAVIGATION FUNCTION ---\r\n    function slideSpotlight(direction) {\r\n        const track = document.getElementById('spotTrack');\r\n        const card = track.querySelector('.spotlight-card');\r\n        \r\n        if(!card) return;\r\n\r\n        const gap = 25; \r\n        const scrollAmount = card.offsetWidth + gap; \r\n        const maxScroll = track.scrollWidth - track.clientWidth;\r\n        const currentScroll = track.scrollLeft;\r\n        const buffer = 30; \r\n\r\n        if (direction === 1) { \r\n            if (currentScroll + buffer >= maxScroll) {\r\n                track.scrollTo({ left: 0, behavior: 'smooth' });\r\n            } else {\r\n                track.scrollBy({ left: scrollAmount, behavior: 'smooth' });\r\n            }\r\n        } else { \r\n            if (currentScroll - buffer <= 0) {\r\n                track.scrollTo({ left: maxScroll, behavior: 'smooth' });\r\n            } else {\r\n                track.scrollBy({ left: -scrollAmount, behavior: 'smooth' });\r\n            }\r\n        }\r\n    }\r\n\r\n    \/\/ --- 4. INIT ---\r\n    document.addEventListener('DOMContentLoaded', loadSpotlightPosts);\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-59b7d35 e-flex e-con-boxed e-con e-parent\" data-id=\"59b7d35\" 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-0bbbbc8 elementor-widget elementor-widget-html\" data-id=\"0bbbbc8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n    \/* 1. Load Poppins from Google Fonts *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');\n\n\/* 2. The \"Nuclear\" Selector List *\/\nbody,\nh1, h2, h3, h4, h5, h6,\np, a, span, div,\nul, ol, li,\nbutton, input, textarea,\n.elementor-widget-text-editor,\n.stk-block-text,\n.stk-block-text__text {\n  font-family: 'Poppins', sans-serif !important;\n}\n<\/style>\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 News&#8230; Fetching latest updates&#8230; Read More &raquo; &#8592; &#8594; Who We Are We are a movement called by God to share the eternal gospel of Jesus with every nation, tribe, language, and people. Our mission is preparing hearts for Jesus\u2019 soon return. We help people discover the Bible\u2019s life-changing truths for themselves, finding the &hellip; <a href=\"https:\/\/clcadventist.org\/wp-public\/\">Continued<\/a><\/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-1628","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/clcadventist.org\/wp-public\/wp-json\/wp\/v2\/pages\/1628","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=1628"}],"version-history":[{"count":170,"href":"https:\/\/clcadventist.org\/wp-public\/wp-json\/wp\/v2\/pages\/1628\/revisions"}],"predecessor-version":[{"id":6259,"href":"https:\/\/clcadventist.org\/wp-public\/wp-json\/wp\/v2\/pages\/1628\/revisions\/6259"}],"wp:attachment":[{"href":"https:\/\/clcadventist.org\/wp-public\/wp-json\/wp\/v2\/media?parent=1628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}