/* Note: the ems-wp source also defines a base "ul.integrations-grid" ruleset
   (display:grid + .integrations-grid-straight/.integrations-grid-offset
   variants) but the tag selector requires a <ul>, and this block's template
   renders a <div class="integrations-grid integrations-grid-masonry">  --
   the ul-qualified rules can never match a div, so they're dead code here.
   Only the masonry variant below is real. */

.integrations-block-outer {
  background-image: url('../../assets/images/blurs-background.jpg');
  background-size: cover;
  background-position-y: 100%;
}

.integrations-block-outer .integrations-block-precontent {
  overflow: hidden;
  padding-bottom: 40px;
  z-index: 1;
  position: relative;
}

.integration-item {
  grid-row: span 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 10px;
  overflow: hidden;
}

.integration-item:not(.empty-item) {
  box-shadow: var(--shadow-card);
  transition: box-shadow 300ms;
}

.integration-item:not(.empty-item):hover {
  box-shadow: var(--shadow-card-hover);
}

.integration-item .integration-item-inner {
  background: var(--wp--preset--color--white);
  box-shadow: 0px 23px 68px 0px rgba(25, 104, 252, 0.10);
  padding: 28px 11px;
}

.integration-item .integration-item-inner img {
  width: 100%;
  object-fit: contain;
  max-height: 40px;
}

.integrations-grid-masonry {
  display: flex;
  flex-wrap: wrap;
  row-gap: 30px;
  column-gap: 30px;
  align-items: center;
  justify-content: center;
  margin: 20px auto;
  max-width: 100%;
}

.integrations-grid-masonry .integration-item {
  aspect-ratio: 1 / 1;
  flex: 0 0 90px;
}

.integrations-grid-masonry .integration-item.empty-item {
  opacity: 0;
  visibility: hidden;
}

.integrations-grid-masonry .integration-item .integration-item-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.integrations-grid.integrations-grid-masonry[data-cols="3"] {
  width: calc((90px + 30px) * 3);
}

.integrations-grid.integrations-grid-masonry[data-cols="3"] .integration-item {
  flex: 0 0 calc(100% / 3 - 30px);
}

.integrations-grid.integrations-grid-masonry[data-cols="3"] .integration-item:nth-of-type(3n - 1) {
  transform: translateY(-30px);
}

.integrations-grid.integrations-grid-masonry[data-cols="5"] {
  width: calc((90px + 30px) * 5);
}

.integrations-grid.integrations-grid-masonry[data-cols="5"] .integration-item {
  flex: 0 0 calc(100% / 5 - 30px);
}

.integrations-grid.integrations-grid-masonry[data-cols="5"] .integration-item:nth-of-type(5n - 1),
.integrations-grid.integrations-grid-masonry[data-cols="5"] .integration-item:nth-of-type(5n - 3) {
  transform: translateY(-30px);
}

.integrations-grid.integrations-grid-masonry[data-cols="7"] {
  width: calc((90px + 30px) * 7);
}

.integrations-grid.integrations-grid-masonry[data-cols="7"] .integration-item {
  flex: 0 0 calc(100% / 7 - 30px);
}

.integrations-grid.integrations-grid-masonry[data-cols="7"] .integration-item:nth-of-type(7n - 1),
.integrations-grid.integrations-grid-masonry[data-cols="7"] .integration-item:nth-of-type(7n - 3),
.integrations-grid.integrations-grid-masonry[data-cols="7"] .integration-item:nth-of-type(7n - 5) {
  transform: translateY(-30px);
}

.integrations-grid.integrations-grid-masonry[data-cols="9"] {
  width: calc((90px + 30px) * 9);
}

.integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item {
  flex: 0 0 calc(100% / 9 - 30px);
}

.integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item:nth-of-type(9n - 1),
.integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item:nth-of-type(9n - 3),
.integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item:nth-of-type(9n - 5),
.integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item:nth-of-type(9n - 7) {
  transform: translateY(-30px);
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    border: 0;
}
@media screen and (max-width: 1179px) and (min-width: 941px) {
  .integrations-grid.integrations-grid-masonry {
    justify-content: flex-start;
  }

  .integrations-grid.integrations-grid-masonry[data-cols="9"] {
    width: calc((90px + 30px) * 7);
  }

  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item {
    flex: 0 0 calc(100% / 7 - (30px * .86));
    transform: translateY(0) !important;
  }

  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item.empty-item {
    display: none;
  }

  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="1"],
  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="3"],
  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="5"],
  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="8"],
  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="10"],
  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="12"],
  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="15"],
  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="17"],
  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="19"],
  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="22"],
  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="24"],
  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="26"] {
    transform: translateY(-30px) !important;
  }
}

