/*
 * Responsive guardrails for the six 2018 H5 campaigns that still ship their
 * original generated styles. This file is intentionally linked after each
 * campaign stylesheet so the old desktop-width reset cannot win the cascade.
 */
@media (max-width: 768px) {
  /* The legacy Razor partial supplied social icons at render time. In the
     unified client definition that list is empty, so keeping its 117px shell
     creates a misleading blank footer. */
  .legacy-mobile-special-document .footer:not(:has(.contact .image > *)) {
    display: none !important;
  }

  html:has(
      :is(
          .legacy-mobile-special-645,
          .legacy-mobile-special-652,
          .legacy-mobile-special-655,
          .legacy-mobile-special-664,
          .legacy-mobile-special-677,
          .legacy-mobile-special-682
        )
    ),
  body:has(
      :is(
          .legacy-mobile-special-645,
          .legacy-mobile-special-652,
          .legacy-mobile-special-655,
          .legacy-mobile-special-664,
          .legacy-mobile-special-677,
          .legacy-mobile-special-682
        )
    ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-x: clip !important;
  }

  body:has(
      :is(
          .legacy-mobile-special-645,
          .legacy-mobile-special-652,
          .legacy-mobile-special-655,
          .legacy-mobile-special-664,
          .legacy-mobile-special-677,
          .legacy-mobile-special-682
        )
    )
    :is(.fx-mobile-header, .fx-mobile-bottom-nav) {
    display: none !important;
  }

  :is(
      .legacy-mobile-special-645,
      .legacy-mobile-special-652,
      .legacy-mobile-special-655,
      .legacy-mobile-special-664,
      .legacy-mobile-special-677,
      .legacy-mobile-special-682
    ) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding-bottom: env(safe-area-inset-bottom);
    overflow-x: hidden !important;
    overflow-x: clip !important;
  }

  :is(
      .legacy-mobile-special-645,
      .legacy-mobile-special-652,
      .legacy-mobile-special-655,
      .legacy-mobile-special-664,
      .legacy-mobile-special-677,
      .legacy-mobile-special-682
    ),
  :is(
      .legacy-mobile-special-645,
      .legacy-mobile-special-652,
      .legacy-mobile-special-655,
      .legacy-mobile-special-664,
      .legacy-mobile-special-677,
      .legacy-mobile-special-682
    ) *,
  :is(
      .legacy-mobile-special-645,
      .legacy-mobile-special-652,
      .legacy-mobile-special-655,
      .legacy-mobile-special-664,
      .legacy-mobile-special-677,
      .legacy-mobile-special-682
    ) *::before,
  :is(
      .legacy-mobile-special-645,
      .legacy-mobile-special-652,
      .legacy-mobile-special-655,
      .legacy-mobile-special-664,
      .legacy-mobile-special-677,
      .legacy-mobile-special-682
    ) *::after {
    box-sizing: border-box;
    min-width: 0;
  }

  :is(
      .legacy-mobile-special-645,
      .legacy-mobile-special-652,
      .legacy-mobile-special-655,
      .legacy-mobile-special-664,
      .legacy-mobile-special-677,
      .legacy-mobile-special-682
    )
    :is(img, svg, video, canvas, iframe, embed, object) {
    max-width: 100% !important;
  }

  :is(
      .legacy-mobile-special-645,
      .legacy-mobile-special-652,
      .legacy-mobile-special-655,
      .legacy-mobile-special-664,
      .legacy-mobile-special-677,
      .legacy-mobile-special-682
    )
    :is(p, h1, h2, h3, h4, h5, h6, a, label) {
    overflow-wrap: anywhere;
  }

  :is(
      .legacy-mobile-special-645,
      .legacy-mobile-special-652,
      .legacy-mobile-special-655,
      .legacy-mobile-special-664,
      .legacy-mobile-special-677,
      .legacy-mobile-special-682
    )
    :is(a, button, input) {
    touch-action: manipulation;
  }

  :is(
      .legacy-mobile-special-645,
      .legacy-mobile-special-652,
      .legacy-mobile-special-655,
      .legacy-mobile-special-664,
      .legacy-mobile-special-677,
      .legacy-mobile-special-682
    )
    :is(a, button, input):focus-visible {
    outline: 3px solid #005fcc !important;
    outline-offset: 2px !important;
  }

  /* 645: make the video and gallery hotspots scale with the viewport. */
  .legacy-mobile-special-645 .prize .banner .banner_txt {
    width: min(calc(100% - 24px), 682px) !important;
    padding: clamp(44px, 14vw, 72px) clamp(18px, 6vw, 34px)
      clamp(24px, 8vw, 42px) !important;
  }

  .legacy-mobile-special-645 .prize .content .video_play {
    width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9;
  }

  .legacy-mobile-special-645 .prize .content .vide_list .list {
    height: auto !important;
    aspect-ratio: 16 / 9;
  }

  .legacy-mobile-special-645 .prize .content .vide_list .list .txt {
    right: 0;
    bottom: -28px !important;
    left: 0 !important;
    text-align: center;
  }

  .legacy-mobile-special-645
    :is(.paly_img, .list_play, .jump_box img) {
    min-width: 44px !important;
    min-height: 44px !important;
    cursor: pointer;
  }

  .legacy-mobile-special-645 :is(.paly_img, .list_play) img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
  }

  /* 652: remove the root padding emitted by the legacy DPR selector and keep
     the fixed artwork inside the 320px viewport. */
  .legacy-mobile-special-652 .praise .mac {
    width: min(285px, calc(100% - 32px)) !important;
  }

  .legacy-mobile-special-652 .praise .mac img,
  .legacy-mobile-special-652 .praise .praise_list .details_img img {
    width: 100% !important;
    margin-left: 0 !important;
  }

  .legacy-mobile-special-652 .praise .praise_list .details_img {
    width: min(150px, 48vw) !important;
  }

  .legacy-mobile-special-652 .praise :is(.jump a, .publish a) {
    display: flex !important;
    height: auto !important;
    min-height: 44px;
    padding: 8px 12px;
    align-items: center;
    justify-content: center;
    line-height: 1.35 !important;
  }

  /* 655: the icon margin plus the old 80% floated copy is 321px wide at the
     narrowest breakpoint. A flexible row also lets longer copy grow instead
     of being cut by the historical 60px height. */
  .legacy-mobile-special-655
    :is(.background-1, .background-2, .background-3)
    .column {
    width: 100%;
    height: auto !important;
    min-height: 60px;
    padding-inline: clamp(15px, 4vw, 30px);
    margin: 36px 0 !important;
    display: flex !important;
    align-items: flex-start;
    clear: both;
  }

  .legacy-mobile-special-655
    :is(.background-1, .background-2, .background-3)
    .column
    .left {
    margin: 0 14px 0 0 !important;
    float: none !important;
    flex: 0 0 35px;
  }

  .legacy-mobile-special-655
    :is(.background-1, .background-2, .background-3)
    .column
    .right {
    width: auto !important;
    float: none !important;
    flex: 1 1 auto;
  }

  /* Unified heading/paragraph tokens load after the historical stylesheet.
     Reassert this campaign's light copy on its near-black background. */
  .legacy-mobile-special-655
    :is(.background-1, .background-2, .background-3)
    .column
    .right
    :is(.title, .explain) {
    color: #edddce !important;
  }

  .legacy-mobile-special-655
    :is(.background-1, .background-2, .background-3)
    .column
    .right
    .title {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  .legacy-mobile-special-655
    :is(.background-1, .background-2, .background-3)
    .column
    .right
    .explain {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  /* 664: keep the legacy submission dialog and inputs usable on small phones. */
  .legacy-mobile-special-664 .apply .input-box .input {
    min-width: 0;
    font-size: 16px !important;
  }

  .legacy-mobile-special-664 #apply {
    scroll-margin-top: 12px;
  }

  body:has(.legacy-mobile-special-664) .layui-layer-dialog {
    width: min(360px, calc(100vw - 32px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 32px) !important;
    height: auto !important;
  }

  body:has(.legacy-mobile-special-664) .layui-layer-dialog .layui-layer-btn0 {
    height: auto !important;
    min-height: 44px;
    line-height: 44px !important;
  }

  /* 677: both calls to action were only about 34px high. */
  .legacy-mobile-special-677 .DealerRevision .link_to {
    width: min(72%, 260px) !important;
    min-height: 44px;
    padding: 0 !important;
    display: flex;
  }

  .legacy-mobile-special-677 .DealerRevision .link_to a {
    width: 100%;
    min-height: 44px;
    padding: 7px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.35 !important;
  }

  /* 682: preserve a stable video ratio without relying on the delayed legacy
     script, enlarge the long-press QR, and expose 44px download targets. */
  .legacy-mobile-special-682 .FxChatRevisionMobile .merit {
    padding-inline: 8px;
    gap: clamp(4px, 2vw, 9px);
  }

  .legacy-mobile-special-682 .FxChatRevisionMobile .merit img {
    width: min(96px, calc((100% - 18px) / 3)) !important;
    height: auto !important;
  }

  .legacy-mobile-special-682
    .FxChatRevisionMobile
    .merit
    img.merit_two {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .legacy-mobile-special-682 .FxChatRevisionMobile .newLoad {
    width: fit-content;
    min-height: 44px;
    margin-inline: auto;
    display: flex;
    align-items: center;
  }

  /* These rows originally inherit white from `.part-text`; the unified
     paragraph token otherwise turns them black on the purple artwork. */
  .legacy-mobile-special-682
    .FxChatRevisionMobile
    .part
    .part-text
    :is(.h-two, .c-p) {
    color: #fff !important;
  }

  .legacy-mobile-special-682 .FxChatRevisionMobile .video-bg {
    height: auto !important;
    position: relative;
    aspect-ratio: 37 / 21;
  }

  .legacy-mobile-special-682 .FxChatRevisionMobile .video-bg > img {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    cursor: pointer;
  }

  .legacy-mobile-special-682 .FxChatRevisionMobile .code img.code-img {
    width: clamp(104px, 32vw, 176px) !important;
    height: auto !important;
  }

  .legacy-mobile-special-682 .FxChatRevisionMobile .code .loading a {
    width: min(112px, 38vw) !important;
    height: auto !important;
    min-height: 44px;
    padding: 8px 12px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1.25 !important;
  }
}