{"id":758,"date":"2026-05-29T09:16:17","date_gmt":"2026-05-29T01:16:17","guid":{"rendered":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/?page_id=758"},"modified":"2026-06-16T07:17:42","modified_gmt":"2026-06-15T23:17:42","slug":"media","status":"publish","type":"page","link":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/media\/","title":{"rendered":"Media"},"content":{"rendered":"\n<div class=\"wp-block-uagb-container uagb-block-ad1d9cc5 alignfull uagb-is-root-container\"><div class=\"wp-block-bplugins-custom-html\" id='bPluginsCustomHtml-1'>\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,700;1,400&family=Lato:wght@300;400&display=swap');\n\n.gal-section {\n  background: #0b0f1a;\n  padding: 0;\n  font-family: 'Lato', sans-serif;\n  position: relative;\n  overflow: hidden;\n}\n\n\/* \u2500\u2500 hero band \u2500\u2500 *\/\n.gal-hero {\n  position: relative;\n  padding: 100px 40px 80px;\n  text-align: center;\n  overflow: hidden;\n}\n.gal-hero::before {\n  content: '';\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.4), transparent);\n}\n.gal-hero-cross {\n  position: absolute;\n  top: 50%; left: 50%;\n  transform: translate(-50%, -50%);\n  width: 260px; height: 260px;\n  opacity: 0.04;\n}\n.gal-hero-cross svg {\n  width: 100%; height: 100%;\n  stroke: #c9a84c; fill: none; stroke-width: 0.5;\n}\n.gal-rays {\n  position: absolute;\n  top: -40%; left: 50%;\n  transform: translateX(-50%);\n  width: 140%; height: 100%;\n  background: repeating-conic-gradient(\n    from 270deg at 50% 0%,\n    rgba(201,168,76,0.04) 0deg 2deg,\n    transparent 2deg 7deg\n  );\n  animation: galRayRotate 20s linear infinite;\n  transform-origin: 50% 0%;\n  pointer-events: none;\n}\n@keyframes galRayRotate {\n  0%   { transform: translateX(-50%) rotate(-3deg); }\n  100% { transform: translateX(-50%) rotate(3deg); }\n}\n.gal-hero-inner {\n  position: relative;\n  z-index: 1;\n  max-width: 700px;\n  margin: 0 auto;\n}\n.gal-eyebrow {\n  font-size: 9px; letter-spacing: 5px;\n  text-transform: uppercase; color: #c9a84c;\n  margin-bottom: 14px;\n  display: flex; align-items: center; justify-content: center; gap: 14px;\n}\n.gal-eyebrow::before, .gal-eyebrow::after {\n  content: ''; display: block; width: 40px; height: 1px;\n  background: rgba(201,168,76,0.4);\n}\n.gal-title {\n  font-family: 'Playfair Display', serif;\n  font-size: clamp(28px, 4vw, 46px);\n  font-weight: 700; color: #fff;\n  margin-bottom: 12px;\n  text-shadow: 0 0 50px rgba(201,168,76,0.15);\n}\n.gal-subtitle {\n  font-family: 'Playfair Display', serif;\n  font-style: italic;\n  font-size: clamp(14px, 2vw, 17px);\n  color: rgba(201,168,76,0.65);\n  margin-bottom: 0;\n}\n\n\/* \u2500\u2500 gallery body \u2500\u2500 *\/\n.gal-body {\n  padding: 0 40px 90px;\n  position: relative;\n  z-index: 1;\n}\n.gal-inner {\n  max-width: 1200px;\n  margin: 0 auto;\n}\n\n\/* filter tabs *\/\n.gal-filters {\n  display: flex; justify-content: center; gap: 2px;\n  margin-bottom: 40px; flex-wrap: wrap;\n  background: rgba(201,168,76,0.08); padding: 3px;\n}\n.gal-filter-btn {\n  padding: 10px 22px; font-family: 'Lato', sans-serif;\n  font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase;\n  color: rgba(201,168,76,0.4); background: transparent;\n  border: none; cursor: pointer; transition: all 0.3s;\n}\n.gal-filter-btn:hover { color: #c9a84c; background: rgba(201,168,76,0.05); }\n.gal-filter-btn.active { color: #0b0f1a; background: #c9a84c; }\n\n\/* grid *\/\n.gal-grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 4px;\n  min-height: 200px;\n}\n\n\/* card *\/\n.gal-card {\n  position: relative;\n  aspect-ratio: 4\/3;\n  overflow: hidden;\n  cursor: pointer;\n  background: rgba(201,168,76,0.03);\n  border: 1px solid rgba(201,168,76,0.08);\n  animation: galFadeIn 0.5s ease both;\n}\n.gal-card.featured {\n  grid-row: span 2;\n  aspect-ratio: auto;\n}\n@keyframes galFadeIn {\n  from { opacity: 0; transform: translateY(12px); }\n  to   { opacity: 1; transform: translateY(0); }\n}\n\n\/* image *\/\n.gal-card-img {\n  position: absolute; inset: 0;\n  width: 100%; height: 100%;\n  object-fit: cover; display: block;\n  transition: transform 0.6s ease;\n}\n.gal-card:hover .gal-card-img { transform: scale(1.06); }\n\n\/* placeholder *\/\n.gal-card-ph {\n  position: absolute; inset: 0;\n  display: flex; flex-direction: column;\n  align-items: center; justify-content: center; gap: 10px;\n  background: linear-gradient(135deg, rgba(201,168,76,0.04) 0%, rgba(201,168,76,0.01) 100%);\n}\n.gal-card-ph svg {\n  width: 36px; height: 36px;\n  stroke: rgba(201,168,76,0.15); fill: none; stroke-width: 1.5;\n}\n.gal-card-ph span {\n  font-size: 8px; letter-spacing: 2px; text-transform: uppercase;\n  color: rgba(201,168,76,0.2);\n}\n\n\/* corners *\/\n.gal-corner {\n  position: absolute; width: 18px; height: 18px;\n  border-color: rgba(201,168,76,0.35); border-style: solid;\n  z-index: 3; opacity: 0; transition: opacity 0.4s ease;\n}\n.gal-card:hover .gal-corner { opacity: 1; }\n.gal-corner.tl { top: 8px; left: 8px; border-width: 1px 0 0 1px; }\n.gal-corner.tr { top: 8px; right: 8px; border-width: 1px 1px 0 0; }\n.gal-corner.bl { bottom: 8px; left: 8px; border-width: 0 0 1px 1px; }\n.gal-corner.br { bottom: 8px; right: 8px; border-width: 0 1px 1px 0; }\n\n\/* hover overlay *\/\n.gal-overlay {\n  position: absolute; inset: 0; z-index: 2;\n  background: linear-gradient(to top,\n    rgba(11,15,26,0.95) 0%, rgba(11,15,26,0.6) 40%,\n    rgba(11,15,26,0.1) 70%, transparent 100%);\n  display: flex; flex-direction: column; justify-content: flex-end;\n  padding: 24px; opacity: 0; transition: opacity 0.4s ease;\n}\n.gal-card:hover .gal-overlay { opacity: 1; }\n.gal-overlay-tag {\n  font-size: 8px; letter-spacing: 3px; text-transform: uppercase;\n  color: #c9a84c; margin-bottom: 8px;\n  transform: translateY(10px); transition: transform 0.4s ease 0.05s;\n}\n.gal-card:hover .gal-overlay-tag { transform: translateY(0); }\n.gal-overlay-title {\n  font-family: 'Playfair Display', serif;\n  font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 4px;\n  transform: translateY(10px); transition: transform 0.4s ease 0.1s;\n}\n.gal-card:hover .gal-overlay-title { transform: translateY(0); }\n.gal-overlay-desc {\n  font-size: 12px; color: rgba(255,255,255,0.5); font-weight: 300; line-height: 1.6;\n  transform: translateY(10px); transition: transform 0.4s ease 0.15s;\n}\n.gal-card:hover .gal-overlay-desc { transform: translateY(0); }\n\n\/* zoom icon *\/\n.gal-zoom {\n  position: absolute; top: 14px; right: 14px;\n  width: 34px; height: 34px;\n  border: 1px solid rgba(201,168,76,0.4);\n  background: rgba(11,15,26,0.6);\n  display: flex; align-items: center; justify-content: center;\n  z-index: 3; opacity: 0; transform: translateY(-6px);\n  transition: all 0.35s ease;\n}\n.gal-card:hover .gal-zoom { opacity: 1; transform: translateY(0); }\n.gal-zoom svg {\n  width: 14px; height: 14px;\n  stroke: #c9a84c; fill: none; stroke-width: 1.5;\n}\n\n\/* \u2500\u2500 pagination \u2500\u2500 *\/\n.gal-pagination {\n  display: flex; align-items: center; justify-content: center;\n  gap: 6px; margin-top: 44px;\n}\n.gal-page-btn {\n  width: 38px; height: 38px;\n  display: flex; align-items: center; justify-content: center;\n  font-family: 'Lato', sans-serif;\n  font-size: 11px; letter-spacing: 1px;\n  color: rgba(201,168,76,0.45);\n  background: transparent;\n  border: 1px solid rgba(201,168,76,0.15);\n  cursor: pointer; transition: all 0.3s;\n}\n.gal-page-btn:hover {\n  color: #c9a84c; border-color: rgba(201,168,76,0.4);\n  background: rgba(201,168,76,0.05);\n}\n.gal-page-btn.active {\n  color: #0b0f1a; background: #c9a84c; border-color: #c9a84c;\n}\n.gal-page-btn.arrow {\n  border: none; background: transparent; color: rgba(201,168,76,0.35);\n}\n.gal-page-btn.arrow:hover { color: #c9a84c; background: transparent; }\n.gal-page-btn.arrow svg {\n  width: 16px; height: 16px;\n  stroke: currentColor; fill: none; stroke-width: 1.5;\n}\n\n\/* bottom bar *\/\n.gal-bottom {\n  display: flex; align-items: center;\n  justify-content: space-between;\n  margin-top: 32px; gap: 20px; flex-wrap: wrap;\n}\n.gal-count {\n  font-size: 10px; letter-spacing: 3px;\n  text-transform: uppercase; color: rgba(201,168,76,0.4);\n}\n.gal-count strong { color: #c9a84c; font-weight: 400; }\n.gal-view-btn {\n  display: inline-block; padding: 12px 30px;\n  font-family: 'Lato', sans-serif;\n  font-size: 10px; letter-spacing: 3px;\n  text-transform: uppercase; text-decoration: none !important;\n  border: 1px solid rgba(201,168,76,0.7);\n  background: rgba(201,168,76,0.12);\n  color: #e8d08a; cursor: pointer;\n  transition: background 0.3s, color 0.3s;\n}\n.gal-view-btn:hover { background: rgba(201,168,76,0.28); color: #fff; }\n\n\/* \u2500\u2500 lightbox \u2500\u2500 *\/\n.gal-lightbox {\n  position: fixed; inset: 0;\n  background: rgba(5,8,18,0.95);\n  z-index: 9999;\n  display: flex; align-items: center; justify-content: center;\n  opacity: 0; visibility: hidden;\n  transition: opacity 0.4s ease, visibility 0.4s ease;\n  backdrop-filter: blur(8px);\n}\n.gal-lightbox.open { opacity: 1; visibility: visible; }\n.gal-lightbox-inner {\n  position: relative;\n  max-width: 900px; max-height: 85vh; width: 90%;\n}\n.gal-lightbox-img {\n  width: 100%; max-height: 80vh;\n  object-fit: contain;\n  border: 1px solid rgba(201,168,76,0.15);\n}\n.gal-lightbox-ph {\n  width: 100%; aspect-ratio: 16\/10;\n  background: rgba(201,168,76,0.03);\n  border: 1px solid rgba(201,168,76,0.12);\n  display: flex; flex-direction: column;\n  align-items: center; justify-content: center; gap: 14px;\n}\n.gal-lightbox-ph svg {\n  width: 48px; height: 48px;\n  stroke: rgba(201,168,76,0.2); fill: none; stroke-width: 1.5;\n}\n.gal-lightbox-ph span {\n  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;\n  color: rgba(201,168,76,0.25);\n}\n.gal-lightbox-caption { text-align: center; margin-top: 18px; }\n.gal-lightbox-caption h4 {\n  font-family: 'Playfair Display', serif;\n  font-size: 18px; color: #fff; margin-bottom: 4px;\n}\n.gal-lightbox-caption p {\n  font-size: 12px; color: rgba(255,255,255,0.4); font-weight: 300;\n}\n.gal-lightbox-close {\n  position: absolute; top: -44px; right: 0;\n  width: 36px; height: 36px;\n  border: 1px solid rgba(201,168,76,0.3);\n  background: transparent; cursor: pointer;\n  display: flex; align-items: center; justify-content: center;\n  transition: border-color 0.3s;\n}\n.gal-lightbox-close:hover { border-color: #c9a84c; }\n.gal-lightbox-close svg {\n  width: 16px; height: 16px;\n  stroke: #c9a84c; fill: none; stroke-width: 1.5;\n}\n.gal-lightbox-nav {\n  position: absolute; top: 50%; transform: translateY(-50%);\n  width: 40px; height: 40px;\n  border: 1px solid rgba(201,168,76,0.25);\n  background: rgba(11,15,26,0.7);\n  cursor: pointer;\n  display: flex; align-items: center; justify-content: center;\n  transition: border-color 0.3s, background 0.3s;\n}\n.gal-lightbox-nav:hover {\n  border-color: #c9a84c;\n  background: rgba(201,168,76,0.1);\n}\n.gal-lightbox-nav svg {\n  width: 16px; height: 16px;\n  stroke: #c9a84c; fill: none; stroke-width: 1.5;\n}\n.gal-lightbox-prev { left: -55px; }\n.gal-lightbox-next { right: -55px; }\n\n\/* no results *\/\n.gal-empty {\n  grid-column: 1 \/ -1;\n  text-align: center; padding: 60px 20px;\n  color: rgba(201,168,76,0.3);\n  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;\n}\n\n@media (max-width: 900px) {\n  .gal-hero { padding: 80px 24px 60px; }\n  .gal-body { padding: 0 20px 70px; }\n  .gal-grid { grid-template-columns: repeat(2, 1fr); }\n  .gal-card.featured { grid-row: span 1; aspect-ratio: 4\/3; }\n  .gal-lightbox-prev { left: 0; }\n  .gal-lightbox-next { right: 0; }\n}\n@media (max-width: 600px) {\n  .gal-grid { grid-template-columns: 1fr; }\n  .gal-filter-btn { padding: 10px 14px; font-size: 8px; letter-spacing: 2px; }\n  .gal-bottom { flex-direction: column; align-items: center; }\n}\n<\/style>\n\n<section class=\"gal-section\">\n\n  <!-- hero band -->\n  <div class=\"gal-hero\">\n    <div class=\"gal-hero-cross\">\n      <svg viewBox=\"0 0 100 100\"><line x1=\"50\" y1=\"5\" x2=\"50\" y2=\"95\"\/><line x1=\"20\" y1=\"30\" x2=\"80\" y2=\"30\"\/><\/svg>\n    <\/div>\n    <div class=\"gal-rays\"><\/div>\n    <div class=\"gal-hero-inner\">\n      <p class=\"gal-eyebrow\">Parish Life<\/p>\n      <h2 class=\"gal-title\">Moments of Faith &amp; Grace<\/h2>\n      <p class=\"gal-subtitle\">A visual journey through our parish life<\/p>\n    <\/div>\n  <\/div>\n\n  <!-- gallery body -->\n  <div class=\"gal-body\">\n    <div class=\"gal-inner\">\n\n      <div class=\"gal-filters\" id=\"galFilters\"><\/div>\n      <div class=\"gal-grid\" id=\"galGrid\"><\/div>\n      <div class=\"gal-pagination\" id=\"galPagination\"><\/div>\n\n      <div class=\"gal-bottom\">\n        <p class=\"gal-count\">\n          Showing <strong id=\"galShowing\">0<\/strong> of <strong id=\"galTotal\">0<\/strong> photos\n        <\/p>\n        <a href=\"#\" class=\"gal-view-btn\">View Full Gallery<\/a>\n      <\/div>\n\n    <\/div>\n  <\/div>\n\n<\/section>\n\n<!-- lightbox -->\n<div class=\"gal-lightbox\" id=\"galLightbox\">\n  <div class=\"gal-lightbox-inner\">\n    <button class=\"gal-lightbox-close\" id=\"galClose\">\n      <svg viewBox=\"0 0 24 24\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg>\n    <\/button>\n    <button class=\"gal-lightbox-nav gal-lightbox-prev\" id=\"galPrev\">\n      <svg viewBox=\"0 0 24 24\"><polyline points=\"15 18 9 12 15 6\"\/><\/svg>\n    <\/button>\n    <button class=\"gal-lightbox-nav gal-lightbox-next\" id=\"galNext\">\n      <svg viewBox=\"0 0 24 24\"><polyline points=\"9 6 15 12 9 18\"\/><\/svg>\n    <\/button>\n    <div id=\"galLbMedia\"><\/div>\n    <div class=\"gal-lightbox-caption\">\n      <h4 id=\"galLbTitle\"><\/h4>\n      <p id=\"galLbDesc\"><\/p>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n\/* ============================================================\n   EDIT YOUR GALLERY HERE\n   ============================================================ *\/\nvar GALLERY = [\n  {\n    image: \"\",\n    title: \"The Golden Altar\",\n    desc: \"Ornate golden altar with crucified Jesus, columns, and floral decorations\",\n    category: \"interior\",\n    featured: true\n  },\n  {\n    image: \"\",\n    title: \"Church Facade\",\n    desc: \"Classic Spanish Colonial Baroque facade with arched windows\",\n    category: \"exterior\"\n  },\n  {\n    image: \"\",\n    title: \"Grand Procession\",\n    desc: \"Annual procession through the streets of Catanauan\",\n    category: \"feast\"\n  },\n  {\n    image: \"\",\n    title: \"Vaulted Ceilings\",\n    desc: \"Painted religious motifs on vaulted ceilings\",\n    category: \"interior\"\n  },\n  {\n    image: \"\",\n    title: \"Baptism Rites\",\n    desc: \"Welcoming new members into the Catholic faith\",\n    category: \"sacraments\"\n  },\n  {\n    image: \"\",\n    title: \"Parish Gathering\",\n    desc: \"Fellowship and community building after Sunday Mass\",\n    category: \"community\"\n  },\n  {\n    image: \"\",\n    title: \"La Inmaculada Concepci\u00f3n\",\n    desc: \"The venerated brown-skinned wooden statue of the Virgin Mary\",\n    category: \"feast\"\n  },\n  {\n    image: \"\",\n    title: \"Bell Tower\",\n    desc: \"Central bell tower with the Virgin Mary above the entrance\",\n    category: \"exterior\"\n  },\n  {\n    image: \"\",\n    title: \"Youth Ministry\",\n    desc: \"Young parishioners serving the community with joy\",\n    category: \"community\"\n  },\n  {\n    image: \"\",\n    title: \"Solemn High Mass\",\n    desc: \"Bishop presides over the December 8 feast day celebration\",\n    category: \"feast\"\n  },\n  {\n    image: \"\",\n    title: \"Confession Hours\",\n    desc: \"Sacrament of Reconciliation available weekly\",\n    category: \"sacraments\"\n  },\n  {\n    image: \"\",\n    title: \"Church Interior Wide\",\n    desc: \"Nave view showing wooden pews and golden altar\",\n    category: \"interior\"\n  }\n];\n\nvar CATEGORIES = [\n  { key: \"all\",        label: \"All\" },\n  { key: \"interior\",   label: \"Church Interior\" },\n  { key: \"exterior\",   label: \"Church Exterior\" },\n  { key: \"feast\",      label: \"Feast Day\" },\n  { key: \"community\",  label: \"Community\" },\n  { key: \"sacraments\", label: \"Sacraments\" }\n];\n\nvar PER_PAGE = 9;\n\n\/* ============================================================\n   ENGINE\n   ============================================================ *\/\n(function () {\n  var filterWrap = document.getElementById('galFilters');\n  var gridEl     = document.getElementById('galGrid');\n  var pagWrap    = document.getElementById('galPagination');\n  var showingEl  = document.getElementById('galShowing');\n  var totalEl    = document.getElementById('galTotal');\n  var lb         = document.getElementById('galLightbox');\n  var lbMedia    = document.getElementById('galLbMedia');\n  var lbTitle    = document.getElementById('galLbTitle');\n  var lbDesc     = document.getElementById('galLbDesc');\n\n  var activeFilter = 'all';\n  var currentPage  = 1;\n  var filtered     = [];\n  var lbIndex      = 0;\n\n  CATEGORIES.forEach(function (cat) {\n    var btn = document.createElement('button');\n    btn.className = 'gal-filter-btn' + (cat.key === 'all' ? ' active' : '');\n    btn.setAttribute('data-filter', cat.key);\n    btn.textContent = cat.label;\n    btn.addEventListener('click', function () {\n      document.querySelectorAll('.gal-filter-btn').forEach(function (b) { b.classList.remove('active'); });\n      btn.classList.add('active');\n      activeFilter = cat.key;\n      currentPage = 1;\n      render();\n    });\n    filterWrap.appendChild(btn);\n  });\n\n  function buildCard(item, globalIndex) {\n    var card = document.createElement('div');\n    card.className = 'gal-card' + (item.featured ? ' featured' : '');\n    card.style.animationDelay = (globalIndex * 0.06) + 's';\n\n    var inner = '';\n    if (item.image) {\n      inner += '<img decoding=\"async\" class=\"gal-card-img\" src=\"' + item.image + '\" alt=\"' + item.title + '\">';\n    } else {\n      inner += '<div class=\"gal-card-ph\">' +\n        '<svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"1\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><polyline points=\"21 15 16 10 5 21\"\/><\/svg>' +\n        '<span>Your Image Here<\/span><\/div>';\n    }\n    inner += '<div class=\"gal-corner tl\"><\/div><div class=\"gal-corner tr\"><\/div>' +\n      '<div class=\"gal-corner bl\"><\/div><div class=\"gal-corner br\"><\/div>' +\n      '<div class=\"gal-zoom\"><svg viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/><line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\"\/><line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\"\/><\/svg><\/div>';\n\n    var catLabel = '';\n    CATEGORIES.forEach(function (c) { if (c.key === item.category) catLabel = c.label; });\n\n    inner += '<div class=\"gal-overlay\">' +\n      '<span class=\"gal-overlay-tag\">' + catLabel + '<\/span>' +\n      '<h3 class=\"gal-overlay-title\">' + item.title + '<\/h3>' +\n      '<p class=\"gal-overlay-desc\">' + item.desc + '<\/p><\/div>';\n\n    card.innerHTML = inner;\n    card.addEventListener('click', function () { openLightbox(item); });\n    return card;\n  }\n\n  function render() {\n    filtered = [];\n    GALLERY.forEach(function (item) {\n      if (activeFilter === 'all' || item.category === activeFilter) {\n        filtered.push(item);\n      }\n    });\n\n    totalEl.textContent = filtered.length;\n\n    var totalPages = Math.max(1, Math.ceil(filtered.length \/ PER_PAGE));\n    if (currentPage > totalPages) currentPage = totalPages;\n    var start = (currentPage - 1) * PER_PAGE;\n    var page  = filtered.slice(start, start + PER_PAGE);\n\n    showingEl.textContent = page.length;\n\n    gridEl.innerHTML = '';\n    if (page.length === 0) {\n      gridEl.innerHTML = '<div class=\"gal-empty\">No photos in this category yet<\/div>';\n    } else {\n      page.forEach(function (item, i) {\n        gridEl.appendChild(buildCard(item, i));\n      });\n    }\n\n    pagWrap.innerHTML = '';\n    if (totalPages <= 1) return;\n\n    var prevBtn = document.createElement('button');\n    prevBtn.className = 'gal-page-btn arrow';\n    prevBtn.innerHTML = '<svg viewBox=\"0 0 24 24\"><polyline points=\"15 18 9 12 15 6\"\/><\/svg>';\n    prevBtn.disabled = currentPage === 1;\n    prevBtn.style.opacity = currentPage === 1 ? '0.25' : '1';\n    prevBtn.addEventListener('click', function () {\n      if (currentPage > 1) { currentPage--; render(); scrollToGrid(); }\n    });\n    pagWrap.appendChild(prevBtn);\n\n    for (var p = 1; p <= totalPages; p++) {\n      (function (num) {\n        var btn = document.createElement('button');\n        btn.className = 'gal-page-btn' + (num === currentPage ? ' active' : '');\n        btn.textContent = num;\n        btn.addEventListener('click', function () {\n          currentPage = num; render(); scrollToGrid();\n        });\n        pagWrap.appendChild(btn);\n      })(p);\n    }\n\n    var nextBtn = document.createElement('button');\n    nextBtn.className = 'gal-page-btn arrow';\n    nextBtn.innerHTML = '<svg viewBox=\"0 0 24 24\"><polyline points=\"9 6 15 12 9 18\"\/><\/svg>';\n    nextBtn.disabled = currentPage === totalPages;\n    nextBtn.style.opacity = currentPage === totalPages ? '0.25' : '1';\n    nextBtn.addEventListener('click', function () {\n      if (currentPage < totalPages) { currentPage++; render(); scrollToGrid(); }\n    });\n    pagWrap.appendChild(nextBtn);\n  }\n\n  function scrollToGrid() {\n    var top = filterWrap.getBoundingClientRect().top + window.pageYOffset - 40;\n    window.scrollTo({ top: top, behavior: 'smooth' });\n  }\n\n  function openLightbox(item) {\n    if (item.image) {\n      lbMedia.innerHTML = '<img decoding=\"async\" class=\"gal-lightbox-img\" src=\"' + item.image + '\" alt=\"' + item.title + '\">';\n    } else {\n      lbMedia.innerHTML = '<div class=\"gal-lightbox-ph\">' +\n        '<svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"1\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><polyline points=\"21 15 16 10 5 21\"\/><\/svg>' +\n        '<span>Your Image Here<\/span><\/div>';\n    }\n    lbTitle.textContent = item.title;\n    lbDesc.textContent  = item.desc;\n    lb.classList.add('open');\n    lbIndex = filtered.indexOf(item);\n  }\n\n  document.getElementById('galClose').addEventListener('click', function () { lb.classList.remove('open'); });\n  lb.addEventListener('click', function (e) { if (e.target === lb) lb.classList.remove('open'); });\n\n  document.getElementById('galPrev').addEventListener('click', function (e) {\n    e.stopPropagation();\n    lbIndex = (lbIndex - 1 + filtered.length) % filtered.length;\n    openLightbox(filtered[lbIndex]);\n  });\n  document.getElementById('galNext').addEventListener('click', function (e) {\n    e.stopPropagation();\n    lbIndex = (lbIndex + 1) % filtered.length;\n    openLightbox(filtered[lbIndex]);\n  });\n\n  document.addEventListener('keydown', function (e) {\n    if (!lb.classList.contains('open')) return;\n    if (e.key === 'Escape') lb.classList.remove('open');\n    if (e.key === 'ArrowLeft')  { lbIndex = (lbIndex - 1 + filtered.length) % filtered.length; openLightbox(filtered[lbIndex]); }\n    if (e.key === 'ArrowRight') { lbIndex = (lbIndex + 1) % filtered.length; openLightbox(filtered[lbIndex]); }\n  });\n\n  render();\n})();\n<\/script><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"slim_seo":{"title":"Media - Immaculate Conception Parish","description":""},"footnotes":""},"class_list":["post-758","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Yin Wood","author_link":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/blogs\/author\/phwpywadsa623\/"},"uagb_comment_info":0,"uagb_excerpt":null,"_links":{"self":[{"href":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-json\/wp\/v2\/pages\/758","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-json\/wp\/v2\/comments?post=758"}],"version-history":[{"count":5,"href":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-json\/wp\/v2\/pages\/758\/revisions"}],"predecessor-version":[{"id":1446,"href":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-json\/wp\/v2\/pages\/758\/revisions\/1446"}],"wp:attachment":[{"href":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-json\/wp\/v2\/media?parent=758"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}