.program-finder-intro {
  margin-bottom: 2rem;

  p {
    font-size: 1.25rem;
    margin-bottom: 0;
  }
}

.program-finder--standard {
  background: var(--gradient);
  padding: 5rem 0;

  @media (min-width: 1024px) {
    padding: 5rem 4rem;
  }

  .program-finder-intro {
    @media (min-width: 1024px) {
      margin-bottom: 0;
    }
  }
}

.program-finder--showcase {
  position: relative;

  &::before {
    background: var(--gradient);
    content: '';
    height: calc(100% + 6rem);
    position: absolute;
    top: -6rem;
    width: 100%;
    z-index: -1;

    @media (min-width: 768px) {
      height: calc(100% + 7rem);
      top: -7rem;
    }
  }

  .content-wrapper {
    padding: 5rem 0;

    @media (min-width: 1024px) {
      padding: 0 0 4rem;
    }
  }

  .row-fluid {
    @media (min-width: 768px) {
      flex-wrap: wrap;
    }
  }

  .program-finder-intro,
  .program-finder-form {
    @media (min-width: 1024px) {
      width: 51.25%;
    }
  }

  .program-finder-intro {
    @media (min-width: 1024px) {
      padding-top: 4rem;
    }
  }

  .input-wrapper {
    @media (min-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}

.program-finder-image {
  display: none;

  @media (min-width: 1024px) {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: left 25%;
    position: absolute;
    right: 0;
    top: 0;
    width: 44%;
  }
}

.program-finder {
  form {
    input[type="text"],
    input[type="email"],
    select {
      background: none;
      border: 0;
      border-bottom: 1px solid var(--primary-color);
      border-radius: 0;
      color: var(--primary-color);
      height: 100%;
      padding: 1rem;
      width: 100%;
    }

    input[type="text"]::placeholder,
    input[type="email"]::placeholder {
      color: #1A3E6C;
    }

    select {
      appearance: none;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none"><mask id="a" width="25" height="25" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="%23D9D9D9" d="M.667.5h24v24h-24z"/></mask><g mask="url(%23a)"><path fill="%2300295C" d="m12.666 15.5-5-5h10l-5 5Z"/></g></svg>') no-repeat 97% 50%;
    }

    button {
      margin-top: 2rem;

      &:disabled {
        cursor: not-allowed;
        opacity: 0.7;
      }
    }
  }

  .inputBox {
    position: relative;
  }

  .input-wrapper,
  .inputBoxes {
    display: grid;
    gap: 1rem;
  }

  .inputBoxes {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 1rem;
  }

  .hs-error-msg {
    bottom: -1.25rem;
    font-size: 0.75rem;
    position: absolute;
  }
}

#empty form {
  .form-columns-2 {
    margin-bottom: 2rem;
  }

  .form-columns-2 .input:first-child {
    margin-right: 1rem;
  }

  label {
    display: none;
  }

  .hs-button {
    background-color: var(--primary-color);
    border: 0;
    border-radius: 1.875rem;
    color: #fff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.1;
    padding: 1rem 2rem;
    transition: background-color 0.3s linear;

    &:hover {
      background-color: var(--denim);
      color: #fff;
      text-decoration: none;
    }
  }
}

#empty .submitted-message {
  font-size: 1.375rem;
}

.programResults {
  padding: 5rem 0;

  h2 {
    margin-bottom: 1rem;
  }
}

.programResultsInfo {
  #empty & {
    margin-bottom: 4rem;
  }

  #programTiles & {
    margin-bottom: 0;
  }

}

.programTiles {
  .swiper {
    padding: 4rem 0;
    display: none;

    @media (min-width: 768px) {
      display: block;
    }
  }

  .swiper-wrapper {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 2rem;
  }

  // Two separate renders toggled by breakpoint: a Swiper for desktop and a
  // plain vertical stack for mobile.
  // Toggle the wrappers (not the tiles) so the JS reveal's inline display on
  // .programTile can't override the breakpoint visibility.
  .programTiles-desktop {
    display: none;
  }

  .programTiles-mobile {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-top: 2rem;
    margin: 0 16px;
  }

  @media (min-width: 768px) {
    .programTiles-desktop {
      display: block;
    }

    .programTiles-mobile {
      display: none;
    }
  }
}

.programTile {
  height: auto !important;
  width: 100% !important;

  @media (min-width: 768px) {
    width: 23.625rem !important;
  }

  a {
    box-shadow: 0px 0px 1.25rem 0px rgba(0, 41, 92, 0.15);
    color: var(--primary-color);
    display: block;
    height: 100% !important;
    padding: 2rem;
    position: relative;
    transition: box-shadow 0.3s ease-in-out;

    &::before {
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><mask id="a" width="24" height="24" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="%23D9D9D9" d="M0 0h24v24H0z"/></mask><g mask="url(%23a)"><path fill="%2300295C" d="M6.4 18 5 16.6 14.6 7H6V5h12v12h-2V8.4L6.4 18Z"/></g></svg>');
      content: '';
      height: 1.5rem;
      position: absolute;
      right: 2rem;
      top: 2rem;
      width: 1.5rem;
    }

    &:hover {
      box-shadow: 0px 0px 1.25rem 0px rgba(0, 41, 92, 0.30);
      text-decoration: none;
    }
  }
}

.programDeviceType {
  display: flex;
  align-items: center;
}

.programLogo {
  max-width: 80%;
}

.programLogo.logo-mobile {
  display: block;
  margin-left: 30px;

  @media (min-width: 768px) {
    display: none;
  }
}

.programLogo.logo-desktop {
  display: none;

  @media (min-width: 768px) {
    display: block;
  }
}

.swiper-scrollbar {
  display: none;

  @media (min-width: 768px) {
    display: block;
  }
}