/*
 Version:      2.0
*/


/* start of new homepage stuff -miles 3/1/2024 */

/* custom properties */
:root{
  --default-box-shadow: 0 5px 25px rgba(0,0,0,0.15);
  --hover-box-shadow:0 5px 15px rgba(0,0,0,0.3);
  --text-dark-blue:#0055B1;
  --royal-blue:#007BFF;
  --hover-blue:#3295FF;
  --lt-blue:#F0F7FF;
  --teal-accent:#17a2b8;
  --dk-grey:#333333;
  --md-grey:#666666;
  --off-white:#f5f5f5;
  --error-red:#f2545b;
}

.new-homepage{
  font-size: 1.25rem;
  & p{
    line-height:1.8;
  }
  background-color:white;
  background: linear-gradient(180deg, rgba(225,239,255,1) 0%, rgba(255,255,255,1) 10%);
}

@media(min-width:1500px){
  .container{
    max-width:1440px;
  }
}

.parts-and-support-banner{
  text-align: center;
  background-color:var(--lt-blue);
  padding:30px;
  font-weight:400;
  & a{
    font-weight:700;
    color:var(--text-dark-blue);
    &:hover{
      text-decoration:underline;
    }
  }
}

.main-image{
  border-radius:10px;
  height:40vh;
  width:100%;
  object-fit:cover;
  object-position:50% 0;
}

.room-image{
  border-radius:10px;
  height:40vh;
  width:100%;
  object-fit:cover;
}

.workstation-image{
  height:60vh;
  width:100%;
  object-fit:contain;
}

.photo-card{
  border-radius:10px;
  padding:1.5rem;
  color:white;
  display: flex;
  gap:1rem;
  height:40vh;
  align-items:end;
  justify-content: space-between;
  & h3{
    font-weight:700;
    font-size:1.6rem;
    margin-bottom: 0;
  }
  & p{
    font-size:1rem;
    margin-bottom:0;
    line-height: 1.4;
  }
}

#Pulldown-Photo-Card {
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%), url('../../../uploads/2024/03/dean-j_lab-steril_2-webp.webp');
  background-size: cover;
  background-position: 50% 50%;
}

#Rapid-Cart-Photo-Card {
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%), url('../../../uploads/2024/06/rapid_carousel_3.jpg');
  background-size: cover;
  background-position: 50% 50%;
}

.equipment-grid-row{
  container-type: inline-size;
}
.equipment-card-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
@container (width > 720px){
  .equipment-card-grid{
    grid-template-columns:1fr 1fr 1fr;
    & .made-in-usa-card{
      grid-column:span 1;
    }
  }
}

.card-structure{
  border-radius:20px;
  padding:1.5rem;
  min-width:0;
}

.equipment-card{
  background-color:white;
  text-align:center;
  box-shadow: var(--default-box-shadow);
  transition:all ease-in-out .2s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex:1 1 auto;
  &:hover{
    box-shadow: var(--hover-box-shadow);
  }
  & .equipment-image{
    max-height:200px;
    min-width: 0;
    object-fit: cover;
  }
}

a:has(.equipment-card){
  color:var(--dk-grey);
  min-width: 0;
  display: flex;
  &:hover{
    text-decoration: none;
  }
}

.made-in-usa-card{
  background-color:var(--lt-blue);
  grid-column:span 2;
  & .flag-image{
    max-height:120px;
    object-fit:contain;
    margin:auto;
    display: block;
    flex:0 1 auto;
    min-width:0;
  }
}

.headline{
  color:var(--text-dark-blue);
  font-weight:300;
  line-height: 1.4;
  margin-bottom:1.25rem;
}

.button-row{
  display: flex;
  gap:1rem;
  margin-top:2rem;
}

.std-button{
  border-radius: 10px;
  border-width:2px;
  border-style: solid;
  padding:.6rem 1.4rem;
  white-space:nowrap;
  display: inline-block;
  &.blue-btn{
    color:white;
    background-color:var(--royal-blue);
    border-color: var(--royal-blue);
    &:hover{
      background-color:var(--hover-blue);
      border-color:var(--hover-blue);
    }
  }
  &.outline-btn{
    color:var(--text-dark-blue);
    border-color: var(--text-dark-blue);
    &:hover{
      background-color:var(--royal-blue);
      border-color: var(--royal-blue);
      color:white;
    }
  }
  &.white-outline-btn{
    color:var(--white);
    border-color: var(--white);
    &:hover{
      background-color:white;
      color:var(--dk-grey);
    }
  }
  &:hover{
    text-decoration: none;
  }
}

.quote-card{
  background-color:#f5f5f5;
  padding:30px;
  box-shadow:var(--default-box-shadow);
  border-radius: 5px;
  & .quote{
    padding-left:20px;
    border-left:4px solid var(--teal-accent);
  }
  & .quote-author{
    display:flex;
    align-items:center;
    gap:20px;
    & .quote-image{
      border-radius:50%;
      width:70px;
      height:70px;
      object-fit: cover;
    }
    & .quote-name{
      font-weight: 700;
      margin-bottom:0;
      line-height: 1.4;
    }
    & .quote-practice{
      font-size:1rem;
      margin-bottom:0;
    }
  }
}

.current-promo{
  border: 1px solid var(--md-grey);
  padding: 1.5rem;
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--text-dark-blue);
  text-align: center;
  margin-bottom: 2rem;
  margin-top:2rem;
  border-radius: 10px;
}

.classic-ul{
  padding-left:1.4em;
  & li{
    padding-bottom:.8rem;
    &::marker{
      color: var(--royal-blue);
      font-size:1.5em;
    }
  }
}

.bachman-image{
  display: block;
  max-width: 100%;
  margin:40px auto;
  border-radius: 10px;
}

.bachman-form .hbspt-form{
  border-radius: 10px;
}

/* 992px is bootstrap lg breakpoint */
@media  (width >= 992px){
  .main-image, .photo-card{
    height: 60vh;
    border-radius:40px;
  }
  .room-image {
    height: 400px;
    border-radius:40px;
  }
}