.video-quote::before {
  position: absolute;
  content: "";
  inset: 0;
  background: var(--dark-50);
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease
} 
.video-quote.chesnara {
  /*  height: 91.7rem;  */
  height: auto;
  background-color: #F18012;
}
.video-quote.chesnara .quote__wrapper::after {
  content: "”";
}
.video-quote.chesnara::after {
  content: "";
  position: absolute;
  background: url("/~/media/Images/C/chesnara/Universal/custom-components/quote-and-video-with-image/quote-and-video-desktop.png") no-repeat center/cover;
  z-index: 1;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;

}

.video-quote .video-quote__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
/* .video-quote .video {
height: 100%
} */
.video-quote__expandable-panel {
  position: relative;
  z-index: 2;
  margin-top: var(--lg-4)
}
@media (min-width:768px) {
.video-quote__quote-mark.quote-lg {
    font-size: 3.5rem;
    top: -1.5rem;
    position: relative;
}
  .video-quote {
    height: 89.8rem
  }
  .video-quote--shadow::before {
    opacity: 1
  }
  .video-quote--shadow .cta {
    pointer-events: none
  }
  .video-quote .quote-text {
    margin-left: var(--md-1)
  }
  .video-quote__cta {
    margin-left: var(--md-1)
  }
  .video-quote__bg {
    top: 0;
    left: 0;
    overflow: hidden;
    position: absolute
  }
  .video-quote__expandable-panel {
    content: "";
    top: calc(var(--md-3) * -1);
    right: 0;
    width: 100%;
    max-width: 38.4rem;
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
    position: absolute;
    margin-right: calc(var(--bs-gutter-x)/ 2)
  }
}
@media (max-width:767.98px) {
.video-quote__quote-mark.quote-lg {
    font-size: 2rem;
    top: -0.7rem;
    position: relative;
}
  .video-quote .quote-text .truncate {
    --truncate-lines: auto
  }
  .video-quote__image{
    display: none;
  }
  .video-quote.chesnara .icon-play::before{
    width: 1.8rem;
    height: 1.8rem;
  }
  .video-quote.chesnara::after {
    content: "";
    position: absolute;
    background: url("/~/media/Images/C/chesnara/Universal/custom-components/quote-and-video-with-image/quote-and-video-with-image-mobile.png") no-repeat center/cover;
    z-index: 1;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;

  }
}
.video-quote .container-fluid {
  z-index: 2;
}
@media (min-width:768px) and (max-width:1024px){
  .video-quote.chesnara::after {
    content: "";
    position: absolute;
    background: url("/~/media/Images/C/chesnara/Universal/custom-components/quote-and-video-with-image/quote-and-video-with-image.png") no-repeat center/cover;
    z-index: 1;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;

  }
  img.video-quote__image {
    height: 67.2rem;
    object-position: top;
    object-fit: contain;
  }
  .video-quote.chesnara .icon-play::before{
    width: 2rem;
    height: 2rem;
  }
}

/* ============================================
Video — thumbnail + play button
============================================ */

/* Video sits above the decorative pattern (z-index 1) so it stays clickable */
.video-quote .video {
  position: relative;
  z-index: 2;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

/* --- Thumbnail overlay (rendered as a <button>) --- */
.video .thumbnail-image {
  top: 0;
  left: 0;
  z-index: 2;
  background: none;
  opacity: 1;
  transition: opacity .35s ease;
}

/* Fade out when the video starts (JS adds .video--playing) */
.video.video--playing .thumbnail-image {
  opacity: 0;
  pointer-events: none;
}

/* --- Centered play button (white circle + triangle) --- */
.video .icon-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 60px;
  border: 0 solid rgba(255, 255, 255, 0.00);
  background: var(--base-10);
  transition: transform .2s ease, background .2s ease;
  display: flex;
  width: 64px;
  height: 63px;
  padding: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.video .video__play-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 1.1rem 0 1.1rem 1.8rem;
  border-color: transparent transparent transparent #1a1a1a;
}


.video .thumbnail-image:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: -3px;
}

/* --- Iframe fills the component --- */
.video .video__frame-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.video .video__frame-wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --- Background player --- */
.video.video--background .thumbnail-image {
  cursor: default;
}

.video.video--background .video__play-btn {
  display: none;
}

.video.video--background .action-button {
  position: absolute;
  right: 1.6rem;
  bottom: 1.6rem;
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  .video .thumbnail-image,
  .video .video__play-btn {
    transition: none;
  }
}
.video .icon-play{
  background: #fff; } 

.video .icon-play::before {
  content: "\e900";
  color: var(--primary-2-500);
  font-size: 24px;
}

/* .video-quote.chesnara .icon-play::before{
  content: "";
  position: absolute;
  background: url(/~/media/Images/C/chesnara/Universal/icons/play-icon.svg);
  z-index: 13;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 56%;
} */

@media (min-width:1024px) {
  .video-quote.chesnara .icon-play::before{
    width: 2.4rem;
    height: 2.4rem;
  }
}
@media (min-width:1900px) {
  .video-quote.chesnara::after {
    width: 90%;
  }
}