/* SliderFlow – frontend */

.sliderflow {
  --sf-caption-bg: rgba(0, 0, 0, .55);
  position: relative;
  width: 100%;
  margin-inline: auto;
}

.sliderflow__main {
  border-radius: var(--sf-radius);
  overflow: hidden;
  background: #111;
}

/* Hide the flash of unstyled stacked slides before Swiper boots */
.sliderflow:not(.is-ready) .swiper-slide:not(:first-child) { visibility: hidden; }

/* ---------- height modes ---------- */

.sliderflow--h-ratio .sliderflow__main { aspect-ratio: var(--sf-ratio); }
.sliderflow--h-fixed .sliderflow__main { height: var(--sf-height); }
.sliderflow--h-viewport .sliderflow__main { height: calc(var(--sf-vh) * 1vh); height: calc(var(--sf-vh) * 1svh); }

@media (max-width: 767px) {
  .sliderflow--h-fixed .sliderflow__main { height: var(--sf-height-mobile); }
}

.sliderflow__slide {
  position: relative;
  overflow: hidden;
  background: #111;
}

.sliderflow:not(.sliderflow--h-auto) .sliderflow__slide { height: 100%; }

.sliderflow__link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.sliderflow__media,
.sliderflow__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.sliderflow__media { position: relative; }

.sliderflow__img,
.sliderflow__video,
.sliderflow__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--sf-fit);
}

.sliderflow--h-auto .sliderflow__img { height: auto; }
.sliderflow--h-auto .sliderflow__slide--video .sliderflow__media { aspect-ratio: 16 / 9; }

.sliderflow__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* Background-style video: swipes and slide links keep working over it */
  pointer-events: none;
}

.sliderflow__poster {
  position: absolute;
  inset: 0;
  transition: opacity .6s;
}

.sliderflow__slide.is-video-loaded .sliderflow__poster { opacity: 0; pointer-events: none; }

/* ---------- Ken Burns ---------- */

.sliderflow--kenburns .swiper-slide-active .sliderflow__img {
  animation: sliderflow-kenburns 12s ease-out both;
}

@keyframes sliderflow-kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.14) translate(-1.5%, -1%); }
}

/* ---------- captions ---------- */

.sliderflow__caption {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  padding: clamp(1rem, 4vw, 3rem) clamp(1rem, 6vw, 4.5rem);
  color: var(--sf-caption-color);
  pointer-events: none;
}

.sliderflow__caption-inner {
  max-width: var(--sf-caption-max);
  pointer-events: auto;
}

.sliderflow__title {
  margin: 0 0 .4em;
  color: inherit;
  font-size: clamp(1.25rem, 3vw, 2.4rem);
  line-height: 1.15;
}

.sliderflow__title a { color: inherit; text-decoration: none; }
.sliderflow__title a:hover { text-decoration: underline; }

.sliderflow__desc {
  font-size: clamp(.9rem, 1.5vw, 1.1rem);
  line-height: 1.5;
}

.sliderflow__desc > :last-child { margin-bottom: 0; }
.sliderflow__button { margin-top: 1rem; }

/* positions */
.sliderflow--pos-top-left .sliderflow__caption { align-items: flex-start; justify-content: flex-start; }
.sliderflow--pos-top-center .sliderflow__caption { align-items: flex-start; justify-content: center; text-align: center; }
.sliderflow--pos-top-right .sliderflow__caption { align-items: flex-start; justify-content: flex-end; text-align: end; }
.sliderflow--pos-center-left .sliderflow__caption { align-items: center; justify-content: flex-start; }
.sliderflow--pos-center .sliderflow__caption { align-items: center; justify-content: center; text-align: center; }
.sliderflow--pos-center-right .sliderflow__caption { align-items: center; justify-content: flex-end; text-align: end; }
.sliderflow--pos-bottom-left .sliderflow__caption { align-items: flex-end; justify-content: flex-start; }
.sliderflow--pos-bottom-center .sliderflow__caption { align-items: flex-end; justify-content: center; text-align: center; }
.sliderflow--pos-bottom-right .sliderflow__caption { align-items: flex-end; justify-content: flex-end; text-align: end; }

