/*
 * Categories slider.
 * Default styles apply everywhere.
 * Homepage-specific changes are scoped with body.home.
 */

/* =========================================================
   GLOBAL DEFAULT – všetky stránky
========================================================= */

#categories .swiper-slide {
  position: relative;
  overflow: hidden;
}

#categories .swiper-slide > div {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#categories .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

#categories .category-content {
  position: absolute;
  z-index: 2;
}

/* Hide swiper navigation arrows on mobile */
@media (max-width: 767.98px) {
  #categories .swiper-button-next,
  #categories .swiper-button-prev,
  #products-home .swiper-button-next,
  #products-home .swiper-button-prev {
    display: none;
  }
}

@media (min-width: 992px) {
  #categories .swiper-wrapper {
    align-items: stretch;
  }

  #categories .swiper-slide {
    height: auto;
  }

  #categories .swiper-slide > div {
    height: 100%;
    width: 100%;
  }

  #categories .swiper-slide img {
    aspect-ratio: 1 / 1;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}


/* =========================================================
   HOMEPAGE ONLY – 4:5 cards + white overlay text
========================================================= */

body.home #categories .swiper-slide > div {
  height: auto;
  aspect-ratio: 4 / 5;
  color: #fff;
}

body.home #categories .swiper-slide img {
  height: 100%;
  width: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}

body.home #categories .category-content,
body.home #categories .category-content h5 {
  color: #fff;
}

/* Zachovať pôvodnú logiku: iba spodné podčiarknutie */
body.home #categories .category-content .btn {
  color: #fff;

  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: #fff;
}

body.home #categories .swiper-slide:hover .category-content .btn {
  color: #fff;

  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: #fff;
}

/* Overlay iba na homepage */
body.home #categories .swiper-slide > div::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.28) 0%,
    rgba(0, 0, 0, 0.08) 45%,
    rgba(0, 0, 0, 0.34) 100%
  );
}

body.home #categories .category-content {
  position: absolute;
  z-index: 2;
}

@media (min-width: 992px) {
  body.home #categories .swiper-slide > div {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  body.home #categories .swiper-slide img {
    height: 100%;
    width: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
}