{"id":1032,"date":"2026-04-30T07:29:03","date_gmt":"2026-04-30T07:29:03","guid":{"rendered":"https:\/\/Demo5.yinwoodweb.com\/agro\/?page_id=1032"},"modified":"2026-07-22T02:58:50","modified_gmt":"2026-07-22T02:58:50","slug":"galleries","status":"publish","type":"page","link":"https:\/\/Demo5.yinwoodweb.com\/agro\/galleries\/","title":{"rendered":"Gallery"},"content":{"rendered":"\n<div class=\"wp-block-uagb-container uagb-block-a6bf4e85 alignfull uagb-is-root-container\">\n<!-- Google Fonts -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&#038;family=DM+Sans:wght@400;500;600;700&#038;family=Playfair+Display:wght@700;800;900&#038;display=swap\" rel=\"stylesheet\">\n\n<!-- Material Symbols -->\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,1,0\" \/>\n\n<style>\n  \/* ========================================\n     CSS CUSTOM PROPERTIES\n  ======================================== *\/\n  :root {\n    --gold: #EFD34A;\n    --gold-light: #f5e27a;\n    --gold-dark: #c9a820;\n    --gold-soft: #f8edbe;\n    --olive: #4B4E3A;\n    --olive-light: #6b6f54;\n    --olive-dark: #2e3024;\n    --olive-deeper: #1a1c14;\n    --bg-cream: #faf8f0;\n    --bg-warm: #f5f2e6;\n    --bg-card: #ffffff;\n    --text-body: #3a3c30;\n    --text-muted: #7a7c6e;\n    --shadow-soft: 0 4px 20px rgba(75, 78, 58, 0.08);\n    --shadow-medium: 0 8px 40px rgba(75, 78, 58, 0.12);\n    --shadow-strong: 0 16px 60px rgba(75, 78, 58, 0.18);\n    --radius-sm: 8px;\n    --radius-md: 14px;\n    --radius-lg: 22px;\n    --radius-xl: 32px;\n    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n    --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\n  }\n\n  \/* ========================================\n     RESET & BASE (scoped to .srmc-gallery-page)\n  ======================================== *\/\n  .srmc-gallery-page *,\n  .srmc-gallery-page *::before,\n  .srmc-gallery-page *::after {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n  }\n\n  .srmc-gallery-page {\n    font-family: 'DM Sans', sans-serif;\n    font-size: 16px;\n    line-height: 1.7;\n    color: var(--text-body);\n    background-color: var(--bg-cream);\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    width: 100%;\n    max-width: 100%;\n    overflow-x: hidden;\n  }\n\n  .srmc-gallery-page img {\n    max-width: 100%;\n    height: auto;\n    display: block;\n  }\n\n  .srmc-gallery-page a {\n    text-decoration: none !important;\n  }\n\n  .srmc-gallery-page a:hover,\n  .srmc-gallery-page a:focus,\n  .srmc-gallery-page a:active,\n  .srmc-gallery-page a:visited {\n    text-decoration: none !important;\n  }\n\n  .srmc-gallery-page ul,\n  .srmc-gallery-page ol {\n    list-style: none;\n  }\n\n  .srmc-inner {\n    width: 100%;\n    max-width: 1200px;\n    margin: 0 auto;\n    padding: 0 24px;\n  }\n\n  .srmc-section {\n    padding: 80px 0;\n    position: relative;\n  }\n\n  \/* ========================================\n     TYPOGRAPHY\n  ======================================== *\/\n  .srmc-section-label {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    font-family: 'DM Sans', sans-serif;\n    font-size: 13px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 3px;\n    color: var(--gold-dark);\n    margin-bottom: 16px;\n    padding: 8px 18px;\n    background: linear-gradient(135deg, rgba(239, 211, 74, 0.15), rgba(239, 211, 74, 0.05));\n    border: 1px solid rgba(239, 211, 74, 0.3);\n    border-radius: 100px;\n  }\n\n  .srmc-section-label .material-symbols-rounded {\n    font-size: 18px;\n    color: var(--gold-dark);\n  }\n\n  .srmc-section-label-light {\n    color: var(--gold);\n    background: rgba(239, 211, 74, 0.08);\n    border-color: rgba(239, 211, 74, 0.2);\n  }\n\n  .srmc-section-label-light .material-symbols-rounded {\n    color: var(--gold);\n  }\n\n  .srmc-section-title {\n    font-family: 'Playfair Display', serif;\n    font-weight: 800;\n    font-size: clamp(32px, 5vw, 52px);\n    line-height: 1.15;\n    color: var(--olive-dark);\n    margin-bottom: 16px;\n  }\n\n  .srmc-section-subtitle {\n    font-family: 'Cormorant Garamond', serif;\n    font-size: clamp(18px, 2.5vw, 22px);\n    font-weight: 400;\n    font-style: italic;\n    color: var(--text-muted);\n    max-width: 640px;\n    line-height: 1.6;\n  }\n\n  \/* ========================================\n     BUTTONS \u2014 all solid fills, no outlines\n  ======================================== *\/\n  .srmc-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 10px;\n    font-family: 'DM Sans', sans-serif;\n    font-size: 15px;\n    font-weight: 700;\n    padding: 14px 32px;\n    border-radius: 100px;\n    cursor: pointer;\n    transition: all var(--transition-smooth);\n    border: none;\n    text-decoration: none !important;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .srmc-btn:hover,\n  .srmc-btn:focus,\n  .srmc-btn:active,\n  .srmc-btn:visited {\n    text-decoration: none !important;\n  }\n\n  .srmc-btn .material-symbols-rounded {\n    font-size: 20px;\n    transition: transform var(--transition-bounce);\n  }\n\n  .srmc-btn:hover .material-symbols-rounded {\n    transform: translateX(3px);\n  }\n\n  .srmc-btn-primary {\n    background: var(--gold);\n    color: var(--olive-dark);\n    box-shadow: 0 4px 20px rgba(239, 211, 74, 0.35);\n    text-decoration: none !important;\n  }\n\n  .srmc-btn-primary:hover {\n    background: var(--gold-light);\n    box-shadow: 0 8px 32px rgba(239, 211, 74, 0.45);\n    transform: translateY(-2px);\n    text-decoration: none !important;\n  }\n\n  \/* Solid cream fill for light backgrounds *\/\n  .srmc-btn-outline {\n    background: var(--gold-soft);\n    color: var(--olive-dark);\n    border: none;\n    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\n    text-decoration: none !important;\n  }\n\n  .srmc-btn-outline:hover {\n    background: var(--gold-light);\n    color: var(--olive-dark);\n    transform: translateY(-2px);\n    box-shadow: 0 8px 32px rgba(239, 211, 74, 0.3);\n    text-decoration: none !important;\n  }\n\n  \/* Frosted white fill for dark backgrounds (hero, CTA) *\/\n  .srmc-btn-outline--light {\n    background: rgba(255, 255, 255, 0.15);\n    color: #ffffff;\n    border: none;\n    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n    backdrop-filter: blur(4px);\n    -webkit-backdrop-filter: blur(4px);\n    text-decoration: none !important;\n  }\n\n  .srmc-btn-outline--light:hover {\n    background: var(--gold);\n    color: var(--olive-dark);\n    transform: translateY(-2px);\n    box-shadow: 0 8px 32px rgba(239, 211, 74, 0.4);\n    text-decoration: none !important;\n  }\n\n  .srmc-btn-olive {\n    background: var(--olive);\n    color: var(--gold-soft);\n    box-shadow: 0 4px 20px rgba(75, 78, 58, 0.3);\n    text-decoration: none !important;\n  }\n\n  .srmc-btn-olive:hover {\n    background: var(--olive-dark);\n    transform: translateY(-2px);\n    box-shadow: 0 8px 32px rgba(75, 78, 58, 0.4);\n    text-decoration: none !important;\n  }\n\n  \/* ========================================\n     1. HERO BANNER\n  ======================================== *\/\n  .srmc-hero {\n    position: relative;\n    width: 100%;\n    min-height: 420px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n    background: linear-gradient(155deg, var(--olive-deeper) 0%, var(--olive-dark) 40%, var(--olive) 100%);\n    padding: 100px 24px;\n    overflow: hidden;\n  }\n\n  .srmc-hero::before {\n    content: '';\n    position: absolute;\n    top: -40%;\n    right: -10%;\n    width: 600px;\n    height: 600px;\n    border-radius: 50%;\n    background: radial-gradient(circle, rgba(239, 211, 74, 0.12) 0%, transparent 70%);\n    pointer-events: none;\n  }\n\n  .srmc-hero::after {\n    content: '';\n    position: absolute;\n    bottom: -30%;\n    left: -5%;\n    width: 500px;\n    height: 500px;\n    border-radius: 50%;\n    background: radial-gradient(circle, rgba(239, 211, 74, 0.08) 0%, transparent 70%);\n    pointer-events: none;\n  }\n\n  .srmc-hero-pattern {\n    position: absolute;\n    inset: 0;\n    background-image:\n      linear-gradient(45deg, rgba(239, 211, 74, 0.03) 25%, transparent 25%),\n      linear-gradient(-45deg, rgba(239, 211, 74, 0.03) 25%, transparent 25%),\n      linear-gradient(45deg, transparent 75%, rgba(239, 211, 74, 0.03) 75%),\n      linear-gradient(-45deg, transparent 75%, rgba(239, 211, 74, 0.03) 75%);\n    background-size: 60px 60px;\n    background-position: 0 0, 0 30px, 30px -30px, -30px 0;\n    pointer-events: none;\n  }\n\n  .srmc-hero-content {\n    position: relative;\n    z-index: 2;\n    max-width: 820px;\n    padding-top: 100px;\n  }\n\n  .srmc-hero-cross {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 64px;\n    height: 64px;\n    border-radius: 50%;\n    background: rgba(239, 211, 74, 0.12);\n    border: 2px solid rgba(239, 211, 74, 0.3);\n    margin-bottom: 28px;\n    animation: pulse-glow 3s ease-in-out infinite;\n  }\n\n  .srmc-hero-cross .material-symbols-rounded {\n    font-size: 30px;\n    color: var(--gold);\n  }\n\n  @keyframes pulse-glow {\n    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 211, 74, 0.2); }\n    50% { box-shadow: 0 0 24px 8px rgba(239, 211, 74, 0.12); }\n  }\n\n  .srmc-hero-breadcrumb {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    font-size: 13px;\n    color: rgba(240, 237, 220, 0.5);\n    margin-bottom: 24px;\n    opacity: 0;\n    animation: fadeInDown 0.6s 0.1s forwards;\n  }\n\n  .srmc-hero-breadcrumb a {\n    color: rgba(240, 237, 220, 0.6);\n    transition: color var(--transition-fast);\n    text-decoration: none !important;\n  }\n\n  .srmc-hero-breadcrumb a:hover {\n    color: var(--gold);\n    text-decoration: none !important;\n  }\n\n  .srmc-hero-breadcrumb .sep {\n    font-size: 10px;\n  }\n\n  .srmc-hero-breadcrumb .current {\n    color: var(--gold);\n  }\n\n  .srmc-hero-topline {\n    font-family: 'DM Sans', sans-serif;\n    font-size: 13px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 5px;\n    color: var(--gold);\n    margin-bottom: 20px;\n    opacity: 0;\n    animation: fadeInDown 0.8s 0.2s forwards;\n  }\n\n  .srmc-hero-title {\n    font-family: 'Playfair Display', serif;\n    font-weight: 900;\n    font-size: clamp(36px, 7vw, 72px);\n    line-height: 1.05;\n    margin-bottom: 12px;\n    background: linear-gradient(135deg, #ffffff 0%, var(--gold) 50%, var(--gold-light) 100%);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n    background-clip: text;\n    opacity: 0;\n    animation: fadeInUp 0.8s 0.4s forwards;\n  }\n\n  .srmc-hero-subtitle {\n    font-family: 'Cormorant Garamond', serif;\n    font-size: clamp(16px, 2.5vw, 22px);\n    font-style: italic;\n    color: var(--gold-soft);\n    margin-bottom: 32px;\n    line-height: 1.6;\n    opacity: 0;\n    animation: fadeInUp 0.8s 0.6s forwards;\n  }\n\n  .srmc-hero-btn-group {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 16px;\n    justify-content: center;\n    opacity: 0;\n    animation: fadeInUp 0.8s 0.8s forwards;\n  }\n\n  @keyframes fadeInUp {\n    from { opacity: 0; transform: translateY(24px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n\n  @keyframes fadeInDown {\n    from { opacity: 0; transform: translateY(-16px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n\n  \/* ========================================\n     2. FEATURED CAROUSEL\n  ======================================== *\/\n  .srmc-carousel-section {\n    background: var(--olive-deeper);\n    overflow: hidden;\n  }\n\n  .srmc-carousel-header {\n    text-align: center;\n    margin-bottom: 48px;\n  }\n\n  .srmc-carousel-header .srmc-section-title {\n    color: #ffffff;\n  }\n\n  .srmc-carousel-header .srmc-section-subtitle {\n    color: rgba(240, 237, 220, 0.6);\n    margin: 0 auto;\n  }\n\n  .srmc-carousel-wrap {\n    position: relative;\n    max-width: 1100px;\n    margin: 0 auto;\n  }\n\n  .srmc-carousel-viewport {\n    overflow: hidden;\n    border-radius: var(--radius-xl);\n    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.4);\n  }\n\n  .srmc-carousel-track {\n    display: flex;\n    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n    will-change: transform;\n  }\n\n  .srmc-carousel-slide {\n    min-width: 100%;\n    position: relative;\n    cursor: pointer;\n    overflow: hidden;\n  }\n\n  .srmc-carousel-slide img {\n    width: 100%;\n    aspect-ratio: 16 \/ 9;\n    object-fit: cover;\n    display: block;\n    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .srmc-carousel-slide:hover img {\n    transform: scale(1.03);\n  }\n\n  .srmc-carousel-slide-overlay {\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(180deg, transparent 50%, rgba(26, 28, 20, 0.7) 100%);\n    display: flex;\n    align-items: flex-end;\n    padding: 32px 40px;\n    opacity: 0;\n    transition: opacity var(--transition-smooth);\n  }\n\n  .srmc-carousel-slide:hover .srmc-carousel-slide-overlay {\n    opacity: 1;\n  }\n\n  .srmc-carousel-slide-caption {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n  }\n\n  .srmc-carousel-slide-caption .material-symbols-rounded {\n    font-size: 24px;\n    color: var(--gold);\n  }\n\n  .srmc-carousel-slide-caption span {\n    color: #ffffff;\n    font-weight: 600;\n    font-size: 16px;\n  }\n\n  .srmc-carousel-arrow {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 52px;\n    height: 52px;\n    border-radius: 50%;\n    background: rgba(26, 28, 20, 0.6);\n    backdrop-filter: blur(10px);\n    -webkit-backdrop-filter: blur(10px);\n    border: 1px solid rgba(239, 211, 74, 0.2);\n    color: var(--gold);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    transition: all var(--transition-smooth);\n    z-index: 5;\n    text-decoration: none !important;\n  }\n\n  .srmc-carousel-arrow:hover {\n    background: var(--gold);\n    color: var(--olive-dark);\n    border-color: var(--gold);\n    transform: translateY(-50%) scale(1.08);\n    text-decoration: none !important;\n  }\n\n  .srmc-carousel-arrow .material-symbols-rounded {\n    font-size: 26px;\n  }\n\n  .srmc-carousel-prev {\n    left: -26px;\n  }\n\n  .srmc-carousel-next {\n    right: -26px;\n  }\n\n  .srmc-carousel-dots {\n    display: flex;\n    justify-content: center;\n    gap: 10px;\n    margin-top: 28px;\n  }\n\n  .srmc-carousel-dot {\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    background: rgba(239, 211, 74, 0.2);\n    border: 2px solid transparent;\n    cursor: pointer;\n    transition: all var(--transition-smooth);\n  }\n\n  .srmc-carousel-dot:hover {\n    background: rgba(239, 211, 74, 0.4);\n  }\n\n  .srmc-carousel-dot.active {\n    background: var(--gold);\n    border-color: var(--gold-light);\n    box-shadow: 0 0 12px rgba(239, 211, 74, 0.4);\n    transform: scale(1.15);\n  }\n\n  .srmc-carousel-counter {\n    text-align: center;\n    margin-top: 16px;\n    font-size: 14px;\n    font-weight: 500;\n    color: rgba(240, 237, 220, 0.4);\n  }\n\n  .srmc-carousel-counter .current-num {\n    color: var(--gold);\n    font-weight: 700;\n    font-size: 18px;\n  }\n\n  \/* ========================================\n     3. FILTER TABS\n  ======================================== *\/\n  .srmc-filters {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    gap: 10px;\n    margin-bottom: 40px;\n  }\n\n  .srmc-filter-btn {\n    font-family: 'DM Sans', sans-serif;\n    font-size: 14px;\n    font-weight: 600;\n    padding: 10px 24px;\n    border-radius: 100px;\n    border: 2px solid rgba(75, 78, 58, 0.15);\n    background: transparent;\n    color: var(--text-muted);\n    cursor: pointer;\n    transition: all var(--transition-smooth);\n    text-decoration: none !important;\n  }\n\n  .srmc-filter-btn:hover {\n    border-color: var(--gold-dark);\n    color: var(--olive-dark);\n    background: rgba(239, 211, 74, 0.08);\n    text-decoration: none !important;\n  }\n\n  .srmc-filter-btn.active {\n    background: var(--gold);\n    border-color: var(--gold);\n    color: var(--olive-dark);\n    box-shadow: 0 4px 16px rgba(239, 211, 74, 0.3);\n    text-decoration: none !important;\n  }\n\n  \/* ========================================\n     4. MASONRY GALLERY GRID\n  ======================================== *\/\n  .srmc-gallery-header {\n    text-align: center;\n    margin-bottom: 16px;\n  }\n\n  .srmc-gallery-header .srmc-section-subtitle {\n    margin: 0 auto;\n  }\n\n  .srmc-gallery-grid {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);\n    gap: 18px;\n    margin-bottom: 48px;\n  }\n\n  .srmc-gallery-item {\n    position: relative;\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n    cursor: pointer;\n    box-shadow: var(--shadow-soft);\n    transition: all var(--transition-smooth);\n  }\n\n  .srmc-gallery-item:hover {\n    transform: translateY(-6px) scale(1.02);\n    box-shadow: var(--shadow-strong);\n    z-index: 2;\n  }\n\n  .srmc-gallery-item.tall {\n    grid-row: span 2;\n  }\n\n  .srmc-gallery-item.wide {\n    grid-column: span 2;\n  }\n\n  .srmc-gallery-item img {\n    width: 100%;\n    height: 100%;\n    min-height: 220px;\n    object-fit: cover;\n    display: block;\n    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .srmc-gallery-item.tall img {\n    min-height: 460px;\n  }\n\n  .srmc-gallery-item.wide img {\n    min-height: 260px;\n  }\n\n  .srmc-gallery-item:hover img {\n    transform: scale(1.08);\n  }\n\n  .srmc-gallery-overlay {\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(180deg, transparent 40%, rgba(26, 28, 20, 0.85) 100%);\n    opacity: 0;\n    transition: opacity var(--transition-smooth);\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    padding: 24px;\n  }\n\n  .srmc-gallery-item:hover .srmc-gallery-overlay {\n    opacity: 1;\n  }\n\n  .srmc-gallery-overlay-title {\n    color: #ffffff;\n    font-family: 'Playfair Display', serif;\n    font-weight: 700;\n    font-size: 17px;\n    margin-bottom: 4px;\n  }\n\n  .srmc-gallery-overlay-cat {\n    color: var(--gold);\n    font-size: 12px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 1.5px;\n    margin-bottom: 10px;\n  }\n\n  .srmc-gallery-overlay-icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n    background: rgba(239, 211, 74, 0.15);\n    backdrop-filter: blur(6px);\n    -webkit-backdrop-filter: blur(6px);\n    position: absolute;\n    top: 16px;\n    right: 16px;\n    opacity: 0;\n    transform: scale(0.8);\n    transition: all var(--transition-bounce);\n  }\n\n  .srmc-gallery-item:hover .srmc-gallery-overlay-icon {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  .srmc-gallery-overlay-icon .material-symbols-rounded {\n    font-size: 22px;\n    color: var(--gold);\n  }\n\n  .srmc-gallery-load-more {\n    text-align: center;\n  }\n\n  \/* ========================================\n     5. LIGHTBOX\n  ======================================== *\/\n  .srmc-lightbox {\n    position: fixed;\n    inset: 0;\n    z-index: 9999;\n    background: rgba(10, 10, 8, 0.95);\n    backdrop-filter: blur(20px);\n    -webkit-backdrop-filter: blur(20px);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n    visibility: hidden;\n    transition: opacity 0.4s ease, visibility 0.4s ease;\n  }\n\n  .srmc-lightbox.open {\n    opacity: 1;\n    visibility: visible;\n  }\n\n  .srmc-lightbox-img-wrap {\n    position: relative;\n    max-width: 90vw;\n    max-height: 85vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transform: scale(0.9) translateY(20px);\n    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\n  }\n\n  .srmc-lightbox.open .srmc-lightbox-img-wrap {\n    transform: scale(1) translateY(0);\n  }\n\n  .srmc-lightbox-img-wrap img {\n    max-width: 90vw;\n    max-height: 85vh;\n    object-fit: contain;\n    border-radius: var(--radius-lg);\n    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.6);\n  }\n\n  .srmc-lightbox-close {\n    position: absolute;\n    top: 24px;\n    right: 24px;\n    width: 48px;\n    height: 48px;\n    border-radius: 50%;\n    background: rgba(255, 255, 255, 0.08);\n    backdrop-filter: blur(10px);\n    -webkit-backdrop-filter: blur(10px);\n    border: 1px solid rgba(255, 255, 255, 0.1);\n    color: #ffffff;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    transition: all var(--transition-smooth);\n    z-index: 10;\n    text-decoration: none !important;\n  }\n\n  .srmc-lightbox-close:hover {\n    background: var(--gold);\n    color: var(--olive-dark);\n    border-color: var(--gold);\n    transform: rotate(90deg);\n    text-decoration: none !important;\n  }\n\n  .srmc-lightbox-close .material-symbols-rounded {\n    font-size: 26px;\n  }\n\n  .srmc-lightbox-arrow {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 56px;\n    height: 56px;\n    border-radius: 50%;\n    background: rgba(255, 255, 255, 0.06);\n    backdrop-filter: blur(10px);\n    -webkit-backdrop-filter: blur(10px);\n    border: 1px solid rgba(255, 255, 255, 0.1);\n    color: #ffffff;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    transition: all var(--transition-smooth);\n    z-index: 10;\n    text-decoration: none !important;\n  }\n\n  .srmc-lightbox-arrow:hover {\n    background: var(--gold);\n    color: var(--olive-dark);\n    border-color: var(--gold);\n    transform: translateY(-50%) scale(1.1);\n    text-decoration: none !important;\n  }\n\n  .srmc-lightbox-arrow .material-symbols-rounded {\n    font-size: 28px;\n  }\n\n  .srmc-lightbox-prev {\n    left: 24px;\n  }\n\n  .srmc-lightbox-next {\n    right: 24px;\n  }\n\n  .srmc-lightbox-caption {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    padding: 24px 32px;\n    background: linear-gradient(180deg, transparent, rgba(10, 10, 8, 0.8));\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    z-index: 5;\n  }\n\n  .srmc-lightbox-caption-text {\n    color: #ffffff;\n  }\n\n  .srmc-lightbox-caption-title {\n    font-family: 'Playfair Display', serif;\n    font-weight: 700;\n    font-size: 18px;\n    margin-bottom: 2px;\n  }\n\n  .srmc-lightbox-caption-cat {\n    font-size: 12px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 1.5px;\n    color: var(--gold);\n  }\n\n  .srmc-lightbox-counter {\n    font-size: 14px;\n    font-weight: 600;\n    color: rgba(255, 255, 255, 0.5);\n  }\n\n  .srmc-lightbox-counter .current {\n    color: var(--gold);\n    font-size: 20px;\n  }\n\n  \/* ========================================\n     6. CTA SECTION \u2014 distinct from carousel\n  ======================================== *\/\n  .srmc-cta {\n    background: linear-gradient(155deg, var(--olive-dark) 0%, var(--olive) 60%, var(--olive-light) 100%);\n    text-align: center;\n    position: relative;\n    overflow: hidden;\n  }\n\n  .srmc-cta::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 800px;\n    height: 800px;\n    border-radius: 50%;\n    background: radial-gradient(circle, rgba(239, 211, 74, 0.08) 0%, transparent 60%);\n    pointer-events: none;\n  }\n\n  .srmc-cta::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 1px;\n    background: linear-gradient(90deg, transparent, var(--gold), transparent);\n  }\n\n  .srmc-cta-content {\n    position: relative;\n    z-index: 1;\n    max-width: 640px;\n    margin: 0 auto;\n  }\n\n  .srmc-cta-title {\n    font-family: 'Playfair Display', serif;\n    font-weight: 800;\n    font-size: clamp(28px, 4vw, 44px);\n    color: #ffffff;\n    margin-bottom: 16px;\n    line-height: 1.2;\n  }\n\n  .srmc-cta-title em {\n    color: var(--gold);\n    font-style: normal;\n  }\n\n  .srmc-cta-desc {\n    font-family: 'Cormorant Garamond', serif;\n    font-size: 18px;\n    font-style: italic;\n    color: rgba(240, 237, 220, 0.6);\n    margin-bottom: 32px;\n    line-height: 1.6;\n  }\n\n  .srmc-cta-buttons {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 16px;\n    justify-content: center;\n  }\n\n  \/* Stronger glow on CTA primary *\/\n  .srmc-cta .srmc-btn-primary {\n    box-shadow: 0 4px 30px rgba(239, 211, 74, 0.4), 0 0 60px rgba(239, 211, 74, 0.1);\n  }\n\n  .srmc-cta .srmc-btn-primary:hover {\n    box-shadow: 0 8px 45px rgba(239, 211, 74, 0.5), 0 0 80px rgba(239, 211, 74, 0.15);\n  }\n\n  \/* ========================================\n     SCROLL REVEAL\n  ======================================== *\/\n  .srmc-reveal {\n    opacity: 0;\n    transform: translateY(32px);\n    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),\n                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .srmc-reveal.srmc-visible {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  .srmc-reveal-scale {\n    opacity: 0;\n    transform: scale(0.92);\n    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),\n                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .srmc-reveal-scale.srmc-visible {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  .srmc-delay-1 { transition-delay: 0.05s; }\n  .srmc-delay-2 { transition-delay: 0.1s; }\n  .srmc-delay-3 { transition-delay: 0.15s; }\n  .srmc-delay-4 { transition-delay: 0.2s; }\n  .srmc-delay-5 { transition-delay: 0.25s; }\n  .srmc-delay-6 { transition-delay: 0.3s; }\n  .srmc-delay-7 { transition-delay: 0.35s; }\n  .srmc-delay-8 { transition-delay: 0.4s; }\n  .srmc-delay-9 { transition-delay: 0.45s; }\n  .srmc-delay-10 { transition-delay: 0.5s; }\n  .srmc-delay-11 { transition-delay: 0.55s; }\n  .srmc-delay-12 { transition-delay: 0.6s; }\n\n  \/* ========================================\n     RESPONSIVE \u2014 TABLET\n  ======================================== *\/\n  @media (max-width: 1024px) {\n    .srmc-section {\n      padding: 60px 0;\n    }\n\n    .srmc-carousel-prev { left: 12px; }\n    .srmc-carousel-next { right: 12px; }\n\n    .srmc-gallery-grid {\n      grid-template-columns: repeat(3, 1fr);\n    }\n\n    .srmc-gallery-item.wide {\n      grid-column: span 1;\n    }\n  }\n\n  \/* ========================================\n     RESPONSIVE \u2014 MOBILE\n  ======================================== *\/\n  @media (max-width: 768px) {\n    .srmc-inner {\n      padding: 0 16px;\n    }\n\n    .srmc-section {\n      padding: 48px 0;\n    }\n\n    .srmc-hero {\n      min-height: 340px;\n      padding: 72px 16px;\n    }\n\n    .srmc-hero-btn-group {\n      flex-direction: column;\n      align-items: center;\n    }\n\n    .srmc-btn {\n      width: 100%;\n      max-width: 280px;\n      justify-content: center;\n    }\n\n    .srmc-carousel-arrow {\n      width: 42px;\n      height: 42px;\n    }\n\n    .srmc-carousel-prev { left: 8px; }\n    .srmc-carousel-next { right: 8px; }\n\n    .srmc-carousel-slide-caption {\n      padding: 16px 20px;\n    }\n\n    .srmc-gallery-grid {\n      grid-template-columns: repeat(2, 1fr);\n      gap: 12px;\n    }\n\n    .srmc-gallery-item.tall {\n      grid-row: span 1;\n    }\n\n    .srmc-gallery-item.tall img,\n    .srmc-gallery-item.wide img {\n      min-height: 200px;\n    }\n\n    .srmc-gallery-item img {\n      min-height: 180px;\n    }\n\n    .srmc-lightbox-prev { left: 8px; }\n    .srmc-lightbox-next { right: 8px; }\n\n    .srmc-lightbox-arrow {\n      width: 42px;\n      height: 42px;\n    }\n\n    .srmc-lightbox-arrow .material-symbols-rounded {\n      font-size: 22px;\n    }\n\n    .srmc-lightbox-caption {\n      flex-direction: column;\n      align-items: flex-start;\n      gap: 8px;\n      padding: 16px 20px;\n    }\n  }\n\n  @media (max-width: 480px) {\n    .srmc-gallery-grid {\n      grid-template-columns: 1fr 1fr;\n      gap: 10px;\n    }\n\n    .srmc-filters {\n      gap: 6px;\n    }\n\n    .srmc-filter-btn {\n      font-size: 12px;\n      padding: 8px 16px;\n    }\n  }\n<\/style>\n\n<div class=\"srmc-gallery-page\">\n\n  <!-- HERO BANNER -->\n  <section class=\"srmc-hero\" id=\"top\">\n    <div class=\"srmc-hero-pattern\"><\/div>\n    <div class=\"srmc-hero-content\">\n      <nav class=\"srmc-hero-breadcrumb\">\n        <a href=\"https:\/\/demo5.yinwoodweb.com\/agro\">Home<\/a>\n        <span class=\"sep material-symbols-rounded\">chevron_right<\/span>\n        <span class=\"current\">Gallery<\/span>\n      <\/nav>\n      <div class=\"srmc-hero-cross\">\n        <span class=\"material-symbols-rounded\">photo_library<\/span>\n      <\/div>\n      <p class=\"srmc-hero-topline\">San Roque Mission Center Agro<\/p>\n      <h1 class=\"srmc-hero-title\">Photo Gallery<\/h1>\n      <p class=\"srmc-hero-subtitle\">Moments of faith, fellowship, and celebration \u2014 captured from the heart of our parish community in Catanauan.<\/p>\n      <div class=\"srmc-hero-btn-group\">\n        <a href=\"#featured-carousel\" class=\"srmc-btn srmc-btn-primary\">\n          <span>Browse Photos<\/span>\n          <span class=\"material-symbols-rounded\">arrow_downward<\/span>\n        <\/a>\n        <a href=\"#gallery-grid\" class=\"srmc-btn srmc-btn-outline--light\">\n          <span>View All<\/span>\n          <span class=\"material-symbols-rounded\">grid_view<\/span>\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- FEATURED CAROUSEL -->\n  <section class=\"srmc-section srmc-carousel-section\" id=\"featured-carousel\">\n    <div class=\"srmc-inner\">\n      <div class=\"srmc-carousel-header srmc-reveal\">\n        <span class=\"srmc-section-label srmc-section-label-light\">\n          <span class=\"material-symbols-rounded\">auto_awesome<\/span>\n          Featured\n        <\/span>\n        <h2 class=\"srmc-section-title\">Highlights<\/h2>\n        <p class=\"srmc-section-subtitle\">Swipe or click through our featured moments from recent parish celebrations and events.<\/p>\n      <\/div>\n\n      <div class=\"srmc-carousel-wrap srmc-reveal-scale\">\n        <div class=\"srmc-carousel-viewport\">\n          <div class=\"srmc-carousel-track\" id=\"carouselTrack\">\n            <div class=\"srmc-carousel-slide\" data-index=\"0\" onclick=\"openLightboxFromCarousel(0)\">\n              <img decoding=\"async\" src=\"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-content\/uploads\/sites\/6\/2026\/05\/684648096_949465724528601_4264601061582037413_n.jpg\" alt=\"Sunday Mass Celebration\" \/>\n              <div class=\"srmc-carousel-slide-overlay\">\n                <div class=\"srmc-carousel-slide-caption\">\n                  <span class=\"material-symbols-rounded\">fullscreen<\/span>\n                  <span>Sunday Mass Celebration<\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n            <div class=\"srmc-carousel-slide\" data-index=\"1\" onclick=\"openLightboxFromCarousel(1)\">\n              <img decoding=\"async\" src=\"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-content\/uploads\/sites\/6\/2026\/06\/502621533_685004360974740_9144820804498086815_n.jpg\" alt=\"Flores de Mayo\" \/>\n              <div class=\"srmc-carousel-slide-overlay\">\n                <div class=\"srmc-carousel-slide-caption\">\n                  <span class=\"material-symbols-rounded\">fullscreen<\/span>\n                  <span>Flores de Mayo Celebration<\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n            <div class=\"srmc-carousel-slide\" data-index=\"2\" onclick=\"openLightboxFromCarousel(2)\">\n              <img decoding=\"async\" src=\"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-content\/uploads\/sites\/6\/2026\/04\/667127322_929882126486961_7177982008350409476_n.jpg\" alt=\"Parish Community Gathering\" \/>\n              <div class=\"srmc-carousel-slide-overlay\">\n                <div class=\"srmc-carousel-slide-caption\">\n                  <span class=\"material-symbols-rounded\">fullscreen<\/span>\n                  <span>Parish Community Gathering<\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n            <div class=\"srmc-carousel-slide\" data-index=\"3\" onclick=\"openLightboxFromCarousel(3)\">\n              <img decoding=\"async\" src=\"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-content\/uploads\/sites\/6\/2026\/05\/683087698_947482431393597_8342462041315707420_n.jpg\" alt=\"Community Outreach\" \/>\n              <div class=\"srmc-carousel-slide-overlay\">\n                <div class=\"srmc-carousel-slide-caption\">\n                  <span class=\"material-symbols-rounded\">fullscreen<\/span>\n                  <span>Community Outreach Program<\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n            <div class=\"srmc-carousel-slide\" data-index=\"4\" onclick=\"openLightboxFromCarousel(4)\">\n              <img decoding=\"async\" src=\"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-content\/uploads\/sites\/6\/2026\/04\/533963586_743804441761398_6466860949269312440_n.jpg\" alt=\"Church Interior\" \/>\n              <div class=\"srmc-carousel-slide-overlay\">\n                <div class=\"srmc-carousel-slide-caption\">\n                  <span class=\"material-symbols-rounded\">fullscreen<\/span>\n                  <span>Inside the Parish Church<\/span>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <button class=\"srmc-carousel-arrow srmc-carousel-prev\" onclick=\"carouselPrev()\" aria-label=\"Previous slide\">\n          <span class=\"material-symbols-rounded\">chevron_left<\/span>\n        <\/button>\n        <button class=\"srmc-carousel-arrow srmc-carousel-next\" onclick=\"carouselNext()\" aria-label=\"Next slide\">\n          <span class=\"material-symbols-rounded\">chevron_right<\/span>\n        <\/button>\n\n        <div class=\"srmc-carousel-dots\" id=\"carouselDots\"><\/div>\n        <div class=\"srmc-carousel-counter\">\n          <span class=\"current-num\" id=\"carouselCurrentNum\">1<\/span> \/ <span id=\"carouselTotalNum\">5<\/span>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- GALLERY GRID WITH FILTERS -->\n  <section class=\"srmc-section\" id=\"gallery-grid\" style=\"background: var(--bg-warm);\">\n    <div class=\"srmc-inner\">\n      <div class=\"srmc-gallery-header srmc-reveal\">\n        <span class=\"srmc-section-label\">\n          <span class=\"material-symbols-rounded\">photo_library<\/span>\n          All Photos\n        <\/span>\n        <h2 class=\"srmc-section-title\">Browse the Gallery<\/h2>\n        <p class=\"srmc-section-subtitle\">Click any photo to view it in full size. Filter by category to find what inspires you.<\/p>\n      <\/div>\n\n      <div class=\"srmc-filters srmc-reveal\">\n        <button class=\"srmc-filter-btn active\" data-filter=\"all\" onclick=\"filterGallery('all', this)\">All Photos<\/button>\n        <button class=\"srmc-filter-btn\" data-filter=\"mass\" onclick=\"filterGallery('mass', this)\">Holy Mass<\/button>\n        <button class=\"srmc-filter-btn\" data-filter=\"events\" onclick=\"filterGallery('events', this)\">Events<\/button>\n        <button class=\"srmc-filter-btn\" data-filter=\"community\" onclick=\"filterGallery('community', this)\">Community<\/button>\n        <button class=\"srmc-filter-btn\" data-filter=\"youth\" onclick=\"filterGallery('youth', this)\">Youth<\/button>\n      <\/div>\n\n      <div class=\"srmc-gallery-grid\" id=\"galleryGrid\">\n\n        <div class=\"srmc-gallery-item tall srmc-reveal-scale srmc-delay-1\" data-category=\"mass\" data-title=\"Sunday Solemn Mass\" data-caption=\"Holy Mass\" onclick=\"openLightbox(this)\">\n          <img decoding=\"async\" src=\"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-content\/uploads\/sites\/6\/2026\/06\/632326496_887532984055209_5925497084482206078_n.jpg\" alt=\"Sunday Solemn Mass\" \/>\n          <div class=\"srmc-gallery-overlay\">\n            <div class=\"srmc-gallery-overlay-cat\">Holy Mass<\/div>\n            <div class=\"srmc-gallery-overlay-title\">Sunday Solemn Mass<\/div>\n          <\/div>\n          <div class=\"srmc-gallery-overlay-icon\"><span class=\"material-symbols-rounded\">open_in_full<\/span><\/div>\n        <\/div>\n\n        <div class=\"srmc-gallery-item srmc-reveal-scale srmc-delay-2\" data-category=\"events\" data-title=\"Flores de Mayo\" data-caption=\"Parish Event\" onclick=\"openLightbox(this)\">\n          <img decoding=\"async\" src=\"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-content\/uploads\/sites\/6\/2026\/06\/502413766_685004104308099_3715580736586464485_n.jpg\" alt=\"Flores de Mayo\" \/>\n          <div class=\"srmc-gallery-overlay\">\n            <div class=\"srmc-gallery-overlay-cat\">Parish Event<\/div>\n            <div class=\"srmc-gallery-overlay-title\">Flores de Mayo<\/div>\n          <\/div>\n          <div class=\"srmc-gallery-overlay-icon\"><span class=\"material-symbols-rounded\">open_in_full<\/span><\/div>\n        <\/div>\n\n        <div class=\"srmc-gallery-item srmc-reveal-scale srmc-delay-3\" data-category=\"community\" data-title=\"Parish Gathering\" data-caption=\"Community\" onclick=\"openLightbox(this)\">\n          <img decoding=\"async\" src=\"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-content\/uploads\/sites\/6\/2026\/04\/668946635_929882306486943_8457185909055840768_n.jpg\" alt=\"Parish Gathering\" \/>\n          <div class=\"srmc-gallery-overlay\">\n            <div class=\"srmc-gallery-overlay-cat\">Community<\/div>\n            <div class=\"srmc-gallery-overlay-title\">Parish Gathering<\/div>\n          <\/div>\n          <div class=\"srmc-gallery-overlay-icon\"><span class=\"material-symbols-rounded\">open_in_full<\/span><\/div>\n        <\/div>\n\n        <div class=\"srmc-gallery-item wide srmc-reveal-scale srmc-delay-4\" data-category=\"community\" data-title=\"Feeding Program\" data-caption=\"Community\" onclick=\"openLightbox(this)\">\n          <img decoding=\"async\" src=\"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-content\/uploads\/sites\/6\/2026\/04\/667836569_929883889820118_9214966493923573630_n.jpg\" alt=\"Feeding Program\" \/>\n          <div class=\"srmc-gallery-overlay\">\n            <div class=\"srmc-gallery-overlay-cat\">Community<\/div>\n            <div class=\"srmc-gallery-overlay-title\">Feeding Program<\/div>\n          <\/div>\n          <div class=\"srmc-gallery-overlay-icon\"><span class=\"material-symbols-rounded\">open_in_full<\/span><\/div>\n        <\/div>\n\n        <div class=\"srmc-gallery-item srmc-reveal-scale srmc-delay-5\" data-category=\"youth\" data-title=\"Youth Ministry\" data-caption=\"Youth\" onclick=\"openLightbox(this)\">\n          <img decoding=\"async\" src=\"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-content\/uploads\/sites\/6\/2026\/05\/685856679_948440661297774_861034215692253874_n.jpg\" alt=\"Youth Ministry Activity\" \/>\n          <div class=\"srmc-gallery-overlay\">\n            <div class=\"srmc-gallery-overlay-cat\">Youth<\/div>\n            <div class=\"srmc-gallery-overlay-title\">Youth Ministry<\/div>\n          <\/div>\n          <div class=\"srmc-gallery-overlay-icon\"><span class=\"material-symbols-rounded\">open_in_full<\/span><\/div>\n        <\/div>\n\n        <div class=\"srmc-gallery-item srmc-reveal-scale srmc-delay-6\" data-category=\"events\" data-title=\"Fiesta Procession\" data-caption=\"Parish Event\" onclick=\"openLightbox(this)\">\n          <img decoding=\"async\" src=\"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-content\/uploads\/sites\/6\/2026\/06\/535055619_744333168375192_5847725268510711937_n.jpg\" alt=\"Fiesta Procession\" \/>\n          <div class=\"srmc-gallery-overlay\">\n            <div class=\"srmc-gallery-overlay-cat\">Parish Event<\/div>\n            <div class=\"srmc-gallery-overlay-title\">Fiesta Procession<\/div>\n          <\/div>\n          <div class=\"srmc-gallery-overlay-icon\"><span class=\"material-symbols-rounded\">open_in_full<\/span><\/div>\n        <\/div>\n\n        <div class=\"srmc-gallery-item tall srmc-reveal-scale srmc-delay-7\" data-category=\"mass\" data-title=\"Adoration of the Blessed Sacrament\" data-caption=\"Holy Mass\" onclick=\"openLightbox(this)\">\n          <img decoding=\"async\" src=\"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-content\/uploads\/sites\/6\/2026\/06\/533485838_744018301740012_1693269907502682876_n.jpg\" alt=\"Adoration\" \/>\n          <div class=\"srmc-gallery-overlay\">\n            <div class=\"srmc-gallery-overlay-cat\">Holy Mass<\/div>\n            <div class=\"srmc-gallery-overlay-title\">Adoration of the Blessed Sacrament<\/div>\n          <\/div>\n          <div class=\"srmc-gallery-overlay-icon\"><span class=\"material-symbols-rounded\">open_in_full<\/span><\/div>\n        <\/div>\n\n        <div class=\"srmc-gallery-item srmc-reveal-scale srmc-delay-8\" data-category=\"community\" data-title=\"Dawn at San Roque\" data-caption=\"Community\" onclick=\"openLightbox(this)\">\n          <img decoding=\"async\" src=\"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-content\/uploads\/sites\/6\/2026\/06\/539565489_755420303933145_5975078922793730751_n.jpg\" alt=\"Dawn at San Roque\" \/>\n          <div class=\"srmc-gallery-overlay\">\n            <div class=\"srmc-gallery-overlay-cat\">Community<\/div>\n            <div class=\"srmc-gallery-overlay-title\">Dawn at San Roque<\/div>\n          <\/div>\n          <div class=\"srmc-gallery-overlay-icon\"><span class=\"material-symbols-rounded\">open_in_full<\/span><\/div>\n        <\/div>\n\n        <div class=\"srmc-gallery-item wide srmc-reveal-scale srmc-delay-9\" data-category=\"events\" data-title=\"Santacruzan Pageant\" data-caption=\"Parish Event\" onclick=\"openLightbox(this)\">\n          <img decoding=\"async\" src=\"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-content\/uploads\/sites\/6\/2026\/06\/502413034_685004574308052_7220102177976086850_n.jpg\" alt=\"Santacruzan Pageant\" \/>\n          <div class=\"srmc-gallery-overlay\">\n            <div class=\"srmc-gallery-overlay-cat\">Parish Event<\/div>\n            <div class=\"srmc-gallery-overlay-title\">Santacruzan Pageant<\/div>\n          <\/div>\n          <div class=\"srmc-gallery-overlay-icon\"><span class=\"material-symbols-rounded\">open_in_full<\/span><\/div>\n        <\/div>\n\n        <div class=\"srmc-gallery-item srmc-reveal-scale srmc-delay-10\" data-category=\"youth\" data-title=\"Youth Camp\" data-caption=\"Youth\" onclick=\"openLightbox(this)\">\n          <img decoding=\"async\" src=\"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-content\/uploads\/sites\/6\/2026\/05\/687018608_948441247964382_1833750321265930294_n.jpg\" alt=\"Youth Camp\" \/>\n          <div class=\"srmc-gallery-overlay\">\n            <div class=\"srmc-gallery-overlay-cat\">Youth<\/div>\n            <div class=\"srmc-gallery-overlay-title\">Youth Camp<\/div>\n          <\/div>\n          <div class=\"srmc-gallery-overlay-icon\"><span class=\"material-symbols-rounded\">open_in_full<\/span><\/div>\n        <\/div>\n\n        <div class=\"srmc-gallery-item srmc-reveal-scale srmc-delay-11\" data-category=\"mass\" data-title=\"Morning Prayer\" data-caption=\"Holy Mass\" onclick=\"openLightbox(this)\">\n          <img decoding=\"async\" src=\"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-content\/uploads\/sites\/6\/2026\/06\/529369024_737834442358398_5160856211762580583_n.jpg\" alt=\"Morning Prayer\" \/>\n          <div class=\"srmc-gallery-overlay\">\n            <div class=\"srmc-gallery-overlay-cat\">Holy Mass<\/div>\n            <div class=\"srmc-gallery-overlay-title\">Morning Prayer<\/div>\n          <\/div>\n          <div class=\"srmc-gallery-overlay-icon\"><span class=\"material-symbols-rounded\">open_in_full<\/span><\/div>\n        <\/div>\n\n        <div class=\"srmc-gallery-item srmc-reveal-scale srmc-delay-12\" data-category=\"community\" data-title=\"Parish Volunteers\" data-caption=\"Community\" onclick=\"openLightbox(this)\">\n          <img decoding=\"async\" src=\"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-content\/uploads\/sites\/6\/2026\/06\/667120766_929884179820089_1758001776508861521_n.jpg\" alt=\"Parish Volunteers\" \/>\n          <div class=\"srmc-gallery-overlay\">\n            <div class=\"srmc-gallery-overlay-cat\">Community<\/div>\n            <div class=\"srmc-gallery-overlay-title\">Parish Volunteers<\/div>\n          <\/div>\n          <div class=\"srmc-gallery-overlay-icon\"><span class=\"material-symbols-rounded\">open_in_full<\/span><\/div>\n        <\/div>\n\n      <\/div>\n\n      <div class=\"srmc-gallery-load-more srmc-reveal\">\n        <a href=\"#top\" class=\"srmc-btn srmc-btn-olive\">\n          <span>Load More Photos<\/span>\n          <span class=\"material-symbols-rounded\">expand_more<\/span>\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- CTA SECTION \u2014 now visually distinct from carousel -->\n  <section class=\"srmc-section srmc-cta\">\n    <div class=\"srmc-inner\">\n      <div class=\"srmc-cta-content srmc-reveal\">\n        <div class=\"srmc-hero-cross\" style=\"margin: 0 auto 28px;\">\n          <span class=\"material-symbols-rounded\">photo_camera<\/span>\n        <\/div>\n        <h2 class=\"srmc-cta-title\">Share Your <em>Parish Moments<\/em><\/h2>\n        <p class=\"srmc-cta-desc\">Have photos from recent parish events? Share them with us and help us build this living memory of our community&#8217;s faith journey.<\/p>\n        <div class=\"srmc-cta-buttons\">\n          <a href=\"#gallery-grid\" class=\"srmc-btn srmc-btn-primary\">\n            <span>Back to Gallery<\/span>\n            <span class=\"material-symbols-rounded\">arrow_upward<\/span>\n          <\/a>\n          <a href=\"#top\" class=\"srmc-btn srmc-btn-outline--light\">\n            <span>Back to Top<\/span>\n            <span class=\"material-symbols-rounded\">north<\/span>\n          <\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n<\/div>\n\n<!-- LIGHTBOX MODAL -->\n<div class=\"srmc-lightbox\" id=\"lightbox\">\n  <button class=\"srmc-lightbox-close\" onclick=\"closeLightbox()\" aria-label=\"Close lightbox\">\n    <span class=\"material-symbols-rounded\">close<\/span>\n  <\/button>\n  <button class=\"srmc-lightbox-arrow srmc-lightbox-prev\" onclick=\"lightboxPrev()\" aria-label=\"Previous image\">\n    <span class=\"material-symbols-rounded\">chevron_left<\/span>\n  <\/button>\n  <button class=\"srmc-lightbox-arrow srmc-lightbox-next\" onclick=\"lightboxNext()\" aria-label=\"Next image\">\n    <span class=\"material-symbols-rounded\">chevron_right<\/span>\n  <\/button>\n  <div class=\"srmc-lightbox-img-wrap\">\n    <img decoding=\"async\" id=\"lightboxImg\" src=\"\" alt=\"Full size preview\" \/>\n  <\/div>\n  <div class=\"srmc-lightbox-caption\">\n    <div class=\"srmc-lightbox-caption-text\">\n      <div class=\"srmc-lightbox-caption-title\" id=\"lightboxTitle\">Photo Title<\/div>\n      <div class=\"srmc-lightbox-caption-cat\" id=\"lightboxCat\">Category<\/div>\n    <\/div>\n    <div class=\"srmc-lightbox-counter\">\n      <span class=\"current\" id=\"lightboxCurrent\">1<\/span> \/ <span id=\"lightboxTotal\">12<\/span>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n(function() {\n  'use strict';\n\n  \/* CAROUSEL *\/\n  var carouselTrack = document.getElementById('carouselTrack');\n  var carouselDotsContainer = document.getElementById('carouselDots');\n  var carouselSlides = carouselTrack ? carouselTrack.querySelectorAll('.srmc-carousel-slide') : [];\n  var carouselIndex = 0;\n  var carouselTotal = carouselSlides.length;\n  var carouselAutoTimer;\n\n  function buildCarouselDots() {\n    if (!carouselDotsContainer) return;\n    carouselDotsContainer.innerHTML = '';\n    for (var i = 0; i < carouselTotal; i++) {\n      var dot = document.createElement('button');\n      dot.className = 'srmc-carousel-dot' + (i === 0 ? ' active' : '');\n      dot.setAttribute('aria-label', 'Go to slide ' + (i + 1));\n      dot.setAttribute('data-index', i);\n      dot.addEventListener('click', function() {\n        goToCarouselSlide(parseInt(this.getAttribute('data-index')));\n      });\n      carouselDotsContainer.appendChild(dot);\n    }\n  }\n\n  function goToCarouselSlide(index) {\n    if (index < 0) index = carouselTotal - 1;\n    if (index >= carouselTotal) index = 0;\n    carouselIndex = index;\n    carouselTrack.style.transform = 'translateX(-' + (carouselIndex * 100) + '%)';\n    var dots = carouselDotsContainer.querySelectorAll('.srmc-carousel-dot');\n    dots.forEach(function(d, i) { d.classList.toggle('active', i === carouselIndex); });\n    var currentNum = document.getElementById('carouselCurrentNum');\n    if (currentNum) currentNum.textContent = carouselIndex + 1;\n    resetCarouselAuto();\n  }\n\n  function carouselNext() { goToCarouselSlide(carouselIndex + 1); }\n  function carouselPrev() { goToCarouselSlide(carouselIndex - 1); }\n\n  window.carouselNext = carouselNext;\n  window.carouselPrev = carouselPrev;\n\n  function resetCarouselAuto() {\n    clearInterval(carouselAutoTimer);\n    carouselAutoTimer = setInterval(carouselNext, 5000);\n  }\n\n  var touchStartX = 0;\n  if (carouselTrack) {\n    carouselTrack.addEventListener('touchstart', function(e) {\n      touchStartX = e.changedTouches[0].screenX;\n    }, { passive: true });\n    carouselTrack.addEventListener('touchend', function(e) {\n      var diff = touchStartX - e.changedTouches[0].screenX;\n      if (Math.abs(diff) > 50) {\n        if (diff > 0) carouselNext();\n        else carouselPrev();\n      }\n    }, { passive: true });\n  }\n\n  \/* FILTER *\/\n  window.filterGallery = function(category, btn) {\n    document.querySelectorAll('.srmc-filter-btn').forEach(function(b) { b.classList.remove('active'); });\n    btn.classList.add('active');\n    var items = document.querySelectorAll('.srmc-gallery-item');\n    items.forEach(function(item) {\n      var cat = item.getAttribute('data-category');\n      if (category === 'all' || cat === category) {\n        item.style.display = '';\n        item.style.opacity = '0';\n        item.style.transform = 'scale(0.9)';\n        setTimeout(function() {\n          item.style.transition = 'opacity 0.4s ease, transform 0.4s ease';\n          item.style.opacity = '1';\n          item.style.transform = 'scale(1)';\n        }, 50);\n      } else {\n        item.style.transition = 'opacity 0.3s ease, transform 0.3s ease';\n        item.style.opacity = '0';\n        item.style.transform = 'scale(0.9)';\n        setTimeout(function() { item.style.display = 'none'; }, 300);\n      }\n    });\n    setTimeout(buildLightboxItems, 350);\n  };\n\n  \/* LIGHTBOX *\/\n  var lightbox = document.getElementById('lightbox');\n  var lightboxImg = document.getElementById('lightboxImg');\n  var lightboxTitle = document.getElementById('lightboxTitle');\n  var lightboxCat = document.getElementById('lightboxCat');\n  var lightboxCurrent = document.getElementById('lightboxCurrent');\n  var lightboxTotalEl = document.getElementById('lightboxTotal');\n  var lightboxItems = [];\n  var lightboxIndex = 0;\n\n  function buildLightboxItems() {\n    lightboxItems = [];\n    var visibleItems = document.querySelectorAll('.srmc-gallery-item');\n    visibleItems.forEach(function(item) {\n      if (item.style.display !== 'none') {\n        var img = item.querySelector('img');\n        lightboxItems.push({\n          src: img ? img.src : '',\n          title: item.getAttribute('data-title') || '',\n          cat: item.getAttribute('data-caption') || ''\n        });\n      }\n    });\n    if (lightboxTotalEl) lightboxTotalEl.textContent = lightboxItems.length;\n  }\n\n  function showLightboxImage(index) {\n    if (index < 0) index = lightboxItems.length - 1;\n    if (index >= lightboxItems.length) index = 0;\n    lightboxIndex = index;\n    var item = lightboxItems[lightboxIndex];\n    if (!item) return;\n    lightboxImg.style.opacity = '0';\n    lightboxImg.style.transform = 'scale(0.95)';\n    setTimeout(function() {\n      lightboxImg.src = item.src;\n      lightboxImg.alt = item.title;\n      lightboxTitle.textContent = item.title;\n      lightboxCat.textContent = item.cat;\n      lightboxCurrent.textContent = lightboxIndex + 1;\n      lightboxImg.style.transition = 'opacity 0.3s ease, transform 0.3s ease';\n      lightboxImg.style.opacity = '1';\n      lightboxImg.style.transform = 'scale(1)';\n    }, 150);\n  }\n\n  window.openLightbox = function(itemEl) {\n    buildLightboxItems();\n    var img = itemEl.querySelector('img');\n    var src = img ? img.src : '';\n    var idx = lightboxItems.findIndex(function(i) { return i.src === src; });\n    if (idx === -1) idx = 0;\n    lightbox.classList.add('open');\n    document.body.style.overflow = 'hidden';\n    showLightboxImage(idx);\n  };\n\n  window.openLightboxFromCarousel = function(index) {\n    lightboxItems = [];\n    carouselSlides.forEach(function(slide) {\n      var img = slide.querySelector('img');\n      lightboxItems.push({ src: img ? img.src : '', title: img ? img.alt : '', cat: 'Featured' });\n    });\n    if (lightboxTotalEl) lightboxTotalEl.textContent = lightboxItems.length;\n    lightbox.classList.add('open');\n    document.body.style.overflow = 'hidden';\n    showLightboxImage(index);\n  };\n\n  window.closeLightbox = function() {\n    lightbox.classList.remove('open');\n    document.body.style.overflow = '';\n  };\n\n  window.lightboxNext = function() { showLightboxImage(lightboxIndex + 1); };\n  window.lightboxPrev = function() { showLightboxImage(lightboxIndex - 1); };\n\n  lightbox.addEventListener('click', function(e) {\n    if (e.target === lightbox || e.target.classList.contains('srmc-lightbox-img-wrap')) {\n      closeLightbox();\n    }\n  });\n\n  document.addEventListener('keydown', function(e) {\n    if (!lightbox.classList.contains('open')) return;\n    if (e.key === 'Escape') closeLightbox();\n    if (e.key === 'ArrowRight') lightboxNext();\n    if (e.key === 'ArrowLeft') lightboxPrev();\n  });\n\n  var lbTouchStartX = 0;\n  lightbox.addEventListener('touchstart', function(e) {\n    lbTouchStartX = e.changedTouches[0].screenX;\n  }, { passive: true });\n  lightbox.addEventListener('touchend', function(e) {\n    var diff = lbTouchStartX - e.changedTouches[0].screenX;\n    if (Math.abs(diff) > 60) {\n      if (diff > 0) lightboxNext();\n      else lightboxPrev();\n    }\n  }, { passive: true });\n\n  \/* SCROLL REVEAL *\/\n  function initScrollReveal() {\n    var elements = document.querySelectorAll('.srmc-reveal, .srmc-reveal-scale');\n    if ('IntersectionObserver' in window) {\n      var observer = new IntersectionObserver(function(entries) {\n        entries.forEach(function(entry) {\n          if (entry.isIntersecting) {\n            entry.target.classList.add('srmc-visible');\n            observer.unobserve(entry.target);\n          }\n        });\n      }, { threshold: 0.08, rootMargin: '0px 0px -30px 0px' });\n      elements.forEach(function(el) { observer.observe(el); });\n    } else {\n      elements.forEach(function(el) { el.classList.add('srmc-visible'); });\n    }\n  }\n\n  \/* SMOOTH SCROLL (scoped) *\/\n  function initSmoothScroll() {\n    document.querySelectorAll('.srmc-gallery-page a[href^=\"#\"]').forEach(function(anchor) {\n      anchor.addEventListener('click', function(e) {\n        var targetId = this.getAttribute('href');\n        if (targetId === '#') return;\n        var target = document.querySelector(targetId);\n        if (target) {\n          e.preventDefault();\n          var top = target.getBoundingClientRect().top + window.pageYOffset - 24;\n          window.scrollTo({ top: top, behavior: 'smooth' });\n        }\n      });\n    });\n  }\n\n  \/* INIT *\/\n  document.addEventListener('DOMContentLoaded', function() {\n    buildCarouselDots();\n    buildLightboxItems();\n    initScrollReveal();\n    initSmoothScroll();\n    var carouselTotalNum = document.getElementById('carouselTotalNum');\n    if (carouselTotalNum) carouselTotalNum.textContent = carouselTotal;\n    if (carouselTotal > 1) resetCarouselAuto();\n  });\n\n})();\n<\/script>\n<\/div>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>Home chevron_right Gallery photo_library San Roque Mission Center Agro Photo Gallery Moments of faith, fellowship, and celebration \u2014 captured from [&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":"","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":"Gallery - San Roque Mission Center","description":"Home chevron_right Gallery photo_library San Roque Mission Center Agro Photo Gallery Moments of faith, fellowship, and celebration \u2014 captured from the heart of"},"footnotes":""},"class_list":["post-1032","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":"Diocese of Gumaca","author_link":"https:\/\/Demo5.yinwoodweb.com\/agro\/blog\/author\/phwpywadsa623\/"},"uagb_comment_info":0,"uagb_excerpt":"Home chevron_right Gallery photo_library San Roque Mission Center Agro Photo Gallery Moments of faith, fellowship, and celebration \u2014 captured from [&hellip;]","_links":{"self":[{"href":"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-json\/wp\/v2\/pages\/1032","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-json\/wp\/v2\/comments?post=1032"}],"version-history":[{"count":23,"href":"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-json\/wp\/v2\/pages\/1032\/revisions"}],"predecessor-version":[{"id":1513,"href":"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-json\/wp\/v2\/pages\/1032\/revisions\/1513"}],"wp:attachment":[{"href":"https:\/\/Demo5.yinwoodweb.com\/agro\/wp-json\/wp\/v2\/media?parent=1032"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}