@charset "UTF-8";
/* Wariant hero z pełnym sliderem — cały section (tekst + obraz) zmienia się per slajd */
.hero--slides {
  /* section already has: position:relative, min-height:753px, overflow:hidden, display:flex */
  display: block; /* override flex from base .hero — slides stack absolutely */
  padding: 0;
}

.hero--slides > .hero__slider-track {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 753px;
}

/* Each slide is a full clone of hero content, absolutely stacked with fade transition.
   Reuses .hero__slide from base slider (position:absolute; inset:0; opacity fade).
   Only need to guarantee slide fills track and internal layout works. */
.hero--slides .hero__slide {
  display: flex;
  flex-direction: column;
  /* backdrop, main, container etc inside slide keep their existing styles */
}
.hero--slides .hero__slide .hero__main {
  flex: 1;
}

/* Arrows position relative to the section itself (which is position:relative). */
.hero--slides > .hero__slider-arrow--prev {
  left: 24px;
}

.hero--slides > .hero__slider-arrow--next {
  right: 24px;
}

.hero--slides > .hero__slider-dots {
  bottom: 24px;
}

@media (max-width: 1024px) {
  .hero--slides,
  .hero--slides > .hero__slider-track {
    min-height: auto;
  }
}