/*
 * Sticky Cards experience.
 *
 * One column remains sticky while a variable number of cards scrolls in the
 * other column. Native position: sticky lets the content release naturally
 * when the root container ends.
 */

body .mmg-experience--sticky-cards {
  --mmg-sticky-cards-top: 100px;
  --mmg-sticky-cards-gap: clamp(24px, 4vw, 64px);
  --mmg-sticky-cards-card-gap: clamp(20px, 2.5vw, 40px);
  --mmg-sticky-cards-sticky-width: 42%;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: visible !important;
}

/*
 * Full-width Elementor containers hold the columns directly. Boxed Elementor
 * containers insert .e-con-inner, so that wrapper becomes the layout grid.
 */
body .elementor-element.mmg-experience--sticky-cards.e-con-full,
body .elementor-element.mmg-experience--sticky-cards.e-con-boxed
  > .e-con-inner,
body .mmg-experience--sticky-cards:not(.elementor-element) {
  display: grid !important;
  grid-template-columns:
    minmax(0, var(--mmg-sticky-cards-sticky-width))
    minmax(0, 1fr);
  align-items: stretch !important;
  gap: var(--mmg-sticky-cards-gap) !important;
  position: relative;
  isolation: isolate;
  min-width: 0;
  box-sizing: border-box;
  overflow: visible !important;
}

