/* === Remove unwanted vertical gaps between blocks === */

/* Remove global block spacing */
.wp-site-blocks,
.wp-block-post-content {
  --wp--style--block-gap: 0 !important;
  row-gap: 0 !important;
}

/* Remove vertical margins from common blocks */
.wp-block-group,
.wp-block-cover,
.wp-block-image,
.wp-block-spacer {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove vertical gaps inside constrained/flow layouts */
.is-layout-constrained,
.is-layout-flow {
  --wp--style--block-gap: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  row-gap: 0 !important;
}

/* Remove top margin between consecutive blocks */
.wp-site-blocks > * + *,
.wp-block-group > * + * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ensure images inside groups/covers don't add bottom gap */
.wp-block-group img,
.wp-block-cover img {
  display: block;
  margin-bottom: 0 !important;
}

/* Works whether the class is on the wrapper or on the <img> */
.fancy-hover, 
.wp-block-image.fancy-hover {
  display: inline-block;
  overflow: hidden;
}

.fancy-hover img,
img.fancy-hover {
  transition: transform 0.5s ease, filter 0.5s ease;
  transform-origin: center center;
  will-change: transform, filter;
}

/* --- DESKTOP HOVER --- */
.fancy-hover:hover img,
img.fancy-hover:hover {
  filter: brightness(50%); /* mild gray effect */
}

/* --- MOBILE SUPPORT --- */
/* Use :active or :focus for touch devices */
@media (hover: none) and (pointer: coarse) {
  .fancy-hover img,
  img.fancy-hover {
    transition: transform 0.5s ease, filter 0.5s ease;
  }

  .fancy-hover:active img,
  .fancy-hover:focus img,
  img.fancy-hover:active,
  img.fancy-hover:focus {
    filter: grayscale(100%);
  }
}