// ==========================================================================
// Slideshow Block
// Dual-slider layout: content fades, images slide
// Uses: c-text-block (dark theme), c-media-grid components
//
// OVERRIDE PATTERN:
// This block customizes child components via descendant selectors.
// Never create component modifiers for block-specific styling.
//
// ✓  .b-testimonials .c-card { ... }
// ✗  .c-card--testimonial { ... }
// ==========================================================================

.b-slideshow {
  $self: &;

  width: 100%;
  overflow: hidden !important;
  background-color: $primary;
  &__inner {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    max-width: 1600px;
    // @media (min-width: 1660px) {
    //   padding-left: 1rem;
    //   padding-right: 1rem;
    // }

    @include media-breakpoint-up(lg) {
      flex-direction: row;
      align-items: stretch;
      min-height: 500px;
    }
    @include media-breakpoint-up(xl) {
      min-height: 600px;
      max-height: 600px;
    }
  }

  // -----------------------------------------------------------------------------
  // Content Slider (left side)
  // -----------------------------------------------------------------------------

  &__content-slider {
    background-color: $primary;

    @include media-breakpoint-up(lg) {
      width: 37%;
    }
    @include media-breakpoint-up(xxl) {
      min-width: 580px;
      width: 35%;
    }
    @include media-breakpoint-up(1600) {
      min-width: 600px;
      width: 35%;
    }
    @include media-breakpoint-up(1800) {
      min-width: 600px;
    }
    @media (min-width: 1800px) {
      flex: 0 0 35%;
    }

    .splide__track {
      height: 100%;
    }

    .splide__list {
      height: 100%;
    }

    .splide__slide {
      height: auto;

      @include media-breakpoint-up(lg) {
        height: 100%;
      }

      // Fade transition
      opacity: 0;
      visibility: hidden;
      transition:
        opacity $transition-slideshow-single,
        visibility 0s linear $transition-slideshow-single-duration;

      @media (prefers-reduced-motion: reduce) {
        transition: none;
      }

      &.is-active {
        opacity: 1;
        visibility: visible;
        transition:
          opacity $transition-slideshow-single,
          visibility 0s linear 0s;

        @media (prefers-reduced-motion: reduce) {
          transition: none;
        }
      }
    }
  }

  &__copyright {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    font-size: 0.75rem;
    font-weight: 300;
    color: #fff;
    pointer-events: none;
    z-index: 2;
  }

  &__content {
    position: relative;
    padding: 4rem 1rem 6rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;

    @media (min-width: 350px) {
      padding: 4rem 1.5rem 6rem 2.5rem;
    }
    @media (min-width: 380px) {
      padding: 5rem 2rem 7rem 3rem;
    }
    @media (min-width: 450px) {
      padding: 5rem 3.5rem 7rem 3.5rem;
    }
    @media (min-width: 500px) {
      padding: 5rem 4rem 7rem 4rem;
    }
    @include media-breakpoint-up(sm) {
      padding: 5rem 4rem 7rem 4rem;
    }
    @include media-breakpoint-up(md) {
      padding: 5rem 2rem 7rem 3rem;
    }

    @include media-breakpoint-up(lg) {
      padding: 5rem 4rem 5rem 3rem;
    }
    @include media-breakpoint-up(xxl) {
      padding: 5rem 6rem 6rem 5rem;
    }
    @include media-breakpoint-up(xxl) {
      padding: 5rem 6rem 6rem 6rem;
    }
    @media (min-width: 1700px) {
      .b-slideshow__content {
        padding: 5rem 7rem 6rem 5rem;
      }
    }
    @media (min-width: 1900px) {
      padding: 5rem 7rem 6rem 5rem;
    }
    @media (max-width: 500px) and (max-height: 700px) {
      padding: 5rem 1rem 6rem 2rem;
    }
    // @include media-breakpoint-up(2000) {
    //   padding: 5rem 7rem 6rem 3rem;
    // }

    &:hover,
    &:focus-visible {
      .c-text-block__title {
        @include media-breakpoint-up(lg) {
          text-decoration: underline;
          text-decoration-color: $primary;
          text-decoration-thickness: 3px;
          text-underline-offset: 0.15em;
        }
      }
    }
  }

  &__content-inner {
    // min-height: 300px;
    // display: flex;
    // flex-direction: column;
    // justify-content: center;
    max-width: 500px;
    // @include media-breakpoint-up(lg) {
    //   max-width: none;
    // }

    &.t-accent--block,
    &.t-accent--text-block {
      &::before {
        top: calc(var(--accent-edge-gap) * -7);
        right: calc(var(--accent-edge-gap) * 7);
        @media (min-width: 400px) {
          top: calc(var(--accent-edge-gap) * -7);
          right: calc(var(--accent-edge-gap) * 10);
        }
        @include media-breakpoint-up(md) {
          right: 2.5%;
        }
        @include media-breakpoint-up(lg) {
          top: calc(var(--accent-edge-gap) * -8);
          right: calc(var(--accent-edge-gap) * 0);
        }
        @include media-breakpoint-up(xxl) {
          top: calc(var(--accent-edge-gap) * -10);
          right: calc(var(--accent-edge-gap) * 0);
        }
      }
      &::after {
        bottom: calc(var(--accent-edge-gap) * -8);
        left: calc(var(--accent-edge-gap) * 1);
        @include media-breakpoint-up(sm) {
          left: -2.5%;
        }
        @include media-breakpoint-up(lg) {
          left: 0;
        }
        @include media-breakpoint-up(xxl) {
          bottom: calc(var(--accent-edge-gap) * -12);
          left: -2.5%;
        }
      }

      @media (min-width: 400px) {
        --accent-width: max(4.5rem, min(15vw, 5rem));
      }

      @include media-breakpoint-up(xxl) {
        --accent-width: max(3rem, min(15vw, 7rem));
        max-width: 450px;
      }
    }

    &.t-accent--text-block {
      &.is-text-accent-ready {
        &::before {
          content: "";
          left: calc(
            var(--accent-before-left) - var(--accent-width) +
              var(--accent-edge-gap) * 3
          );
          right: auto;
        }
        .c-text-block__title::before {
          content: none;
        }
      }
    }
  }
  .c-text-block {
    // width: min-content;
    //prevent word-breaks in the title and subtitle, but allow them in the body text if needed
  }
  .c-text-block__title {
    font-weight: $hero-font-weight;
    font-size: $hero-font-size-sm;
    line-height: $hero-line-height;

    padding: 0 0.3em;
    background-color: #fff;
    color: $primary;
    line-height: 1.5;
    --b-shadow-offset: 0.1em;
    display: inline;
    background: #fff;
    color: $primary;
    box-shadow:
      0 var(--b-shadow-offset) 0 #fff,
      0 calc(var(--b-shadow-offset) * -1) 0 #fff;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;

    @include media-breakpoint-up(sm) {
      font-size: 2.25rem;
    }
    @include media-breakpoint-between(lg, xl) {
      font-size: 2rem;
    }
    @include media-breakpoint-up(xl) {
      font-size: $hero-font-size;
    }
    @include media-breakpoint-down(sm) {
      font-size: 1.75rem;
    }
    @media (max-width: 500px) and (max-height: 700px) {
      font-size: 1.5rem;
    }
  }
  .c-text-block__text {
    font-size: $hero-subtitle-font-size-sm;
    line-height: $hero-subtitle-line-height;
    margin-top: 1.25rem;
    margin-bottom: 1rem;
    @media (min-width: 350px) {
      padding-right: 10%;
    }
    @media (min-width: 500px) {
      padding-right: 20%;
      margin-bottom: 2rem;
    }
    @include media-breakpoint-up(lg) {
      padding-right: 20%;
      margin-top: 1.5rem;
    }
    @include media-breakpoint-up(1600) {
      font-size: $hero-subtitle-font-size;
      line-height: $hero-subtitle-line-height;
    }
  }

  &__content-link {
    position: static;
    z-index: 1;
    &:focus-visible:after {
      outline: 22px solid $secondary-rosenrot;
      outline-offset: -5px;
    }
  }

  // Block-specific author styling
  &__author {
    font-size: $font-size-sm;
    font-weight: $font-weight-semibold;
    color: #fff;
  }

  // -----------------------------------------------------------------------------
  // Image Slider (right side)
  // -----------------------------------------------------------------------------

  &__image-slider {
    @include media-breakpoint-up(lg) {
      width: 63%;
      min-height: auto;
    }
    @include media-breakpoint-up(xxl) {
      width: 65%;
    }
    @include media-breakpoint-up(1600) {
      width: 65%;
    }
    @include media-breakpoint-up(1800) {
      width: 65%;
    }
    @media (min-width: 1800px) {
      // flex: 0 0 calc(65% + max(0px, (100vw - 1800px) / 2));
    }
    .splide__track {
      height: 100%;
      overflow: hidden;
    }

    .splide__list {
      height: 100%;
    }

    .splide__slide {
      height: 100%;
    }
  }

  &__image {
    display: flex;
    height: 100%;
    overflow: hidden;

    @include media-breakpoint-down(lg) {
      aspect-ratio: 16/9;
    }
    @media (max-width: 500px) and (max-height: 700px) {
      // aspect-ratio: 16/8;
    }

    picture {
      width: 100%;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
  }

  // -----------------------------------------------------------------------------
  // Navigation
  // -----------------------------------------------------------------------------

  &__navigation {
    position: absolute;
    bottom: 0;
    left: auto;
    right: 0;
    display: flex;
    align-items: center;
    z-index: 10;
    // @media (min-width: 1900px) {
    //   right: 12px;
    // }
    @media (min-width: 1600px) {
      right: 44px;
    }
    @media (min-width: 1800px) {
      // right: 12px;
    }
  }
}

// -----------------------------------------------------------------------------
// Shared Slideshow Navigation Styles
// -----------------------------------------------------------------------------

.b-testimonials__navigation,
.b-image-gallery-slideshow__navigation {
  grid-area: nav;
  display: flex;
  justify-content: center;
  margin-top: 2rem;

  @include media-breakpoint-up(lg) {
    justify-content: flex-end;
    margin-top: 0;
  }
}

.b-slideshow__arrows,
.b-testimonials__arrows,
.b-image-gallery-slideshow__arrows {
  display: flex;
  align-items: center;
  background-color: $secondary;
}

.b-slideshow__nav-btn,
.b-testimonials__nav-btn,
.b-image-gallery-slideshow__nav-btn {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 0.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color $transition-slideshow-single,
    opacity $transition-slideshow-single;
  opacity: 1;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }

  @include media-breakpoint-up(lg) {
    padding: 1rem;
  }

  &:hover {
    background-color: $color-accent;
  }
  @include focus-visible();

  &:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
  }
}

.b-slideshow__nav-btn {
  @include media-breakpoint-up(sm) {
    padding: 1rem;
  }
  @include media-breakpoint-up(lg) {
    padding: 0.875rem;
  }
  @include media-breakpoint-up(xl) {
    padding: 1.25rem;
  }
  &:focus-visible {
    outline: 3px solid $secondary-rosenrot;
    outline-offset: 0;
  }
}

.b-slideshow__counter,
.b-testimonials__counter,
.b-image-gallery-slideshow__counter {
  gap: 0.25rem;
  display: flex;
  color: #fff;
  font-size: $font-size-sm;
  font-weight: $font-weight-medium;
  padding: 0 $spacer * 0.75;
  min-width: 3rem;
  text-align: center;

  @include media-breakpoint-up(sm) {
  }
  @include media-breakpoint-up(lg) {
    font-size: $font-size-base;
  }
}