/* === House Details - Gallery Section === */
.hd-gallery-section{ padding:20px 0; background:#F6F8FB; }
.hd-gallery-section .container{ max-width:1444px; padding-inline:24px; margin-inline:auto; }

.hd-gallery-title{ margin:0 0 56px; font-family:'Syne',sans-serif; font-weight:600; font-size:72px; line-height:80px; color:#01172C; }

/* Gallery Grid */
.hd-gallery-grid{ display:flex; flex-direction:column; gap:16px; margin-bottom:48px; }

.hd-gallery-row{ display:grid; gap:16px; }
.hd-gallery-row.row-1{ grid-template-columns:1fr; }
.hd-gallery-row.row-2{ grid-template-columns:repeat(2, 1fr); }
.hd-gallery-row.row-3{ grid-template-columns:1fr; }
.hd-gallery-row.row-4{ grid-template-columns:repeat(2, 1fr); }
.hd-gallery-row.row-5{ grid-template-columns:1fr; }
.hd-gallery-row.row-6{ grid-template-columns:repeat(2, 1fr); }

.hd-gallery-item{ position:relative; overflow:hidden; cursor:zoom-in; display:block; }
.hd-gallery-item img{ display:block; width:100%; height:100%; object-fit:cover; }

/* Image loading skeleton for gallery */
.hd-gallery-item .image-container{ 
  position:relative; width:100%; height:100%; overflow:hidden; 
}
.hd-gallery-item .image-skeleton{ 
  position:absolute; inset:0; background:#E5E7EB;
  background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 50%, #E5E7EB 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  z-index:1;
}
.hd-gallery-item .image-container img{ 
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition: opacity 0.3s ease;
  z-index:2;
}
.hd-gallery-item .image-container.loaded img{ opacity:1; }
.hd-gallery-item .image-container.loaded .image-skeleton{ opacity:0; transition: opacity 0.3s ease; }

@keyframes shimmer{
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Gallery Item Heights */
.hd-gallery-item.h-960{ height:960px; }
.hd-gallery-item.h-474{ height:474px; }
.hd-gallery-item.h-810{ height:810px; }
.hd-gallery-item.h-400{ height:400px; }
.hd-gallery-item.h-861{ height:861px; }
.hd-gallery-item.h-712{ height:712px; }

/* Overlay and Plus Button */
.hd-gallery-item .overlay{ position:absolute; inset:0; background:rgba(0,0,0,.3); opacity:0; transition:opacity .3s ease; pointer-events:none; }
.hd-gallery-item:hover .overlay{ opacity:1; }

.hd-gallery-item .plus-btn{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; background:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
  z-index:99;
}
.hd-gallery-item:hover .plus-btn{ opacity:1; transform:translate(-50%,-50%) scale(1.1); }

.hd-gallery-item .plus-btn::before,
.hd-gallery-item .plus-btn::after{
  content:""; position:absolute; background:#01172C;
}
.hd-gallery-item .plus-btn::before{ width:24px; height:2px; }
.hd-gallery-item .plus-btn::after{ width:2px; height:24px; }

/* View More Button */
.hd-gallery-more-wrap{ display:flex; justify-content:center; }
.hd-gallery-more-btn{
  width:208px; height:56px; border:1px solid #01172C; border-radius:100px;
  background:transparent; color:#01172C; font-family:'Syne',sans-serif;
  font-weight:600; font-size:18px; line-height:22px; cursor:pointer;
  transition:background .3s ease, color .3s ease; text-decoration:none;
  display:flex; align-items:center; justify-content:center;
}
.hd-gallery-more-btn:hover{ background:#072B4D; color:#FFFFFF; }
.hd-gallery-more-btn:focus-visible{ outline:2px solid #072B4D; outline-offset:2px; }

/* Lightbox Styles */
.lb{ position:fixed; inset:0; background:rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; z-index:20000; }
.lb.is-open{ display:flex; }
.lb-img{ max-width:90vw; max-height:85vh; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.6); }

/* Close button as an X */
.lb-close{ position:absolute; top:16px; right:20px; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.78); cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 28px rgba(0,0,0,.35); z-index:10; transition:transform .15s ease, background .15s ease, box-shadow .15s ease; border:none; }
.lb-close::before, .lb-close::after{ content:""; position:absolute; width:22px; height:2px; background:rgba(1,23,44,.9); border-radius:2px; }
.lb-close::before{ transform:rotate(45deg); }
.lb-close::after{ transform:rotate(-45deg); }
.lb-close:hover{ transform:scale(1.06); background:rgba(255,255,255,.9); box-shadow:0 12px 34px rgba(0,0,0,.4); }

/* Navigation arrows */
.lb-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.78); box-shadow:0 10px 28px rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .15s ease, background .15s ease, box-shadow .15s ease; z-index:10; backdrop-filter:saturate(160%) blur(2px); }
.lb-arrow.left{ left:24px; }
.lb-arrow.right{ right:24px; }
.lb-arrow::before{ content:""; width:18px; height:18px; border-right:3px solid rgba(1,23,44,.9); border-top:3px solid rgba(1,23,44,.9); transform:rotate(45deg); display:block; }
.lb-arrow.left::before{ transform:rotate(225deg); }
.lb-arrow:hover{ transform:translateY(-50%) scale(1.06); background:rgba(255,255,255,.9); box-shadow:0 12px 34px rgba(0,0,0,.4); }

@media (max-width:1100px){
  .hd-gallery-section{ padding:0px 0; }
  .hd-gallery-title{ font-size:48px; line-height:56px; margin-bottom:36px; }
  .hd-gallery-row.row-2,
  .hd-gallery-row.row-4,
  .hd-gallery-row.row-6{ grid-template-columns:1fr; }
  .hd-gallery-item.h-960,
  .hd-gallery-item.h-474,
  .hd-gallery-item.h-810,
  .hd-gallery-item.h-400,
  .hd-gallery-item.h-861,
  .hd-gallery-item.h-712{ height:400px; }
}

@media (max-width:768px){
  .lb-arrow{ width:44px; height:44px; }
  .lb-arrow::before{ width:14px; height:14px; border-right:2px solid rgba(1,23,44,.95); border-top:2px solid rgba(1,23,44,.95); }
  .lb-close{ width:38px; height:38px; }
}