/* ==========================================================
   AW Slider – Frontend Styles
   Files expected:
   - assets/aw-slider.css
   - assets/img/arrows_sprite2.svg
   - assets/img/mouse-x5.png
   ========================================================== */

/* ==========================================================
   AW Slider Layout (RoyalSlider Feeling)
   (übernommen aus Theme, jetzt im Plugin)
   ========================================================== */

/* Der Sliderbereich soll wie früher "frei" wirken */
.aw-gallery {
  width: 100%;
  margin-top: -20px;
}

/* Swiper selbst: Höhe wird via JS per CSS-Variable gesetzt */
.aw-gallery .aw-swiper {
  width: 100%;
  /* fallback height, JS setzt --aw-slider-h */
  height: var(--aw-slider-h, calc(100vh - 140px));
}

/* Wrapper muss volle Höhe haben */
.aw-gallery .aw-swiper .swiper-wrapper {
  height: 100%;
}

/* Jede Slide: Inhalt zentrieren */
.aw-gallery .aw-swiper .swiper-slide {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bild soll NICHT croppen, sondern immer komplett sichtbar bleiben */
.aw-gallery .aw-swiper .swiper-slide img {
  /* Theme-Version nutzt !important – im Plugin nicht nötig,
     aber wir übernehmen die Wirkung (contain + auto). */
  width: auto;
  height: auto;

  max-width: calc(100vw - 60px);
  max-height: var(--aw-slider-h, calc(100vh - 140px));

  object-fit: contain;
  display: block;

  /* hard-center fallback */
  margin: 0 auto;
}

/* Mobile etwas weniger Rand */
@media (max-width: 700px) {
  .aw-gallery .aw-swiper .swiper-slide img {
    max-width: calc(100vw - 30px);
  }
}

/* ==========================================================
   Arrows (Sprite)
   ========================================================== */
.aw-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  padding: 0;
  z-index: 50;
  cursor: pointer;
  appearance: none;
}

.aw-arrow-left { left: 30px; }
.aw-arrow-right { right: 30px; }

.aw-arrow-icn {
  display: block;
  width: 44px;
  height: 44px;
  background: url('./img/arrows_sprite2.svg') left top no-repeat;
}

/* Sprite positions: adjust if your sprite differs */
.aw-arrow-left .aw-arrow-icn { background-position: 0 0; }
.aw-arrow-right .aw-arrow-icn { background-position: -40px 0; }

/* Hide arrows on small screens (like your old setup) */
@media (max-width: 700px) {
  .aw-arrow { display: none; }
}

/* Disabled state (Swiper adds .swiper-button-disabled if you use its classes;
   we use own buttons, so we handle via [disabled] if you set it later) */
.aw-arrow:disabled {
  opacity: 0.2;
  cursor: default;
}

/* ==========================================================
   Info Button (bottom-left)
   ========================================================== */
.aw-info {
  position: fixed;
  left: 30px;
  bottom: 30px;
  z-index: 60;

  background: transparent;
  border: 0;
  padding: 0;

  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 1px;

  border-bottom: 1px solid transparent;
}

.aw-info:hover {
  border-bottom-color: #000;
}

/* ==========================================================
   Overlay (Fade)
   Toggle class: .aw-overlay-open
   ========================================================== */
.aw-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(255, 255, 255, 0.95);

  /* fade system */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: opacity 0.6s ease, visibility 0s linear 0.6s;

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* X-cursor */
  cursor: url('./img/mouse-x5.png'), auto;
}

.aw-overlay.aw-overlay-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition: opacity 0.6s ease, visibility 0s;
}

/* Inner content */
.aw-overlay-inner {
  padding-top: 129px;
  padding-left: 30px;
  padding-right: 30px;
  width: 420px;
  margin: 0 auto;
}

.aw-overlay-inner p {
  margin: 0 0 20px 0;
  line-height: 2;
}

/* Optional: slightly nicer entrance of text */
.aw-overlay-inner {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
}

.aw-overlay.aw-overlay-open .aw-overlay-inner {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile overlay spacing */
@media (max-width: 700px) {
  .aw-overlay-inner {
    padding-top: 80px;
    padding-left: 30px;
    padding-right: 30px;
  }
}

/* ==========================================================
   Scroll lock (matches your theme helper)
   ========================================================== */
body.prevent-scroll {
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/* ==========================================================
   Footer UI: Title centered + Counter right (final)
   ========================================================== */

/* Titel mittig unten – wirklich zentriert */
.aw-gallery-title {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 60;

  background: transparent;
  padding: 0;
  margin: 0;

  /* exakt gleiche Typo wie .aw-info */
  font-size: 13px;
  line-height: 1;
  letter-spacing: 1px;

  white-space: nowrap;
}

/* Counter rechts unten – gleiche Höhe & Typo wie Info */
.aw-gallery-counter {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 60;

  background: transparent;
  padding: 0;
  margin: 0;

  /* gleiche Typo */
  font-size: 13px;
  line-height: 1;
  letter-spacing: 1px;

  cursor: default;
}

/* Mobile Anpassung */
@media (max-width: 700px) {
  .aw-info { left: 20px; bottom: 20px; }
  .aw-gallery-counter { right: 20px; bottom: 20px; }
  .aw-gallery-title { bottom: 20px; }
}

/* ==========================================================
   Swiper Fade: enable true crossfade (fix hard cut)
   ========================================================== */

/* Swiper core expectations */
.aw-gallery .swiper {
  overflow: hidden;
}

/* Fade: allow stacking + opacity transitions (Swiper manages timing) */
.aw-gallery .aw-swiper.swiper-fade .swiper-slide {
  opacity: 0;
  transition-property: opacity; /* wichtig: nicht "all" */
}

/* Active visible */
.aw-gallery .aw-swiper.swiper-fade .swiper-slide-active {
  opacity: 1;
}

/* During transition, Swiper assigns prev/next -> keep visible for crossfade */
.aw-gallery .aw-swiper.swiper-fade .swiper-slide-prev,
.aw-gallery .aw-swiper.swiper-fade .swiper-slide-next {
  opacity: 1;
}

/* Clickability: only active should be clickable */
.aw-gallery .aw-swiper.swiper-fade .swiper-slide {
  pointer-events: none;
}

.aw-gallery .aw-swiper.swiper-fade .swiper-slide-active {
  pointer-events: auto;
}