.sliderflow--pos-bottom-left .sliderflow__caption,
.sliderflow--pos-bottom-center .sliderflow__caption,
.sliderflow--pos-bottom-right .sliderflow__caption { padding-bottom: clamp(2rem, 5vw, 3.5rem); }

/* caption below the image */
.sliderflow--pos-below .sliderflow__main { background: transparent; }
.sliderflow--pos-below .sliderflow__slide { display: flex; flex-direction: column; background: transparent; }
.sliderflow--pos-below:not(.sliderflow--h-auto) .sliderflow__media { flex: 1 1 auto; min-height: 0; }
.sliderflow--pos-below .sliderflow__link { display: flex; flex-direction: column; }
.sliderflow--pos-below .sliderflow__caption {
  position: static;
  padding: 1rem 0 2.5rem;
  color: inherit;
  background: none !important;
}

/* styles */
.sliderflow--caption-gradient:not(.sliderflow--pos-below) .sliderflow__caption {
  background: linear-gradient(to top, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .15) 45%, transparent 70%);
}
.sliderflow--caption-gradient.sliderflow--pos-top-left .sliderflow__caption,
.sliderflow--caption-gradient.sliderflow--pos-top-center .sliderflow__caption,
.sliderflow--caption-gradient.sliderflow--pos-top-right .sliderflow__caption {
  background: linear-gradient(to bottom, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .15) 45%, transparent 70%);
}
.sliderflow--caption-gradient .sliderflow__caption { text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }

.sliderflow--caption-box:not(.sliderflow--pos-below) .sliderflow__caption-inner {
  padding: 1.25rem 1.5rem;
  border-radius: .5rem;
  background: var(--sf-caption-bg);
  backdrop-filter: blur(6px);
}

.sliderflow--caption-overlay:not(.sliderflow--pos-below) .sliderflow__caption { background: rgba(0, 0, 0, .4); }

/* animations */
.sliderflow__caption-inner {
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--sf-speed) * .4);
}

.sliderflow--anim-fade .swiper-slide:not(.swiper-slide-active) .sliderflow__caption-inner { opacity: 0; transition-delay: 0s; }
.sliderflow--anim-fade-up .swiper-slide:not(.swiper-slide-active) .sliderflow__caption-inner { opacity: 0; transform: translateY(30px); transition-delay: 0s; }
.sliderflow--anim-fade-left .swiper-slide:not(.swiper-slide-active) .sliderflow__caption-inner { opacity: 0; transform: translateX(-40px); transition-delay: 0s; }
.sliderflow--anim-zoom .swiper-slide:not(.swiper-slide-active) .sliderflow__caption-inner { opacity: 0; transform: scale(.85); transition-delay: 0s; }

/* multi-slide views keep all captions visible */
.sliderflow__main.swiper[data-multi] .sliderflow__caption-inner { opacity: 1 !important; transform: none !important; }

@media (max-width: 767px) {
  .sliderflow--hide-caption-mobile .sliderflow__caption { display: none; }
}

/* ---------- navigation ---------- */

.sliderflow__arrow {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .35);
  color: var(--swiper-theme-color);
  --swiper-navigation-size: 44px;
  transition: opacity .3s, background-color .3s;
}

.sliderflow__arrow:hover { background: rgba(0, 0, 0, .6); }
.sliderflow__arrow svg { width: 40%; height: 40%; }
.sliderflow__arrow::after { font-size: 18px; font-weight: 700; }
.sliderflow--pos-below .sliderflow__arrow { top: 40%; }

.sliderflow--arrows-hover .sliderflow__arrow { opacity: 0; }
.sliderflow--arrows-hover:hover .sliderflow__arrow,
.sliderflow--arrows-hover .sliderflow__arrow:focus-visible { opacity: 1; }

@media (hover: none) {
  .sliderflow--arrows-hover .sliderflow__arrow { opacity: 1; }
}

.sliderflow__pagination.swiper-pagination-bullets .swiper-pagination-bullet {
  --swiper-pagination-bullet-inactive-color: #fff;
  --swiper-pagination-bullet-inactive-opacity: .55;
  --swiper-pagination-bullet-size: 10px;
  box-shadow: 0 0 3px rgba(0, 0, 0, .4);
}

