/*
 * Front‑end styles for the Smart Slider block.  These rules style the
 * container, slides, overlays and optional features like background and
 * gradient overlays.  Swiper's own CSS (swiper-bundle.min.css) provides
 * core slider styling; this file focuses on the block's unique look and
 * feel.
 */

.smart-slider-block {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Ensure the Swiper container takes up the full width of the parent */
.smart-slider-block .smart-slider-swiper {
  width: 100%;
  height: 100%;
}

/* Background media fill the slide */
.smart-slider-block .smart-slide-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* Overlay container */
.smart-slider-block .smart-slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  color: #fff;
  pointer-events: none;
}

/* Position helpers */
.smart-slider-block .smart-slide-overlay.pos-top-left {
  justify-content: flex-start;
  align-items: flex-start;
}
.smart-slider-block .smart-slide-overlay.pos-top-center {
  justify-content: flex-start;
  align-items: center;
}
.smart-slider-block .smart-slide-overlay.pos-top-right {
  justify-content: flex-start;
  align-items: flex-end;
}
.smart-slider-block .smart-slide-overlay.pos-center-left {
  justify-content: center;
  align-items: flex-start;
}
.smart-slider-block .smart-slide-overlay.pos-center-center {
  justify-content: center;
  align-items: center;
}
.smart-slider-block .smart-slide-overlay.pos-center-right {
  justify-content: center;
  align-items: flex-end;
}
.smart-slider-block .smart-slide-overlay.pos-bottom-left {
  justify-content: flex-end;
  align-items: flex-start;
}
.smart-slider-block .smart-slide-overlay.pos-bottom-center {
  justify-content: flex-end;
  align-items: center;
}
.smart-slider-block .smart-slide-overlay.pos-bottom-right {
  justify-content: flex-end;
  align-items: flex-end;
}

/* Title styling */
.smart-slider-block .smart-slide-title {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}

/* Button styling */
.smart-slider-block .smart-slide-button {
  pointer-events: auto;
}

.smart-slider-block .smart-slide-button a,
.smart-slider-block .smart-slide-button span {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  background: #0073aa;
  color: #fff;
  text-decoration: none;
  border-radius: 3px;
  transition: background 0.2s ease-in-out;
}

.smart-slider-block .smart-slide-button a:hover,
.smart-slider-block .smart-slide-button span:hover {
  background: #005f8d;
}

/* Optional overlays: background overlay creates a semi‑transparent dark layer behind the overlay content */
.smart-slider-block.has-background-overlay .smart-slide-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

/* Optional gradient overlay */
.smart-slider-block.has-gradient-overlay .smart-slide-overlay::before {
  background: linear-gradient( to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) );
}

/* Text animations */
.smart-slider-block .swiper-slide.animate-fade .smart-slide-overlay {
  opacity: 0;
  animation: smartFadeIn 0.7s forwards;
}

.smart-slider-block .swiper-slide.animate-slide .smart-slide-overlay {
  opacity: 0;
  transform: translateY(20px);
  animation: smartSlideIn 0.7s forwards;
}

.smart-slider-block .swiper-slide.animate-zoom .smart-slide-overlay {
  opacity: 0;
  transform: scale(0.95);
  animation: smartZoomIn 0.7s forwards;
}

@keyframes smartFadeIn {
  to {
    opacity: 1;
  }
}

@keyframes smartSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes smartZoomIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}