/* QUEST UNIQUE COMPONENT — YOUTUBE VIDEO SLIDER */

.q-video-slider,
.q-video-slider *,
.q-video-slider__modal,
.q-video-slider__modal * {
  box-sizing: border-box;
}

.q-video-slider {
  position: relative;
  width: 100%;
  margin: 0;
}

.q-video-slider__stage {
  position: relative;
  width: 100%;
  height: clamp(420px, 68vw, 780px);
  min-height: 420px;
  overflow: hidden;
  background: #18151a;
}

.q-video-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.025);
  transition: opacity .65s ease, visibility .65s ease, transform 1.2s ease;
}

.q-video-slider__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.q-video-slider__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 7s ease;
}

.q-video-slider__slide.is-active .q-video-slider__image {
  transform: scale(1);
}

.q-video-slider__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10,8,12,.18) 0%,
    rgba(10,8,12,.08) 42%,
    rgba(10,8,12,.72) 100%
  );
  pointer-events: none;
}

.q-video-slider__title {
  position: absolute;
  left: 50%;
  bottom: 78px;
  z-index: 4;
  width: min(1000px, calc(100% - 180px));
  margin: 0;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  color: #fff9f1 !important;
  text-align: center;
  font-size: clamp(28px, 4vw, 58px);
  line-height: 1.08;
  font-weight: 600;
  text-shadow: 0 3px 25px rgba(0,0,0,.55);
  transition: opacity .6s ease .18s, transform .7s cubic-bezier(.2,.7,.2,1) .18s;
}

.q-video-slider__slide.is-active .q-video-slider__title {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.q-video-slider__play {
  position: absolute !important;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: 88px;
  height: 88px;
  padding: 0 !important;
  transform: translate(-50%, -50%) scale(.82);
  border: 1px solid rgba(255,249,241,.9) !important;
  border-radius: 50% !important;
  background: rgba(20,15,25,.28) !important;
  color: transparent !important;
  cursor: pointer;
  appearance: none !important;
  opacity: 0;
  transition:
    opacity .55s ease .1s,
    transform .65s cubic-bezier(.2,.8,.2,1) .1s,
    background .35s ease,
    border-color .35s ease;
}

.q-video-slider__slide.is-active .q-video-slider__play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.q-video-slider__play::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0 !important;
  height: 0 !important;
  transform: translate(-40%, -50%);
  border-top: 12px solid transparent !important;
  border-bottom: 12px solid transparent !important;
  border-left: 18px solid #fff9f1 !important;
  border-right: 0 !important;
}

.q-video-slider__play:hover {
  transform: translate(-50%, -50%) scale(1.10) !important;
  background: rgba(20,15,25,.48) !important;
  border-color: #fff9f1 !important;
}

.q-video-slider__arrow {
  position: absolute !important;
  top: 50%;
  z-index: 10;
  width: 58px;
  height: 58px;
  padding: 0 !important;
  transform: translateY(-50%) scale(.9);
  border: 1px solid rgba(255,249,241,.72) !important;
  border-radius: 50% !important;
  background: rgba(20,15,25,.28) !important;
  color: transparent !important;
  cursor: pointer;
  appearance: none !important;
  transition:
    transform .4s cubic-bezier(.2,.8,.2,1),
    background .35s ease,
    border-color .35s ease;
}

.q-video-slider__arrow--prev { left: 28px; }
.q-video-slider__arrow--next { right: 28px; }

.q-video-slider__arrow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px !important;
  height: 11px !important;
  border-top: 2px solid #fff9f1 !important;
  border-right: 2px solid #fff9f1 !important;
}

.q-video-slider__arrow--prev::before {
  transform: translate(-35%,-50%) rotate(-135deg);
}

.q-video-slider__arrow--next::before {
  transform: translate(-65%,-50%) rotate(45deg);
}

