/**
 * Custom block styles (front end + editor iframe).
 *
 * Loaded via add_editor_style() and wp_enqueue_scripts() from
 * inc/ui/block-styles.php, so previews match the live site.
 */

/* "Odwrócony" — visually reverse a Columns block on desktop only. Below 782px
   WordPress stacks the columns, so the first column stays on top on mobile. */
@media (min-width: 782px) {
  .wp-block-columns.is-style-reversed {
    flex-direction: row-reverse;
  }

  /* row-reverse only swaps the columns visually; the inline, physical
     left/right padding stays glued to each column. The Media + Text pattern
     pins the image column to left:80 / right:0, so after the swap the image
     would touch the outer edge. CSS cannot swap two physical values
     generically, so the image column is matched and its padding mirrored.

     Detection is serialization-proof on purpose: the front end renders the
     inline style without spaces (padding-right:0), while the editor iframe
     renders it via React with a space and possibly a unit (padding-right: 0px).
     So instead of matching the zero, we match the column that uses spacing-80
     but does NOT have spacing-80 on its right edge — i.e. the image column.
     The text column (80 on both sides) and the flush image column (no
     spacing-80 at all) are both left untouched. */
  .wp-block-columns.is-style-reversed > .wp-block-column[style*="--wp--preset--spacing--80"]:not([style*="padding-right:var(--wp--preset--spacing--80)"]):not([style*="padding-right: var(--wp--preset--spacing--80)"]) {
    padding-left: 0 !important;
    padding-right: var(--wp--preset--spacing--80) !important;
  }
}