/* Main OMNIS pages: append after the existing stylesheets. */
:is(body.om-home, body.om-subpage) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:is(.om-home, .om-subpage) :is(
  .om-brandbar, .om-brandbar > *, .om-hero > *, .om-feature > *,
  .om-section-head > *, .om-split-form > *, .cards > *,
  .om-photo-grid > *, .om-rental-workspace > *, .rental-grid > *
) {
  min-width: 0;
}

:is(.om-home, .om-subpage) form {
  min-width: 0;
  width: 100%;
}

:is(.om-home, .om-subpage) fieldset {
  min-inline-size: 0;
  max-width: 100%;
}

:is(.om-home, .om-subpage) :is(input, select, textarea) {
  min-width: 0;
  min-inline-size: 0;
  max-width: 100%;
  box-sizing: border-box;
}

:is(.om-home, .om-subpage) :is(button, .goldbtn, .om-button, .om-growth__button) {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

:is(.om-home, .om-subpage) video.mediaVideo {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

:is(.om-home, .om-subpage) .rental-table {
  max-width: 100%;
  overflow-x: auto;
}

/* The existing layout only stacks at 760px; use the roomier tablet layout earlier. */
@media (max-width: 960px) {
  :is(.om-home, .om-subpage) .om-hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  :is(.om-home, .om-subpage) .om-hero-copy {
    padding: 38px clamp(20px, 4vw, 36px);
  }

  :is(.om-home, .om-subpage) .om-hero h1 {
    max-width: 22ch;
    font-size: clamp(32px, 5.5vw, 50px);
    line-height: 1.12;
  }

  :is(.om-home, .om-subpage) .om-hero p {
    max-width: 56ch;
  }

  :is(.om-home, .om-subpage) .om-hero-media {
    height: clamp(220px, 45vw, 420px);
  }

  :is(.om-home, .om-subpage) :is(.om-feature, .om-split-form, .om-rental-workspace) {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  :is(.om-home, .om-subpage) .om-feature img {
    height: clamp(240px, 44vw, 400px);
  }

  :is(.om-home, .om-subpage) .om-section-head {
    display: block;
  }

  :is(.om-home, .om-subpage) .om-section-head > p {
    max-width: 65ch;
    margin-top: 18px;
  }

  :is(.om-home, .om-subpage) .om-rental-workspace #rental-results {
    margin-top: 0 !important;
  }

  .om-subpage .om-rental-workspace .om-rental-basic .rental-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  :is(body.om-home, body.om-subpage) {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }

  :is(.om-home, .om-subpage) :is(input, select, textarea) {
    font-size: 16px;
  }

  :is(.om-home, .om-subpage) .om-rental-workspace .om-rental-basic .rental-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  :is(.om-home, .om-subpage) .om-hero h1 {
    font-size: clamp(32px, 7.5vw, 44px);
  }

  :is(.om-home, .om-subpage) .om-hero-media figcaption {
    max-width: calc(100% - 32px);
    overflow-wrap: anywhere;
  }

  :is(.om-home, .om-subpage) .om-actions {
    gap: 12px;
  }

  :is(.om-home, .om-subpage) .om-actions > a {
    flex: 1 1 100%;
  }

  :is(.om-home, .om-subpage) .om-footer {
    overflow-wrap: anywhere;
  }

  :is(.om-home, .om-subpage) .oc-launch {
    bottom: calc(82px + env(safe-area-inset-bottom));
    max-width: calc(100% - 24px);
  }

  :is(.om-home, .om-subpage) .oc-panel {
    bottom: calc(82px + env(safe-area-inset-bottom));
    max-height: calc(100vh - 106px - env(safe-area-inset-bottom));
    max-height: calc(100dvh - 106px - env(safe-area-inset-bottom));
  }
}

@media (max-width: 760px) and (max-height: 460px) {
  :is(body.om-home, body.om-subpage) {
    padding-bottom: 0;
  }

  :is(.om-home, .om-subpage) .oc-launch,
  :is(.om-home, .om-subpage) .om-mobile-cta {
    position: static;
  }

  :is(.om-home, .om-subpage) .oc-panel {
    bottom: 12px;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }
}