/* ==========================================================================
   Magnetrix — equal-column grids
   --------------------------------------------------------------------------
   The columns were built with percentage widths (4 × 24%) inside a flex row
   that also carries a pixel gap. 96% + 72px is wider than the row, so the
   last column wrapped onto its own line.

   Rows whose columns all share one width now carry .mx-eq plus a count
   (.mx-eq-2 / -3 / -4). Flex-basis does the distribution with the gap
   subtracted, so nothing wraps until a breakpoint asks it to.
   ========================================================================== */

.mx-eq {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
}

.mx-eq > .e-con,
.mx-eq > .elementor-element {
  width: auto !important;
  min-width: 0;          /* let long words shrink rather than force overflow */
  max-width: 100%;
}

/* Gap is 24px on most rows, so each column gives up its share of it.
   2 cols: 1 gap / 2 = 12px. 3 cols: 2 gaps / 3 = 16px. 4 cols: 3 / 4 = 18px. */
.mx-eq-2 > .e-con { flex: 1 1 calc(50%     - 12px) !important; }
.mx-eq-3 > .e-con { flex: 1 1 calc(33.333% - 16px) !important; }
.mx-eq-4 > .e-con { flex: 1 1 calc(25%     - 18px) !important; }

/* Tablet: 3-up and 4-up both fall to two across, which keeps a 4-item set
   balanced rather than leaving an orphan on the second row. */
@media (max-width: 1024px) {
  .mx-eq-3 > .e-con,
  .mx-eq-4 > .e-con { flex: 1 1 calc(50% - 12px) !important; }
}

/* Mobile: single column. */
@media (max-width: 767px) {
  .mx-eq > .e-con { flex: 1 1 100% !important; }
}

/* Cards inside an equal row should fill the height so their bottoms line up. */
.mx-eq > .e-con { display: flex; }
.mx-eq > .e-con > .e-con { flex: 1 1 auto; }

/* The process rail reads across the row, so keep its hairline continuous. */
.mx-eq .mx-step { height: 100%; }