/* Frontend - style dla sticky columns */
.sticky-columns-wrapper {
  width: 100%;
  margin: 40px 0;
}

/* Nadpisanie domyślnych styli core/columns */
.sticky-columns-wrapper .wp-block-columns.sticky-columns-inner {
  gap: 40px;
  margin-bottom: 0;
}

/* Sticky left column */
.sticky-columns-wrapper[data-sticky-column="left"] .wp-block-column.sticky-column-left {
  position: sticky;
  top: 100px;
  align-self: start;
}

/* Sticky right column */
.sticky-columns-wrapper[data-sticky-column="right"] .wp-block-column.sticky-column-right {
  position: sticky;
  top: 100px;
  align-self: start;
}

/* Kolumny - pełna szerokość */
.sticky-columns-wrapper .wp-block-column.sticky-column-left,
.sticky-columns-wrapper .wp-block-column.sticky-column-right {
  flex-basis: 0;
  flex-grow: 1;
}

/* Animacje - domyślnie elementy są WIDOCZNE */
.sticky-columns-wrapper[data-animation-enabled="true"] .wp-block-column.sticky-column-left > *,
.sticky-columns-wrapper[data-animation-enabled="true"] .wp-block-column.sticky-column-right > * {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* JavaScript doda klasę 'will-animate' do elementów które mają się animować */
.sticky-columns-wrapper[data-animation-enabled="true"] .wp-block-column.sticky-column-left > *.will-animate,
.sticky-columns-wrapper[data-animation-enabled="true"] .wp-block-column.sticky-column-right > *.will-animate {
  opacity: 0;
  transform: translateY(30px);
}

/* Elementy z animacją po wejściu w viewport */
.sticky-columns-wrapper[data-animation-enabled="true"] .wp-block-column.sticky-column-left > *.will-animate.animate-in,
.sticky-columns-wrapper[data-animation-enabled="true"] .wp-block-column.sticky-column-right > *.will-animate.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 782px) {
  /* WordPress Columns przechodzą na mobile przy 782px */
  
  /* Wyłącz sticky na mobile */
  .sticky-columns-wrapper[data-sticky-column="left"] .wp-block-column.sticky-column-left,
  .sticky-columns-wrapper[data-sticky-column="right"] .wp-block-column.sticky-column-right {
    position: relative !important;
    top: auto !important;
  }
}

@media (max-width: 480px) {
  .sticky-columns-wrapper {
    margin: 20px 0;
  }
  
  .sticky-columns-wrapper .wp-block-columns.sticky-columns-inner {
    gap: 20px;
  }
}