/* NOWA STRUKTURA: Top Carousel Section */
.top-carousel-section {
    position: relative;
    width: 100%;
    height: 50vh; /* Zgodnie z wytycznymi 50% viewportu */
    background: none;
    z-index: 10;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start; /* Zmienione na flex-start, żeby logo i karuzela mogły być odpowiednio ułożone */
    gap: var(--ds-space-2); /* Odstęp między kontenerem logo a karuzelą */
    padding: 12px var(--ds-space-2); /* padding po bokach */
    margin-bottom: 0;
}

.top-logo-container {
    flex-shrink: 0;
    display: block; /* Zmiana na block, żeby sticky mogło działać względem wysokości rodzica */
    height: 100%; /* Kontener zajmuje całą wysokość sekcji karuzeli */
    padding: var(--ds-space-2);
    /* Szerokość ustalana przez zawartość (obrazek SVG) */
}

.carousel-logo-link {
    display: inline-block;
    position: sticky; /* Zatrzymuje logo podczas scrolla w obrębie kontenera */
    top: calc(var(--ds-space-4)); /* Wysokość navbara + lekki margines */
    transition: opacity var(--ds-duration-fast) var(--ds-ease);
}

.carousel-logo-link:hover {
    opacity: 0.7;
}

.carousel-logo-img {
    width: var(--ds-space-8); /* 64px szerokości */
    height: auto; /* Wysokość dopasowuje się automatycznie */
    display: block;
}

.top-carousel-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    flex-grow: 1; /* Wypełnia całą dostępną przestrzeń po prawej stronie */
    border-radius: var(--ds-radius-md);
    overflow: hidden;
    z-index: 1;
}

@media (max-width: 1024px) {
    .top-carousel-section {
        padding: 12px 12px; /* Zmniejszony padding na tabletach (zmieniono z 24px na 12px) */
    }
}

@media (max-width: 768px) {
    .top-carousel-section {
        padding: 12px 12px; /* Zwykły padding na telefonach, bez zbędnego górnego marginesu */
        height: auto; /* Zmiana na auto, żeby kontener mógł pomieścić logo i karuzelę ułożone pionowo */
        min-height: 50vh; /* Minimalna wysokość zachowana */
        flex-direction: column; /* Na mobile logo nad karuzelą */
        align-items: stretch;
    }
    
    .top-logo-container {
        height: auto; /* Na mobile kontener logo nie musi zajmować 100% wysokości całej sekcji */
        display: flex;
        justify-content: center; /* Wyśrodkowanie logo w poziomie na telefonach */
        width: 100%;
    }
    
    .carousel-logo-img {
        width: 48px; /* Mniejsze logo na mobile */
        height: auto;
    }
    
    .top-carousel-wrapper {
        border-radius: var(--ds-radius-lg) !important;
        height: 300px;
        flex-grow: 0;
        overflow: hidden !important;
        -webkit-mask-image: -webkit-radial-gradient(white, black);
        mask-image: radial-gradient(white, black);
        background: transparent;
        transform: translateZ(0);
    }
    
    /* Wymuszamy zaokrąglenie prosto na samym obrazku na małych ekranach */
    .hero-carousel .carousel-image {
        border-radius: var(--ds-radius-lg) !important;
    }
}

.hero-carousel {
    width: 100%;
    height: 100%; /* Take remaining height */
    position: relative;
    overflow: hidden !important;
    z-index: 1;
    border-radius: var(--ds-radius-lg) !important; /* Gwarancja zaokrąglenia na samej karuzeli */
    /* Dodatkowe zabezpieczenie dla Safari/WebKit żeby nie ignorowało border-radius przy overflow */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
    transform: translateZ(0);
}

.hero-carousel::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
  
    pointer-events: none;
    z-index: 2;
}

.carousel-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden; /* Zapewnia, że slajdy nie wychodzą poza kontener */
    border-radius: var(--ds-radius-lg); /* Kopia dla bezpieczeństwa */
}

.carousel-slide {
    position: relative; /* Zmienione z absolute dla trybu track */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    flex: 0 0 100%; /* Dla trybu flex (track) */
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
}

.carousel-slide.active {
    /* opacity: 1; - usunięte dla trybu track, opacity obsługiwane w JS jeśli to fade */
}

.carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--ds-radius-lg);
}

/* Remove rounded corners only for the hero carousel images - USUNIĘTO ABY NIE PSUŁO MOBILE */
/* .hero-carousel .carousel-image { border-radius: 0; } */

/* Enhanced Hero carousel: track, controls, dots */
.hero-carousel {
  --carousel-interval: 3500ms;
  --carousel-duration: 700ms;
  --carousel-ease: cubic-bezier(0.25, 1.2, 0.5, 1); /* Bounce effect */
}

.hero-carousel .carousel-container { position: relative; height: 100%; width: 100%; }
.hero-carousel .carousel-track {
  display: flex;
  height: 100%;
  width: 100%;
  will-change: transform;
  transform: translateX(0); /* Początkowa wartość */
  transition: transform var(--carousel-duration) var(--carousel-ease);
}

.hero-carousel .carousel-slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  opacity: 1; /* Zawsze 1 dla trybu track */
}

/* Przyciski nawigacji */
.hero-carousel .carousel-prev,
.hero-carousel .carousel-next {
  position: absolute;
  bottom: var(--ds-space-2);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.0);
  color: var(--ds-light);
  border: none;
  border-radius: var(--ds-radius-button);
  cursor: pointer;
  transition: background var(--ds-duration-fast) var(--ds-ease);
  z-index: 10;
  font-size: 12px;
  mix-blend-mode: difference;
  font-family: system-ui, -apple-system, sans-serif;
}

.hero-carousel .carousel-prev {
  right: calc(var(--ds-space-2) + 32px + 8px); /* pozycjonowanie obok przycisku next (32px szerokości + 8px odstępu) */
}

.hero-carousel .carousel-next {
  right: var(--ds-space-2);
}

.hero-carousel .carousel-prev:hover,
.hero-carousel .carousel-next:hover {
  background: rgba(255, 255, 255, 0.2);
  
}

/* Wskaźnik postępu - powiększony */
.hero-carousel .carousel-dots {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 18px; /* 2x większy */
  height: 32px; /* 2x większy */
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transform: none;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
}

.hero-carousel .carousel-dots button {
  width: 100%;
  height: 0;
  border: none;
  background: var(--ds-primary);
  opacity: 0;
  transition: height 160ms ease, opacity 160ms ease;
  padding: 0;
  margin: 0;
}

.hero-carousel .carousel-dots button.active {
  height: 100%;
  opacity: 1;
}

/* Gradient mask - only on left side now, wider and with primary color */
.hero-carousel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 30%; /* 3x wider than before */
  height: 100%;
 
  opacity: 0.5; /* 50% opacity */
  z-index: 2;
  pointer-events: none;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .hero-carousel .carousel-dots { gap: 6px; }
}

/* Old hero elements removed */