/**
 * Clyro Category Banners Styling
 * - Top slider banner above breadcrumbs (Desktop & Tablet)
 * - Side skyscraper banners (Ultra-wide desktop)
 * - Hidden on Mobile (< 768px)
 */

/* =========================================================
   Top Slider Banner (Above Breadcrumbs)
   ========================================================= */
.clyro-category-promo {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 8px 0 10px 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22);
  border: 1px solid #1f2937;
  background: #0e1114;
}

/* Slider Track & Aspect Ratio */
.clyro-category-promo__slider {
  position: relative;
  width: 100%;
  aspect-ratio: 1196 / 125;
  overflow: hidden;
  background: #0e1114;
  border-radius: 8px;
}

.clyro-category-promo__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.6s ease;
  z-index: 1;
}

.clyro-category-promo__slide.is-active {
  visibility: visible;
  opacity: 1;
  z-index: 2;
}

.clyro-category-promo__link,
.clyro-category-promo__picture {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

.clyro-category-promo__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Navigation Dots */
.clyro-category-promo__dots {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 5;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 20px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.clyro-category-promo__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  outline: none;
  transition: all 0.25s ease;
}

.clyro-category-promo__dot:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: #fff;
}

.clyro-category-promo__dot.is-active {
  width: 22px;
  border-radius: 10px;
  background: #c7ff2e;
  border-color: #c7ff2e;
  box-shadow: 0 0 8px rgba(199, 255, 46, 0.8);
}

/* =========================================================
   Side Skyscraper Banners ("Uszy")
   - Much narrower (130px - 140px max)
   - Anchored outside the centered container
   - Guaranteed equal margin from products on both sides
   ========================================================= */
.clyro-side-banners {
  display: none;
}

@media (min-width: 1780px) {
  .clyro-side-banners {
    display: block;
  }

  .clyro-side-banner {
    position: fixed;
    top: 160px;
    z-index: 90;
    display: block;
    width: clamp(100px, calc((100vw - 1520px) / 2 - 32px), 135px);
    height: auto;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    border: 1px solid #1f2937;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }

  .clyro-side-banner:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(199, 255, 46, 0.25);
    border-color: #c7ff2e;
  }

  .clyro-side-banner__img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Left banner: strictly anchored to the LEFT of the main 1500px container with 18px gap */
  .clyro-side-banner--left {
    right: calc(50vw + (min(100vw - 30px, 1500px) / 2) + 18px);
    left: auto;
  }

  /* Right banner: strictly anchored to the RIGHT of the main 1500px container with 18px gap */
  .clyro-side-banner--right {
    left: calc(50vw + (min(100vw - 30px, 1500px) / 2) + 18px);
    right: auto;
  }
}

/* =========================================================
   Tablet View (768px - 1199px): Top Slider Visible, Side Hidden
   ========================================================= */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .clyro-category-promo {
    margin: 6px 0 10px 0;
  }

  .clyro-category-promo__slider {
    aspect-ratio: 1196 / 125;
  }

  .clyro-side-banners {
    display: none !important;
  }
}

/* =========================================================
   Mobile View (< 768px): NO TOP BANNER & NO SIDE BANNERS
   User requirement: "na tabletach jest gorny baner a na mobilach nie ma gornego i bocznych"
   ========================================================= */
@media (max-width: 767.98px) {
  .clyro-category-promo,
  .clyro-side-banners {
    display: none !important;
  }
}