/*
 * Horizontal Story experience.
 *
 * Elementor structure:
 * .mmg-experience--horizontal-story
 *   .mmg-horizontal-story__track
 *     .mmg-horizontal-story__panel
 *     .mmg-horizontal-story__panel
 */

.mmg-experience--horizontal-story,
.mmg-horizontal-story__pin-shell,
.mmg-horizontal-story__track,
.mmg-horizontal-story__panel {
  min-width: 0;
}

.mmg-horizontal-story__pin-shell {
  position: relative;
  width: 100%;
  min-width: 0;
}

/*
 * The default layout remains vertical. This is also the mobile, reduced-motion,
 * and Elementor editor fallback.
 */
.mmg-experience--horizontal-story {
  --mmg-horizontal-story-offset: 0px;
  position: relative;
  width: 100%;
}

.mmg-experience--horizontal-story > .mmg-horizontal-story__track {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 !important;
  gap: 0 !important;
}

.mmg-horizontal-story__track > .mmg-horizontal-story__panel {
  width: 100%;
  flex: 0 0 auto;
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .mmg-experience--horizontal-story[data-mmg-horizontal-story-ready="true"] {
    height: calc(100svh - var(--mmg-horizontal-story-offset));
    max-height: calc(100svh - var(--mmg-horizontal-story-offset));
    overflow: hidden;
    padding: 0 !important;
    gap: 0 !important;
  }

  .mmg-experience--horizontal-story[data-mmg-horizontal-story-ready="true"]
    > .mmg-horizontal-story__track {
    --mmg-horizontal-story-x: 0px;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: stretch;
    width: max-content !important;
    min-width: 100%;
    height: 100%;
    min-height: 0;
    max-width: none !important;
    transform: translate3d(var(--mmg-horizontal-story-x), 0, 0) !important;
    transition: none !important;
    will-change: transform;
  }

  .mmg-experience--horizontal-story[data-mmg-horizontal-story-ready="true"]
    > .mmg-horizontal-story__track
    > .mmg-horizontal-story__panel {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: none !important;
    height: 100%;
    min-height: 100% !important;
    flex: 0 0 100vw !important;
  }
}