body .elementor-element.mmg-experience--sticky-cards.e-con-boxed {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

body .mmg-experience--sticky-cards > .mmg-sticky-cards__sticky,
body .mmg-experience--sticky-cards > .mmg-sticky-cards__list,
body .mmg-experience--sticky-cards > .e-con-inner
  > .mmg-sticky-cards__sticky,
body .mmg-experience--sticky-cards > .e-con-inner
  > .mmg-sticky-cards__list {
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  margin: 0 !important;
  box-sizing: border-box;
}

body .mmg-experience--sticky-cards > .mmg-sticky-cards__sticky,
body .mmg-experience--sticky-cards > .e-con-inner
  > .mmg-sticky-cards__sticky {
  position: sticky !important;
  top: var(--mmg-sticky-cards-top);
  grid-column: 1;
  grid-row: 1;
  align-self: start !important;
  height: fit-content;
  z-index: 1;
}

body .mmg-experience--sticky-cards > .mmg-sticky-cards__list,
body .mmg-experience--sticky-cards > .e-con-inner
  > .mmg-sticky-cards__list {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  align-self: start !important;
  gap: var(--mmg-sticky-cards-card-gap) !important;
  z-index: 1;
}

body .mmg-sticky-cards__list > .mmg-sticky-cards__card {
  flex: 0 0 auto;
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/*
 * Optional section-wide sticky background. The background remains anchored to
 * the viewport but is only painted while the experience itself is visible.
 * Include Elementor's inner wrapper and overlay pseudo-elements so the option
 * works with both background images and background overlays.
 */
@media (min-width: 768px) {
  body .mmg-experience--sticky-cards[data-mmg-sticky-background="true"],
  body .mmg-experience--sticky-cards[data-mmg-sticky-background="true"]::before,
  body .mmg-experience--sticky-cards[data-mmg-sticky-background="true"]
    > .e-con-inner,
  body .mmg-experience--sticky-cards[data-mmg-sticky-background="true"]
    > .e-con-inner::before {
    background-attachment: fixed !important;
  }

  /*
   * A dedicated Elementor background child provides true section-constrained
   * sticky behavior: it scrolls in, locks, then releases with the section.
   */
  body .mmg-experience--sticky-cards:is(
      [data-mmg-sticky-background="locked"],
      [data-mmg-sticky-background="crossfade"]
    )
    > .mmg-sticky-cards__background,
  body .mmg-experience--sticky-cards:is(
      [data-mmg-sticky-background="locked"],
      [data-mmg-sticky-background="crossfade"]
    )
    > .e-con-inner > .mmg-sticky-cards__background {
    position: sticky !important;
    top: var(--mmg-sticky-cards-top);
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: start !important;
    /*
     * The content grid may be Elementor-boxed, but the visual background
     * should still reach both viewport edges. Centering a viewport-wide grid
     * item lets only this layer break out without widening the two columns.
     */
    justify-self: center !important;
    width: 100vw !important;
    max-width: none !important;
    height: calc(100svh - var(--mmg-sticky-cards-top));
    min-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
  }
}

/*
 * Crossfade background layers. The first layer is the no-JavaScript and
 * reduced-motion fallback; later layers are revealed by ScrollTrigger.
 */
body .mmg-experience--sticky-cards[data-mmg-sticky-background="crossfade"]
  .mmg-sticky-cards__background {
  position: sticky !important;
}

body .mmg-experience--sticky-cards[data-mmg-sticky-background="crossfade"]
  .mmg-sticky-cards__background > .e-con-inner {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  max-width: none !important;
  height: 100%;
  padding: 0 !important;
}

body .mmg-experience--sticky-cards[data-mmg-sticky-background="crossfade"]
  .mmg-sticky-cards__background-layer {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body .mmg-experience--sticky-cards[data-mmg-sticky-background="crossfade"]
  .mmg-sticky-cards__background-layer:first-child {
  opacity: 1;
  visibility: visible;
}

body .elementor-element.mmg-experience--sticky-cards.e-con-full.mmg-sticky-cards--sticky-right,
body .elementor-element.mmg-experience--sticky-cards.e-con-boxed.mmg-sticky-cards--sticky-right
  > .e-con-inner,
body .mmg-experience--sticky-cards.mmg-sticky-cards--sticky-right:not(.elementor-element) {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, var(--mmg-sticky-cards-sticky-width));
}

body .mmg-experience--sticky-cards.mmg-sticky-cards--sticky-right
  > .mmg-sticky-cards__sticky,
body .mmg-experience--sticky-cards.mmg-sticky-cards--sticky-right
  > .e-con-inner > .mmg-sticky-cards__sticky {
  grid-column: 2;
  grid-row: 1;
}

body .mmg-experience--sticky-cards.mmg-sticky-cards--sticky-right
  > .mmg-sticky-cards__list,
body .mmg-experience--sticky-cards.mmg-sticky-cards--sticky-right
  > .e-con-inner > .mmg-sticky-cards__list {
  grid-column: 1;
  grid-row: 1;
}

@media (max-width: 767px) {
  body .elementor-element.mmg-experience--sticky-cards.e-con-full,
  body .elementor-element.mmg-experience--sticky-cards.e-con-boxed
    > .e-con-inner,
  body .mmg-experience--sticky-cards:not(.elementor-element),
  body .elementor-element.mmg-experience--sticky-cards.e-con-full.mmg-sticky-cards--sticky-right,
  body .elementor-element.mmg-experience--sticky-cards.e-con-boxed.mmg-sticky-cards--sticky-right
    > .e-con-inner,
  body .mmg-experience--sticky-cards.mmg-sticky-cards--sticky-right:not(.elementor-element) {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--mmg-sticky-cards-gap) !important;
  }

  body .mmg-experience--sticky-cards > .mmg-sticky-cards__sticky,
  body .mmg-experience--sticky-cards > .e-con-inner
    > .mmg-sticky-cards__sticky,
  body .mmg-experience--sticky-cards.mmg-sticky-cards--sticky-right
    > .mmg-sticky-cards__sticky,
  body .mmg-experience--sticky-cards.mmg-sticky-cards--sticky-right
    > .mmg-sticky-cards__list,
  body .mmg-experience--sticky-cards.mmg-sticky-cards--sticky-right
    > .e-con-inner > .mmg-sticky-cards__sticky,
  body .mmg-experience--sticky-cards.mmg-sticky-cards--sticky-right
    > .e-con-inner > .mmg-sticky-cards__list {
    position: relative !important;
    top: auto;
    grid-column: auto;
    grid-row: auto;
  }

  body .mmg-experience--sticky-cards:is(
      [data-mmg-sticky-background="locked"],
      [data-mmg-sticky-background="crossfade"]
    )
    > .mmg-sticky-cards__background,
  body .mmg-experience--sticky-cards:is(
      [data-mmg-sticky-background="locked"],
      [data-mmg-sticky-background="crossfade"]
    )
    > .e-con-inner > .mmg-sticky-cards__background {
    position: absolute !important;
    inset: 0;
    left: 50%;
    width: 100vw !important;
    max-width: none !important;
    transform: translateX(-50%);
    height: 100%;
    min-height: 0;
    margin: 0 !important;
    pointer-events: none;
    z-index: 0;
  }
}