/**
 * Loop Grid → Swiper peek slider (tablet + mobile only)
 * Add class sl-loop-peek on the Loop Grid widget only.
 *
 * Desktop: normal Elementor grid (Swiper destroyed)
 * Tablet:  2.15 slides (2 + ~15% peek)
 * Mobile:  1.15 slides (1 + ~15% peek)
 */

:root {
  --sl-peek-tablet: 2.15;
  --sl-peek-mobile: 1.15;
  --sl-gap-tablet: 20px;
  --sl-gap-mobile: 16px;
  --sl-dot: #0d7377;
  --sl-dot-idle: #cfd8d8;
}

/* Desktop — no slider UI */
@media (min-width: 1025px) {
  .elementor-widget-loop-grid.sl-loop-peek .sl-swiper-root,
  .elementor-widget-loop-grid.sl-loop-peek .swiper-pagination {
    display: none !important;
  }
}

/* Only when JS has activated Swiper */
@media (max-width: 1024px) {
  .elementor-widget-loop-grid.sl-loop-peek.sl-slider-active .elementor-widget-container {
    overflow: hidden;
  }

  .elementor-widget-loop-grid.sl-loop-peek.sl-slider-active .sl-swiper-root {
    overflow: hidden;
    width: 100%;
  }

  /* Reset Elementor grid while slider is active */
  .elementor-widget-loop-grid.sl-loop-peek.sl-slider-active .elementor-loop-container,
  .elementor-widget-loop-grid.sl-loop-peek.sl-slider-active .elementor-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    margin: 0 !important;
  }

  .elementor-widget-loop-grid.sl-loop-peek.sl-slider-active .swiper-slide {
    height: auto;
    box-sizing: border-box;
  }

  /* Elementor loop CSS must never show as a slide */
  .elementor-widget-loop-grid.sl-loop-peek.sl-slider-active .elementor-loop-container > style,
  .elementor-widget-loop-grid.sl-loop-peek.sl-slider-active .elementor-grid > style,
  .elementor-widget-loop-grid.sl-loop-peek.sl-slider-active style.swiper-slide {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
  }

  /* Dots only */
  .elementor-widget-loop-grid.sl-loop-peek.sl-slider-active .swiper-pagination {
    position: relative;
    margin-top: 20px;
    bottom: auto !important;
  }

  .elementor-widget-loop-grid.sl-loop-peek.sl-slider-active .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        background: var(--sl-dot-idle);
        opacity: 1;
        margin: 0 5px;
        border-radius: 100px;
        transition: 400ms ease-in-out;
  }

  .elementor-widget-loop-grid.sl-loop-peek.sl-slider-active .swiper-pagination-bullet-active {
        background: var(--sl-dot);
        width: 35px;
  }
}