{"id":2029,"date":"2026-07-16T20:49:50","date_gmt":"2026-07-16T17:49:50","guid":{"rendered":"https:\/\/bellamarportghalib.com\/?page_id=2029"},"modified":"2026-07-24T16:15:48","modified_gmt":"2026-07-24T13:15:48","slug":"gallary","status":"publish","type":"page","link":"https:\/\/bellamarportghalib.com\/pl\/gallary\/","title":{"rendered":"Gallary"},"content":{"rendered":"\n\n<!-- ============================================================\n     BELLA MAR \u2014 GALLERY PAGE\n     ========================================\n     Tabs clearly separate REAL construction photos from RENDERS\n     to preserve the transparency positioning used across the site.\n     ========================================\n     \ud83d\udd27 Replace all placeholder image URLs (search \"REPLACE-GALLERY\")\n     with your real photo\/render URLs from WordPress Media Library.\n     Paste into a Custom HTML block on the Gallery page\n     (set page template to Full Width first).\n-->\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,700;1,600&#038;family=Inter:wght@300;400;500;600&#038;display=swap\" rel=\"stylesheet\">\n\n<style>\n.bmgal *, .bmgal *::before, .bmgal *::after {\n  box-sizing: border-box; margin: 0; padding: 0;\n}\n:root {\n  --navy:   #1B3A5C;\n  --navy-d: #122A44;\n  --teal:   #0E7C7B;\n  --gold:   #C9952A;\n  --dark:   #2C2C2C;\n  --mid:    #555555;\n  --subtle: #888888;\n  --off:    #FAFAFA;\n  --ff-d:   'Playfair Display', Georgia, serif;\n  --ff-b:   'Inter', system-ui, sans-serif;\n}\n\n.bmgal {\n  width: 100vw;\n  margin-left: calc(-50vw + 50%);\n  margin-right: calc(-50vw + 50%);\n  margin-top: calc(-50vw + 50%);\n  font-family: var(--ff-b);\n  background: var(--off);\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 BANNER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.bmgal__banner {\n  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-d) 100%);\n  padding: clamp(3.5rem, 7vw, 5.5rem) 2.5rem clamp(2.5rem, 5vw, 3.5rem);\n  text-align: center;\n}\n.bmgal__eyebrow {\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n  font-size: 10.5px;\n  font-weight: 600;\n  letter-spacing: 0.16em;\n  text-transform: uppercase;\n  color: var(--gold);\n  margin-bottom: 1.1rem;\n}\n\/* .bmgal__eyebrow::before, .bmgal__eyebrow::after {\n  content: ''; width: 22px; height: 1.5px; background: var(--gold);\n} *\/\n.bmgal__banner-title {\n  font-family: var(--ff-d);\n  font-size: clamp(2rem, 4.5vw, 3.2rem);\n  font-weight: 700;\n  color: #fff;\n  margin-bottom: 0.75rem;\n}\n.bmgal__banner-title em { font-style: italic; color: var(--gold); }\n.bmgal__banner-sub {\n  font-size: 15px;\n  color: rgba(255,255,255,0.68);\n  max-width: 560px;\n  margin: 0 auto;\n  line-height: 1.6;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 TABS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.bmgal__tabs-wrap {\n  position: sticky;\n  top: 0;\n  z-index: 20;\n  background: #fff;\n  border-bottom: 1px solid rgba(27,58,92,0.08);\n  box-shadow: 0 2px 12px rgba(27,58,92,0.04);\n}\n.bmgal__tabs {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 1rem 2.5rem;\n  display: flex;\n  gap: 0.6rem;\n  flex-wrap: wrap;\n  justify-content: center;\n}\n.bmgal__tab {\n  display: inline-flex;\n  align-items: center;\n  gap: 7px;\n  padding: 10px 20px;\n  border-radius: 100px;\n  border: 1.5px solid rgba(27,58,92,0.15);\n  background: #fff;\n  color: var(--navy);\n  font-family: var(--ff-b);\n  font-size: 13.5px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;\n}\n.bmgal__tab--active {\n  background: var(--navy);\n  border-color: var(--navy);\n  color: #fff;\n}\n.bmgal__tab:hover:not(.bmgal__tab--active) {\n  border-color: var(--teal);\n  color: var(--teal);\n}\n.bmgal__tab-badge {\n  font-size: 9px;\n  font-weight: 700;\n  padding: 2px 7px;\n  border-radius: 100px;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n}\n.bmgal__tab-badge--real {\n  background: rgba(14,124,123,0.14);\n  color: var(--teal);\n}\n.bmgal__tab--active .bmgal__tab-badge--real {\n  background: rgba(255,255,255,0.2);\n  color: #fff;\n}\n.bmgal__tab-badge--render {\n  background: rgba(201,149,42,0.15);\n  color: #a8791f;\n}\n.bmgal__tab--active .bmgal__tab-badge--render {\n  background: rgba(255,255,255,0.2);\n  color: #fff;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 BODY \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.bmgal__body {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: clamp(2.5rem, 5vw, 3.5rem) 2.5rem;\n}\n\n.bmgal__note {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  background: rgba(14,124,123,0.06);\n  border-left: 3px solid var(--teal);\n  border-radius: 0 8px 8px 0;\n  padding: 0.9rem 1.2rem;\n  font-size: 13px;\n  color: var(--dark);\n  margin-bottom: 2rem;\n}\n.bmgal__note strong { color: var(--teal); }\n\n.bmgal__grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n  gap: 1.1rem;\n}\n\n.bmgal__card {\n  position: relative;\n  border-radius: 12px;\n  overflow: hidden;\n  cursor: pointer;\n  background: #eee;\n  aspect-ratio: 4 \/ 3;\n}\n.bmgal__card img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n  transition: transform 0.35s ease;\n}\n.bmgal__card:hover img {\n  transform: scale(1.06);\n}\n.bmgal__card-tag {\n  position: absolute;\n  top: 10px;\n  left: 10px;\n  font-size: 10px;\n  font-weight: 700;\n  padding: 4px 10px;\n  border-radius: 100px;\n  text-transform: uppercase;\n  letter-spacing: 0.03em;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n}\n.bmgal__card-tag--real {\n  background: rgba(14,124,123,0.85);\n  color: #fff;\n}\n.bmgal__card-tag--render {\n  background: rgba(201,149,42,0.88);\n  color: var(--navy);\n}\n\/* .bmgal__card-caption {\n  position: absolute;\n  bottom: 0; left: 0; right: 0;\n  padding: 10px 12px 8px;\n  background: linear-gradient(to top, rgba(11,28,46,0.82), transparent);\n  color: #fff;\n  font-size: 12px;\n  font-weight: 600;\n} *\/\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 LIGHTBOX \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.bmgal__lightbox {\n  position: fixed;\n  inset: 0;\n  background: rgba(11,28,46,0.92);\n  z-index: 100;\n  display: none;\n  align-items: center;\n  justify-content: center;\n  padding: 2rem;\n}\n.bmgal__lightbox--open { display: flex; }\n.bmgal__lightbox-img-wrap {\n  max-width: 92vw;\n  max-height: 84vh;\n  position: relative;\n}\n.bmgal__lightbox-img-wrap img {\n  max-width: 92vw;\n  max-height: 80vh;\n  border-radius: 10px;\n  display: block;\n}\n.bmgal__lightbox-caption {\n  text-align: center;\n  color: #fff;\n  font-size: 13px;\n  margin-top: 12px;\n  opacity: 0.8;\n}\n.bmgal__lightbox-close,\n.bmgal__lightbox-prev,\n.bmgal__lightbox-next {\n  position: absolute;\n  background: rgba(255,255,255,0.12);\n  border: none;\n  color: #fff;\n  border-radius: 50%;\n  width: 42px; height: 42px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  font-size: 18px;\n  transition: background 0.2s ease;\n}\n.bmgal__lightbox-close:hover,\n.bmgal__lightbox-prev:hover,\n.bmgal__lightbox-next:hover {\n  background: rgba(255,255,255,0.25);\n}\n.bmgal__lightbox-close { top: -1.5rem; right: -1.5rem; }\n.bmgal__lightbox-prev { left: -60px; top: 50%; transform: translateY(-50%); }\n.bmgal__lightbox-next { right: -60px; top: 50%; transform: translateY(-50%); }\n\n@media (max-width: 700px) {\n  .bmgal__lightbox-close { top: 0.5rem; right: 0.5rem; }\n  .bmgal__lightbox-prev { left: 0.5rem; }\n  .bmgal__lightbox-next { right: 0.5rem; }\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 RESPONSIVE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n@media (max-width: 560px) {\n  .bmgal__banner { padding: 3rem 1.25rem 2rem; }\n  .bmgal__body { padding: 2rem 1.25rem; }\n  .bmgal__tabs { padding: 0.85rem 1.25rem; gap: 0.4rem; }\n  .bmgal__tab { padding: 8px 14px; font-size: 12.5px; }\n  .bmgal__grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }\n}\n\n.bmgal-reveal {\n  opacity: 0; transform: translateY(16px);\n  transition: opacity 0.45s ease, transform 0.45s ease;\n}\n.bmgal-reveal.bmgal--in { opacity: 1; transform: translateY(0); }\n@media (prefers-reduced-motion: reduce) {\n  .bmgal-reveal { opacity: 1; transform: none; transition: none; }\n}\n<\/style>\n\n<div class=\"bmgal\">\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 BANNER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <div class=\"bmgal__banner\">\n    <p class=\"bmgal__eyebrow\"><\/p>\n    <h1 class=\"bmgal__banner-title\">The Project, <em>In Pictures.<\/em><\/h1>\n    <p class=\"bmgal__banner-sub\">\n      Real construction photos alongside design renders \u2014 clearly labelled, so you always know what you&#8217;re looking at.\n    <\/p>\n  <\/div>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 TABS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <div class=\"bmgal__tabs-wrap\">\n    <div class=\"bmgal__tabs\" role=\"tablist\" aria-label=\"Filter gallery\">\n      <button class=\"bmgal__tab bmgal__tab--active\" data-filter=\"all\">All<\/button>\n      <button class=\"bmgal__tab\" data-filter=\"construction\">\n        Construction Progress <span class=\"bmgal__tab-badge bmgal__tab-badge--real\">Real Photos<\/span>\n      <\/button>\n      <button class=\"bmgal__tab\" data-filter=\"exterior\">\n        Exterior Design <span class=\"bmgal__tab-badge bmgal__tab-badge--render\">Render<\/span>\n      <\/button>\n      <button class=\"bmgal__tab\" data-filter=\"interior\">\n        Interior Design <span class=\"bmgal__tab-badge bmgal__tab-badge--render\">Render<\/span>\n      <\/button>\n      <!-- <button class=\"bmgal__tab\" data-filter=\"location\">\n        Site &amp; Surroundings <span class=\"bmgal__tab-badge bmgal__tab-badge--real\">Real Photos<\/span>\n      <\/button> -->\n    <\/div>\n  <\/div>\n\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 BODY \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <div class=\"bmgal__body\">\n\n    <div class=\"bmgal__note bmgal-reveal\">\n      <span aria-hidden=\"true\">\u24d8<\/span>\n      <span><strong>Real Photos<\/strong> badges mark actual on-site photography. <strong>Render<\/strong> badges mark architectural visualisations of the finished design.<\/span>\n    <\/div>\n\n    <div class=\"bmgal__grid\" id=\"bmgal-grid\"><!-- injected by JS --><\/div>\n\n  <\/div>\n<\/div>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 LIGHTBOX \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"bmgal__lightbox\" id=\"bmgal-lightbox\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Image viewer\">\n  <button class=\"bmgal__lightbox-prev\" id=\"bmgal-prev\" aria-label=\"Previous image\">\u2039<\/button>\n  <div class=\"bmgal__lightbox-img-wrap\">\n    <button class=\"bmgal__lightbox-close\" id=\"bmgal-close\" aria-label=\"Close\">\u2715<\/button>\n    <img decoding=\"async\" id=\"bmgal-lightbox-img\" src=\"\" alt=\"\">\n    <p class=\"bmgal__lightbox-caption\" id=\"bmgal-lightbox-caption\"><\/p>\n  <\/div>\n  <button class=\"bmgal__lightbox-next\" id=\"bmgal-next\" aria-label=\"Next image\">\u203a<\/button>\n<\/div>\n\n<script>\n(function () {\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     IMAGES \u2014 \ud83d\udd27 replace every REPLACE-GALLERY-... URL with\n     your real photo\/render URLs from WordPress Media Library.\n     Add or remove entries freely; each needs: src, caption,\n     category ('construction' | 'exterior' | 'interior' | 'location'),\n     and isReal (true = real photo, false = render).\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\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  var IMAGES = [\n    \/\/ Construction progress \u2014 REAL\n    { src:'https:\/\/bellamarportghalib.com\/wp-content\/uploads\/2026\/07\/2026_04_23_10_20_IMG_3716-scaled.jpg', category:'construction', isReal:true },\n    { src:'https:\/\/bellamarportghalib.com\/wp-content\/uploads\/2026\/07\/Screenshot-2026-05-20-093531.png', category:'construction', isReal:true },\n    { src:'https:\/\/bellamarportghalib.com\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-05-23-at-11.20.05-PM-1.jpeg', category:'construction', isReal:true },\n    { src:'https:\/\/bellamarportghalib.com\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-05-23-at-11.20.06-PM-2.jpeg', category:'construction', isReal:true },\n    { src:'https:\/\/bellamarportghalib.com\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-05-23-at-11.20.06-PM.jpeg', category:'construction', isReal:true },\n    { src:'https:\/\/bellamarportghalib.com\/wp-content\/uploads\/2026\/07\/WhatsApp-Image-2026-07-02-at-1.34.04-PM.jpeg', category:'construction', isReal:true },\n\n    \/\/ Exterior design \u2014 RENDER\n    { src:'https:\/\/bellamarportghalib.com\/wp-content\/uploads\/2026\/07\/686327910_122174211842943550_4821010164965507869_n.jpg', category:'exterior', isReal:false },\n    { src:'https:\/\/bellamarportghalib.com\/wp-content\/uploads\/2026\/07\/686978232_122174211434943550_335344096094905937_n.jpg', category:'exterior', isReal:false },\n    { src:'https:\/\/bellamarportghalib.com\/wp-content\/uploads\/2026\/07\/683638297_122174211608943550_5053007037839623436_n.jpg', category:'exterior', isReal:false },\n    { src:'https:\/\/bellamarportghalib.com\/wp-content\/uploads\/2026\/07\/684778358_122174211938943550_1525491182012382248_n.jpg', category:'exterior', isReal:false },\n    { src:'https:\/\/bellamarportghalib.com\/wp-content\/uploads\/2026\/07\/684919082_122174211758943550_2914686284163541818_n.jpg', category:'exterior', isReal:false },\n    { src:'https:\/\/bellamarportghalib.com\/wp-content\/uploads\/2026\/05\/686923325_122174211026943550_4896000572778668006_n-1.jpg', category:'exterior', isReal:false },\n    { src:'https:\/\/bellamarportghalib.com\/wp-content\/uploads\/2026\/07\/IMG-20250425-WA0100.jpg', category:'exterior', isReal:false },\n    { src:'https:\/\/bellamarportghalib.com\/wp-content\/uploads\/2026\/07\/IMG-20250425-WA0109.jpg', category:'exterior', isReal:false },\n    { src:'https:\/\/bellamarportghalib.com\/wp-content\/uploads\/2026\/07\/IMG-20250425-WA0110.jpg', category:'exterior', isReal:false },\n    { src:'https:\/\/bellamarportghalib.com\/wp-content\/uploads\/2026\/07\/enhanced_D_5-Photo-scaled.png', category:'exterior', isReal:false },\n    { src:'https:\/\/bellamarportghalib.com\/wp-content\/uploads\/2026\/07\/enhanced_D_4-Photo-scaled.png', category:'exterior', isReal:false },\n    { src:'https:\/\/bellamarportghalib.com\/wp-content\/uploads\/2026\/07\/enhanced_D_3-Photo-scaled.png', category:'exterior', isReal:false },\n    { src:'https:\/\/bellamarportghalib.com\/wp-content\/uploads\/2026\/07\/686382479_122174211290943550_3312739852085651992_n.jpg', category:'exterior', isReal:false },\n    { src:'https:\/\/bellamarportghalib.com\/wp-content\/uploads\/2026\/07\/684132356_122174211458943550_1804655675366604526_n.jpg', category:'exterior', isReal:false },\n    { src:'https:\/\/bellamarportghalib.com\/wp-content\/uploads\/2026\/07\/686325200_122174211164943550_8739696384945302692_n.jpg', category:'exterior', isReal:false },\n    { src:'https:\/\/bellamarportghalib.com\/wp-content\/uploads\/2026\/07\/685284749_122174211584943550_7048514987412019468_n.jpg', category:'exterior', isReal:false },\n    { src:'https:\/\/bellamarportghalib.com\/wp-content\/uploads\/2026\/07\/687042668_122174211650943550_2401237020788226920_n.jpg', category:'exterior', isReal:false },\n    { src:'https:\/\/bellamarportghalib.com\/wp-content\/uploads\/2026\/07\/685639585_122174212070943550_2188713270423502420_n.jpg', category:'exterior', isReal:false },\n    \n    \/\/ Interior design \u2014 RENDER\n    { src:'https:\/\/bellamarportghalib.com\/wp-content\/uploads\/2026\/07\/Screenshot-5.png', category:'interior', isReal:false },\n    { src:'https:\/\/bellamarportghalib.com\/wp-content\/uploads\/2026\/07\/Screenshot-6.png', category:'interior', isReal:false },\n    { src:'https:\/\/bellamarportghalib.com\/wp-content\/uploads\/2026\/07\/Screenshot-3.png', category:'interior', isReal:false },\n    { src:'https:\/\/bellamarportghalib.com\/wp-content\/uploads\/2026\/07\/Screenshot-7.png', category:'interior', isReal:false },\n    { src:'https:\/\/bellamarportghalib.com\/wp-content\/uploads\/2026\/07\/Screenshot-10.png', category:'interior', isReal:false },\n    { src:'https:\/\/bellamarportghalib.com\/wp-content\/uploads\/2026\/07\/Screenshot-13.png', category:'interior', isReal:false },\n\n    \/\/ \/\/ Site & surroundings \u2014 REAL\n    \/\/ { src:'REPLACE-GALLERY-location-1.jpg', category:'location', isReal:true },\n    \/\/ { src:'REPLACE-GALLERY-location-2.jpg', category:'location', isReal:true },\n    \/\/ { src:'REPLACE-GALLERY-location-3.jpg', category:'location', isReal:true }\n  ];\n\n  var grid = document.getElementById('bmgal-grid');\n  var tabs = document.querySelectorAll('.bmgal__tab');\n  var lightbox = document.getElementById('bmgal-lightbox');\n  var lightboxImg = document.getElementById('bmgal-lightbox-img');\n  var lightboxCaption = document.getElementById('bmgal-lightbox-caption');\n  var closeBtn = document.getElementById('bmgal-close');\n  var prevBtn = document.getElementById('bmgal-prev');\n  var nextBtn = document.getElementById('bmgal-next');\n\n  var currentList = IMAGES;\n  var currentIndex = 0;\n\n  function renderGrid(filter) {\n    var list = filter === 'all' ? IMAGES : IMAGES.filter(function (img) { return img.category === filter; });\n    currentList = list;\n    grid.innerHTML = '';\n\n    list.forEach(function (img, i) {\n      var card = document.createElement('div');\n      card.className = 'bmgal__card bmgal-reveal';\n      card.innerHTML =\n        '<img decoding=\"async\" src=\"' + img.src + '\" alt=\"' + img.caption + '\" loading=\"lazy\">' +\n        '<span class=\"bmgal__card-tag ' + (img.isReal ? 'bmgal__card-tag--real' : 'bmgal__card-tag--render') + '\">' +\n          (img.isReal ? 'Real Photo' : 'Render') +\n        '<\/span>' +\n        '<span class=\"bmgal__card-caption\">' + img.caption + '<\/span>';\n\n      card.addEventListener('click', function () { openLightbox(i); });\n      grid.appendChild(card);\n\n      setTimeout(function () { card.classList.add('bmgal--in'); }, 15 * i);\n    });\n  }\n\n  function openLightbox(index) {\n    currentIndex = index;\n    updateLightbox();\n    lightbox.classList.add('bmgal__lightbox--open');\n    document.body.style.overflow = 'hidden';\n  }\n\n  function updateLightbox() {\n    var img = currentList[currentIndex];\n    lightboxImg.src = img.src;\n    lightboxImg.alt = img.caption;\n    lightboxCaption.textContent = img.caption + (img.isReal ? ' \u2014 Real Photo' : ' \u2014 Render');\n  }\n\n  function closeLightbox() {\n    lightbox.classList.remove('bmgal__lightbox--open');\n    document.body.style.overflow = '';\n  }\n\n  closeBtn.addEventListener('click', closeLightbox);\n  lightbox.addEventListener('click', function (e) {\n    if (e.target === lightbox) closeLightbox();\n  });\n  prevBtn.addEventListener('click', function () {\n    currentIndex = (currentIndex - 1 + currentList.length) % currentList.length;\n    updateLightbox();\n  });\n  nextBtn.addEventListener('click', function () {\n    currentIndex = (currentIndex + 1) % currentList.length;\n    updateLightbox();\n  });\n  document.addEventListener('keydown', function (e) {\n    if (!lightbox.classList.contains('bmgal__lightbox--open')) return;\n    if (e.key === 'Escape') closeLightbox();\n    if (e.key === 'ArrowLeft') prevBtn.click();\n    if (e.key === 'ArrowRight') nextBtn.click();\n  });\n\n  tabs.forEach(function (tab) {\n    tab.addEventListener('click', function () {\n      tabs.forEach(function (t) { t.classList.remove('bmgal__tab--active'); });\n      this.classList.add('bmgal__tab--active');\n      renderGrid(this.getAttribute('data-filter'));\n    });\n  });\n\n  renderGrid('all');\n})();\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"<p>The Project, In Pictures. Real construction photos alongside design renders \u2014 clearly labelled, so you always know what you&#8217;re looking at. All Construction Progress Real Photos Exterior Design Render Interior Design Render \u24d8 Real Photos badges mark actual on-site photography. Render badges mark architectural visualisations of the finished design. \u2039 \u2715 \u203a<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-2029","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/bellamarportghalib.com\/pl\/wp-json\/wp\/v2\/pages\/2029","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bellamarportghalib.com\/pl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bellamarportghalib.com\/pl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bellamarportghalib.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bellamarportghalib.com\/pl\/wp-json\/wp\/v2\/comments?post=2029"}],"version-history":[{"count":4,"href":"https:\/\/bellamarportghalib.com\/pl\/wp-json\/wp\/v2\/pages\/2029\/revisions"}],"predecessor-version":[{"id":2076,"href":"https:\/\/bellamarportghalib.com\/pl\/wp-json\/wp\/v2\/pages\/2029\/revisions\/2076"}],"wp:attachment":[{"href":"https:\/\/bellamarportghalib.com\/pl\/wp-json\/wp\/v2\/media?parent=2029"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}