/**
 * Responsive Column Order Styles
 * Bootstrap-style ordering classes with multiple breakpoints
 */

/* Ensure columns container uses flexbox */
.wp-block-columns {
  display: flex;
  flex-wrap: wrap;
}

/* Mobile-first: Base order classes (< 600px) */
@media screen and (max-width: 768px) {
  .wp-block-columns {
    flex-direction: column;
  }

  /* Mobile ordering classes (order-1 through order-12) */
  .wp-block-column.order-1 {
    order: 1;
  }
  .wp-block-column.order-2 {
    order: 2;
  }
  .wp-block-column.order-3 {
    order: 3;
  }
  .wp-block-column.order-4 {
    order: 4;
  }
  .wp-block-column.order-5 {
    order: 5;
  }
  .wp-block-column.order-6 {
    order: 6;
  }
  .wp-block-column.order-7 {
    order: 7;
  }
  .wp-block-column.order-8 {
    order: 8;
  }
  .wp-block-column.order-9 {
    order: 9;
  }
  .wp-block-column.order-10 {
    order: 10;
  }
  .wp-block-column.order-11 {
    order: 11;
  }
  .wp-block-column.order-12 {
    order: 12;
  }
}

/* Tablet: Medium breakpoint order classes (600px - 991px) */
@media screen and (min-width: 769px) and (max-width: 991px) {
  .wp-block-column.order-md-1 {
    order: 1;
  }
  .wp-block-column.order-md-2 {
    order: 2;
  }
  .wp-block-column.order-md-3 {
    order: 3;
  }
  .wp-block-column.order-md-4 {
    order: 4;
  }
  .wp-block-column.order-md-5 {
    order: 5;
  }
  .wp-block-column.order-md-6 {
    order: 6;
  }
  .wp-block-column.order-md-7 {
    order: 7;
  }
  .wp-block-column.order-md-8 {
    order: 8;
  }
  .wp-block-column.order-md-9 {
    order: 9;
  }
  .wp-block-column.order-md-10 {
    order: 10;
  }
  .wp-block-column.order-md-11 {
    order: 11;
  }
  .wp-block-column.order-md-12 {
    order: 12;
  }
}

/* Desktop: Large breakpoint order classes (≥ 992px) */
@media screen and (min-width: 992px) {
  .wp-block-column.order-lg-1 {
    order: 1;
  }
  .wp-block-column.order-lg-2 {
    order: 2;
  }
  .wp-block-column.order-lg-3 {
    order: 3;
  }
  .wp-block-column.order-lg-4 {
    order: 4;
  }
  .wp-block-column.order-lg-5 {
    order: 5;
  }
  .wp-block-column.order-lg-6 {
    order: 6;
  }
  .wp-block-column.order-lg-7 {
    order: 7;
  }
  .wp-block-column.order-lg-8 {
    order: 8;
  }
  .wp-block-column.order-lg-9 {
    order: 9;
  }
  .wp-block-column.order-lg-10 {
    order: 10;
  }
  .wp-block-column.order-lg-11 {
    order: 11;
  }
  .wp-block-column.order-lg-12 {
    order: 12;
  }
}

/* Default columns without order classes maintain natural order */
.wp-block-column:not([class*="order-"]) {
  order: 0;
}