.sliderflow__pagination .sliderflow__number {
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #111;
  opacity: .8;
  background: #fff;
}

.sliderflow__pagination .sliderflow__number.swiper-pagination-bullet-active {
  background: var(--swiper-theme-color);
  color: #111;
  opacity: 1;
}

.sliderflow__pagination.swiper-pagination-fraction {
  left: auto;
  right: 1rem;
  width: auto;
  padding: .15rem .6rem;
  border-radius: 1rem;
  background: rgba(0, 0, 0, .45);
  color: #fff;
  font-size: .9rem;
}

.sliderflow__timer {
  position: absolute;
  inset: auto 0 0;
  z-index: 11;
  height: 3px;
  background: rgba(255, 255, 255, .2);
}

.sliderflow__timer span {
  display: block;
  height: 100%;
  background: var(--swiper-theme-color);
  transform: scaleX(0);
  transform-origin: left;
}

/* ---------- thumbnails ---------- */

.sliderflow__thumbs {
  margin-top: .5rem;
}

.sliderflow__thumb {
  width: calc(var(--sf-thumb-height) * 1.5);
  height: var(--sf-thumb-height);
  border-radius: calc(var(--sf-radius) / 2);
  overflow: hidden;
  opacity: .5;
  cursor: pointer;
  background: #222;
  transition: opacity .3s;
}

.sliderflow__thumb:hover,
.sliderflow__thumb.swiper-slide-thumb-active { opacity: 1; }
.sliderflow__thumb.swiper-slide-thumb-active { outline: 3px solid var(--swiper-theme-color); outline-offset: -3px; }
.sliderflow__thumb img { width: 100%; height: 100%; object-fit: cover; }

.sliderflow__thumb-video {
  display: grid;
  place-items: center;
  height: 100%;
  color: #fff;
  font-size: 1.5rem;
}

/* ---------- per-slide / random transitions ---------- */

/* Wins over the per-effect tweaks below (3D overflow, narrower cards) */
.sliderflow.sliderflow--mixed .sliderflow__main { overflow: hidden; width: 100%; background: #111; }

.sliderflow--mixed .swiper-wrapper {
  transform: none !important;
  perspective: 1400px;
}

.sliderflow--mixed .sliderflow__slide {
  position: absolute;
  inset: 0;
  width: 100% !important;
  visibility: hidden;
  backface-visibility: hidden;
}

.sliderflow--mixed .sliderflow__slide.is-sf-current { visibility: visible; z-index: 3; }
.sliderflow--mixed .sliderflow__slide.is-sf-leaving { visibility: visible; z-index: 4; }
.sliderflow--mixed .sliderflow__slide.is-sf-leaving.is-sf-below { z-index: 2; }

/* Before the script runs, show the first slide */
.sliderflow--mixed:not(.is-ready) .sliderflow__slide:first-child { visibility: visible; }

/* Automatic height: the visible slide stays in the flow and sizes the slider */
.sliderflow--mixed.sliderflow--h-auto .sliderflow__slide.is-sf-current,
.sliderflow--mixed.sliderflow--h-auto:not(.is-ready) .sliderflow__slide:first-child { position: relative; }

/* ---------- effects tweaks ---------- */

.sliderflow--effect-cube .sliderflow__main,
.sliderflow--effect-flip .sliderflow__main,
.sliderflow--effect-cards .sliderflow__main,
.sliderflow--effect-coverflow .sliderflow__main { overflow: visible; background: transparent; }

.sliderflow--effect-cube,
.sliderflow--effect-flip,
.sliderflow--effect-cards,
.sliderflow--effect-coverflow { overflow: hidden; padding-block: 1rem; }

.sliderflow--effect-cards .sliderflow__slide,
.sliderflow--effect-coverflow .sliderflow__slide,
.sliderflow--effect-flip .sliderflow__slide { border-radius: var(--sf-radius); }

.sliderflow--effect-cards .sliderflow__main { width: 88%; }

@media (prefers-reduced-motion: reduce) {
  .sliderflow--kenburns .swiper-slide-active .sliderflow__img { animation: none; }
  .sliderflow__caption-inner { transition: none; }
}