.q-video-slider__arrow:hover {
  transform: translateY(-50%) scale(1.08) !important;
  background: rgba(20,15,25,.5) !important;
  border-color: #fff9f1 !important;
}

.q-video-slider__counter {
  position: absolute;
  right: 34px;
  bottom: 28px;
  z-index: 6;
  color: #fff9f1;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .16em;
  text-shadow: 0 2px 12px rgba(0,0,0,.65);
}

.q-video-slider__modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 30px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .4s ease, visibility .4s ease;
}

.q-video-slider__modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.q-video-slider__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8,7,10,.9);
  backdrop-filter: blur(6px);
}

.q-video-slider__dialog {
  position: relative;
  z-index: 2;
  width: min(1200px, 94vw);
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 30px 100px rgba(0,0,0,.65);
  transform: scale(.94);
  opacity: 0;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
}

.q-video-slider__modal.is-open .q-video-slider__dialog {
  transform: scale(1);
  opacity: 1;
}

.q-video-slider__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.q-video-slider__close {
  position: absolute !important;
  right: -18px;
  top: -18px;
  z-index: 5;
  width: 46px;
  height: 46px;
  padding: 0 !important;
  border: 1px solid rgba(255,249,241,.85) !important;
  border-radius: 50% !important;
  background: #211c25 !important;
  color: transparent !important;
  cursor: pointer;
  appearance: none !important;
  transition: transform .35s ease, background .35s ease;
}

.q-video-slider__close::before,
.q-video-slider__close::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 22px;
  width: 20px;
  height: 1px;
  background: #fff9f1 !important;
}

.q-video-slider__close::before { transform: rotate(45deg); }
.q-video-slider__close::after { transform: rotate(-45deg); }

.q-video-slider__close:hover {
  transform: rotate(90deg) scale(1.08);
  background: #302832 !important;
}

@media (max-width: 767px) {
  .q-video-slider__stage {
    height: 72vw;
    min-height: 360px;
  }

  .q-video-slider__arrow {
    width: 46px;
    height: 46px;
  }

  .q-video-slider__arrow--prev { left: 12px; }
  .q-video-slider__arrow--next { right: 12px; }

  .q-video-slider__play {
    width: 68px;
    height: 68px;
  }

  .q-video-slider__play::before {
    border-top-width: 9px !important;
    border-bottom-width: 9px !important;
    border-left-width: 14px !important;
  }

  .q-video-slider__title {
    bottom: 54px;
    width: calc(100% - 100px);
    font-size: 25px;
  }

  .q-video-slider__counter {
    right: 18px;
    bottom: 18px;
  }

  .q-video-slider__modal {
    padding: 14px;
  }

  .q-video-slider__dialog {
    width: 100%;
  }

  .q-video-slider__close {
    right: -2px;
    top: -54px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .q-video-slider__slide,
  .q-video-slider__image,
  .q-video-slider__title,
  .q-video-slider__play,
  .q-video-slider__arrow,
  .q-video-slider__modal,
  .q-video-slider__dialog,
  .q-video-slider__close {
    transition: none !important;
  }
}
.q-video-slider {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.q-video-slider + * {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* Section label – VIDEÓ */
.q-video-slider__label {
    position: absolute;
    top: 58px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    width: min(360px, calc(100% - 50px));

    color: #D9C58A;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.24em;
    line-height: 1;
    text-transform: uppercase;
}

.q-video-slider__label::before,
.q-video-slider__label::after {
    content: "";
    display: block;
    flex: 1;
    height: 1px;
    background: #D9C58A;
}

/* Tablet */
@media (max-width: 900px) {
    .q-video-slider__label {
        top: 40px;
    }
}

/* Mobile */
@media (max-width: 700px) {
    .q-video-slider__label {
        top: 30px;
        font-size: 11px;
        gap: 14px;
    }
}

@media (max-width: 420px) {
    .q-video-slider__label {
        top: 25px;
    }
}