/* =========================================================
   GCS PORTFOLIO GALLERY GRID
   Controls only the gallery layout, gutters, image fit, and hover overlay.
   Works with Bootstrap columns and baguetteBox.js lightbox.
   ========================================================= */

/* Outer gallery width + page-side breathing room */
.gcs-gallery-wrap{
  padding-left:16px;
  padding-right:16px;
}

@media (min-width:768px){
  .gcs-gallery-wrap{
    padding-left:24px;
    padding-right:24px;
  }
}

@media (min-width:1200px){
  .gcs-gallery-wrap{
    padding-left:40px;
    padding-right:40px;
  }
}

/* Gallery reset */
.tz-gallery{
  padding:0;
}

/* Grid gutters. Change this value to tighten or loosen the photo spacing. */
.gcs-gallery-grid{
  margin-left:-2px;
  margin-right:-2px;
}

.gcs-gallery-grid > [class*="col-"]{
  padding:2px;
}

/* Lightbox tile */
.tz-gallery .lightbox{
  position:relative;
  display:block;
  overflow:hidden;
}

.tz-gallery .lightbox img{
  display:block;
  width:100%;
  height:auto;
  border-radius:0;
}

/* Soft white hover wash */
.tz-gallery .lightbox::after{
  content:"";
  position:absolute;
  inset:0;
  background-color:rgba(255,255,255,0.4);
  opacity:0;
  transition:opacity .4s ease;
  pointer-events:none;
}

.tz-gallery .lightbox:hover::after,
.tz-gallery .lightbox:focus::after{
  opacity:1;
}

/* Keep baguetteBox controls transparent */
.baguetteBox-button{
  background-color:transparent !important;
}

@media (max-width:768px){
  body{
    padding:0;
  }
}