/* ===== Reset the theme's shrinking/cropping on gallery tiles ===== */

/* Make each tile size itself by our rules, not the theme's */
#portfolio-single-gallery .isotope .isotope-item { height: auto !important; }

/* The tile element that holds the background image */
#portfolio-single-gallery .ps-gallery-item-image.bg-image {
  position: relative !important;
  width: 100% !important;
  height: auto !important;

  background-repeat: no-repeat !important;
  background-position: center !important;

  /* Pick ONE:
     - contain = no crop (may show letterbox)
     - cover   = edge-to-edge but crops
  */
  background-size: contain !important;

  /* If you hate the letterbox color, change or remove this */
  background-color: #000; 
}

/* Kill the theme's fixed 16:9 height and define our own aspect ratios */
#portfolio-single-gallery .ps-gallery-item-image.bg-image::before {
  content: "" !important;
  display: block !important;
}

/* Base tile height (~3:2) */
#portfolio-single-gallery .isotope-item.iso-height-1
  .ps-gallery-item-image.bg-image::before {
  padding-top: 66.666% !important; /* 3:2 */
}

/* Tall tile = exactly 2× the base height */
#portfolio-single-gallery .isotope-item.iso-height-2
  .ps-gallery-item-image.bg-image::before {
  padding-top: 133.333% !important; /* 2 × 3:2 */
}

/* Optional: tighten gutters or remove internal padding if theme adds it */
#portfolio-single-gallery .isotope.gutter-1 .isotope-item { padding: 6px; }
#portfolio-single-gallery .isotope.gutter-2 .isotope-item { padding: 10px; }
#portfolio-single-gallery .isotope.gutter-3 .isotope-item { padding: 16px; }

/* Ensure inline <img> elsewhere don’t get weird */
img { max-width: 100%; height: auto; display: block; }
/* === Remove real spacing the theme adds === */
#portfolio-single-gallery .isotope,
#portfolio-single-gallery .isotope-items-wrap { margin: 0 !important; }

#portfolio-single-gallery .isotope .isotope-item {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

#portfolio-single-gallery .ps-gallery-item {
  display: block;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0;              /* kills any inline-gap from fonts */
  border: 0 !important;
}

/* The tile “image” itself */
#portfolio-single-gallery .ps-gallery-item-image {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* === Make the image fill the tile (no black bars) === */
#portfolio-single-gallery .ps-gallery-item-image.bg-image {
  background-size: cover !important;     /* fill & crop to the tile */
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important; /* remove black backdrop */
  overflow: hidden;                       /* hide overhang from cover */
}

/* keep your aspect ratios (iso-height-1/2) via ::before … no change needed */
/* === Overlay title boxes inside gallery tiles === */
#portfolio-single-gallery .ps-gallery-item {
  position: relative;
  overflow: hidden; /* keep overlay inside tile */
}

/* === Refined overlay title boxes === */
#portfolio-single-gallery .ps-gallery-item::after {
  content: attr(data-title);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;                  /* half the tile width */
  background: rgba(29, 79, 156, 0.75);  /* Sox blue @ 75% opacity */
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 24px;             /* bigger type */
  line-height: 1.3;
  padding: 10px 14px;
  text-align: left;
  white-space: normal;
  z-index: 2;
}
@media (max-width: 767.98px) {
  #portfolio-single-gallery .ps-gallery-item::after {
    font-size: 0.85rem;
    padding: 6px 10px;
  }
}