/**
 * Eco Banners Swiper - Customization helpers
 *
 * Customize colors by overriding these CSS variables in your theme:
 * - --eco-banners-arrow-color
 * - --eco-banners-pagination-color
 *
 * Layout helpers:
 * - --eco-banners-aspect-ratio-desktop (default: 96 / 25)
 * - --eco-banners-aspect-ratio-mobile  (default: 96 / 25)
 */

.eco-banners-swiper {
  --swiper-navigation-color: var(--eco-banners-arrow-color, currentColor);
  --swiper-pagination-color: var(--eco-banners-arrow-color, currentColor);
  --eco-banners-aspect-ratio-desktop: 96 / 25;
  --eco-banners-aspect-ratio-mobile: 641 / 500;

  /* Navigation defaults (requested) */
  --eco-banners-arrow-color: #ffffff;
  --eco-banners-arrow-hover-color: #2D8E00;
  --eco-banners-nav-gradient-from: rgba(0, 0, 0, 0.6);
  --eco-banners-nav-gradient-to: rgba(0, 0, 0, 0);

  /* Make all slides have consistent height by enforcing an aspect-ratio slot */
  & .swiper-slide {
    height: auto;
  }

  & .swiper-slide > a,
  & .swiper-slide > picture {
    display: block;
    width: 100%;
  }

  & .swiper-slide picture {
    display: block;
    width: 100%;
    overflow: hidden;
  }

  /* Mobile slot */
  @media (max-width: 768px) {
    & .swiper-slide picture {
      aspect-ratio: var(--eco-banners-aspect-ratio-mobile);
    }
  }

  /* Desktop slot (requested 96:25) */
  @media (min-width: 769px) {
    & .swiper-slide picture {
      aspect-ratio: var(--eco-banners-aspect-ratio-desktop);
    }
    & .swiper-button-prev,
    & .swiper-button-next {
      width: 6rem;
    }
  }

  & .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Navigation buttons: full-height hit area + hover gradient */
  & .swiper-button-prev,
  & .swiper-button-next {
    top: 0;
    bottom: 0;
    height: auto;
    margin-top: 0;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;

    /* Arrow color (Swiper uses this for ::after) */
    --swiper-navigation-color: var(--eco-banners-arrow-color);
    color: var(--eco-banners-arrow-color);
  }

  & .swiper-button-prev {
    left: -1px;
    width: 15px !important;
    margin-left: 20px !important;
  }

  & .swiper-button-next {
    right: -1px;
    width: 15px !important;
    margin-right: 20px !important;
    
  }

  & .swiper-button-prev::before,
  & .swiper-button-next::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 180ms ease;
    pointer-events: none;
    z-index: -1;
  }

  /*& .swiper-button-prev::before {
    background: linear-gradient(90deg, var(--eco-banners-nav-gradient-from), var(--eco-banners-nav-gradient-to));
  }*/

 /* & .swiper-button-next::before {
    background: linear-gradient(270deg, var(--eco-banners-nav-gradient-from), var(--eco-banners-nav-gradient-to));
  }*/

  & :is(.swiper-button-prev, .swiper-button-next):is(:hover, :focus-visible) {
    --swiper-navigation-color: var(--eco-banners-arrow-hover-color);
    color: var(--eco-banners-arrow-hover-color);
  }

  & :is(.swiper-button-prev, .swiper-button-next):is(:hover, :focus-visible)::before {
    opacity: 1;
  }

  /* Ensure bullets are visible even if Swiper defaults change */
  & .swiper-pagination-bullet {
    background: transparent;
    border: 2px solid var(--eco-banners-arrow-color, currentColor);
    opacity: 0.6;
  }

  & .swiper-pagination-bullet-active {
    opacity: 1;
    border-color: var(--eco-banners-arrow-color, currentColor);
  }
}