// ==========================================================================
// Social Media Wall Block
// Full-width section displaying social media feed
//
// 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-sm-wall {
  overflow: hidden;
  @include media-breakpoint-up(lg) {
  }

  // Background variants
  &.t-muted,
  &.t-light {
    background-color: $bg-light;
  }

  &.t-white {
    background-color: $white;
  }

  &.t-blue {
    background-color: $primary;
  }

  &__header {
  }

  &__social {
    @include media-breakpoint-down(lg) {
      align-self: flex-end;
    }
    .c-sm-icons__list {
      gap: $spacer * 1;
    }

    .c-sm-icons__item {
      margin-bottom: 0;
    }
  }

  &__wall {
    min-width: 0;

    @include media-breakpoint-up(sm) {
      // Give the stage widget extra horizontal room for slider arrows + margins.
      --b-sm-wall-wall-bleed: 2rem;
      width: calc(100% + (var(--b-sm-wall-wall-bleed) * 2));
      margin-inline: calc(var(--b-sm-wall-wall-bleed) * -1);
    }

    @include media-breakpoint-up(lg) {
      --b-sm-wall-wall-bleed: 3.5rem;
    }
    @include media-breakpoint-up(xxl) {
      --b-sm-wall-wall-bleed: 4.25rem;
    }
    @include media-breakpoint-up(1800) {
      --b-sm-wall-wall-bleed: 5.25rem;
    }
  }

  &__card {
    background-color: $hks-navy-dark;
    border-radius: $border-radius-lg;
    aspect-ratio: 4 / 5;
    width: 100%;
    @include media-breakpoint-down(sm) {
      max-width: 350px;
    }
  }

  &__card-image {
    width: 100%;
  }

  .css-zyo6ya {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    width: calc(3rem);
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--hks-primary);
    outline: rgba(0, 0, 0, 0.1) solid 1px;
    outline-offset: -1px;
  }
  .css-1wuxw35 {
    position: absolute;
    z-index: 15;
    inset: auto 0px 0.5rem;
    margin: 0px auto;
    border-radius: 0;
    background: $secondary;
    display: flex;
    backdrop-filter: invert(25%) blur(5px);
    width: fit-content !important;
  }
  #stage-fullscreen-root,
  #stage-widget-root {
    .swiper-pagination-bullets {
      padding: 0.5rem 0.5rem;
    }
  }
}
// Light/Default Mode
/* Button styling */
#stage-widget::part(load-more-button) {
  margin-top: 4rem;
  background-color: $secondary;
}

#stage-widget::part(load-more-button):hover {
  /* Hover-Effekte hier */
}
.css-1o5zwgz {
  margin-top: 1rem !important;
}

/* Variablen definieren */
#stage-widget {
  --stage-text-color: #{$primary} !important;
  --stage-link-color: #{$secondary} !important;
  --stage-border-color: #{$primary-15} !important;
  --stage-post-background-color: #ffffff !important;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  #stage-widget {
    --stage-overlay-text-color: black;
    --stage-post-background-color: transparent;
  }
}