{"id":15,"date":"2026-03-13T07:28:30","date_gmt":"2026-03-13T07:28:30","guid":{"rendered":"https:\/\/demo6.yinwoodweb.com\/casasahan\/?page_id=15"},"modified":"2026-06-16T15:40:55","modified_gmt":"2026-06-16T15:40:55","slug":"home","status":"publish","type":"page","link":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/","title":{"rendered":"Home"},"content":{"rendered":"\n<div class=\"wp-block-uagb-container uagb-block-7bc6438b alignfull uagb-is-root-container\">\n<style data-wp-block-html=\"css\">\n.mission-hero {\n  position: relative;\n  height: 700px;\n  \/* Replace with a high-res image of the Mission fa\u00e7ade *\/\n  background: url('your-mission-image.jpg') center\/cover no-repeat;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  color: #fff;\n}\n\n\/* Warm overlay to maintain text readability *\/\n.hero-overlay {\n  position: absolute;\n  top: 0; left: 0; right: 0; bottom: 0;\n  background: rgba(84, 53, 39, 0.4); \n}\n\n.hero-content { z-index: 1; padding: 20px; }\n\n.sub-heading { \n  font-size: 0.9rem; letter-spacing: 0.3rem; \n  text-transform: uppercase; color: #fcd34d; \n}\n\nh1 { font-size: clamp(2.5rem, 8vw, 4.5rem); margin: 15px 0; font-family: 'Playfair Display', serif; }\n\n.subtitle { font-size: 1.5rem; font-weight: 300; margin-bottom: 20px; opacity: 0.9; }\n\n.btn-primary { \n  background: #b91c1c; color: white; padding: 15px 35px; \n  text-decoration: none; border-radius: 50px; transition: 0.3s;\n}\n\n.btn-primary:hover { background: #991b1b; }\n\n.btn-secondary { \n  background: transparent; color: white; border: 2px solid white;\n  padding: 13px 33px; text-decoration: none; border-radius: 50px; margin-left: 15px;\n}\n<\/style>\n\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&#038;family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&#038;family=Inter:wght@300;400;500;600&#038;display=swap\">\n\n<style>\n\n.sb-hero,\n.sb-hero *{\n    box-sizing:border-box !important;\n}\n\n\/* HERO WRAPPER *\/\n.sb-hero{\n    position:relative !important;\n    height:700px !important;\n\n    display:flex !important;\n    align-items:center !important;\n    justify-content:center !important;\n\n    text-align:center !important;\n\n    padding:0 20px !important;\n\n    overflow:hidden !important;\n\n    animation:heroFade 1.2s ease !important;\n}\n\n\/* DARK OVERLAY (YOUR WORDPRESS IMAGE STILL USED) *\/\n.sb-hero::before{\n    content:\"\" !important;\n    position:absolute !important;\n    inset:0 !important;\n\n    background:\n    linear-gradient(\n        180deg,\n        rgba(74,46,91,.88) 0%,\n        rgba(74,46,91,.75) 50%,\n        rgba(74,46,91,.88) 100%\n    ) !important;\n\n    z-index:1 !important;\n}\n\n\/* SOFT MOVING LIGHT *\/\n.sb-hero::after{\n    content:\"\" !important;\n    position:absolute !important;\n\n    width:600px !important;\n    height:600px !important;\n\n    border-radius:50% !important;\n\n    background:radial-gradient(\n        circle,\n        rgba(212,175,55,.18),\n        transparent 60%\n    ) !important;\n\n    top:-200px !important;\n    right:-150px !important;\n\n    animation:floatGlow 8s ease-in-out infinite !important;\n\n    z-index:1 !important;\n}\n\n\/* CENTER CONTENT *\/\n.sb-content{\n    position:relative !important;\n    z-index:3 !important;\n\n    max-width:900px !important;\n\n    animation:contentIn 1.4s ease !important;\n}\n\n\/* LABEL *\/\n.sb-label{\n    font-family:'Inter',sans-serif !important;\n\n    font-size:.85rem !important;\n\n    letter-spacing:5px !important;\n\n    text-transform:uppercase !important;\n\n    color:#D4AF37 !important;\n\n    margin-bottom:18px !important;\n\n    opacity:0;\n\n    animation:fadeUp .8s ease forwards .2s !important;\n\n    transition:.3s ease !important;\n}\n\n.sb-label:hover{\n    letter-spacing:7px !important;\n    transform:scale(1.05) !important;\n}\n\n\/* TITLE *\/\n.sb-title{\n    font-family:'Playfair Display',serif !important;\n\n    font-size:clamp(3.2rem,6vw,6.8rem) !important;\n\n    line-height:1.05 !important;\n\n    color:#fff !important;\n\n    margin:0 0 20px !important;\n\n    opacity:0;\n\n    animation:fadeUp 1s ease forwards .4s !important;\n\n    transition:.4s ease !important;\n}\n\n.sb-title span{\n    color:#D4AF37 !important;\nfont-style: italic;\n    transition:.4s ease !important;\n}\n\n.sb-title:hover span{\n    text-shadow:0 0 25px rgba(212,175,55,.6) !important;\n}\n\n\/* SUBTITLE *\/\n.sb-subtitle{\n    font-family:'Cormorant Garamond',sans-serif !important;\n\n    font-size:1.12rem !important;\n\n    line-height:1.9 !important;\n\n    color:rgba(255,255,255,.92) !important;\n\n    max-width:700px !important;\n\n    margin:0 auto 35px auto !important;\n\n    opacity:0;\n\n    animation:fadeUp 1.1s ease forwards .6s !important;\n\n    transition:.3s ease !important;\n}\n\n.sb-subtitle:hover{\n    transform:translateY(-2px) !important;\n}\n\n\/* BUTTON AREA *\/\n.sb-actions{\n    display:flex !important;\n\n    justify-content:center !important;\n\n    gap:15px !important;\n\n    flex-wrap:wrap !important;\n\n    opacity:0;\n\n    animation:fadeUp 1.2s ease forwards .8s !important;\n}\n\n\/* PRIMARY BUTTON *\/\n.sb-btn-primary{\n    position:relative !important;\nfont-size: 14px;\n    letter-spacing: 4px;\n\n    overflow:hidden !important;\n\n    display:inline-flex !important;\n\n    align-items:center !important;\n    justify-content:center !important;\n\n    padding:16px 42px !important;\n\n    border-radius:60px !important;\n\n    background:#D4AF37 !important;\n\n    color:#fff !important;\n\n    text-decoration:none !important;\n\n    font-family:'Inter',sans-serif !important;\n\n    font-weight:600 !important;\n\n    transition:.4s ease !important;\n\n    box-shadow:0 15px 30px rgba(212,175,55,.25) !important;\n}\n\n\/* BUTTON SHINE EFFECT *\/\n.sb-btn-primary::before{\n    content:\"\" !important;\n    position:absolute !important;\n    top:0 !important;\n    left:-100% !important;\n    width:100% !important;\n    height:100% !important;\n\n    background:linear-gradient(\n        120deg,\n        transparent,\n        rgba(255,255,255,.35),\n        transparent\n    ) !important;\n\n    transition:.6s !important;\n}\n\n.sb-btn-primary:hover::before{\n    left:100% !important;\n}\n\n.sb-btn-primary:hover{\n    transform:translateY(-6px) scale(1.03) !important;\n    box-shadow:0 25px 50px rgba(212,175,55,.45) !important;\n}\n\n\/* SECONDARY BUTTON *\/\n.sb-btn-secondary{\n    display:inline-flex !important;\n    letter-spacing: 4px;\n    align-items:center !important;\n    justify-content:center !important;\nfont-size: 14px;\n    padding:16px 42px !important;\n\n    border-radius:60px !important;\n\n    border:1px solid rgba(255,255,255,.25) !important;\n\n    background:rgba(255,255,255,.08) !important;\n\n    color:#fff !important;\n\n    text-decoration:none !important;\n\n    font-family:'Inter',sans-serif !important;\n\n    backdrop-filter:blur(10px) !important;\n\n    transition:.4s ease !important;\n}\n\n.sb-btn-secondary:hover{\n    transform:translateY(-6px) scale(1.03) !important;\n    background:rgba(255,255,255,.16) !important;\n    box-shadow:0 15px 35px rgba(0,0,0,.25) !important;\n}\n\n\/* ANIMATIONS *\/\n@keyframes fadeUp{\n    from{\n        opacity:0;\n        transform:translateY(35px);\n    }\n    to{\n        opacity:1;\n        transform:translateY(0);\n    }\n}\n\n@keyframes heroFade{\n    from{opacity:0;}\n    to{opacity:1;}\n}\n\n@keyframes contentIn{\n    from{\n        opacity:0;\n        transform:scale(.95);\n    }\n    to{\n        opacity:1;\n        transform:scale(1);\n    }\n}\n\n@keyframes floatGlow{\n    0%,100%{\n        transform:translate(0,0) scale(1);\n    }\n    50%{\n        transform:translate(-40px,40px) scale(1.1);\n    }\n}\n\n\/* MOBILE *\/\n@media(max-width:768px){\n\n    .sb-hero{\n        min-height:700px !important;\n        height:auto !important;\n        padding:70px 20px !important;\n    }\n\n    .sb-title{\n        font-size:2.8rem !important;\n    }\n\n    .sb-actions{\n        flex-direction:column !important;\n    }\n\n    .sb-btn-primary,\n    .sb-btn-secondary{\n        width:100% !important;\n    }\n}\n\n<\/style>\n\n<section class=\"sb-hero\">\n\n    <div class=\"sb-content\">\n\n        <div class=\"sb-label\">\n            Sta. Barbara Mission Center\n        <\/div>\n\n        <h1 class=\"sb-title\">\n            A Community of<br>\n            <span>Faith &amp; Mission<\/span>\n        <\/h1>\n\n        <p class=\"sb-subtitle\">\n            Serving Brgy. Casasahan, Gumaca, Quezon through worship, prayer, and service.\n            A growing Christ-centered community rooted in love and faith.\n        <\/p>\n\n        <div class=\"sb-actions\">\n\n            <a href=\"#about\" class=\"sb-btn-primary\">\n                EXPLORE MISSION\n            <\/a>\n\n            <a href=\"#schedule\" class=\"sb-btn-secondary\">\n                DONATE\n            <\/a>\n\n        <\/div>\n\n    <\/div>\n\n<\/section>\n<\/div>\n\n\n\n<div class=\"wp-block-uagb-container uagb-block-04f42268 alignfull uagb-is-root-container\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&amp;family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&amp;family=Inter:wght@300;400;500&amp;family=Montserrat:wght@300;400;500;600&amp;display=swap\" rel=\"stylesheet\">\n\n<section class=\"sb-mission\" id=\"overview\">\n\n  <canvas id=\"mosaicCanvas\" aria-hidden=\"true\"><\/canvas>\n\n  <div class=\"ov-rays-wrapper\" id=\"raysWrapper\" aria-hidden=\"true\"><\/div>\n\n  <div class=\"ov-rose-wrapper\" aria-hidden=\"true\">\n    <svg viewBox=\"0 0 400 400\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\">\n      <circle cx=\"200\" cy=\"200\" r=\"190\" stroke=\"#f0c040\" stroke-width=\"1.5\"><\/circle>\n      <circle cx=\"200\" cy=\"200\" r=\"150\" stroke=\"#f0c040\" stroke-width=\"1\"><\/circle>\n      <circle cx=\"200\" cy=\"200\" r=\"100\" stroke=\"#f0c040\" stroke-width=\"1\"><\/circle>\n      <circle cx=\"200\" cy=\"200\" r=\"55\" stroke=\"#f0c040\" stroke-width=\"1\"><\/circle>\n      <g stroke=\"#f0c040\" stroke-width=\"0.8\">\n        <line x1=\"200\" y1=\"10\" x2=\"200\" y2=\"390\"><\/line>\n        <line x1=\"10\" y1=\"200\" x2=\"390\" y2=\"200\"><\/line>\n        <line x1=\"54\" y1=\"54\" x2=\"346\" y2=\"346\"><\/line>\n        <line x1=\"346\" y1=\"54\" x2=\"54\" y2=\"346\"><\/line>\n        <line x1=\"200\" y1=\"10\" x2=\"200\" y2=\"390\" transform=\"rotate(30 200 200)\"><\/line>\n        <line x1=\"200\" y1=\"10\" x2=\"200\" y2=\"390\" transform=\"rotate(60 200 200)\"><\/line>\n        <line x1=\"200\" y1=\"10\" x2=\"200\" y2=\"390\" transform=\"rotate(90 200 200)\"><\/line>\n        <line x1=\"200\" y1=\"10\" x2=\"200\" y2=\"390\" transform=\"rotate(120 200 200)\"><\/line>\n        <line x1=\"200\" y1=\"10\" x2=\"200\" y2=\"390\" transform=\"rotate(150 200 200)\"><\/line>\n      <\/g>\n      <g fill=\"rgba(240,192,64,0.06)\" stroke=\"#f0c040\" stroke-width=\"0.8\">\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(0 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(30 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(60 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(90 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(120 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(150 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(180 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(210 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(240 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(270 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(300 200 200)\"><\/ellipse>\n        <ellipse cx=\"200\" cy=\"125\" rx=\"18\" ry=\"44\" transform=\"rotate(330 200 200)\"><\/ellipse>\n      <\/g>\n    <\/svg>\n  <\/div>\n\n  <div class=\"ov-border-left\" aria-hidden=\"true\"><\/div>\n  <div class=\"ov-border-right\" aria-hidden=\"true\"><\/div>\n\n  <div id=\"crossContainer\" aria-hidden=\"true\"><\/div>\n\n  <div class=\"sb-mission__container\">\n\n    <div class=\"sb-mission__image\">\n      <div class=\"sb-mission__image-wrap\">\n        <img decoding=\"async\" src=\"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-content\/uploads\/sites\/10\/2026\/06\/youth.png\">\n        <div class=\"sb-mission__badge\">Est. Mission Center<\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"sb-mission__content\">\n\n      <span class=\"sb-mission__subtitle\">Our Mission<\/span>\n\n      <h1 class=\"sb-mission__title\">\n        A Community of <br>\n        <span class=\"sb-mission__highlight\">Living Faith<\/span>\n      <\/h1>\n\n      <p class=\"sb-mission__text\">\n        The Sta. Barbara Mission Center stands as a cornerstone of faith, service, and community devotion.\n      <\/p>\n\n      <a href=\"#discover\" class=\"sb-mission__cta\">\n        Discover Our Story <span>\u2192<\/span>\n      <\/a>\n\n      <div class=\"sb-mission__stats\">\n\n        <div class=\"sb-mission__stat\">\n          <div class=\"sb-mission__number\">1786<\/div>\n          <div class=\"sb-mission__label\">Founded<\/div>\n        <\/div>\n\n        <div class=\"sb-mission__stat\">\n          <div class=\"sb-mission__number\">8<\/div>\n          <div class=\"sb-mission__label\">Weekly Masses<\/div>\n        <\/div>\n\n        <div class=\"sb-mission__stat\">\n          <div class=\"sb-mission__number\">100%<\/div>\n          <div class=\"sb-mission__label\">Community Built<\/div>\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n<style>\n\/* \u2500\u2500\u2500 SCOPED VARIABLES & BASE RESET \u2500\u2500\u2500 *\/\n.sb-mission,\n.sb-mission *, \n.sb-mission *::before, \n.sb-mission *::after { \n  box-sizing: border-box; \n}\n\n.sb-mission {\n  --ov-purple-deep: #1e0a3c;\n  --ov-purple-mid:  #3b1278;\n  --ov-purple-glow: #6b35b8;\n  --ov-gold-bright: #f0c040;\n  --ov-gold-warm:   #d4982a;\n  --ov-gold-muted:  #9a6f2a;\n  --ov-cream:       #f9f2e3;\n  --ov-white:       #ffffff;\n  --ov-text-light:  rgba(255,255,255,0.85);\n  --ov-text-muted:  rgba(255,255,255,0.55);\n\n  position: relative;\n  width: 100%;\n  font-family: 'Playfair Display', Georgia, serif !important;\n  background: linear-gradient(160deg, #1a0533 0%, #2d0f5a 40%, #1a0533 100%) !important;\n  overflow: hidden;\n  padding: 100px 20px 120px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.sb-mission h1, \n.sb-mission h2, \n.sb-mission h3, \n.sb-mission p,\n.sb-mission span,\n.sb-mission a {\n  margin: 0;\n  padding: 0;\n}\n\n\/* \u2500\u2500\u2500 STAINED GLASS SVG BACKGROUND \u2500\u2500\u2500 *\/\n.sb-mission::before {\n  content: '';\n  position: absolute;\n  top: -100px; left: 50%;\n  transform: translateX(-50%);\n  width: 900px; height: 600px;\n  background: radial-gradient(ellipse at center, rgba(240,192,64,0.12) 0%, transparent 70%);\n  pointer-events: none;\n  animation: ovAmbientPulse 6s ease-in-out infinite;\n}\n\n@keyframes ovAmbientPulse {\n  0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); }\n  50%      { opacity: 1;    transform: translateX(-50%) scale(1.08); }\n}\n\n\/* \u2500\u2500\u2500 MOSAIC PARTICLE CANVAS \u2500\u2500\u2500 *\/\n#mosaicCanvas {\n  position: absolute;\n  inset: 0;\n  width: 100%; height: 100%;\n  pointer-events: none;\n  opacity: 0.35;\n}\n\n\/* \u2500\u2500\u2500 VERTICAL GOLD BORDERS \u2500\u2500\u2500 *\/\n.ov-border-left, .ov-border-right {\n  position: absolute;\n  top: 0; bottom: 0;\n  width: 6px;\n  background: linear-gradient(180deg, transparent, var(--ov-gold-bright), var(--ov-gold-warm), transparent);\n  animation: ovBorderShimmer 4s ease-in-out infinite alternate;\n  z-index: 11;\n}\n.ov-border-left  { left: 0; }\n.ov-border-right { right: 0; animation-delay: 2s; }\n\n@keyframes ovBorderShimmer {\n  from { opacity: 0.4; }\n  to   { opacity: 1; }\n}\n\n\/* \u2500\u2500\u2500 FLOATING CROSS MOTIFS \u2500\u2500\u2500 *\/\n.cross-float {\n  position: absolute;\n  opacity: 0;\n  animation: ovFloatUp 12s ease-in-out infinite;\n  pointer-events: none;\n  font-size: 14px;\n  color: var(--ov-gold-bright);\n  filter: blur(0.5px);\n}\n@keyframes ovFloatUp {\n  0%   { opacity: 0; transform: translateY(60px) rotate(0deg); }\n  15%  { opacity: 0.5; }\n  80%  { opacity: 0.2; }\n  100% { opacity: 0; transform: translateY(-80px) rotate(20deg); }\n}\n\n\/* \u2500\u2500\u2500 ROSE WINDOW SVG \u2500\u2500\u2500 *\/\n.ov-rose-wrapper {\n  position: absolute;\n  top: 50%; left: 50%;\n  transform: translate(-50%, -50%);\n  width: 700px; height: 700px;\n  opacity: 0.07;\n  animation: ovRoseRotate 60s linear infinite;\n  pointer-events: none;\n}\n@keyframes ovRoseRotate {\n  from { transform: translate(-50%, -50%) rotate(0deg); }\n  to   { transform: translate(-50%, -50%) rotate(360deg); }\n}\n\n\/* \u2500\u2500\u2500 LIGHT RAYS \u2500\u2500\u2500 *\/\n.ov-rays-wrapper {\n  position: absolute;\n  top: 0; left: 50%;\n  transform: translateX(-50%);\n  width: 100%; height: 100%;\n  pointer-events: none;\n  overflow: hidden;\n}\n.ov-ray {\n  position: absolute;\n  top: -40px;\n  width: 2px;\n  height: 120%;\n  transform-origin: top center;\n  background: linear-gradient(180deg, rgba(240,192,64,0.22), transparent);\n  animation: ovRayPulse 5s ease-in-out infinite;\n}\n@keyframes ovRayPulse {\n  0%, 100% { opacity: 0.3; }\n  50%      { opacity: 1; }\n}\n\n\/* \u2500\u2500\u2500 CONTAINER \u2500\u2500\u2500 *\/\n.sb-mission__container {\n  position: relative;\n  z-index: 10;\n  max-width: 1200px;\n  width: 100%;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 60px;\n  align-items: center;\n  padding: 0 32px;\n}\n\n\/* \u2500\u2500\u2500 IMAGE \u2500\u2500\u2500 *\/\n.sb-mission__image-wrap {\n  position: relative;\n  border-radius: 6px;\n  overflow: hidden;\n  box-shadow: 0 25px 60px rgba(0,0,0,0.45);\n}\n\n.sb-mission__image img {\n  width: 100%;\n  height: 600px;\n  object-fit: cover;\n  display: block;\n  transition: transform 0.5s ease;\n}\n\n.sb-mission__image-wrap:hover img {\n  transform: scale(1.05);\n}\n\n\/* \u2500\u2500\u2500 BADGE \u2500\u2500\u2500 *\/\n.sb-mission__badge {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  background: #06090e;\n  color: var(--ov-gold-bright) !important;\n  font-size: 11px;\n  letter-spacing: 2px;\n  text-transform: uppercase;\n  padding: 14px 26px;\n  font-family: 'Inter', sans-serif;\n}\n\n\/* \u2500\u2500\u2500 CONTENT \u2500\u2500\u2500 *\/\n.sb-mission__content {\n  color: var(--ov-white) !important;\n}\n\n\/* Subtitle *\/\n.sb-mission__subtitle {\n  display: block;\n  font-family: 'Inter', sans-serif !important;\n  color: var(--ov-gold-bright) !important;\n  font-size: 11px;\n  letter-spacing: 4px;\n  text-transform: uppercase;\n  margin-bottom: 15px;\n  font-weight: 500;\n}\n\n\/* Title *\/\n.sb-mission__title {\n  font-family: 'Playfair Display', serif;\n  font-size: 48px;\n  line-height: 1.2;\n  color: var(--ov-white) !important;\n  margin-bottom: 20px;\n  font-weight: 900;\n}\n\n\/* Highlight *\/\n.sb-mission__highlight {\n  color: var(--ov-gold-bright) !important;\n  font-style: italic;\n  font-weight: 700;\n}\n\n\/* Description *\/\n.sb-mission__text {\n  font-family: 'Inter', sans-serif !important;\n  font-size: 15px;\n  line-height: 1.8;\n  color: var(--ov-text-light) !important;\n  max-width: 520px;\n  font-weight: 300;\n  margin-bottom: 25px;\n}\n\n\/* CTA *\/\n.sb-mission__cta {\n  font-family: 'Inter', sans-serif !important;\n  color: var(--ov-gold-bright) !important;\n  text-decoration: none;\n  font-size: 12px;\n  letter-spacing: 2px;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 40px;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n.sb-mission__cta span {\n  transition: transform 0.3s ease;\n}\n.sb-mission__cta:hover span {\n  transform: translateX(4px);\n}\n\n\/* \u2500\u2500\u2500 STATS \u2500\u2500\u2500 *\/\n.sb-mission__stats {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  border-top: 1px solid rgba(240,192,64,0.2);\n  padding-top: 25px;\n}\n\n.sb-mission__stat {\n  text-align: left;\n}\n\n.sb-mission__stat:not(:last-child) {\n  border-right: 1px solid rgba(240,192,64,0.2);\n  padding-right: 20px;\n}\n\n.sb-mission__number {\n  font-family: 'Playfair Display', serif;\n  font-size: 30px;\n  color: var(--ov-gold-bright) !important;\n  line-height: 1.1;\n  margin-bottom: 4px;\n}\n\n.sb-mission__label {\n  font-family: 'Inter', sans-serif !important;\n  font-size: 10px;\n  letter-spacing: 2px;\n  color: var(--ov-text-muted) !important;\n  text-transform: uppercase;\n}\n\n\/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\n@media (max-width: 768px) {\n  .sb-mission__container {\n    grid-template-columns: 1fr;\n    gap: 40px;\n    padding: 0 20px;\n  }\n\n  .sb-mission__image img {\n    height: 380px;\n  }\n\n  .sb-mission__title {\n    font-size: 32px;\n  }\n\n  .sb-mission__stats {\n    grid-template-columns: 1fr;\n    gap: 20px;\n  }\n\n  .sb-mission__stat:not(:last-child) {\n    border-right: none;\n    border-bottom: 1px solid rgba(240,192,64,0.2);\n    padding-right: 0;\n    padding-bottom: 15px;\n  }\n}\n<\/style>\n\n<script>\n\/* \u2500\u2500 1. MOSAIC CANVAS ANIMATION \u2500\u2500 *\/\n(function() {\n  const canvas = document.getElementById('mosaicCanvas');\n  if(!canvas) return;\n  const ctx    = canvas.getContext('2d');\n  let   W, H, tiles = [];\n\n  const COLORS = [\n    'rgba(107,53,184,',   \/\/ purple\n    'rgba(59,18,120,',    \/\/ deep purple\n    'rgba(240,192,64,',   \/\/ gold\n    'rgba(212,152,42,',   \/\/ warm gold\n    'rgba(154,111,42,',   \/\/ muted gold\n    'rgba(180,80,200,',   \/\/ violet\n    'rgba(30,10,60,',     \/\/ near-black\n  ];\n\n  function Tile(x, y, size) {\n    this.x     = x;\n    this.y     = y;\n    this.size  = size;\n    this.color = COLORS[Math.floor(Math.random() * COLORS.length)];\n    this.alpha = Math.random() * 0.6 + 0.1;\n    this.speed = Math.random() * 0.005 + 0.001;\n    this.phase = Math.random() * Math.PI * 2;\n  }\n\n  Tile.prototype.update = function(t) {\n    this.alpha = 0.05 + 0.45 * (0.5 + 0.5 * Math.sin(t * this.speed + this.phase));\n  };\n\n  Tile.prototype.draw = function() {\n    ctx.fillStyle = this.color + this.alpha + ')';\n    ctx.fillRect(this.x + 1, this.y + 1, this.size - 2, this.size - 2);\n  };\n\n  function resize() {\n    W = canvas.width  = canvas.offsetWidth;\n    H = canvas.height = canvas.offsetHeight;\n    tiles = [];\n    const S = 48;\n    for (let x = 0; x < W; x += S) {\n      for (let y = 0; y < H; y += S) {\n        tiles.push(new Tile(x, y, S));\n      }\n    }\n  }\n\n  let t = 0;\n  function loop() {\n    ctx.clearRect(0, 0, W, H);\n    t += 1;\n    tiles.forEach(tile => { tile.update(t); tile.draw(); });\n    requestAnimationFrame(loop);\n  }\n\n  resize();\n  window.addEventListener('resize', resize);\n  loop();\n})();\n\n\/* \u2500\u2500 2. LIGHT RAYS \u2500\u2500 *\/\n(function() {\n  const wrap = document.getElementById('raysWrapper');\n  if(!wrap) return;\n  const count = 14;\n  for (let i = 0; i < count; i++) {\n    const ray = document.createElement('div');\n    ray.className = 'ov-ray';\n    const angle = -40 + (80 \/ count) * i;\n    const left  = 30 + (40 \/ count) * i;\n    ray.style.cssText = `\n      left: ${left}%;\n      transform: rotate(${angle}deg);\n      animation-delay: ${(i * 0.35).toFixed(2)}s;\n      animation-duration: ${(4 + Math.random() * 3).toFixed(1)}s;\n      opacity: ${0.15 + Math.random() * 0.2};\n    `;\n    wrap.appendChild(ray);\n  }\n})();\n\n\/* \u2500\u2500 3. FLOATING CROSS PARTICLES \u2500\u2500 *\/\n(function() {\n  const container = document.getElementById('crossContainer');\n  if(!container) return;\n  const symbols    = ['\u271d', '\u2726', '\u2727', '\u25c6', '\u2720'];\n\n  function spawn() {\n    const el = document.createElement('div');\n    el.className     = 'cross-float';\n    el.textContent = symbols[Math.floor(Math.random() * symbols.length)];\n    el.style.cssText = `\n      left: ${Math.random() * 95}%;\n      bottom: -30px;\n      font-size: ${8 + Math.random() * 12}px;\n      animation-duration: ${10 + Math.random() * 8}s;\n      animation-delay: ${Math.random() * 4}s;\n    `;\n    container.appendChild(el);\n    setTimeout(() => el.remove(), 18000);\n  }\n\n  for (let i = 0; i < 12; i++) {\n    setTimeout(spawn, i * 400);\n  }\n  setInterval(spawn, 1800);\n})();\n<\/script>\n<\/div>\n\n\n\n<div class=\"wp-block-uagb-container uagb-block-8518f7a5 alignfull uagb-is-root-container\">\n<div class=\"wp-block-uagb-container uagb-block-50670d63\">\n<div class=\"wp-block-uagb-advanced-heading uagb-block-6e0131f7\"><h1 class=\"uagb-heading-text\">Patron Saint<\/h1><\/div>\n\n\n\n<div class=\"wp-block-uagb-advanced-heading uagb-block-df1ad26b\"><h1 class=\"uagb-heading-text\"><em>Sta. Barbara<\/em><\/h1><\/div>\n\n\n\n<p class=\"has-ast-global-color-4-color has-text-color has-link-color wp-elements-27a790a021a6343e1215ea52e0ab7745 wp-block-paragraph\" style=\"padding-right:30px;font-size:16px\">A welcoming Catholic community dedicated to worship, service, and spiritual growth.<\/p>\n\n\n\n<div class=\"wp-block-uagb-advanced-heading uagb-block-f354210e\"><h1 class=\"uagb-heading-text\">Rooted in faith and guided by love.<\/h1><\/div>\n\n\n\n<div class=\"wp-block-uagb-buttons uagb-buttons__outer-wrap uagb-btn__default-btn uagb-btn-tablet__default-btn uagb-btn-mobile__default-btn uagb-block-f5c12c7f\"><div class=\"uagb-buttons__wrap uagb-buttons-layout-wrap \">\n<div class=\"wp-block-uagb-buttons-child uagb-buttons__outer-wrap uagb-block-7aab1bb9 wp-block-button\"><div class=\"uagb-button__wrapper\"><a class=\"uagb-buttons-repeater ast-outline-button\" aria-label=\"\" style=\"border-width:revert-layer\" href=\"#\" rel=\"follow noopener\" target=\"_self\" role=\"button\"><div class=\"uagb-button__link\">Read More<\/div><\/a><\/div><\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-uagb-container uagb-block-24d99fa3\">\n<div class=\"wp-block-uagb-image uagb-block-49ff773d wp-block-uagb-image--layout-default wp-block-uagb-image--effect-static wp-block-uagb-image--align-none\"><figure class=\"wp-block-uagb-image__figure\"><img decoding=\"async\" src=\"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-content\/uploads\/sites\/10\/2026\/06\/stabarbarapng.png\" alt=\"Stabarbarapng\" class=\"uag-image-509\" width=\"350\" height=\"350\" title=\"stabarbarapng\" loading=\"lazy\" role=\"img\" \/><\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-uagb-container uagb-block-a6bffa40 alignfull uagb-is-root-container\">\n<style data-wp-block-html=\"css\">\n<style>\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   STA BARBARA THEME (UPDATED)\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=Inter:wght@300;400;500;600&display=swap');\n\n:root {\n  --hs-purple-deep: #1e0a3c;\n  --hs-purple-mid: #3b1278;\n  --hs-gold-bright: #f0c040;\n  --hs-gold-warm: #d4982a;\n  --hs-gold-muted: #9a6f2a;\n  --hs-white: #ffffff;\n  --hs-text-light: rgba(255, 255, 255, 0.85);\n}\n\n.updates-section {\n  position: relative;\n  padding: 120px 40px;\n  background: linear-gradient(175deg, #120228 0%, #2a0d52 35%, #1a0435 65%, #0e0120 100%);\n  color: var(--hs-white);\n  font-family: 'Inter', sans-serif;\n  overflow: hidden;\n}\n\n\/* Background Atmosphere *\/\n.updates-section::before {\n  content: '';\n  position: absolute;\n  top: 0; left: 50%;\n  transform: translateX(-50%);\n  width: 1000px; height: 600px;\n  background: radial-gradient(ellipse at 50% 20%, rgba(240,192,64,0.08) 0%, transparent 70%);\n  pointer-events: none;\n}\n\n.updates-inner {\n  max-width: 1120px;\n  margin: 0 auto;\n  position: relative;\n  z-index: 2;\n}\n\n\/* Typography *\/\n.updates-eyebrow {\n  font-family: 'Inter', sans-serif;\n  font-size: 11px;\n  letter-spacing: 0.38em;\n  text-transform: uppercase;\n  color: var(--hs-gold-bright);\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  margin-bottom: 26px;\n}\n.updates-eyebrow::before {\n  content: '';\n  width: 60px; height: 1px;\n  background: linear-gradient(90deg, transparent, var(--hs-gold-bright));\n}\n\n.updates-title {\n  font-family: 'Playfair Display', serif;\n  font-size: clamp(2.2rem, 5vw, 3.5rem);\n  font-weight: 900;\n  color: var(--hs-white);\n  line-height: 1.1;\n  margin-bottom: 40px;\n}\n.updates-title em {\n  color: var(--hs-gold-bright);\n  font-style: italic;\n  font-weight: 700;\n}\n\n\/* Tabs *\/\n.updates-tab {\n  padding: 12px 24px;\n  font-size: 0.75rem;\n  letter-spacing: 0.15em;\n  text-transform: uppercase;\n  background: rgba(255, 255, 255, 0.03);\n  border: 1px solid rgba(240, 192, 64, 0.2);\n  color: var(--hs-white);\n  cursor: pointer;\n  border-radius: 50px;\n  transition: all 0.4s ease;\n}\n.updates-tab.active, .updates-tab:hover {\n  background: rgba(240, 192, 64, 0.1);\n  border-color: var(--hs-gold-bright);\n  color: var(--hs-gold-bright);\n  box-shadow: 0 0 20px rgba(240, 192, 64, 0.15);\n}\n\n\/* Cards *\/\n.updates-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; margin-top: 50px; }\n\n.update-card {\n  background: rgba(255, 255, 255, 0.03);\n  border: 1px solid rgba(240, 192, 64, 0.15);\n  border-radius: 4px;\n  transition: all 0.4s ease;\n  backdrop-filter: blur(4px);\n}\n.update-card:hover {\n  background: rgba(240, 192, 64, 0.05);\n  border-color: rgba(240, 192, 64, 0.5);\n  transform: translateY(-5px);\n}\n\n.update-card-title {\n  font-family: 'Playfair Display', serif;\n  font-size: 1.3rem;\n  font-weight: 700;\n  color: var(--hs-white);\n}\n\n.update-card-excerpt {\n  font-family: 'Cormorant Garamond', serif;\n  font-size: 1.05rem;\n  color: var(--hs-text-light);\n  line-height: 1.7;\n}\n\n\/* Footer & Buttons *\/\n.updates-all-link {\n  background: linear-gradient(135deg, var(--hs-gold-warm), var(--hs-gold-bright));\n  color: var(--hs-purple-deep);\n  font-weight: 600;\n  padding: 15px 35px;\n  border-radius: 50px;\n  text-decoration: none;\n  font-size: 0.8rem;\n  letter-spacing: 0.15em;\n  text-transform: uppercase;\n}\n<\/style>\n\n<!-- ============================================================\n     STA BARBARA MISSION CENTER \u2014 LATEST PARISH UPDATES\n     WordPress Custom HTML Block \u2014 fully self-contained\n     Paste into: Gutenberg > Custom HTML block\n     ============================================================ -->\n\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&amp;family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&amp;family=Inter:wght@300;400;500;600&amp;display=swap\">\n\n<style>\n\/* \u2500\u2500 SCOPED TO #sbmc-updates \u2014 zero global bleed \u2500\u2500 *\/\n#sbmc-updates {\n  --su-pd:  #1e0a3c;\n  --su-pm:  #3b1278;\n  --su-pg:  #6b35b8;\n  --su-gb:  #f0c040;\n  --su-gw:  #d4982a;\n  --su-gm:  #9a6f2a;\n  --su-cr:  #f9f2e3;\n  --su-wh:  #ffffff;\n  --su-tl:  rgba(255,255,255,0.85);\n  --su-tm:  rgba(255,255,255,0.55);\n\n  position: relative !important;\n  width: 100% !important;\n  padding: 110px 0 130px !important;\n  background: linear-gradient(175deg,#120228 0%,#2a0d52 35%,#1a0435 65%,#0e0120 100%) !important;\n  overflow: hidden !important;\n  color: var(--su-wh) !important;\n  font-family: 'Inter', sans-serif !important;\n  box-sizing: border-box !important;\n}\n#sbmc-updates *, #sbmc-updates *::before, #sbmc-updates *::after {\n  box-sizing: border-box;\n}\n#sbmc-updates a  { color: inherit; text-decoration: none; }\n#sbmc-updates p  { margin: 0; padding: 0; }\n#sbmc-updates h2, #sbmc-updates h3 { margin: 0; padding: 0; font-weight: inherit; }\n\n\/* \u2500\u2500 ambient glow \u2500\u2500 *\/\n#sbmc-updates::before {\n  content:'';\n  position:absolute; top:-80px; left:50%;\n  transform:translateX(-50%);\n  width:1100px; height:700px;\n  background:radial-gradient(ellipse at 50% 20%,rgba(240,192,64,.13) 0%,rgba(107,53,184,.08) 40%,transparent 70%);\n  pointer-events:none; z-index:0;\n  animation:suCrownGlow 7s ease-in-out infinite;\n}\n@keyframes suCrownGlow {\n  0%,100%{ opacity:.7; transform:translateX(-50%) scale(1); }\n  50%    { opacity:1;  transform:translateX(-50%) scale(1.1); }\n}\n\n\/* \u2500\u2500 canvas \u2500\u2500 *\/\n#su-canvas {\n  position:absolute; top:0; left:0; right:0; bottom:0;\n  width:100%; height:100%;\n  pointer-events:none; opacity:.28; z-index:1;\n}\n\n\/* \u2500\u2500 gold side borders \u2500\u2500 *\/\n.su-border {\n  position:absolute; top:0; bottom:0; width:5px;\n  background:linear-gradient(180deg,transparent,var(--su-gb),var(--su-gw),transparent);\n  animation:suBShimmer 4s ease-in-out infinite alternate; z-index:2;\n}\n.su-border.l { left:0; }\n.su-border.r { right:0; animation-delay:2s; }\n@keyframes suBShimmer { from{opacity:.35} to{opacity:1} }\n\n\/* \u2500\u2500 rays \u2500\u2500 *\/\n.su-rays {\n  position:absolute; top:0; left:0;\n  width:100%; height:100%; pointer-events:none; overflow:hidden; z-index:1;\n}\n.su-rays span {\n  position:absolute; top:-60px; width:1px; height:130%;\n  background:linear-gradient(180deg,rgba(240,192,64,.18),transparent);\n  transform-origin:top center;\n  animation:suRayFlicker 5s ease-in-out infinite;\n}\n@keyframes suRayFlicker { 0%,100%{opacity:.2} 50%{opacity:.8} }\n\n\/* \u2500\u2500 rose window \u2500\u2500 *\/\n.su-rose {\n  position:absolute; top:50%; left:50%;\n  transform:translate(-50%,-50%);\n  width:780px; height:780px;\n  opacity:.055; pointer-events:none; z-index:1;\n  animation:suRoseRot 100s linear infinite;\n}\n@keyframes suRoseRot {\n  from{transform:translate(-50%,-50%) rotate(0deg)}\n  to  {transform:translate(-50%,-50%) rotate(360deg)}\n}\n\n\/* \u2500\u2500 particles \u2500\u2500 *\/\n#su-particles {\n  position:absolute; inset:0;\n  pointer-events:none; overflow:hidden; z-index:2;\n}\n.su-particle {\n  position:absolute; border-radius:50%; pointer-events:none;\n  animation:suParticleDrift linear infinite;\n}\n@keyframes suParticleDrift {\n  0%  { transform:translateY(0) rotate(0deg); opacity:0; }\n  10% { opacity:1; }\n  90% { opacity:.4; }\n  100%{ transform:translateY(-110vh) rotate(360deg); opacity:0; }\n}\n\n\/* \u2500\u2500 top arch line \u2500\u2500 *\/\n.su-arch {\n  position:absolute; top:40px; left:50%;\n  transform:translateX(-50%);\n  width:320px; height:60px;\n  pointer-events:none; z-index:3;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   INNER WRAP\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.su-wrap {\n  max-width:1150px; margin:0 auto;\n  padding:0 36px; position:relative; z-index:10;\n}\n\n\/* \u2500\u2500 eyebrow \u2500\u2500 *\/\n.su-eyebrow {\n  display:flex; align-items:center; justify-content:center; gap:16px;\n  margin-bottom:26px;\n  opacity:0; animation:suFadeDown .9s ease forwards .2s;\n}\n.su-eline { width:60px; height:1px; background:linear-gradient(90deg,transparent,var(--su-gb)); }\n.su-eline.r { background:linear-gradient(90deg,var(--su-gb),transparent); }\n.su-etext {\n  font-family:'Inter',sans-serif; font-size:11px; font-weight:500;\n  letter-spacing:.38em; text-transform:uppercase; color:var(--su-gb);\n}\n\n\/* \u2500\u2500 headline row \u2500\u2500 *\/\n.su-header {\n  display:flex; justify-content:space-between; align-items:flex-end;\n  gap:24px; flex-wrap:wrap; margin-bottom:50px;\n  opacity:0; animation:suFadeDown 1s ease forwards .4s;\n}\n.su-headline-wrap {}\n.su-headline {\n  font-family:'Playfair Display',serif;\n  font-size:clamp(2.2rem,4vw,3.6rem);\n  font-weight:900; color:var(--su-wh); line-height:1.1;\n}\n.su-headline em {\n  font-style:italic; color:var(--su-gb);\n}\n.su-sub {\n  font-family:'Cormorant Garamond',serif;\n  font-size:clamp(1rem,1.6vw,1.15rem); font-weight:300;\n  color:var(--su-tl); margin-top:8px !important; line-height:1.7;\n}\n\n\/* \u2500\u2500 TABS \u2500\u2500 *\/\n.su-tabs {\n  display:flex; flex-wrap:wrap; gap:10px; align-self:flex-end;\n}\n.su-tab {\n  padding:10px 20px;\n  font-family:'Inter',sans-serif; font-size:10px;\n  letter-spacing:.25em; text-transform:uppercase;\n  background:rgba(107,53,184,.18);\n  border:1px solid rgba(240,192,64,.2);\n  color:var(--su-tm); cursor:pointer;\n  border-radius:30px;\n  transition:color .3s,border-color .3s,transform .3s,box-shadow .3s;\n}\n.su-tab:hover {\n  color:var(--su-gb); border-color:var(--su-gb);\n  transform:translateY(-2px);\n}\n.su-tab.active {\n  background:linear-gradient(135deg,var(--su-pm),var(--su-pd));\n  color:var(--su-gb); border-color:var(--su-gb);\n  box-shadow:0 0 18px rgba(240,192,64,.3);\n  transform:scale(1.05);\n}\n\n\/* \u2500\u2500 ornament \u2500\u2500 *\/\n.su-ornament {\n  display:flex; align-items:center; justify-content:center; gap:14px;\n  margin-bottom:48px;\n  opacity:0; animation:suFadeIn 1s ease forwards .8s;\n}\n.su-ornament span { font-size:16px; color:var(--su-gb); line-height:1; }\n.su-orn-line { width:80px; height:1px; background:linear-gradient(90deg,transparent,var(--su-gm)); }\n.su-orn-line.r { background:linear-gradient(90deg,var(--su-gm),transparent); }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   GRID & CARDS\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.su-grid {\n  display:grid;\n  grid-template-columns:repeat(3,1fr);\n  gap:24px;\n}\n\n.su-card {\n  position:relative;\n  background:rgba(255,255,255,.04);\n  border:1px solid rgba(240,192,64,.15);\n  border-radius:2px; overflow:hidden;\n  transition:transform .4s ease,border-color .4s ease,box-shadow .4s ease,background .4s ease;\n  opacity:0; transform:translateY(30px);\n}\n#sbmc-updates.su-js-ready .su-card         { opacity:0; transform:translateY(30px); }\n#sbmc-updates.su-js-ready .su-card.su-visible { opacity:1; transform:translateY(0); }\n\n.su-card:hover {\n  transform:translateY(-8px) !important;\n  border-color:rgba(240,192,64,.55);\n  box-shadow:0 0 40px rgba(240,192,64,.16),inset 0 0 30px rgba(240,192,64,.04);\n  background:rgba(240,192,64,.06);\n}\n\n\/* shimmer sweep *\/\n.su-card::before {\n  content:''; position:absolute; top:0; left:-120%;\n  width:60%; height:100%;\n  background:linear-gradient(90deg,transparent,rgba(240,192,64,.07),transparent);\n  transition:left .6s ease; z-index:1;\n}\n.su-card:hover::before { left:160%; }\n\n\/* top accent line on hover *\/\n.su-card::after {\n  content:''; position:absolute; top:0; left:15%; right:15%; height:2px;\n  background:linear-gradient(90deg,transparent,var(--su-gb),transparent);\n  opacity:0; transition:opacity .4s ease; z-index:2;\n}\n.su-card:hover::after { opacity:1; }\n\n\/* corner brackets *\/\n.su-corner-tl, .su-corner-br {\n  position:absolute; width:14px; height:14px;\n  border-color:rgba(240,192,64,.3); border-style:solid; z-index:3;\n}\n.su-corner-tl { top:8px;    left:8px;   border-width:1px 0 0 1px; }\n.su-corner-br { bottom:8px; right:8px;  border-width:0 1px 1px 0; }\n\n\/* \u2500\u2500 image area \u2500\u2500 *\/\n.su-card-img {\n  height:190px; position:relative; overflow:hidden;\n  background:linear-gradient(135deg,var(--su-pd),var(--su-pm));\n}\n.su-card-img img {\n  width:100%; height:100%; object-fit:cover;\n  transition:transform .45s ease;\n  display:block;\n}\n.su-card:hover .su-card-img img { transform:scale(1.08); }\n\n\/* placeholder when no image *\/\n.su-card-img-placeholder {\n  width:100%; height:100%;\n  display:flex; align-items:center; justify-content:center;\n  background:linear-gradient(135deg,rgba(59,18,120,.8),rgba(30,10,60,.9));\n}\n.su-card-img-placeholder span {\n  font-size:2.5rem;\n  filter:drop-shadow(0 0 14px rgba(240,192,64,.6));\n  animation:suIconPulse 3s ease-in-out infinite alternate;\n}\n@keyframes suIconPulse {\n  from{filter:drop-shadow(0 0 5px rgba(240,192,64,.3))}\n  to  {filter:drop-shadow(0 0 18px rgba(240,192,64,.9))}\n}\n\n\/* category badge *\/\n.su-cat-badge {\n  position:absolute; top:12px; left:12px;\n  font-family:'Inter',sans-serif; font-size:9px;\n  letter-spacing:.2em; text-transform:uppercase;\n  background:rgba(30,10,60,.88); border:1px solid var(--su-gb);\n  color:var(--su-gb); padding:4px 12px; border-radius:20px;\n  z-index:4;\n  backdrop-filter:blur(4px);\n}\n\n\/* \u2500\u2500 card body \u2500\u2500 *\/\n.su-card-body { padding:26px 22px 22px; position:relative; z-index:3; }\n\n.su-card-date {\n  font-family:'Inter',sans-serif; font-size:10px;\n  letter-spacing:.25em; text-transform:uppercase;\n  color:var(--su-gb); margin-bottom:10px; display:block;\n}\n\n.su-card-title {\n  font-family:'Playfair Display',serif; font-size:1.1rem;\n  font-weight:700; color:var(--su-wh); margin-bottom:10px;\n  line-height:1.35;\n}\n\n.su-card-excerpt {\n  font-family:'Cormorant Garamond',serif; font-size:1rem;\n  font-weight:300; color:var(--su-tl); line-height:1.72;\n  margin-bottom:18px;\n}\n\n.su-card-link {\n  display:inline-flex; align-items:center; gap:8px;\n  font-family:'Inter',sans-serif; font-size:10px;\n  letter-spacing:.25em; text-transform:uppercase;\n  color:var(--su-gb); text-decoration:none !important;\n  border-bottom:1px solid rgba(240,192,64,.35);\n  padding-bottom:4px;\n  transition:border-color .3s,gap .3s;\n}\n.su-card-link:hover { border-color:var(--su-gb); gap:12px; }\n\n\/* \u2500\u2500 empty \/ loading state \u2500\u2500 *\/\n.su-loading {\n  grid-column:1\/-1; text-align:center;\n  padding:60px 20px;\n  font-family:'Cormorant Garamond',serif;\n  font-size:1.2rem; color:var(--su-gb);\n  animation:suFadeIn .8s ease forwards;\n}\n.su-loading::before {\n  content:'\u2726';\n  display:block; font-size:2rem; margin-bottom:16px;\n  animation:suIconPulse 2s ease-in-out infinite alternate;\n}\n\n\/* \u2500\u2500 empty\/no-posts \u2500\u2500 *\/\n.su-empty {\n  grid-column:1\/-1; text-align:center; padding:60px 20px;\n  font-family:'Cormorant Garamond',serif;\n  font-size:1.1rem; color:var(--su-tm);\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   FOOTER BAR\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.su-footer {\n  margin-top:40px; padding:22px 30px;\n  display:flex; justify-content:space-between; align-items:center; gap:20px;\n  background:linear-gradient(135deg,rgba(59,18,120,.35),rgba(14,1,32,.7));\n  border:1px solid rgba(240,192,64,.18); border-radius:2px;\n  backdrop-filter:blur(12px);\n  opacity:0; animation:suFadeIn 1.2s ease forwards 1.2s;\n  flex-wrap:wrap;\n}\n\n#su-count {\n  font-family:'Inter',sans-serif; font-size:13px;\n  font-weight:600; color:var(--su-wh);\n  display:flex; align-items:center; gap:10px;\n}\n#su-count::before { content:'\u2726'; color:var(--su-gb); }\n\n.su-all-link {\n  padding:13px 30px;\n  background:linear-gradient(135deg,var(--su-gw),var(--su-gb));\n  color:var(--su-pd) !important; font-family:'Inter',sans-serif;\n  font-size:10px; font-weight:700; letter-spacing:.2em;\n  text-transform:uppercase; text-decoration:none !important;\n  border-radius:50px;\n  transition:transform .3s,box-shadow .3s;\n  box-shadow:0 6px 24px rgba(240,192,64,.3);\n  position:relative; overflow:hidden;\n}\n.su-all-link::after {\n  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;\n  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);\n  transition:left .5s ease;\n}\n.su-all-link:hover { transform:translateY(-3px); box-shadow:0 10px 32px rgba(240,192,64,.5); }\n.su-all-link:hover::after { left:100%; }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   KEYFRAMES\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n@keyframes suFadeDown { from{opacity:0;transform:translateY(-22px)} to{opacity:1;transform:translateY(0)} }\n@keyframes suFadeIn   { from{opacity:0} to{opacity:1} }\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   RESPONSIVE\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n@media(max-width:1024px){\n  .su-grid { grid-template-columns:repeat(2,1fr); }\n}\n@media(max-width:768px){\n  .su-header { flex-direction:column; align-items:flex-start; }\n  .su-grid   { grid-template-columns:1fr; }\n  #sbmc-updates { padding:80px 0 100px !important; }\n  .su-footer { flex-direction:column; text-align:center; }\n  .su-all-link { width:100%; text-align:center; display:block; }\n  .su-wrap { padding:0 20px; }\n}\n@media(max-width:540px){\n  .su-headline { font-size:2rem !important; }\n  .su-rose { width:340px !important; height:340px !important; }\n}\n<\/style>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     HTML\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section id=\"sbmc-updates\" aria-label=\"Latest Parish Updates\">\n\n  <!-- Arch deco -->\n  <div class=\"su-arch\" aria-hidden=\"true\">\n    <svg viewBox=\"0 0 320 60\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n      <defs>\n        <linearGradient id=\"su-arch-grad\" x1=\"0\" y1=\"0\" x2=\"320\" y2=\"0\" gradientUnits=\"userSpaceOnUse\">\n          <stop offset=\"0\" stop-color=\"#9a6f2a\" stop-opacity=\"0\"><\/stop>\n          <stop offset=\"0.5\" stop-color=\"#f0c040\"><\/stop>\n          <stop offset=\"1\" stop-color=\"#9a6f2a\" stop-opacity=\"0\"><\/stop>\n        <\/linearGradient>\n      <\/defs>\n      <path d=\"M0 0C80 0 120 60 160 60C200 60 240 0 320 0\" stroke=\"url(#su-arch-grad)\" stroke-width=\"2\" opacity=\"0.6\"><\/path>\n    <\/svg>\n  <\/div>\n\n  <!-- Canvas -->\n  <canvas id=\"su-canvas\" aria-hidden=\"true\"><\/canvas>\n\n  <!-- Rays -->\n  <div class=\"su-rays\" id=\"su-rays\" aria-hidden=\"true\"><\/div>\n\n  <!-- Rose window -->\n  <svg class=\"su-rose\" viewBox=\"0 0 400 400\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" aria-hidden=\"true\">\n    <circle cx=\"200\" cy=\"200\" r=\"192\" stroke=\"#f0c040\" stroke-width=\"1.2\"><\/circle>\n    <circle cx=\"200\" cy=\"200\" r=\"155\" stroke=\"#f0c040\" stroke-width=\".8\"><\/circle>\n    <circle cx=\"200\" cy=\"200\" r=\"110\" stroke=\"#f0c040\" stroke-width=\".8\"><\/circle>\n    <circle cx=\"200\" cy=\"200\" r=\"66\" stroke=\"#f0c040\" stroke-width=\".8\"><\/circle>\n    <circle cx=\"200\" cy=\"200\" r=\"28\" stroke=\"#f0c040\" stroke-width=\"1\"><\/circle>\n    <g stroke=\"#f0c040\" stroke-width=\".7\">\n      <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(0 200 200)\"><\/line>\n      <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(15 200 200)\"><\/line>\n      <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(30 200 200)\"><\/line>\n      <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(45 200 200)\"><\/line>\n      <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(60 200 200)\"><\/line>\n      <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(75 200 200)\"><\/line>\n      <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(90 200 200)\"><\/line>\n      <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(105 200 200)\"><\/line>\n      <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(120 200 200)\"><\/line>\n      <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(135 200 200)\"><\/line>\n      <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(150 200 200)\"><\/line>\n      <line x1=\"200\" y1=\"8\" x2=\"200\" y2=\"392\" transform=\"rotate(165 200 200)\"><\/line>\n    <\/g>\n    <g fill=\"rgba(240,192,64,0.05)\" stroke=\"#f0c040\" stroke-width=\".7\">\n      <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(0 200 200)\"><\/ellipse>\n      <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(30 200 200)\"><\/ellipse>\n      <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(60 200 200)\"><\/ellipse>\n      <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(90 200 200)\"><\/ellipse>\n      <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(120 200 200)\"><\/ellipse>\n      <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(150 200 200)\"><\/ellipse>\n      <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(180 200 200)\"><\/ellipse>\n      <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(210 200 200)\"><\/ellipse>\n      <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(240 200 200)\"><\/ellipse>\n      <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(270 200 200)\"><\/ellipse>\n      <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(300 200 200)\"><\/ellipse>\n      <ellipse cx=\"200\" cy=\"122\" rx=\"16\" ry=\"40\" transform=\"rotate(330 200 200)\"><\/ellipse>\n    <\/g>\n  <\/svg>\n\n  <div class=\"su-border l\" aria-hidden=\"true\"><\/div>\n  <div class=\"su-border r\" aria-hidden=\"true\"><\/div>\n  <div id=\"su-particles\" aria-hidden=\"true\"><\/div>\n\n  <!-- \u2500\u2500\u2500 CONTENT \u2500\u2500\u2500 -->\n  <div class=\"su-wrap\">\n\n    <!-- Eyebrow -->\n    <div class=\"su-eyebrow\" aria-hidden=\"true\">\n      <span class=\"su-eline\"><\/span>\n      <span class=\"su-etext\">Stay Informed<\/span>\n      <span class=\"su-eline r\"><\/span>\n    <\/div>\n\n    <!-- Header row -->\n    <div class=\"su-header\">\n      <div class=\"su-headline-wrap\">\n        <h2 class=\"su-headline\">Latest <em>Parish Updates<\/em><\/h2>\n        <p class=\"su-sub\">News, events, and stories from our growing community of faith.<\/p>\n      <\/div>\n      <div class=\"su-tabs\" id=\"su-tabs\" role=\"tablist\" aria-label=\"Filter posts by category\"><\/div>\n    <\/div>\n\n    <!-- Ornament -->\n    <div class=\"su-ornament\" aria-hidden=\"true\">\n      <span class=\"su-orn-line\"><\/span>\n      <span>\u2726<\/span><span>\u271d<\/span><span>\u2726<\/span>\n      <span class=\"su-orn-line r\"><\/span>\n    <\/div>\n\n    <!-- Grid -->\n    <div class=\"su-grid\" id=\"su-grid\" role=\"list\">\n      <div class=\"su-loading\">Loading latest updates\u2026<\/div>\n    <\/div>\n\n    <!-- Footer bar -->\n    <div class=\"su-footer\">\n      <span id=\"su-count\">Loading\u2026<\/span>\n      <a class=\"su-all-link\" id=\"su-all-link\" href=\"#\">View All Posts \u2192<\/a>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     JAVASCRIPT\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<script>\n(function () {\n  'use strict';\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     CONFIG \u2014 update SITE_URL only\n  \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  var SITE_URL = 'https:\/\/demo6.yinwoodweb.com\/casasahanibaba';\n  var API      = SITE_URL + '\/wp-json\/wp\/v2';\n  var BLOG     = SITE_URL + '\/blog\/';\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     INIT WHEN DOM IS READY\n  \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  function init() {\n    var section = document.getElementById('sbmc-updates');\n    if (!section) return;\n\n    section.classList.add('su-js-ready');\n\n    var grid    = document.getElementById('su-grid');\n    var tabsEl  = document.getElementById('su-tabs');\n    var countEl = document.getElementById('su-count');\n    var allLink = document.getElementById('su-all-link');\n\n    if (allLink) allLink.href = BLOG;\n\n    \/* \u2500\u2500 helpers \u2500\u2500 *\/\n    function cleanText(html) {\n      var d = document.createElement('div');\n      d.innerHTML = html;\n      return (d.textContent || d.innerText || '').trim();\n    }\n\n    function formatDate(iso) {\n      var d = new Date(iso);\n      return d.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });\n    }\n\n    function setActiveTab(btn) {\n      var allBtns = tabsEl.querySelectorAll('.su-tab');\n      for (var i = 0; i < allBtns.length; i++) allBtns[i].classList.remove('active');\n      btn.classList.add('active');\n    }\n\n    \/* \u2500\u2500 category icon mapping \u2500\u2500 *\/\n    var CAT_ICONS = {\n      'news':       '\ud83d\udcf0',\n      'events':     '\ud83c\udf89',\n      'ministry':   '\ud83d\ude4f',\n      'announcement':'\ud83d\udce2',\n      'mission':    '\u271d\ufe0f',\n      'community':  '\ud83e\udd1d',\n      'general':    '\u2728'\n    };\n    function catIcon(name) {\n      var key = name.toLowerCase();\n      for (var k in CAT_ICONS) {\n        if (key.indexOf(k) !== -1) return CAT_ICONS[k];\n      }\n      return '\u2728';\n    }\n\n    \/* \u2500\u2500 render posts \u2500\u2500 *\/\n    function render(posts) {\n      grid.innerHTML = '';\n\n      if (!posts || posts.length === 0) {\n        grid.innerHTML = '<div class=\"su-empty\">No posts found in this category.<\/div>';\n        if (countEl) countEl.textContent = 'No posts found';\n        return;\n      }\n\n      posts.forEach(function (p, idx) {\n        \/* category *\/\n        var cat = 'General';\n        if (p._embedded && p._embedded['wp:term']) {\n          p._embedded['wp:term'].forEach(function (termGroup) {\n            termGroup.forEach(function (term) {\n              if (term.taxonomy === 'category' && term.name.toLowerCase() !== 'uncategorized') {\n                cat = term.name;\n              }\n            });\n          });\n        }\n\n        \/* featured image *\/\n        var imgSrc = '';\n        if (p._embedded && p._embedded['wp:featuredmedia'] && p._embedded['wp:featuredmedia'][0]) {\n          imgSrc = p._embedded['wp:featuredmedia'][0].source_url || '';\n        }\n\n        \/* excerpt *\/\n        var excerpt = cleanText(p.excerpt ? p.excerpt.rendered : '');\n        if (excerpt.length > 120) excerpt = excerpt.substring(0, 120) + '\u2026';\n\n        \/* card element *\/\n        var card = document.createElement('article');\n        card.className = 'su-card';\n        card.setAttribute('role', 'listitem');\n\n        var imgHtml = imgSrc\n          ? '<img decoding=\"async\" src=\"' + imgSrc + '\" alt=\"' + cleanText(p.title.rendered) + '\" loading=\"lazy\">'\n          : '<div class=\"su-card-img-placeholder\"><span>' + catIcon(cat) + '<\/span><\/div>';\n\n        card.innerHTML =\n          '<div class=\"su-corner-tl\" aria-hidden=\"true\"><\/div>' +\n          '<div class=\"su-corner-br\" aria-hidden=\"true\"><\/div>' +\n          '<div class=\"su-card-img\">' +\n            imgHtml +\n            '<span class=\"su-cat-badge\">' + cat + '<\/span>' +\n          '<\/div>' +\n          '<div class=\"su-card-body\">' +\n            '<span class=\"su-card-date\">' + formatDate(p.date) + '<\/span>' +\n            '<h3 class=\"su-card-title\">' + p.title.rendered + '<\/h3>' +\n            '<p class=\"su-card-excerpt\">' + excerpt + '<\/p>' +\n            '<a class=\"su-card-link\" href=\"' + p.link + '\">Read More \u2192<\/a>' +\n          '<\/div>';\n\n        grid.appendChild(card);\n\n        \/* staggered scroll-reveal *\/\n        (function (el, delay) {\n          setTimeout(function () {\n            if ('IntersectionObserver' in window) {\n              var io = new IntersectionObserver(function (entries) {\n                entries.forEach(function (e) {\n                  if (e.isIntersecting) {\n                    e.target.classList.add('su-visible');\n                    io.unobserve(e.target);\n                  }\n                });\n              }, { threshold: 0.1 });\n              io.observe(el);\n            } else {\n              el.classList.add('su-visible');\n            }\n          }, delay);\n        })(card, idx * 100);\n      });\n\n      if (countEl) countEl.textContent = 'Showing ' + posts.length + ' post' + (posts.length !== 1 ? 's' : '');\n    }\n\n    \/* \u2500\u2500 fetch helpers \u2500\u2500 *\/\n    function fetchPosts(url) {\n      grid.innerHTML = '<div class=\"su-loading\">Loading latest updates\u2026<\/div>';\n      if (countEl) countEl.textContent = 'Loading\u2026';\n      fetch(url)\n        .then(function (r) { return r.json(); })\n        .then(render)\n        .catch(function () {\n          grid.innerHTML = '<div class=\"su-empty\">Unable to load posts. Please try again later.<\/div>';\n          if (countEl) countEl.textContent = '';\n        });\n    }\n\n    function loadAll() {\n      fetchPosts(API + '\/posts?_embed=1&per_page=6');\n    }\n\n    \/* \u2500\u2500 fetch categories & build tabs \u2500\u2500 *\/\n    fetch(API + '\/categories?per_page=20')\n      .then(function (r) { return r.json(); })\n      .then(function (cats) {\n        tabsEl.innerHTML = '';\n\n        \/* \"All\" tab *\/\n        var allBtn = document.createElement('button');\n        allBtn.className = 'su-tab active';\n        allBtn.textContent = 'All';\n        allBtn.setAttribute('role', 'tab');\n        allBtn.setAttribute('aria-selected', 'true');\n        allBtn.addEventListener('click', function () {\n          setActiveTab(allBtn);\n          loadAll();\n        });\n        tabsEl.appendChild(allBtn);\n\n        \/* category tabs (skip empty \/ uncategorized) *\/\n        cats.forEach(function (c) {\n          if (c.count === 0) return;\n          var btn = document.createElement('button');\n          btn.className = 'su-tab';\n          btn.textContent = c.name;\n          btn.setAttribute('role', 'tab');\n          btn.setAttribute('aria-selected', 'false');\n          btn.addEventListener('click', function () {\n            setActiveTab(btn);\n            fetchPosts(API + '\/posts?categories=' + c.id + '&_embed=1&per_page=6');\n          });\n          tabsEl.appendChild(btn);\n        });\n      })\n      .catch(function () { \/* tabs remain empty; grid still loads *\/ });\n\n    \/* \u2500\u2500 initial load \u2500\u2500 *\/\n    loadAll();\n\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n       BACKGROUND ANIMATIONS\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n    \/* 1. MOSAIC CANVAS *\/\n    (function () {\n      var c = document.getElementById('su-canvas');\n      if (!c) return;\n      var ctx = c.getContext('2d');\n      var W = 0, H = 0, tiles = [], rafId;\n\n      var COLS = [\n        'rgba(107,53,184,', 'rgba(59,18,120,',\n        'rgba(240,192,64,', 'rgba(212,152,42,',\n        'rgba(154,111,42,', 'rgba(180,80,200,',\n        'rgba(30,10,60,',   'rgba(90,20,150,'\n      ];\n\n      function Tile(x, y, s) {\n        this.x = x; this.y = y; this.s = s;\n        this.col   = COLS[Math.floor(Math.random() * COLS.length)];\n        this.phase = Math.random() * Math.PI * 2;\n        this.spd   = Math.random() * 0.004 + 0.001;\n      }\n      Tile.prototype.draw = function (t) {\n        var a = 0.04 + 0.42 * (0.5 + 0.5 * Math.sin(t * this.spd + this.phase));\n        ctx.fillStyle = this.col + a + ')';\n        ctx.fillRect(this.x + 1, this.y + 1, this.s - 2, this.s - 2);\n      };\n\n      function buildTiles() {\n        tiles = [];\n        var S = 52;\n        for (var x = 0; x < W; x += S)\n          for (var y = 0; y < H; y += S)\n            tiles.push(new Tile(x, y, S));\n      }\n\n      function resize() {\n        W = c.width  = section.offsetWidth  || window.innerWidth;\n        H = c.height = section.offsetHeight || 800;\n        buildTiles();\n      }\n\n      var pollCount = 0;\n      function waitForSize() {\n        if (section.offsetWidth > 0 && section.offsetHeight > 0) {\n          resize();\n          var t = 0;\n          (function loop() {\n            ctx.clearRect(0, 0, W, H);\n            t++;\n            for (var i = 0; i < tiles.length; i++) tiles[i].draw(t);\n            rafId = requestAnimationFrame(loop);\n          })();\n        } else if (pollCount++ < 30) {\n          setTimeout(waitForSize, 100);\n        }\n      }\n      waitForSize();\n      window.addEventListener('resize', function () {\n        cancelAnimationFrame(rafId);\n        resize();\n      });\n    })();\n\n    \/* 2. LIGHT RAYS *\/\n    (function () {\n      var wrap = document.getElementById('su-rays');\n      if (!wrap) return;\n      for (var i = 0; i < 16; i++) {\n        var s = document.createElement('span');\n        var angle = -45 + (90 \/ 16) * i;\n        var left  = 25 + (50 \/ 16) * i;\n        s.style.cssText =\n          'left:' + left.toFixed(1) + '%;' +\n          'transform:rotate(' + angle.toFixed(1) + 'deg);' +\n          'animation-delay:' + (i * 0.3).toFixed(2) + 's;' +\n          'animation-duration:' + (4 + Math.random() * 4).toFixed(1) + 's;' +\n          'opacity:' + (0.1 + Math.random() * 0.2).toFixed(2) + ';';\n        wrap.appendChild(s);\n      }\n    })();\n\n    \/* 3. FLOATING PARTICLES *\/\n    (function () {\n      var wrap = document.getElementById('su-particles');\n      if (!wrap) return;\n      var colors = ['rgba(240,192,64,', 'rgba(180,80,200,', 'rgba(107,53,184,', 'rgba(255,255,255,'];\n\n      function spawn() {\n        var p = document.createElement('div');\n        p.className = 'su-particle';\n        var sz    = 2 + Math.random() * 6;\n        var col   = colors[Math.floor(Math.random() * colors.length)];\n        var alpha = (0.3 + Math.random() * 0.5).toFixed(2);\n        p.style.cssText =\n          'width:'  + sz.toFixed(1) + 'px;' +\n          'height:' + sz.toFixed(1) + 'px;' +\n          'left:'   + (Math.random() * 100).toFixed(1) + '%;' +\n          'bottom:-10px;' +\n          'background:' + col + alpha + ');' +\n          'animation-duration:' + (8 + Math.random() * 10).toFixed(1) + 's;' +\n          'animation-delay:'    + (Math.random() * 3).toFixed(2) + 's;' +\n          'box-shadow:0 0 ' + (sz * 2).toFixed(0) + 'px ' + col + '0.6);';\n        wrap.appendChild(p);\n        setTimeout(function () {\n          if (p.parentNode) p.parentNode.removeChild(p);\n        }, 18000);\n      }\n\n      for (var i = 0; i < 16; i++) {\n        (function (n) { setTimeout(spawn, n * 300); })(i);\n      }\n      setInterval(spawn, 1200);\n    })();\n\n  } \/* end init() *\/\n\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', init);\n  } else {\n    init();\n  }\n\n})();\n<\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Sta. Barbara Mission Center A Community of Faith &amp; Mission Serving Brgy. Casasahan, Gumaca, Quezon through worship, prayer, and service. [&hellip;]<\/p>\n","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":"@media only screen and (max-width: 767px) {\n.uagb-slider-container .swiper-button-prev, .uagb-slider-container .swiper-button-next, .uagb-slick-carousel button.slick-arrow {\n    display: none;\n}\n}","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":"STA Barbara Mission Center - Best Web Developer in Laguna","description":"Sta. Barbara Mission Center A Community of Faith &amp; Mission Serving Brgy. Casasahan, Gumaca, Quezon through worship, prayer, and service. A growing Christ-ce"},"footnotes":""},"class_list":["post-15","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":"Everest Co","author_link":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/blog\/author\/phwpywadsa623\/"},"uagb_comment_info":0,"uagb_excerpt":"Sta. Barbara Mission Center A Community of Faith &amp; Mission Serving Brgy. Casasahan, Gumaca, Quezon through worship, prayer, and service. [&hellip;]","_links":{"self":[{"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/pages\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/comments?post=15"}],"version-history":[{"count":76,"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/pages\/15\/revisions"}],"predecessor-version":[{"id":709,"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/pages\/15\/revisions\/709"}],"wp:attachment":[{"href":"https:\/\/demo6.yinwoodweb.com\/casasahanibaba\/wp-json\/wp\/v2\/media?parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}