/*
 * Expanding media experience: baseline layout.
 * Scroll expansion and pinning are added by the experience JavaScript.
 */

.mmg-experience--expanding-media {
  --mmg-expanding-media-width: 1120px;
  --mmg-expanding-media-gutter: 24px;
  --mmg-expanding-media-radius: 24px;
  position: relative;
  width: 100%;
}

.mmg-experience--expanding-media .mmg-stage-montage__stage {
  position: relative;
  width: 100%;
  min-width: 0;
  padding: 0 !important;
  gap: 0 !important;
  isolation: isolate;
}

.mmg-experience--expanding-media .mmg-stage-montage__montage {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  will-change: transform;
}

.mmg-experience--expanding-media .mmg-stage-montage__opener,
.mmg-experience--expanding-media
  .mmg-stage-montage__opener > .elementor-widget-container {
  width: 100%;
  height: 100% !important;
}

.mmg-experience--expanding-media .mmg-stage-montage__opener img,
.mmg-experience--expanding-media .mmg-stage-montage__opener video {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover !important;
}

.mmg-experience--expanding-media .mmg-stage-montage__burst-frame {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
  width: 100%;
  height: 100% !important;
  visibility: hidden;
  opacity: 0;
  overflow: hidden;
  will-change: transform, opacity;
}

.mmg-experience--expanding-media
  .mmg-stage-montage__burst-frame > .elementor-widget-container,
.mmg-experience--expanding-media
  .mmg-stage-montage__burst-frame > .elementor-widget-container > a,
.mmg-experience--expanding-media
  .mmg-stage-montage__burst-frame > .elementor-widget-container picture {
  display: block;
  width: 100%;
  height: 100% !important;
}

.mmg-experience--expanding-media .mmg-stage-montage__burst-frame img,
.mmg-experience--expanding-media .mmg-stage-montage__burst-frame video {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover !important;
}

.mmg-experience--expanding-media .mmg-expanding-media__frame {
  position: relative;
  width: min(
    var(--mmg-expanding-media-width),
    calc(100% - (var(--mmg-expanding-media-gutter) * 2))
  );
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden !important;
  border-radius: var(--mmg-expanding-media-radius) !important;
  clip-path: inset(0 round var(--mmg-expanding-media-radius));
  isolation: isolate;
  will-change: width, height, border-radius, clip-path;
}

.mmg-experience--expanding-media .mmg-expanding-media__media,
.mmg-experience--expanding-media
  .mmg-expanding-media__media > .elementor-widget-container {
  width: 100%;
  height: 100% !important;
  border-radius: inherit;
  overflow: hidden;
}

.mmg-experience--expanding-media
  .mmg-expanding-media__media > .elementor-widget-container > a {
  display: block;
  width: 100%;
  height: 100%;
}

.mmg-experience--expanding-media .mmg-expanding-media__media img,
.mmg-experience--expanding-media .mmg-expanding-media__media video {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover !important;
  border-radius: inherit;
}

@media (max-width: 767px) {
  .mmg-experience--expanding-media {
    --mmg-expanding-media-gutter: 16px;
    --mmg-expanding-media-radius: 16px;
  }

  .mmg-experience--expanding-media .mmg-expanding-media__frame {
    aspect-ratio: 4 / 5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mmg-expanding-media__frame {
    transform: none !important;
  }
}