/* ==========================================================================
   HOME — SWIPER BASE
========================================================================== */

[data-home-swiper] {
    width: 100%;
    min-width: 0;
    overflow: visible;
  }
  
  /* Grid/flex item wrapping the swiper must be allowed to shrink, otherwise
     Swiper's inline slide widths grow the column in a feedback loop. */
  :has(> [data-home-swiper]) {
    min-width: 0;
  }
  
  [data-home-swiper] .swiper-wrapper {
    align-items: stretch;
  }
  
  [data-home-swiper] .swiper-slide {
    height: auto;
  
    /*
      Never use display:none or visibility:hidden here.
      The cloned slides must stay in the Swiper track at all times.
    */
    visibility: visible !important;
  
    transform: translate3d(0, 0, 0);
  
    will-change: transform, opacity;
  }
  
  /* ==========================================================================
     PAST SLIDES
     Slides leaving to the left fade out but remain in the track.
  ========================================================================== */
  
  [data-home-swiper] .swiper-slide.is--past {
    pointer-events: none;
  }
  
  /* ==========================================================================
     ACTIVE AND FUTURE SLIDES
     Active, next and cloned slides on the right remain visible.
  ========================================================================== */
  
  [data-home-swiper] .swiper-slide.is--active,
  [data-home-swiper] .swiper-slide.is--future {
    visibility: visible !important;
    pointer-events: auto;
  }
  
  /* ==========================================================================
     CORNER SVGs (.div > .image)
  
     Black Subtract.svg bites sit flush on the card corners (blend with the
     page bg). Swiper transforms break Webflow sticky + 0.625rem inset, which
     left a double corner (border-radius + inset notch). Pin absolute to edges.
  ========================================================================== */
  
  [data-home-swiper] .div > .image {
    position: absolute !important;
    grid-area: auto !important;
    place-self: auto !important;
    inset: auto;
    width: 1.9rem;
    z-index: 3;
  }
  
  [data-home-swiper] .div > .image.is--top-left {
    top: 0;
    left: 0;
    transform: rotateY(180deg);
  }
  
  [data-home-swiper] .div > .image.is--top-right {
    top: 0;
    right: 0;
    transform: none;
  }
  
  [data-home-swiper] .div > .image.is--bottom-left {
    bottom: 0;
    left: 0;
    transform: rotateX(180deg) rotateY(180deg);
  }
  
  [data-home-swiper] .div > .image.is--bottom-right {
    bottom: 0;
    right: 0;
    transform: rotateX(180deg);
  }
  
  /* ==========================================================================
     SLIDE CONTENT
  ========================================================================== */
  
  [data-home-swiper] .swiper--inside-item {
    height: 100%;
  }
  
  [data-home-swiper] .swiper--home-title,
  [data-home-swiper] .swiper--image-wrapper {
    transform: translate3d(0, 0, 0);
  
    transition:
      transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
  
    will-change: transform;
  }
  
  /*
    Do not offset upcoming slides horizontally.
    This ensures every new active slide lands in exactly the same place
    as the previous active slide.
  */
  
  [data-home-swiper] .swiper-slide.is--active .swiper--home-title,
  [data-home-swiper] .swiper-slide.is--active .swiper--image-wrapper,
  [data-home-swiper] .swiper-slide.is--future .swiper--home-title,
  [data-home-swiper] .swiper-slide.is--future .swiper--image-wrapper {
    transform: translate3d(0, 0, 0);
  }
  
  /* ==========================================================================
     IMAGES
  ========================================================================== */
  
  [data-home-swiper] .swiper--image-wrapper {
    position: relative;
    overflow: hidden;
  }
  
  [data-home-swiper] .swiper--image-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  
    transform: scale(1.015);
  
    transition:
      transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
  
    will-change: transform;
  }
  
  [data-home-swiper] .swiper-slide.is--active .swiper--image-wrapper img {
    transform: scale(1);
  }
  
  /* ==========================================================================
     OPTIONAL NAVIGATION
  ========================================================================== */
  
  [data-swiper-prev],
  [data-swiper-next],
  [data-home-swiper] .swiper-button-prev,
  [data-home-swiper] .swiper-button-next {
    cursor: pointer;
  
    transition:
      opacity 0.35s ease,
      transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
  
  @media (hover: hover) and (pointer: fine) {
    [data-swiper-prev]:hover,
    [data-home-swiper] .swiper-button-prev:hover {
      transform: translateX(-0.25rem);
    }
  
    [data-swiper-next]:hover,
    [data-home-swiper] .swiper-button-next:hover {
      transform: translateX(0.25rem);
    }
  }
  
  /* ==========================================================================
     OPTIONAL PAGINATION
  ========================================================================== */
  
  [data-swiper-pagination],
  [data-home-swiper] .swiper-pagination {
    position: relative;
  }
  
  [data-home-swiper] .swiper-pagination-bullet {
    opacity: 0.35;
  
    transition:
      opacity 0.3s ease,
      transform 0.3s ease;
  }
  
  [data-home-swiper] .swiper-pagination-bullet-active {
    opacity: 1;
    transform: scale(1.15);
  }
  
  /* ==========================================================================
     REDUCED MOTION
  ========================================================================== */
  
  @media (prefers-reduced-motion: reduce) {
    [data-home-swiper] .swiper-slide,
    [data-home-swiper] .swiper--home-title,
    [data-home-swiper] .swiper--image-wrapper,
    [data-home-swiper] .swiper--image-wrapper img,
    [data-swiper-prev],
    [data-swiper-next] {
      transition-duration: 0.01ms !important;
    }
  }