{"id":2462,"date":"2025-03-20T07:48:12","date_gmt":"2025-03-20T07:48:12","guid":{"rendered":"http:\/\/cherito-demo.local\/?page_id=2462"},"modified":"2026-10-23T14:27:46","modified_gmt":"2026-10-23T14:27:46","slug":"gallery-grid","status":"publish","type":"page","link":"https:\/\/birct.in\/index.php\/gallery-grid\/","title":{"rendered":"Gallery Grid"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2462\" class=\"elementor elementor-2462\">\n\t\t\t\t<div class=\"elementor-element elementor-element-51250731 e-con-full e-flex e-con e-parent\" data-id=\"51250731\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-abba8cf e-con e-atomic-element e-flexbox-base e-default-div e-94f9226 \" data-id=\"abba8cf\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"abba8cf\">\n    \t\t<div class=\"elementor-element elementor-element-b4f6f28 elementor-widget elementor-widget-html\" data-id=\"b4f6f28\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<div class=\"portfolio-gallery\">\n    <a href=\"#\"\n       class=\"gallery-item\" data-title=\"Healthcare Housing\">\n        <img decoding=\"async\" src=\"https:\/\/birct.in\/wp-content\/uploads\/2026\/07\/photo-of-jp-giri-e1784536159544.png\"\n             alt=\"Healthcare Housing\">\n        <div class=\"gallery-overlay\">\n             <h3>Jai Prakash Giri<\/h3>\n            <span class=\"gallery-category\">President<\/span>\n           \n           \n        <\/div>\n    <\/a>\n\n    <a href=\"https:\/\/birct.in\/wp-content\/uploads\/2026\/10\/h.jpeg\"\n       class=\"gallery-item\" data-title=\"University Accommodation\">\n        <img decoding=\"async\" src=\"https:\/\/birct.in\/wp-content\/uploads\/2026\/10\/h.jpeg\"\n             alt=\"University Accommodation\">\n        <div class=\"gallery-overlay\">\n            <h3>Smt. Gayatri Devi<\/h3>\n            <span class=\"gallery-category\">Vice President<\/span>\n            \n            \n        <\/div>\n    <\/a>\n\n    <a href=\"#\"\n       class=\"gallery-item\" data-title=\"Modern Living Spaces\">\n        <img decoding=\"async\" src=\"https:\/\/birct.in\/wp-content\/uploads\/2026\/09\/WhatsApp-Image-2026-09-10-at-18.06.47.jpeg\"\n             alt=\"Modern Living Spaces\">\n        <div class=\"gallery-overlay\">\n            <h3>Dr. Surbhi<\/h3>\n            <span class=\"gallery-category\">Gen. Secretary<\/span>\n            \n            \n        <\/div>\n    <\/a>\n\n    <a href=\"#\"\n       class=\"gallery-item\" data-title=\"Campus Life\">\n        <img decoding=\"async\" src=\"https:\/\/birct.in\/wp-content\/uploads\/2026\/10\/team1.webp\"\n             alt=\"Campus Life\">\n        <div class=\"gallery-overlay\">\n            <h3>Manish Giri<\/h3>\n            <span class=\"gallery-category\">IT Chief<\/span>\n            \n            \n        <\/div>\n    <\/a>\n<\/div>\n\n<!-- Lightbox -->\n<div class=\"gallery-lightbox\" id=\"galleryLightbox\"\n     role=\"dialog\" aria-modal=\"true\" aria-label=\"Image preview\"\n     aria-hidden=\"true\">\n    <button type=\"button\" class=\"lightbox-close\"\n            aria-label=\"Close image\">&times;<\/button>\n    <button type=\"button\" class=\"lightbox-prev\"\n            aria-label=\"Previous image\">&#10094;<\/button>\n    <figure>\n        <img decoding=\"async\" src=\"\" alt=\"\" id=\"lightboxImage\">\n        <figcaption id=\"lightboxTitle\"><\/figcaption>\n    <\/figure>\n    <button type=\"button\" class=\"lightbox-next\"\n            aria-label=\"Next image\">&#10095;<\/button>\n<\/div>\n\n<style>\n.portfolio-gallery,\n.portfolio-gallery * {\n    box-sizing: border-box;\n}\n\n.portfolio-gallery {\n    display: grid;\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 22px;\n    width: 100%;\n    margin: 30px 0;\n}\n\n.portfolio-gallery .gallery-item {\n    position: relative;\n    display: block;\n    height: 540px;\n    overflow: hidden;\n    border-radius: 12px;\n    background: #e9ecef;\n    text-decoration: none;\n    isolation: isolate;\n}\n\n.portfolio-gallery .gallery-item img {\n    width: 100%;\n    height: 100%;\n    display: block;\n    object-fit: cover;\n    transition: transform .65s ease;\n}\n\n.portfolio-gallery .gallery-item::after {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background: linear-gradient(\n        to top,\n        rgba(0, 0, 0, .82) 0%,\n        rgba(0, 0, 0, .25) 45%,\n        rgba(0, 0, 0, 0) 100%\n    );\n    transition: background .35s ease;\n    pointer-events: none;\n}\n\n.portfolio-gallery .gallery-item:hover img {\n    transform: scale(1.08);\n}\n\n.portfolio-gallery .gallery-item:hover::after {\n    background: linear-gradient(\n        to top,\n        rgba(0, 0, 0, .9),\n        rgba(0, 0, 0, .15) 75%\n    );\n}\n\n.portfolio-gallery .gallery-overlay {\n    position: absolute;\n    z-index: 1;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    padding: 28px;\n    color: #fff;\n    pointer-events: none;\n}\n\n.portfolio-gallery .gallery-category {\n    display: inline-block;\n    font-size: 11px;\n    font-weight: 700;\n    letter-spacing: 2px;\n    margin-bottom: 10px;\n    color: #fff;\n}\n\n.portfolio-gallery .gallery-overlay h3 {\n    color: #fff;\n    font-size: clamp(21px, 2.4vw, 30px);\n    font-weight: 700;\n    line-height: 1.25;\n    margin: 0;\n    padding-right: 35px;\n}\n\n.portfolio-gallery .gallery-arrow {\n    position: absolute;\n    right: 25px;\n    bottom: 28px;\n    width: 38px;\n    height: 38px;\n    border: 1px solid rgba(255,255,255,.7);\n    border-radius: 50%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-size: 20px;\n    color: #fff;\n    transition: background .3s ease, transform .3s ease;\n}\n\n.portfolio-gallery .gallery-item:hover .gallery-arrow {\n    background: #fff;\n    color: #111;\n    transform: rotate(45deg);\n}\n\n\/* Lightbox *\/\n.gallery-lightbox {\n    display: none;\n    position: fixed;\n    z-index: 999999;\n    inset: 0;\n    padding: 60px 70px;\n    background: rgba(0,0,0,.94);\n    align-items: center;\n    justify-content: center;\n}\n\n.gallery-lightbox.is-open {\n    display: flex;\n}\n\n.gallery-lightbox figure {\n    margin: 0;\n    max-width: 100%;\n    text-align: center;\n}\n\n.gallery-lightbox figure img {\n    display: block;\n    max-width: 100%;\n    max-height: 78vh;\n    width: auto;\n    height: auto;\n    margin: auto;\n    object-fit: contain;\n}\n\n.gallery-lightbox figcaption {\n    color: #fff;\n    font-size: 18px;\n    margin-top: 15px;\n}\n\n.gallery-lightbox button {\n    position: absolute;\n    border: 0;\n    background: transparent;\n    color: white;\n    cursor: pointer;\n    padding: 10px;\n    line-height: 1;\n}\n\n.gallery-lightbox .lightbox-close {\n    top: 15px;\n    right: 25px;\n    font-size: 42px;\n}\n\n.gallery-lightbox .lightbox-prev {\n    left: 15px;\n    top: 50%;\n    font-size: 32px;\n}\n\n.gallery-lightbox .lightbox-next {\n    right: 15px;\n    top: 50%;\n    font-size: 32px;\n}\n\n@media (max-width: 767px) {\n    .portfolio-gallery {\n        grid-template-columns: 1fr;\n        gap: 16px;\n    }\n\n    .portfolio-gallery .gallery-item {\n        height: 290px;\n    }\n\n    .portfolio-gallery .gallery-overlay {\n        padding: 22px;\n    }\n\n    .gallery-lightbox {\n        padding: 55px 45px;\n    }\n\n    .gallery-lightbox .lightbox-prev {\n        left: 2px;\n    }\n\n    .gallery-lightbox .lightbox-next {\n        right: 2px;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .portfolio-gallery *,\n    .gallery-lightbox * {\n        transition: none !important;\n    }\n}\n<\/style>\n\n<script>\n(function () {\n    const gallery = document.querySelector('.portfolio-gallery');\n    const lightbox = document.getElementById('galleryLightbox');\n\n    if (!gallery || !lightbox || lightbox.dataset.initialized) return;\n    lightbox.dataset.initialized = 'true';\n\n    const items = Array.from(gallery.querySelectorAll('.gallery-item'));\n    const preview = document.getElementById('lightboxImage');\n    const caption = document.getElementById('lightboxTitle');\n    const closeBtn = lightbox.querySelector('.lightbox-close');\n    let current = 0;\n    let previousFocus = null;\n\n    function showImage(index) {\n        current = (index + items.length) % items.length;\n        const item = items[current];\n        preview.src = item.href;\n        preview.alt = item.querySelector('img').alt;\n        caption.textContent = item.dataset.title || preview.alt;\n    }\n\n    function openLightbox(index) {\n        previousFocus = document.activeElement;\n        showImage(index);\n        lightbox.classList.add('is-open');\n        lightbox.setAttribute('aria-hidden', 'false');\n        document.body.style.overflow = 'hidden';\n        closeBtn.focus();\n    }\n\n    function closeLightbox() {\n        lightbox.classList.remove('is-open');\n        lightbox.setAttribute('aria-hidden', 'true');\n        document.body.style.overflow = '';\n        preview.src = '';\n        if (previousFocus) previousFocus.focus();\n    }\n\n    items.forEach((item, index) => {\n        item.addEventListener('click', event => {\n            event.preventDefault();\n            openLightbox(index);\n        });\n    });\n\n    closeBtn.addEventListener('click', closeLightbox);\n    lightbox.querySelector('.lightbox-prev').addEventListener('click', () => {\n        showImage(current - 1);\n    });\n    lightbox.querySelector('.lightbox-next').addEventListener('click', () => {\n        showImage(current + 1);\n    });\n\n    lightbox.addEventListener('click', event => {\n        if (event.target === lightbox) closeLightbox();\n    });\n\n    document.addEventListener('keydown', event => {\n        if (!lightbox.classList.contains('is-open')) return;\n\n        if (event.key === 'Escape') closeLightbox();\n        if (event.key === 'ArrowLeft') showImage(current - 1);\n        if (event.key === 'ArrowRight') showImage(current + 1);\n    });\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Jai Prakash Giri President Smt. Gayatri Devi Vice President Dr. Surbhi Gen. Secretary Manish Giri IT Chief &times; &#10094; &#10095;<\/p>\n","protected":false},"author":0,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"give_campaign_id":0,"footnotes":""},"class_list":["post-2462","page","type-page","status-publish","hentry"],"campaignId":"","_links":{"self":[{"href":"https:\/\/birct.in\/index.php\/wp-json\/wp\/v2\/pages\/2462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/birct.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/birct.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"replies":[{"embeddable":true,"href":"https:\/\/birct.in\/index.php\/wp-json\/wp\/v2\/comments?post=2462"}],"version-history":[{"count":16,"href":"https:\/\/birct.in\/index.php\/wp-json\/wp\/v2\/pages\/2462\/revisions"}],"predecessor-version":[{"id":5609,"href":"https:\/\/birct.in\/index.php\/wp-json\/wp\/v2\/pages\/2462\/revisions\/5609"}],"wp:attachment":[{"href":"https:\/\/birct.in\/index.php\/wp-json\/wp\/v2\/media?parent=2462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}