{
  "content": [
    {
      "id": "b20aaf76",
      "settings": {
        "padding": {
          "unit": "px",
          "top": "60",
          "right": "20",
          "bottom": "70",
          "left": "20",
          "isLinked": false
        },
        "padding_mobile": {
          "unit": "px",
          "top": "30",
          "right": "15",
          "bottom": "35",
          "left": "15",
          "isLinked": false
        },
        "content_width": {
          "unit": "px",
          "size": 1240
        }
      },
      "elements": [
        {
          "id": "91375065",
          "settings": {
            "_column_size": 100,
            "_inline_size": null
          },
          "elements": [
            {
              "id": "0549b59c",
              "settings": {
                "html": "\n<style>\n.gw-wrap{max-width:1180px;margin:0 auto;font-family:Arial,Helvetica,sans-serif;}\n.gw-heading{text-align:center;font-size:28px;font-weight:800;color:#1b1e23;margin:0 0 26px;}\n.gw-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:30px;}\n.gw-tab{padding:11px 22px;border:2px solid #c9d400;border-radius:6px;background:#fff;color:#1b1e23;\n  font-weight:700;font-size:13px;letter-spacing:.03em;cursor:pointer;transition:all .2s ease;text-transform:uppercase;}\n.gw-tab:hover{background:#c9d40022;}\n.gw-tab.active{background:#c9d400;border-color:#c9d400;color:#1b1e23;}\n\n.gw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;min-height:60px;}\n@media(max-width:860px){.gw-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}\n@media(max-width:560px){.gw-grid{grid-template-columns:1fr;}}\n\n.gw-card{position:relative;border-radius:6px;overflow:hidden;cursor:pointer;aspect-ratio:4/3;\n  background:#eee;box-shadow:0 2px 10px rgba(0,0,0,0.08);}\n.gw-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease;}\n.gw-card:hover img{transform:scale(1.06);}\n.gw-overlay{position:absolute;inset:0;background:#c9d400cc;opacity:0;transition:opacity .25s ease;\n  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:16px;}\n.gw-card:hover .gw-overlay{opacity:1;}\n.gw-zoom-icon{width:42px;height:42px;border-radius:50%;background:#fff;display:flex;align-items:center;\n  justify-content:center;font-size:18px;color:#1b1e23;}\n.gw-overlay-title{color:#1b1e23;font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.02em;}\n.gw-empty-note{text-align:center;color:#6b7280;padding:40px 20px;grid-column:1/-1;line-height:1.6;}\n.gw-pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:28px;flex-wrap:wrap;}\n.gw-page-btn{padding:8px 14px;border:2px solid #c9d400;border-radius:6px;background:#fff;color:#1b1e23;\n  font-weight:700;font-size:13px;cursor:pointer;transition:all .2s ease;min-width:38px;}\n.gw-page-btn:hover:not(:disabled){background:#c9d40022;}\n.gw-page-btn.active{background:#c9d400;border-color:#c9d400;}\n.gw-page-btn:disabled{opacity:.35;cursor:not-allowed;}\n\n.gw-lightbox{position:fixed;inset:0;background:rgba(10,10,10,0.92);z-index:99999;display:none;\n  align-items:center;justify-content:center;padding:20px;}\n.gw-lightbox.open{display:flex;}\n.gw-lb-inner{max-width:900px;width:100%;max-height:92vh;display:flex;flex-direction:column;align-items:center;}\n.gw-lb-imgwrap{position:relative;width:100%;display:flex;align-items:center;justify-content:center;flex:1;min-height:0;}\n.gw-lb-imgwrap img{max-width:100%;max-height:60vh;object-fit:contain;border-radius:4px;}\n.gw-lb-close{position:absolute;top:-6px;right:-6px;width:38px;height:38px;border-radius:50%;background:#fff;\n  border:none;font-size:20px;cursor:pointer;color:#1b1e23;box-shadow:0 2px 8px rgba(0,0,0,0.3);z-index:2;}\n.gw-lb-prev,.gw-lb-next{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;\n  background:rgba(255,255,255,0.15);border:none;color:#fff;font-size:22px;cursor:pointer;display:flex;\n  align-items:center;justify-content:center;transition:background .2s;z-index:2;}\n.gw-lb-prev:hover,.gw-lb-next:hover{background:rgba(255,255,255,0.3);}\n.gw-lb-prev{left:6px;}\n.gw-lb-next{right:6px;}\n.gw-lb-info{width:100%;max-width:600px;background:#fff;border-radius:8px;padding:18px 22px;margin-top:16px;text-align:center;}\n.gw-lb-count{color:#6b7280;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}\n.gw-lb-title{color:#1b1e23;font-size:18px;font-weight:800;margin-bottom:6px;}\n.gw-lb-desc{color:#6b7280;font-size:13.5px;line-height:1.5;margin-bottom:12px;}\n.gw-lb-link{display:inline-block;background:#c9d400;color:#1b1e23;font-weight:700;font-size:13px;\n  padding:9px 20px;border-radius:6px;text-decoration:none;text-transform:uppercase;letter-spacing:.03em;}\n.gw-lb-link:hover{opacity:.85;}\n@media(max-width:600px){ .gw-lb-imgwrap img{max-height:42vh;} .gw-lb-info{padding:14px 16px;} }\n</style>\n\n<div class=\"gw-wrap\">\n  <div class=\"gw-heading\">Our Activities</div>\n  <div class=\"gw-tabs\" id=\"gwTabs\"></div>\n  <div class=\"gw-grid\" id=\"gwGrid\"></div>\n  <div class=\"gw-pagination\" id=\"gwPagination\"></div>\n</div>\n\n<div class=\"gw-lightbox\" id=\"gwLightbox\">\n  <div class=\"gw-lb-inner\">\n    <div class=\"gw-lb-imgwrap\">\n      <button class=\"gw-lb-close\" id=\"gwClose\">&times;</button>\n      <button class=\"gw-lb-prev\" id=\"gwPrev\">&#8249;</button>\n      <img id=\"gwLbImg\" src=\"\" alt=\"\">\n      <button class=\"gw-lb-next\" id=\"gwNext\">&#8250;</button>\n    </div>\n    <div class=\"gw-lb-info\">\n      <div class=\"gw-lb-count\" id=\"gwCount\"></div>\n      <div class=\"gw-lb-title\" id=\"gwTitle\"></div>\n      <div class=\"gw-lb-desc\" id=\"gwDesc\"></div>\n      <a class=\"gw-lb-link\" id=\"gwLink\" href=\"#\" target=\"_blank\" rel=\"noopener\">View Full Project</a>\n    </div>\n  </div>\n</div>\n\n<script>\n(function(){\n  const REST_BASE = window.location.origin + '/wp-json/wp/v2/media';\n\n  // ================================================================\n  // THE ONLY LINE YOU NEED TO CHANGE PER PAGE / PER NEW GALLERY:\n  // Must exactly match the text you type before \" :: \" in each\n  // image's Alt Text field in the Media Library.\n  // Example Alt Text on an image: \"Projects Done :: Office\"\n  //                                 ^^^^^^^^^^^^ this part must match\n  // ================================================================\n  const GALLERY_NAME = \"Our Activities\";\n\n  const DELIM = \" :: \";\n  const VIEW_BUTTON_TEXT = 'View Full Project'; // rename the lightbox button here if you want\n\n  let IMAGES = [];\n  let CATEGORIES = [];\n  const PAGE_SIZE = 9; // 3 rows x 3 cols per page\n  let activeCategory = 'All';\n  let currentIndex = 0;\n  let currentPage = 1;\n  let visibleItems = [];\n\n  const grid = document.getElementById('gwGrid');\n  const tabsEl = document.getElementById('gwTabs');\n  const lightbox = document.getElementById('gwLightbox');\n  const lbImg = document.getElementById('gwLbImg');\n  const lbTitle = document.getElementById('gwTitle');\n  const lbDesc = document.getElementById('gwDesc');\n  const lbLink = document.getElementById('gwLink');\n  const lbCount = document.getElementById('gwCount');\n  const paginationEl = document.getElementById('gwPagination');\n  lbLink.textContent = VIEW_BUTTON_TEXT;\n\n  function stripHtml(html){\n    const tmp = document.createElement('div');\n    tmp.innerHTML = html || '';\n    return tmp.textContent.trim();\n  }\n\n  async function fetchAllMedia(){\n    let page = 1;\n    let allItems = [];\n    while(true){\n      const res = await fetch(REST_BASE + '?media_type=image&per_page=100&page=' + page + '&_fields=id,title,alt_text,caption,description,source_url');\n      if(!res.ok) break;\n      const data = await res.json();\n      if(!data || data.length === 0) break;\n      allItems = allItems.concat(data);\n      if(data.length < 100) break;\n      page++;\n    }\n    return allItems;\n  }\n\n  async function loadGallery(){\n    try{\n      const data = await fetchAllMedia();\n      IMAGES = (data || [])\n        .filter(m => m.alt_text && m.alt_text.includes(DELIM))\n        .map(m => {\n          const parts = m.alt_text.split(DELIM);\n          return {\n            gallery: parts[0].trim(),\n            category: parts.slice(1).join(DELIM).trim(),\n            title: stripHtml(m.title && m.title.rendered),\n            description: stripHtml(m.description && m.description.rendered),\n            link: stripHtml(m.caption && m.caption.rendered),\n            image: m.source_url\n          };\n        })\n        .filter(item => item.gallery === GALLERY_NAME);\n\n      CATEGORIES = [...new Set(IMAGES.map(i => i.category))];\n\n      if(IMAGES.length === 0){\n        grid.innerHTML = '<div class=\"gw-empty-note\">No images in this gallery yet.<br>In wp-admin &rarr; Media, set an image\\'s <strong>Alt Text</strong> to <code>' + GALLERY_NAME + DELIM + 'YourCategory</code> to add it here.</div>';\n        return;\n      }\n      renderTabs();\n      renderGrid();\n    }catch(err){\n      grid.innerHTML = '<div class=\"gw-empty-note\">Could not load the gallery right now. Please refresh the page.</div>';\n    }\n  }\n\n  function renderTabs(){\n    const cats = ['All', ...CATEGORIES];\n    tabsEl.innerHTML = cats.map(cat =>\n      `<button class=\"gw-tab ${cat===activeCategory?'active':''}\" data-cat=\"${cat}\">${cat}</button>`\n    ).join('');\n    tabsEl.querySelectorAll('.gw-tab').forEach(btn=>{\n      btn.addEventListener('click', ()=>{\n        activeCategory = btn.dataset.cat;\n        currentPage = 1;\n        renderTabs();\n        renderGrid();\n      });\n    });\n  }\n\n  function renderGrid(){\n    visibleItems = activeCategory==='All' ? IMAGES : IMAGES.filter(i=>i.category===activeCategory);\n    if(visibleItems.length === 0){\n      grid.innerHTML = '<div class=\"gw-empty-note\">No images in this category yet.</div>';\n      paginationEl.innerHTML = '';\n      return;\n    }\n    const totalPages = Math.max(1, Math.ceil(visibleItems.length / PAGE_SIZE));\n    if(currentPage > totalPages) currentPage = totalPages;\n    if(currentPage < 1) currentPage = 1;\n    const start = (currentPage - 1) * PAGE_SIZE;\n    const pageItems = visibleItems.slice(start, start + PAGE_SIZE);\n\n    grid.innerHTML = pageItems.map((item, idx) => `\n      <div class=\"gw-card\" data-idx=\"${start + idx}\">\n        <img src=\"${item.image}\" alt=\"${item.title}\" loading=\"lazy\">\n        <div class=\"gw-overlay\">\n          <div class=\"gw-zoom-icon\">&#128269;</div>\n          <div class=\"gw-overlay-title\">${item.title}</div>\n        </div>\n      </div>\n    `).join('');\n    grid.querySelectorAll('.gw-card').forEach(card=>{\n      card.addEventListener('click', ()=> openLightbox(parseInt(card.dataset.idx)));\n    });\n\n    renderPagination(totalPages);\n  }\n\n  function renderPagination(totalPages){\n    if(totalPages <= 1){\n      paginationEl.innerHTML = '';\n      return;\n    }\n    let html = `<button class=\"gw-page-btn\" data-action=\"prev\" ${currentPage===1?'disabled':''}>&#8249; Prev</button>`;\n    for(let p = 1; p <= totalPages; p++){\n      html += `<button class=\"gw-page-btn ${p===currentPage?'active':''}\" data-page=\"${p}\">${p}</button>`;\n    }\n    html += `<button class=\"gw-page-btn\" data-action=\"next\" ${currentPage===totalPages?'disabled':''}>Next &#8250;</button>`;\n    paginationEl.innerHTML = html;\n\n    paginationEl.querySelectorAll('[data-page]').forEach(btn=>{\n      btn.addEventListener('click', ()=>{\n        currentPage = parseInt(btn.dataset.page);\n        renderGrid();\n        scrollToGrid();\n      });\n    });\n    const prevBtn = paginationEl.querySelector('[data-action=\"prev\"]');\n    const nextBtn = paginationEl.querySelector('[data-action=\"next\"]');\n    if(prevBtn) prevBtn.addEventListener('click', ()=>{\n      if(currentPage > 1){ currentPage--; renderGrid(); scrollToGrid(); }\n    });\n    if(nextBtn) nextBtn.addEventListener('click', ()=>{\n      if(currentPage < totalPages){ currentPage++; renderGrid(); scrollToGrid(); }\n    });\n  }\n\n  function scrollToGrid(){\n    const y = grid.getBoundingClientRect().top + window.pageYOffset - 100;\n    window.scrollTo({ top: y, behavior: 'smooth' });\n  }\n\n  function openLightbox(idx){\n    currentIndex = idx;\n    updateLightbox();\n    lightbox.classList.add('open');\n    document.body.style.overflow = 'hidden';\n  }\n  function closeLightbox(){\n    lightbox.classList.remove('open');\n    document.body.style.overflow = '';\n  }\n  function updateLightbox(){\n    const item = visibleItems[currentIndex];\n    lbImg.src = item.image;\n    lbImg.alt = item.title;\n    lbTitle.textContent = item.title;\n    lbDesc.textContent = item.description || '';\n    const hasLink = item.link && item.link.trim() !== '';\n    lbLink.href = hasLink ? item.link : '#';\n    lbLink.style.display = hasLink ? 'inline-block' : 'none';\n    lbCount.textContent = (currentIndex+1) + ' of ' + visibleItems.length;\n  }\n  function showNext(){ currentIndex = (currentIndex+1) % visibleItems.length; updateLightbox(); }\n  function showPrev(){ currentIndex = (currentIndex-1+visibleItems.length) % visibleItems.length; updateLightbox(); }\n\n  document.getElementById('gwClose').addEventListener('click', closeLightbox);\n  document.getElementById('gwNext').addEventListener('click', showNext);\n  document.getElementById('gwPrev').addEventListener('click', showPrev);\n  lightbox.addEventListener('click', (e)=>{ if(e.target===lightbox) closeLightbox(); });\n  document.addEventListener('keydown', (e)=>{\n    if(lightbox.classList.contains('open')){\n      if(e.key==='Escape') closeLightbox();\n      if(e.key==='ArrowRight') showNext();\n      if(e.key==='ArrowLeft') showPrev();\n    }\n  });\n\n  loadGallery();\n})();\n</script>\n"
              },
              "elements": [],
              "isInner": false,
              "widgetType": "html",
              "elType": "widget"
            }
          ],
          "isInner": false,
          "elType": "column"
        }
      ],
      "isInner": false,
      "elType": "section"
    }
  ],
  "page_settings": {},
  "version": "0.4",
  "title": "Gallery - Our Activities",
  "type": "section"
}