/**
 * Mobile / fold / desktop: fluid inner up to a design cap; fold uses a wider cap.
 * html[data-mvp-view="desktop"|"mobile"|"fold"] is set by JS for page hooks.
 */

.mobile-viewport-fit-outer {
  width: 100%;
  box-sizing: border-box;
  overflow-x: visible;
}

.mobile-viewport-fit-inner {
  width: 100%;
  max-width: var(--mvp-design-w, 430px);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  transform-origin: top center;
}

.mobile-viewport-fit-inner.mobile-viewport-fit--fluid {
  width: 100%;
  max-width: var(--mvp-design-w, 430px);
  margin-left: auto;
  margin-right: auto;
}

.mobile-viewport-fit-inner.mobile-viewport-fit--fluid.mobile-viewport-fit--fold {
  max-width: min(100%, 840px);
}

@media (orientation: landscape) and (max-width: 1024px) {
  .mobile-viewport-fit-inner.mobile-viewport-fit--fluid {
    max-width: min(100%, 960px);
  }
  .mobile-viewport-fit-inner.mobile-viewport-fit--fluid.mobile-viewport-fit--fold {
    max-width: min(100%, 960px);
  }
}

@media (min-width: 1025px) {
  .mobile-viewport-fit-inner {
    max-width: none;
    transform: none !important;
    zoom: normal !important;
  }
}

.mobile-viewport-fit-outer.mobile-viewport-fit-active {
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
}

@media (max-width: 1024px) {
  .mobile-viewport-fit-inner > main.container.main-with-mobile-minheight {
    min-height: calc(100svh - 220px);
    min-height: calc(100dvh - 220px);
  }
}

html[data-mvp-view="fold"] .mobile-viewport-fit-inner > main.container.main-with-mobile-minheight {
  min-height: calc(100vh - 200px);
  min-height: calc(100svh - 200px);
  min-height: calc(100dvh - 200px);
}

@media (min-width: 1025px) {
  .mobile-viewport-fit-inner > main.container.main-with-mobile-minheight {
    min-height: calc(100vh - 200px);
  }
}

@media (max-width: 1024px) {
  html {
    overflow-x: hidden;
    max-width: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body {
    max-width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
  }
}