/* ===============================================
   KODER HORIZONTAL SCROLL - STYLE CSS
   =============================================== */

.koder-scroll-viewport {
  position: relative;
  width: 100%;
}

.koder-sticky-container {
  position: sticky;
  top: 50px;
  left: 0;
  height: auto;
  width: 100%;
  overflow: hidden;
  
  /* Optymalizacja wydajności */
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* 3. TRACK - "Szyna" z kafelkami (KADENCE ROW) */
.koder-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  
  /* Wymiary */
  height: 100%;
  min-height: 85vh; 
  
  align-items: center; 
  
  padding-right: 18vw !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  
  transition: transform 0.05s linear;
}

/* Nadpisanie domyślnych stylów Kadence dla Row */
.koder-track.kb-row-layout-wrap {
  flex-direction: row !important;
}

.koder-track > .kb-row-layout-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: auto !important;
}

/* 4. TILE - Pojedynczy kafelek (KADENCE SECTION/COLUMN) */
.koder-tile {
  /* FLEX - Nie pozwól się ściskać */
  flex: 0 0 auto;
  flex-shrink: 0 !important;
  width: 60% !important;
  
  /* Optymalizacja */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  
}

/* 5. NADPISANIE KADENCE - Ważne dla poprawnego działania */

/* Kadence Row - wymuszenie flexboxa */
.koder-track.kb-row-layout-wrap,
.koder-track .kb-row-layout-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}

/* Kadence Section/Column wewnątrz track */
.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;
}

/* Wyłącz max-width dla dzieci */
.koder-track > * {
  max-width: none !important;
}

/* 6. RESPONSYWNOŚĆ */
@media (max-width: 1024px) {
  .koder-track {
    padding-left: 3vw;
    padding-right: 3vw;
  }
  
  .koder-tile {
    width: 70vw;
    min-width: 250px;
    margin-right: 30px;
  }
}

@media (max-width: 768px) {
  .koder-track {
    padding-left: 20px;
    padding-right: 20px;
  }
  
  .koder-tile {
    width: 85vw;
    min-width: 200px;
    margin-right: 20px;
  }
}

@media (max-width: 480px) {
  .koder-tile {
    width: 90vw;
    margin-right: 15px;
  }
}

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