/* components/gallery-section.css - homepage gallery circular scroller */
.gallery { padding:18px 0; }
.gallery h2 { text-align:center; margin-bottom:12px; }

/* row */
.gallery-row {
  display:flex;
  gap:16px;
  align-items:center;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:12px 10px;
  scroll-snap-type:x mandatory;
  scroll-padding: 24px;
}

/* larger circular thumbs */
.gallery-thumb {
  flex:0 0 auto;
  width:140px;
  height:140px;
  border-radius:50%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  box-shadow:0 12px 36px rgba(10,20,30,0.08);
  cursor:pointer;
  scroll-snap-align:center;
  border:6px solid rgba(59,130,246,0.18);
  transition: transform 180ms ease, box-shadow 180ms ease;
  position:relative;
}
.gallery-thumb:hover { transform: translateY(-6px); box-shadow:0 20px 40px rgba(10,20,30,0.12); }
.gallery-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:768px) {
  .gallery-thumb { width:110px; height:110px; }
}

/* hide native scrollbars lightly (optional) */
.gallery-row::-webkit-scrollbar { height:8px; }
.gallery-row::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); border-radius:8px; }

.view-all-btn { display:inline-block; padding:8px 12px; background:#007bff; color:#fff; border-radius:8px; text-decoration:none; font-weight:700; }

/* lightbox */
.lb-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.9); display:none; align-items:center; justify-content:center; z-index:99999; padding:20px; }
.lb-overlay.open { display:flex; }
.lb-shell { width: min(920px, calc(100% - 40px)); position:relative; display:flex; align-items:center; justify-content:center; }
.lb-image { max-width:100%; max-height:80vh; object-fit:contain; border-radius:6px; display:block; }
.lb-arrow { position:absolute; top:50%; transform:translateY(-50%); width:44px;height:44px;border-radius:50%; background:rgba(0,0,0,0.55); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; font-size:22px; }
.lb-prev { left:-72px; } .lb-next { right:-72px; }
.lb-close { position:absolute; top:-56px; right:0; width:40px; height:40px; border-radius:50%; background:rgba(0,0,0,0.55); color:#fff; border:none; font-size:18px; }

@media (max-width:480px) {
  .gallery-thumb { width:96px; height:96px; }
  .lb-prev{ left:12px; } .lb-next{ right:12px; } .lb-close{ top:8px; right:8px; }
}