// =============================================================================
// IMAGE-SLIDER-BANNER — carousel of full-bleed-style banner slides, each with
// its own bg image + gradient overlay + title/description/CTA. One slide
// visible at a time (unlike testimonials' multi-card peek slider).
// Mobile-first: base = 375px, desktop via respond-to('desktop').
// No live design reference for this component — visual sizing borrowed from
// image-text-banner's --full-bleed variant, nav button from testimonials.
// =============================================================================

@import '../mixins';

.image-slider-banner {
  // Section rhythm: 56px mobile+tablet, 80px laptop+ (--section-space, tokens.scss).
  padding-block: var(--section-space);
  overflow: hidden; // slider-breakout bleeds slides right; this is the root's safety clip
}

// ─── Heading ─────────────────────────────────────────────────────────────────

.image-slider-banner__heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 16px;

  @include respond-to('desktop') {
    gap: 16px;
    margin-bottom: var(--space-12);
  }
}

// ─── Slider ──────────────────────────────────────────────────────────────────

.image-slider-banner-slider {
  cursor: grab;
  user-select: none;

  // NOT @include slider-breakout — that mixin cancels an ancestor .container's
  // own horizontal inset so a *peeking* next/prev card can bleed to the true
  // viewport edge (testimonials, tab-component-2, gallery). This component has
  // slidesPerView: 1 (main.js) and no .container ancestor at all (single
  // full-bleed slide, like image-text-banner's --full-bleed variant just above
  // — see that component's own width: 100% with no breakout). Applying the
  // breakout here had nothing real to cancel, so it just widened every slide
  // (and its __content) past the visible viewport by that same amount,
  // silently swallowing __content's own right padding.
  &:active { cursor: grabbing; }
}

.image-slider-banner-slider__track {
  align-items: stretch;
}

.image-slider-banner-slide {
  @include image-overlay-base;
  width: 100%;
  height: 620px;

  @include respond-to('desktop') {
    height: 706px;
  }
}

.image-slider-banner-slide__bg {
  @include overlay-bg;
}

.image-slider-banner-slide__overlay {
  @include overlay-gradient(22.035%, 112.89%);

  @include respond-to('desktop') {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 42.075%,
      #000 112.89%
    );
  }
}

.image-slider-banner-slide__content {
  @include overlay-content;
  padding: 0 16px 56px;
  gap: 16px;

  @include respond-to('desktop') {
    padding: 0 120px 80px;
    gap: 24px;
  }
}

.image-slider-banner-slide__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);
  font-weight: 400;
  line-height: var(--lh-display-sm);
  letter-spacing: 0;
  color: var(--color-white);
  margin: 0;

  @include respond-to('desktop') {
    font-size: var(--fs-display-lg);
    line-height: var(--lh-display-lg);
    letter-spacing: -0.96px;
    max-width: 718px;
  }
}

.image-slider-banner-slide__body {
  @include body-text(var(--color-white));
  margin: 0;

  @include respond-to('desktop') {
    max-width: 776px;
  }
}

// ─── Nav ─────────────────────────────────────────────────────────────────────

.image-slider-banner__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  margin-left: auto;
  margin-top: 1rem;

  @include respond-to('desktop') {
    margin-top: var(--space-5);
  }
}

.image-slider-banner-nav-btn {
  @include slider-nav-btn;
  width: 40px;
  height: 40px;
  background-color: var(--color-satin-linen);
  border-radius: var(--radius-pill);
  color: var(--color-mantle);

  img {
    width: 24px;
    height: 24px;
    display: block;
  }
}

.image-slider-banner-nav-btn--prev {
  opacity: 0.35;
}

.image-slider-banner-nav-btn--next {
  opacity: 1;
}