/* RotatorSlider (KeenSlider) für die Startseite von reise-europa.com
   Hauptslider + synchronisierte Thumbnail-Leiste, Parallax-Effekt,
   ein-/ausblendende Bildunterschrift, angepasst an die Datenfelder
   der Katalog-Tabelle slider_startseite und die bestehenden Theme-Farben/-Klassen. */

.rotator-slider {
  position: relative;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  height: 450px;
}

.rotator-slider .keen-slider {
  height: 100%;
}

.rotator-slider .main-slider {
  width: 80%;
  position: relative;
}

.rotator-slider .nav-slider {
  width: 20%;
  padding-left: 5px;
}

.rotator-slider .keen-slider.loading {
  opacity: 0;
  visibility: hidden;
}

/* --- Hauptslider --- */

.rotator-slider .main-slider .keen-slider__slide {
  position: relative;
  overflow: hidden;
}

.rotator-slider .slide-bgimg {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
}

.rotator-slider .slide-bgimg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.rotator-slider .main-slider .content {
  position: absolute;
  z-index: 2;
  left: 5%;
  bottom: 8%;
  width: 50%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: rgba(20, 20, 20, 0.55);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  color: #fff;
}

.rotator-slider .main-slider .content .title {
  color: #fff;
  font-size: clamp(1rem, 0.35vw + 0.94rem, 1.1875rem);
  font-weight: bold;
  line-height: 1.25;
  margin: 0 0 0.25rem 0;
}

.rotator-slider .main-slider .content .caption,
.rotator-slider .main-slider .content .figure-caption {
  display: -webkit-box;
  color: #fff;
  font-size: clamp(0.8125rem, 0.25vw + 0.7rem, 0.875rem);
  line-height: 1.25;
  transform: translateX(50px);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.7s ease;
  overflow: hidden;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.rotator-slider .main-slider .content .caption.show,
.rotator-slider .main-slider .content .figure-caption.show {
  transform: translateX(0);
  opacity: 1;
}

.rotator-slider .main-slider .content .figure-caption p {
  color: inherit;
  margin: 0;
}

.rotator-slider .main-slider .content .rotator-cta {
  align-self: flex-end;
  margin-top: 1rem;
  transform: translateX(50px);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.7s ease 0.1s;
}

.rotator-slider .main-slider .content .rotator-cta.show {
  transform: translateX(0);
  opacity: 1;
}

/* Verlauf hinter der Textseite für Lesbarkeit unabhängig vom Bildmotiv */
.rotator-slider .main-slider .keen-slider__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 65%);
  pointer-events: none;
}

/* Logo oben rechts (bestehende Klassen aus slider.css weiterverwendet) */
.rotator-slider .slide-logo-bg.logo-offset {
  z-index: 3;
  right: clamp(1rem, 6vw, 4rem);
  left: auto;
}

/* Pfeile: bestehendes .arrow/.arrow--left/--right-Design aus style.css
   (die Basisklasse setzt bereits transform: translateY(-50%) zur vertikalen
   Zentrierung — hier per translate() kombiniert, nicht überschrieben). Werden von
   rotatorArrows() in rotator-slider.js direkt in .main-slider eingehängt. */
.rotator-slider .main-slider .arrow {
  z-index: 4;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.rotator-slider .main-slider .arrow--left { transform: translate(-10px, -50%); }
.rotator-slider .main-slider .arrow--right { transform: translate(10px, -50%); }

.rotator-slider .main-slider:hover .arrow--left,
.rotator-slider .main-slider:hover .arrow--right {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}

/* --- Thumbnail-Leiste --- */

.rotator-slider .nav-slider .keen-slider__slide {
  position: relative;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.3s ease;
  overflow: hidden;
}

/* KeenSlider markiert den aktiven Slide nicht automatisch mit einer Klasse (anders als
   Swipers .swiper-slide-active) — .is-active wird von rotator-slider.js manuell gesetzt. */
.rotator-slider .nav-slider .keen-slider__slide.is-active {
  opacity: 1;
}

.rotator-slider .nav-slider .content {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 0.4rem 0.6rem;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

.rotator-slider .nav-slider .content .title {
  color: #fff;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1;
  font-weight: 600;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Beide Slider bekommen jetzt identisches Markup (Titel + Caption + CTA + Logo), da
   $this->output serverseitig zweimal ausgegeben wird (siehe
   mod_catalog_universal_slider.html5). In der Thumbnail-Leiste soll optisch nur Bild +
   Titel sichtbar bleiben. */
.rotator-slider .nav-slider .content .caption,
.rotator-slider .nav-slider .content .figure-caption,
.rotator-slider .nav-slider .content .rotator-cta,
.rotator-slider .nav-slider .slide-logo {
  display: none;
}

@media (max-width: 768px) {
  .rotator-slider { height: 350px; }

  .rotator-slider .nav-slider { display: none; }

  .rotator-slider .main-slider { width: 100%; }

  .rotator-slider .main-slider .content { width: 85%; max-width: none; }

  .rotator-slider .main-slider .content .title {
    margin-bottom: 0.5rem;
  }
}