/* ===================================================
   KODER HORIZONTAL SCROLL - ZOPTYMALIZOWANY CSS
   Wsparcie: Dual-Direction, Spectra, Portfolio mode
   =================================================== */

/* 1. VIEWPORT & STICKY */
.koder-scroll-viewport {
  position: relative;
  width: 100%;
}

.koder-sticky-container {
  position: sticky;
  top: 50px; /* Możesz nadpisać przez atrybut 'top' w shortcode */
  left: 0;
  height: auto;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  
  /* Optymalizacja wydajności */
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* 2. TRACK - "Szyna" z kafelkami */
.koder-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch; /* Rozciągnij kafelki do pełnej wysokości szyny */
  
  /* Ustawienia wysokości dla wielu wierszy */
  height: auto;
  min-height: 40vh; 
  margin-bottom: 0;
  
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  
  transition: transform 0.05s linear;
}

/* 3. REVERSE SCROLL - Kierunek od prawej do lewej */
.koder-track.koder-reverse {
  padding-right: 0 !important;
  padding-left: 18vw !important; /* Odwrócony padding dla startu animacji */
}

/* 4. TILE - Pojedynczy kafelek */
.koder-tile {
  /* Flexbox: Nie pozwól na zgniatanie elementów */
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  
  /* Szerokość sterowana przez WordPress (Spectra) */
  /* Nie wpisujemy tutaj 'width', abyś mógł edytować to w panelu bocznym WP */
  
  /* Portfolio: Reset odstępów i zaokrągleń */
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  
  /* Optymalizacja */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* 5. ZDJĘCIA W PORTFOLIO - Pełne dopasowanie bez przerw */
.koder-track img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important; /* Zdjęcie wypełnia kafelek bez zniekształceń */
}

/* 6. NADPISANIE SPECTRUM (UAGB) I KADENCE */

/* Wymuszenie flexboxa na kontenerach */
.koder-track.wp-block-uagb-container,
.koder-track.kb-row-layout-wrap,
.koder-track .kb-row-layout-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

/* Reset szerokości maksymalnych dla bloków wewnętrznych */
.koder-track > .wp-block-uagb-container,
.koder-track > .wp-block-kadence-section,
.koder-track > .wp-block-kadence-column,
.koder-track > div[class*="wp-block"] {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

/* 7. RESPONSYWNOŚĆ */
@media (max-width: 1024px) {
  .koder-track {
    padding-left: 3vw;
    padding-right: 3vw;
  }
  
  /* Usunięto sztywne szerokości .koder-tile - ustaw je w Spectrze dla Tabletu */
}

@media (max-width: 768px) {
  .koder-track {
    padding-left: 0;
    padding-right: 0;
  }
  
  /* Usunięto sztywne szerokości .koder-tile - ustaw je w Spectrze dla Mobile */
}

/* 8. PERFORMANCE BOOST */
.koder-scroll-viewport,
.koder-sticky-container,
.koder-track,
.koder-tile {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}