@import "_partials";

.new-header-style header {
  background-color: #F1F5F6;
}
.new-header-style .header .header__inner {
  background-color: #F1F5F6;
}
@media (max-width: 768px) {
  .new-header-style .header .header__inner {
    padding: 0 15px !important;
  }
}
.new-header-style header .menu.menu--main button {
  color: #000;
}
.new-header-style header .menu.menu--main a {
  color: #000;
}
.new-header-style header .menu.menu--main button::after {
  background-image: url("../../../images/icons/chevron-lg_down1.svg");
}
.new-header-style header .secondary-header-nav__label {
  display: none;
}
.new-header-style header.secondary-header {
  background: #fff;
  margin: 40px 0 50px 0;
}
@media (max-width: 768px) {
  .new-header-style header.secondary-header {
    margin: 0;
  }
}
.new-header-style .secondary-header-search__wrapper {
  padding: 0 !important;
}
.new-header-style .secondary-header-search__wrapper {
  right: 50px;
}
.new-header-style .secondary-header .secondary-header-nav__wrapper {
  padding: 0 !important;
}
.new-header-style header.secondary-header .menu.menu--sub-menu button  {
  color: #000;
  font-size: 1.2rem !important;
}
.new-header-style header.secondary-header .menu.menu--sub-menu button::after  {
  background-image: url("../../../images/icons/chevron-lg_down1.svg") !important;
}
/*.new-header-style .header__inner.l--offset.l--constrained,
.new-header-style .secondary-header__inner.l--offset.l--constrained {
  padding: 0;
}*/
/* =========================
   FULL WIDTH MEDIA
========================= */

/* =========================
   BASE
========================= */

.billboard-new {
  position: relative;
  height: 650px;
  overflow: hidden;
}

/* =========================
   FULL WIDTH MEDIA
========================= */

.billboard-new__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.billboard-new__video,
.billboard-new__image {
  width: 100%;
  height: 100%;
}

.billboard-new__video iframe,
.billboard-new__video wistia-player {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.billboard-new__image {
  background-size: cover;
  background-position: center;
}

/* =========================
   OVERLAY + SHAPE
========================= */

.billboard-new__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;

  -webkit-mask-image:
    linear-gradient(#fff 0 0),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 318 365'><g transform='translate(318,0) scale(-1,1)'><path d='M313.194 186.788C319.142 182.461 319.642 173.761 314.241 168.769L51.3923 -73.4896C38.2106 -85.5657 17.6053 -84.7575 5.51812 -71.3026C0.0217922 -65.2646 -3 -57.5625 -3 -49.3375V350.599C-3 368.475 11.5379 383 29.4069 383C40.471 383 46.8715 380.813 52.3678 376.962L313.194 186.811V186.788Z'/></g></svg>");
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-size: auto, 55%;
  -webkit-mask-position: left top, right 5% center;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* =========================
   CONTENT LAYER
========================= */

.billboard-new__content-wrapper {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
}

/* MATCH HEADER CONTAINER */
.billboard-new__container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

/* TEXT BLOCK */
.billboard-new__content {
  max-width: 520px;
  width: 100%;
}

/* =========================
   TEXT STYLES
========================= */

.billboard-new__content h1 {
  /*font-size: clamp(2rem, 4vw, 3rem);*/
  line-height: 1.2;
  margin-bottom: 20px;
  color: #ed601a;
  padding-top: 20px;
}

.billboard-new__content h1.small {
  font-size: clamp(0.875rem, 1.5vw, 1.5rem);
}

.billboard-new__content h1.medium {
  font-size: clamp(1rem, 2vw, 2rem);
}

.billboard-new__content h1.large {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
}

.billboard-new__content h1.xlarge {
  font-size: clamp(2rem, 4vw, 3rem);
}

.billboard-new__desc {
  margin-bottom: 30px;
  line-height: 1.6;
}

.billboard-new__tagline {
  width: 50px;
  height: 4px;
  margin: 16px 0 20px;
  border-radius: 2px;
}

.billboard-new__tagline--teal {
  background-color: #00D6EB;
}

.billboard-new__tagline--orange {
  background-color: #CC2D00;
}

.billboard-new__content .btn {
  background: #ed601a;
  color: #fff;
  padding: 0.3rem 2rem 0.3rem 2rem;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 700;
  border: 2px solid #ed601a;
}
.billboard-new__content .btn:hover {
  text-decoration: underline;
  border-color: #5fd3e8;
  color: #fff;
}
/* =========================
   PLAY BUTTON
========================= */
.custom-play.for-mobile {
  display: none;
}

.custom-play {
  background: url('/themes/custom/vertafore/images/icons/orange_video_play.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 50%;
  left: 70%;
  width: 125px;
  height: 80px;
  z-index: 4;
  border: none;

}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1024px) {
  .billboard-new {
    height: 550px;
  }

  .billboard-new__container {
    padding: 0 24px;
  }

  .custom-play {
    left: 75%;
  }
}
@media (min-width: 992px) and (max-width: 1156px) {
  .billboard-new__desc {
    width: 75%;
  }
  .billboard-new__content h1 {
    width: 75%;
  }
}
@media (min-width: 992px) and (max-width: 1460px) {
  .billboard-new__content {
    padding-left: 30px;
  }
}
@media (max-width: 991px) {
  .billboard-new__video {
    aspect-ratio: 16 / 9;
    width: 100%;
  }

  .billboard-new__video iframe,
  .billboard-new__video wistia-player {
    width: 100% !important;
    height: 100% !important;
    display: block;
  }
}
@media (max-width: 991px) {
  
  /* =========================
     MAKE SECTION FLEX
  ========================= */
  .billboard-new {
    display: flex;
    flex-direction: column;
    height: auto;
    padding-bottom: 20px;
  }

  /* =========================
     VIDEO FIRST
  ========================= */
  .billboard-new__media {
    position: relative;
    order: 1;
    height: auto;
    width: 100%;
    z-index: unset;
  }

  /* KEEP OVERLAY ON VIDEO */
  .billboard-new__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;

    -webkit-mask-size: auto, 49%;
    -webkit-mask-position: left top, 88% 0;
  }

  /* =========================
     CONTENT BELOW (IMPORTANT)
  ========================= */
  .billboard-new__content-wrapper {
    position: relative;   /* ❗ removes overlay behavior */
    order: 2;
    display: block;
    width: 100%;
    margin-top: 15px;
  }
  .billboard-new__image {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  /* RESET CONTAINER */
  .billboard-new__container {
    padding: 0 20px;
  }

  .billboard-new__content {
    max-width: 100%;
  }

  /* =========================
     TEXT
  ========================= */
  .billboard-new__content h1 {
    font-size: 2rem;
  }

  /* =========================
     PLAY BUTTON CENTER
  ========================= */
  .custom-play {
    display: none;
  }
  .custom-play.for-mobile {
    display: block;
  }
  .custom-play.for-mobile {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}