section[id]{ scroll-margin-top:84px; }


.gallery-hero{
  min-height:28vh;
  background:
    linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.25)),
    url("../assets/img/fgh1.png"); /* swap to a nice wide shot */
  background-size:cover; background-position:center;
}


.btn-filter{
  border:1px solid rgba(0,0,0,.15);
  background:#fff;
  font-weight:600;
}
.btn-filter.active,
.btn-filter:hover{
  border-color: rgba(0,0,0,.25);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}


.gallery-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}
@media (min-width:768px){
  .gallery-grid{ grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}
@media (min-width:1400px){
  .gallery-grid{ grid-template-columns: repeat(4, 1fr); }
}
.gallery-item{
  display:block;
  border-radius: .85rem;
  overflow: hidden;
  border:1px solid rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.gallery-item:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 34px rgba(0,0,0,.08);
}
.gallery-item.is-hidden{ display:none; }

.object-fit-cover{ object-fit:cover; }
.lightbox-img{ object-fit:contain; max-height: 80vh; display:block; margin-inline:auto; }

.modal-content.bg-dark{ background:#111 !important; }
.modal-footer{ border:0; }

.btn-group .btn{ padding:.35rem .55rem; }

/* Make the lightbox image scale nicely */
.lightbox-img { max-height: 80vh; object-fit: contain; background: #000; }

/* Smooth hide for filtered items */
.gallery-item.is-hidden { display: none !important; }

/* If you want uniform tiles regardless of image ratio */
.gallery-grid .ratio { border-radius: .8rem; overflow: hidden; }