/*
 * Styles for the SP Gallery Advanced widget
 *
 * Provides grid and slider layouts with customizable gap, border radius,
 * shadows and hover effects. Images inside the gallery use the
 * `spf-gal-adv__figure` wrapper to clip border radii while still
 * allowing shadows to extend beyond the image. A secondary image can be
 * displayed on hover if provided.
 */

.spf-gal-adv {
  position: relative;
}

/* Grid layout */
.spf-gal-adv.spf-gal-adv--grid .spf-gal-adv__grid {
  display: grid;
  gap: var(--spf-gap, 1em);
  grid-template-columns: repeat(var(--spf-cols, 3), 1fr);
}

@media (max-width: 1024px) {
  .spf-gal-adv.spf-gal-adv--grid .spf-gal-adv__grid {
    grid-template-columns: repeat(var(--spf-cols-t, 2), 1fr);
  }
}

@media (max-width: 767px) {
  .spf-gal-adv.spf-gal-adv--grid .spf-gal-adv__grid {
    grid-template-columns: repeat(var(--spf-cols-m, 1), 1fr);
  }
}

.spf-gal-adv__item {
  width: 100%;
}
.swiper-slide {
  height: auto;
}

.spf-gal-adv__media {
  position: relative;
  overflow: visible;
  width: 100%;
  height: 100%;
}

.spf-gal-adv__figure {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}

.spf-gal-adv__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.spf-gal-adv__img--alt {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.spf-gal-adv__media:hover .spf-gal-adv__img--alt {
  opacity: 1;
}
.spf-gal-adv__media:hover .spf-gal-adv__img--main {
  opacity: 0;
}

/* Navigation buttons */
.spf-gal-adv__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--spf-slider-arrow-size, 2em);
  height: var(--spf-slider-arrow-size, 2em);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--spf-slider-arrow-color, #333);
  z-index: 2;
}
.spf-gal-adv__nav--prev { left: 0; }
.spf-gal-adv__nav--next { right: 0; }

/* Pagination dots */
.spf-gal-adv__pagination {
  margin-top: 0.5em;
  text-align: center;
}
.spf-gal-adv__pagination .swiper-pagination-bullet {
  width: var(--spf-slider-dot-size, 0.6em);
  height: var(--spf-slider-dot-size, 0.6em);
  background-color: var(--spf-slider-dot-color, #ccc);
  margin: 0 calc(var(--spf-slider-dot-spacing, 0.5em)/2);
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}
.spf-gal-adv__pagination .swiper-pagination-bullet-active {
  background-color: var(--spf-slider-dot-active-color, #333);
}