@media screen and (max-width: 940px) and (min-width: 701px) {
  .integrations-grid.integrations-grid-masonry {
    justify-content: flex-start;
  }

  .integrations-grid.integrations-grid-masonry[data-cols="9"],
  .integrations-grid.integrations-grid-masonry[data-cols="7"] {
    width: calc((90px + 30px) * 5);
  }

  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item,
  .integrations-grid.integrations-grid-masonry[data-cols="7"] .integration-item {
    flex: 0 0 calc(100% / 5 - (30px * .8));
    transform: translateY(0) !important;
  }

  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item.empty-item,
  .integrations-grid.integrations-grid-masonry[data-cols="7"] .integration-item.empty-item {
    display: none;
  }

  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="1"],
  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="3"],
  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="6"],
  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="8"],
  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="11"],
  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="13"],
  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="16"],
  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="18"],
  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="21"],
  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="23"],
  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="26"],
  .integrations-grid.integrations-grid-masonry[data-cols="7"] .integration-item[data-itemcount="1"],
  .integrations-grid.integrations-grid-masonry[data-cols="7"] .integration-item[data-itemcount="3"],
  .integrations-grid.integrations-grid-masonry[data-cols="7"] .integration-item[data-itemcount="6"],
  .integrations-grid.integrations-grid-masonry[data-cols="7"] .integration-item[data-itemcount="8"],
  .integrations-grid.integrations-grid-masonry[data-cols="7"] .integration-item[data-itemcount="11"],
  .integrations-grid.integrations-grid-masonry[data-cols="7"] .integration-item[data-itemcount="13"],
  .integrations-grid.integrations-grid-masonry[data-cols="7"] .integration-item[data-itemcount="16"],
  .integrations-grid.integrations-grid-masonry[data-cols="7"] .integration-item[data-itemcount="18"],
  .integrations-grid.integrations-grid-masonry[data-cols="7"] .integration-item[data-itemcount="21"],
  .integrations-grid.integrations-grid-masonry[data-cols="7"] .integration-item[data-itemcount="23"],
  .integrations-grid.integrations-grid-masonry[data-cols="7"] .integration-item[data-itemcount="26"] {
    transform: translateY(-30px) !important;
  }
}

@media screen and (max-width: 700px) {
  .integrations-grid.integrations-grid-masonry {
    justify-content: flex-start;
  }

  .integrations-grid.integrations-grid-masonry[data-cols="9"],
  .integrations-grid.integrations-grid-masonry[data-cols="7"],
  .integrations-grid.integrations-grid-masonry[data-cols="5"] {
    width: calc((90px + 30px) * 3);
  }

  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item,
  .integrations-grid.integrations-grid-masonry[data-cols="7"] .integration-item,
  .integrations-grid.integrations-grid-masonry[data-cols="5"] .integration-item {
    flex: 0 0 calc(100% / 3 - 20px);
    transform: translateY(0) !important;
  }

  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item.empty-item,
  .integrations-grid.integrations-grid-masonry[data-cols="7"] .integration-item.empty-item,
  .integrations-grid.integrations-grid-masonry[data-cols="5"] .integration-item.empty-item {
    display: none;
  }

  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="1"],
  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="4"],
  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="7"],
  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="10"],
  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="13"],
  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="16"],
  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="19"],
  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="22"],
  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="24"],
  .integrations-grid.integrations-grid-masonry[data-cols="9"] .integration-item[data-itemcount="27"],
  .integrations-grid.integrations-grid-masonry[data-cols="7"] .integration-item[data-itemcount="1"],
  .integrations-grid.integrations-grid-masonry[data-cols="7"] .integration-item[data-itemcount="4"],
  .integrations-grid.integrations-grid-masonry[data-cols="7"] .integration-item[data-itemcount="7"],
  .integrations-grid.integrations-grid-masonry[data-cols="7"] .integration-item[data-itemcount="10"],
  .integrations-grid.integrations-grid-masonry[data-cols="7"] .integration-item[data-itemcount="13"],
  .integrations-grid.integrations-grid-masonry[data-cols="7"] .integration-item[data-itemcount="16"],
  .integrations-grid.integrations-grid-masonry[data-cols="7"] .integration-item[data-itemcount="19"],
  .integrations-grid.integrations-grid-masonry[data-cols="7"] .integration-item[data-itemcount="22"],
  .integrations-grid.integrations-grid-masonry[data-cols="7"] .integration-item[data-itemcount="24"],
  .integrations-grid.integrations-grid-masonry[data-cols="7"] .integration-item[data-itemcount="27"],
  .integrations-grid.integrations-grid-masonry[data-cols="5"] .integration-item[data-itemcount="1"],
  .integrations-grid.integrations-grid-masonry[data-cols="5"] .integration-item[data-itemcount="4"],
  .integrations-grid.integrations-grid-masonry[data-cols="5"] .integration-item[data-itemcount="7"],
  .integrations-grid.integrations-grid-masonry[data-cols="5"] .integration-item[data-itemcount="10"],
  .integrations-grid.integrations-grid-masonry[data-cols="5"] .integration-item[data-itemcount="13"],
  .integrations-grid.integrations-grid-masonry[data-cols="5"] .integration-item[data-itemcount="16"],
  .integrations-grid.integrations-grid-masonry[data-cols="5"] .integration-item[data-itemcount="19"],
  .integrations-grid.integrations-grid-masonry[data-cols="5"] .integration-item[data-itemcount="22"],
  .integrations-grid.integrations-grid-masonry[data-cols="5"] .integration-item[data-itemcount="24"],
  .integrations-grid.integrations-grid-masonry[data-cols="5"] .integration-item[data-itemcount="27"] {
    transform: translateY(-30px) !important;
  }
}

.integrations-grid.integrations-grid-masonry[data-count="2"] .integration-item {
  transform: translateY(0px) !important;
}

/* --------------------------------------------------------------------------
 * Random fade-up-in entrance. Dependency-free reimplementation of the ems-wp
 * GSAP effect (opacity 0->1, translateY(50px)->0, 0.6s ease-in, random 0-1s
 * per-item delay) using IntersectionObserver + CSS transitions (script.js).
 * The .anim-ready class is added by JS, so items are never left hidden if the
 * script doesn't run; the whole effect is skipped under reduced-motion.
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .integrations-grid.anim-ready .integration-item:not(.empty-item) {
    opacity: 0;
    transform: translateY(50px);
    transition-property: opacity, transform, box-shadow;
    transition-duration: 0.6s, 0.6s, 300ms;
    transition-timing-function: ease-in, ease-in, ease;
    transition-delay: var(--fade-delay, 0s), var(--fade-delay, 0s), 0s;
    will-change: opacity, transform;
  }

  .integrations-grid.anim-ready .integration-item.is-visible {
    opacity: 1;
    transform: none;
  }
}