@import "../../../src/style/front-end/overides/colors";
@import "../../../src/style/front-end/overides/variables";
@import '../../../node_modules/bulma/sass/utilities/mixins.sass';

.purdue-home-path-way {
  position: relative;
  scroll-margin-top: 9rem;
  .section{
    padding-bottom:6rem;
  }
  &:last-child{
    .section{
      @include mobile{
        padding-bottom:3rem;
      }
    }
  }
  &--first{
    .section{
      padding-top:6rem;
      @include mobile{
        padding-top:3rem;
      }
    }
    &.purdue-home-path-way--has-connector{
      .purdue-home-path-way__container{
        @include touch{
          padding-top:7rem !important;
        }
        &:before{
          @include touch{
           top:0 !important;
          }
        }
      }
      .purdue-home-path-way__connector--top{
        display:none;
        left: 50%;
        transform: translateX(-1px);
        top:1.5rem;
        @include touch{
          display:block;
        }
        &.animate{
          height: 5rem;
          animation: down_full 0.3s;
        }
        &.no-animate{
          height: 5rem;
          animation: none;
        }
      }
    }
  }
  &--full{
    .purdue-home-path-way__container{
      padding: 3.75rem 6rem;
      @include touch{
        padding: 3rem 2rem;
      }
      @include mobile{
        padding: 0;
      }
    }
    .purdue-home-path-way__image-container{
      position:absolute;
      width: 100%;
      height: 100%;
      min-height: 0;
      min-width: 0;
      overflow: hidden;
      box-shadow: 2px 4px 5px -1px rgba(0, 0, 0, 0.3);
      border-radius: 4px;
      left: 0;
      top: 0;
      @include mobile{
        display:none;
      }
      .image{
        display: block;
        position: relative;
        width: 100%;
        height: 100%;
        img{
          object-fit: cover;
          width: 100%;
          height: 100%;
        }
      }
    }
    .purdue-home-path-way__content-container{
      position: relative;
      min-width: 0;
      min-height: 0;
      background: white;
      padding: 5rem;
      border-radius: 4px;
      width: clamp(20rem, 60%, 80rem);
      @include touch{
        width:100%;
        padding: 3rem 2rem;
      }
    }
    .purdue-home-path-way__container--reversed{
      .purdue-home-path-way__content-container{
        flex-wrap: wrap;
        margin-left:auto;
      }
    }
    &.purdue-home-path-way--has-connector{
      &.purdue-home-path-way--has-connector-elbow{
        .section{
          padding-bottom:8rem;
          @include touch{
            padding-bottom:6rem;
          }
        }
      }
      .purdue-home-path-way__container{
        margin-top: 2rem;
        &:before{
          display: block;
          content:"";
          position:absolute;
          width: 1.5rem;
          height: 1.5rem;
          border-radius: 100%;
          background-color: $aged-gold;
          margin: 0;
          border: 1px solid $aged-gold;          
          background-clip: content-box;
          padding: 0.25rem;
          top: -3.75rem;
          left: 50%;
          transform: translateX(-50%);
          @include touch{
            top: -3rem;
          }
        }
      }
      .purdue-home-path-way__connector--elbow{
        width:0;
        height:1rem;
        right: 0;
        top: calc(100% + 46px);
        background-position: center;
        transform: rotate(180deg);
        transform-origin: left;
        background-size: 10px 2px;
        background-repeat: repeat-x;
        background-image: linear-gradient(to right, $aged-gold 20%, rgba(255, 255, 255, 0) 0%);
        opacity: 0;
        &.animate{
          width:calc(50% - 60px);
          animation: right 0.3s 0.3s;
          animation-fill-mode: forwards;
        }
        &.no-animate{
          width:calc(50% - 60px);
          animation: none;
          opacity: 1;
        }
        @include touch{
          display:none;
        }
      }
      .purdue-home-path-way__connector--down{
        height:0;
        top: calc(100% + 85px);
        left:3.5rem;
        animation-fill-mode: forwards;
        opacity: 0;
        &.animate{
          height:2rem;
          opacity: 1;
          animation: down_full_short 0.3s 0.6s;
        }
        &.no-animate{
          height:2rem;
          animation: none;
          opacity: 1;
        }
        @include touch{
          display:none;
        }
      }
    }
    .purdue-home-path-way__connector{
      left: 50%;
      transform: translateX(-1px);
      top: 100%;
      height: 0;
      &.animate{
        height:5rem;
        animation: down_full 0.3s;
      }
      &.no-animate{
        height:5rem;
        animation: none;
      }
    }
  }
  &--aligned{
    .section{
      .container{
        padding:0 3.5rem;
        @include touch{
          padding:0;
        }
        .purdue-home-path-way__container{
          display:flex;
          flex-direction:row;
          justify-content: space-between;
          flex-wrap: wrap;
          @include touch{
            flex-direction:column-reverse;          
          }
          &.purdue-home-path-way__container--small-image{
            .purdue-home-path-way__image-container{
              width:35%;
              @include touch{
                width:100%;
              }
            }
            .purdue-home-path-way__content-container{
              width:60%;
              min-width: 0;
              @include touch{
                width:100%;
              }
            }
          }
        }
        .purdue-home-path-way__container--reversed{
          display:flex;
          flex-direction:row-reverse;
          flex-wrap: wrap;
          @include touch{
            flex-direction:column-reverse;
          }
          .purdue-home-path-way__content-container{
            padding-left:0;
            padding-right:5rem;
            margin-top:-0.5rem;
            @include touch{
              padding-right:0;
              margin-top:0;
            }
          }
        }
        .purdue-home-path-way__image-container{
         // width:45%;
         flex: 1 1 45%;
          min-width: 0;
          @include touch{
            width:100%;
          }
        }
        .purdue-home-path-way__content-container{
          //width:45%;
          flex: 1 1 45%;
          padding-left:5rem;
          //min-width: 0;
          @include touch{
            width:100%;
            padding-left:0;
          }
        }
        .purdue-home-path-way__list-container{
          @include touch{
            margin-bottom:2.5rem;
          }
        }
      }
    }
    &.purdue-home-path-way--has-connector{
      .purdue-home-path-way__container{
        flex-wrap: wrap;
        margin-left: 3.5rem;
        &:before{
          display: block;
          content:"";
          position:absolute;
          width: 1.5rem;
          height: 1.5rem;
          border-radius: 100%;
          background-color: $aged-gold;
          margin: 0;
          border: 1px solid $aged-gold;          
          background-clip: content-box;
          padding: 0.25rem;
          top: -0.75em;
          left: -4.25rem;
          @include touch{
            left: 50%;
            transform: translateX(-50%);
            top:-1rem;
          }
        }
        @include touch{
          margin-left:0;
          padding-top:2rem;
        }
      }
      .purdue-home-path-way__connector--elbow{
        width:0;
        height:1rem;
        left: auto;
        top: calc(100% + 72px);
        background-position: center;
        background-size: 10px 2px;
        background-repeat: repeat-x;
        background-image: linear-gradient(to right, $aged-gold 20%, rgba(255, 255, 255, 0) 0%);

        animation-fill-mode: forwards;
        opacity: 0;
        &.animate{
          width:calc(50% - 60px);
          animation: right 0.3s 0.3s;
        }
        &.no-animate{
          width:calc(50% - 60px);
          animation: none;
          opacity:1;
        }
        @include touch{
          display:none;
        }
      }
    }
  }
  &__container{
    position:relative;
  }
  &__connector{
    width:3.5rem;
    background-position: left;
    background-size: 2px 10px;
    background-repeat: repeat-y;
    background-image: linear-gradient(to bottom, $aged-gold 20%, rgba(255, 255, 255, 0) 0%);
    top: 1rem;
    height: 0;
    display: block;
    position: absolute;
    &.animate{
      height: calc(100% + 60px);
      animation: down_aligned 0.3s;
    }
    &.no-animate{
      height: calc(100% + 60px);
      animation: none;
    }
    @include touch{
      left: 50%;
      transform: translateX(-1px);
      top: 100%;
      height: 0;
      animation: down_full 0.3s;
      &.animate{
        height:5rem;
        animation: down_full 0.3s;
      }
      &.no-animate{
        height:5rem;
        animation: none;
      }
    }
  }
  &__subheader{
    font-family: $united-sans-condensed;
    font-size: 1.125rem;
    font-weight: 900;
    letter-spacing: 2.5px;
    line-height: 1.5;
    margin-bottom: 0.8rem !important;
    text-transform: none;
  }
  &__header{
    font-family: $acumin-pro;
    font-size: 3.75rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
    margin-top:0 !important;
    margin-bottom: 1.5rem !important;
    text-transform: none;
    @include mobile{
      font-size: 2.75rem;
    }
  }
  &__list-desc{
    font-family: $acumin-pro;
    font-size: 1rem;
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0;
    margin-bottom:0.5rem;
    display:block;
  }
  .image{
    img{
      border-radius: 4px;
      box-shadow: 2px 4px 5px -1px rgba(0,0,0,0.3);    
    }
  }
  .purdue-home-select {
    justify-content: flex-start;
    flex-wrap:wrap;
    select{
      width:auto;
      margin-bottom:0.5rem;
      @include mobile{
        width:100%;
        margin-bottom:1.5rem;
      }
    }
    .purdue-home-button{
      margin-bottom:0.5rem;
    }
    @include mobile{
      align-items:flex-start;
    }
  }
  .purdue-home-button-list{
    justify-content: flex-start;
    flex-wrap:wrap;
    padding-left:0;
    li:first-child{
      padding-left:0;
    }
  }
}
@keyframes down_aligned {
  0% {
    height: 0;
    opacity:0;
  }
  100% {
    height: calc(100% + 60px);
    opacity:1;
  }  
}
@keyframes down_full {
  0% {
    height: 0;
    opacity:0;
  }
  100% {
    height: 5rem;
    opacity:1;
  }  
}
@keyframes down_full_short {
  0% {
    height: 0;
    opacity:0;
  }
  100% {
    height: 2rem;
    opacity:1;
  }  
}
@keyframes right {
  0% {
    width: 0;
    opacity:0;
  }
  100% {
    width:calc(50% - 60px);
    opacity:1;
  }  
}
@keyframes left {
  0% {
    width: 0;
    opacity:0;
  }
  100% {
    width:calc(50% - 60px);
    opacity:1;
  }  
}