/* Drag-to-Swap Hero Columns
-------------------------------------------------- */
.hero .columns.is-swapped .image-column-base {
  order: -1; /* This moves it before the other column */
}

/* Smooth transitions for column reordering and transforms */
.hero .column {
  transition: transform 0.4s ease, opacity 0.3s ease;
  will-change: transform;
}

/* Smooth transitions for the columns container when order changes */
.hero .columns {
  transition: opacity 0.2s ease;
}

/* Additional smoothing for column positioning changes */
.hero .columns .column {
  transition: all 0.4s ease;
}

/* Prevent flash by setting initial state before JavaScript runs */
.hero {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Hide hero only during positioning to prevent flash */
.hero.nav-positioning {
  opacity: 0;
}

/* Apply stored column order immediately via CSS */
.hero .columns.nav-position-right .image-column-base {
  order: -1;
}

.hero .columns.nav-position-left .image-column-base {
  order: 1;
}

/* Also support setting via data attribute on document */
html[data-nav-position="right"] .hero .columns .image-column-base {
  order: -1;
}

html[data-nav-position="left"] .hero .columns .image-column-base {
  order: 1;
}