/* =========================================
   IMAGE GRID BLOCK — CLEAN STABLE VERSION
   ========================================= */

/* Base grid structure */
.image-grid-with-links {
  display: grid;
  gap: 24px;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Each image card */
.image-grid-item {
  position: relative;
  overflow: hidden;
}

/* Links and images */
.image-grid-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.image-grid-img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
  object-fit: cover;
}

/* Legacy overlay styling */
.image-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

/* Dark gray caption bar (legacy look) */
.image-overlay .overlay-title {
  width: 100%;
  background: #585e63;
  color: #fff;
  text-align: center;
  padding: 12px 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
  transform: translateY(35%);
}

.overlay-title {
  margin-bottom: 10px !important;
}


/* Responsive adjustment */
@media (max-width: 782px) {
  .image-overlay .overlay-title {
    transform: translateY(20%);
  }
}

/* Scoped correction — remove unwanted right padding applied by theme */
.block-acf-image-grid .image-grid-with-links {
  padding-right: 0 !important;
}

/* Ensure this block’s grid stays centered within theme layout */
.block-acf-image-grid {
  margin: 0 auto;
  width: 100%;
}

/* Removes padding when grid is set within Gutenberg */
html body section.wrapper.standard-content-wrapper > div.container > div.grid.grid-pad {
  padding-top: 0px !important;
  padding-left: 0px !important;
}