/* ============================================
   Block: Video Slider
   ============================================ */

.block-video-slider {
  --slide-gap: 20px;
  --edge-gap: 20px;
  overflow-x:hidden;

  & .embla__viewport {
    overflow: hidden;
  }

  & .embla__container {
    display: flex;
    touch-action: pan-y pinch-zoom;
    gap: var(--slide-gap);
    padding: 0 var(--edge-gap);
  }

  & .embla__slide {
    flex: 0 0 calc((100% - 2 * var(--edge-gap) - (var(--per-view-mobile) - 1) * var(--slide-gap)) / var(--per-view-mobile));
    min-width: 0;
    height: 100%;
    aspect-ratio: 9 / 16;
    display: flex;
    align-items: center;
    
    margin: auto;
    overflow: hidden;
    
    
    padding:6px;

    &.is-active video {
      background:red;
      aspect-ratio: 9 / 16;
    }

    & video {
      display: block;
      aspect-ratio: 10 / 16;
      transition: aspect-ratio 0.2s ease;
      width: 100%;
      height: auto;
      object-fit: cover;
      border-radius: var(--border-radius);
      border: 2px solid var(--color-red);
      box-shadow: 3px 3px 0px var(--color-red);
    }
  }

  @media (min-width: 768px) {
    & .embla__slide {
      flex: 0 0 calc((100% - 2 * var(--edge-gap) - (var(--per-view-tablet) - 1) * var(--slide-gap)) / var(--per-view-tablet));
    }
  }

  @media (min-width: 1024px) {
    & .embla__slide {
      flex: 0 0 calc((100% - 2 * var(--edge-gap) - (var(--per-view) - 1) * var(--slide-gap)) / var(--per-view));
    }
  }

  & .embla__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    padding: 0 var(--edge-gap);
  }

  & .slider-decoration {
    & svg {
      display: block;
      width: auto;
      max-width: 200px;
      height: auto;
    }
  }

  & .embla__nav {
    display: flex;
    gap: 12px;
    margin-left: auto;
  }

  & .embla__prev,
  & .embla__next {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    transition: opacity 0.2s;

    & img {
      display: block;
      width: 43px;
      height: auto;
    }

    &:hover {
      opacity: 0.7;
    }
  }

  &.pt-sm { padding-top: var(--space-sm); }
  &.pt-md { padding-top: var(--space-md); }
  &.pt-lg { padding-top: var(--space-lg); }
  &.pt-xl { padding-top: var(--space-xl); }

  &.pb-sm { padding-bottom: var(--space-sm); }
  &.pb-md { padding-bottom: var(--space-md); }
  &.pb-lg { padding-bottom: var(--space-lg); }
  &.pb-xl { padding-bottom: var(--space-xl); }
}