/* === Gallery Section === */
.gallery-section{ position:relative; padding:20px 0; }
.gallery-section .container{ max-width:1444px; }

.gallery-header{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 18px; }
.gallery-eyebrow{ font-family:'Syne',sans-serif; font-weight:500; font-size:24px; line-height:29px; color:#01172C; }
.gallery-title{ margin:0; font-family:'Syne',sans-serif; font-weight:700; font-size:72px; line-height:80px; color:#01172C; }

.gallery-grid{ display:grid; grid-template-columns: 1fr; gap:24px; }
.gallery-top{ position:relative; width:100%; height:960px;  overflow:hidden; cursor: zoom-in; }

/* Image loading skeleton for gallery preview */
.gallery-top .image-container,
.gallery-card .image-container{ 
  position:relative; width:100%; height:100%; overflow:hidden; 
}
.gallery-top .image-skeleton,
.gallery-card .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;
}
.gallery-top .image-container img,
.gallery-card .image-container img{ 
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition: opacity 0.3s ease;
  z-index:2;
}
.gallery-top .image-container.loaded img,
.gallery-card .image-container.loaded img{ opacity:1; }
.gallery-top .image-container.loaded .image-skeleton,
.gallery-card .image-container.loaded .image-skeleton{ opacity:0; transition: opacity 0.3s ease; }

.gallery-top .overlay{ position:absolute; inset:0; background:rgba(0,0,0,.24); opacity:0; transition:opacity .2s ease; }
.gallery-top:hover .overlay{ opacity:1; }

.gallery-bottom{ display:grid; grid-template-columns: 1fr 1fr; gap:24px; }
.gallery-card{ position:relative; height:480px; overflow:hidden; cursor: zoom-in; }
.gallery-card .overlay{ position:absolute; inset:0; background:rgba(0,0,0,.24); opacity:0; transition:opacity .2s ease; }
.gallery-card:hover .overlay{ opacity:1; }

/* Plus button */
.plus-btn{ 
  position:absolute; width:48px; height:48px; border-radius:50%; background:#fff; 
  display:flex; align-items:center; justify-content:center; 
  left:50%; top:50%; transform: translate(-50%, -50%); 
  transition: transform .3s ease; 
  pointer-events:none;
  z-index: 99;
}
.plus-btn::before,
.plus-btn::after{ content:""; position:absolute; background:#01172C; }
.plus-btn::before{ width:20px; height:2px; }
.plus-btn::after{ width:2px; height:20px; }
.gallery-card:hover .plus-btn, .gallery-top:hover .plus-btn{ 
  transform: translate(-50%, -50%) scale(1.1); 
}

/* Gallery scene: plus button only on hover */
.gallery-all .plus-btn{ opacity:0; transition: opacity .3s ease, transform .3s ease; }
.gallery-all .gallery-card:hover .plus-btn{ opacity:1; transform: translate(-50%, -50%) scale(1.1); }

/* Count badge on third tile */
.count-badge{ position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); font-family:'Syne',sans-serif; font-weight:700; font-size:56px; line-height:67px; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.4); z-index: 99;}

/* Lightbox */
.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; }
.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-nav{ position:absolute; inset:0; pointer-events:none; }
.lb-prev, .lb-next{ position:absolute; top:0; bottom:0; width:18%; pointer-events:auto; display:flex; align-items:center; }
.lb-prev{ left:0; justify-content:flex-start; }
.lb-next{ right:0; justify-content:flex-end; }
.lb-arrow{ 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; margin:0 24px; cursor:pointer; transition: transform .15s ease, background .15s ease, box-shadow .15s ease; backdrop-filter: saturate(160%) blur(2px); }
.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-prev .lb-arrow::before{ transform: rotate(225deg); }
.lb-arrow:hover{ transform: scale(1.06); background:rgba(255,255,255,.9); box-shadow:0 12px 34px rgba(0,0,0,.4); }

/* Gallery scene grid and animations */
.gallery-all{ display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }
.gallery-all .is-hidden{ display:none; }
.gallery-card.span-12{ grid-column:1 / -1; height:720px; }
.gallery-card.span-6{ height:480px; }
.gallery-card.span-4{ height:400px; }
.fade-in{ opacity:0; transform: translateY(12px); animation: fadeInUp .6s ease forwards; animation-delay: var(--delay, 0ms); }
@keyframes fadeInUp{ to { opacity:1; transform: translateY(0); } }

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

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

@media (max-width:768px){
  .gallery-all{ grid-template-columns:1fr; }
  .gallery-card.span-12,
  .gallery-card.span-6,
  .gallery-card.span-4{ height:400px; grid-column:1; }
  /* Lighbox mobile arrows: smaller, cleaner */
  .lb-prev, .lb-next{ width:22%; }
  .lb-arrow{ width:44px; height:44px; margin:0 12px; background:rgba(255,255,255,.85); border-color:rgba(255,255,255,.85); box-shadow:0 8px 20px rgba(0,0,0,.35); }
  .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; }
  .count-badge{    font-size: 40px;}
}

/* Center Load More */
.gallery-more-wrap{ display:flex; justify-content:center; margin-top:24px; }
.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; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none; transition: background .2s ease, color .2s ease, transform .05s ease; }
.gallery-more-btn:hover{ background:#072B4D; color:#FFFFFF; }
.gallery-more-btn:active{ transform: translateY(1px); }
.gallery-more-btn:focus-visible{ outline:3px solid rgba(1,23,44,.25); outline-offset:3px; }

@media (max-width: 1100px){
  .gallery-title{ font-size: clamp(40px,6vw,72px); line-height: clamp(48px,6.5vw,80px); }
  .gallery-top{ height: 56vw; }
  .gallery-card{ height: 45vw; }
  .gallery-card.span-6, .gallery-card.span-4{ flex-basis: 100%; }
}

@media (max-width: 500px){
  .gallery-title{ font-size: clamp(35px, 6vw, 72px); line-height: clamp(40px, 6.5vw, 80px); }

}